/* muimui shop · shared design tokens */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* core palette */
  --cream-bg: #FBF6F0;
  --cream-deeper: #F6EFE5;
  --paper: #FCF8F3;
  --pink-wash: #F8E8E8;
  --lace-pink: #F4D6DD;
  --lavender-bg: #EDE5F2;
  --lavender-deep: #D9C9E4;
  --sage-wash: #E2EDDF;
  --butter-wash: #FBF1D7;

  /* brand accents */
  --bubblegum: #FF8FB1;
  --bubblegum-deep: #F47899;
  --dusty-rose: #E8A8B8;
  --deep-rose: #C8758B;
  --soft-coral: #F5BFC5;

  /* status */
  --preorder: #B8A8E8;
  --in-stock: #A8D8B8;
  --sold-out: #B5B5B5;
  --limited: #FFD580;

  /* text */
  --ink: #6B3A4B;
  --body: #8B5A6B;
  --muted: #A88795;
  --whisper: #C9B1B8;

  /* type — IBM Plex Sans Thai unifies Thai + English body text; Playfair Display for serif headings */
  --serif: 'Playfair Display', 'IBM Plex Sans Thai', Georgia, serif;
  --sans:  'IBM Plex Sans Thai', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --thai-display: 'IBM Plex Sans Thai', sans-serif;
  --thai-body:    'IBM Plex Sans Thai', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* very soft shadows only */
  --shadow-paper: 0 1px 0 rgba(200, 117, 139, 0.08), 0 6px 18px -10px rgba(107, 58, 75, 0.18);
  --shadow-polaroid: 0 2px 0 rgba(200, 117, 139, 0.10), 0 14px 28px -18px rgba(107, 58, 75, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 15px;
  line-height: 1.55;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(248, 232, 232, 0.55) 0, transparent 28%),
    radial-gradient(circle at 88% 92%, rgba(237, 229, 242, 0.5) 0, transparent 30%),
    radial-gradient(circle at 80% 12%, rgba(244, 214, 221, 0.35) 0, transparent 22%);
  background-attachment: fixed;
}

/* nothing italic, ever */
em, i, address, cite, dfn, var { font-style: normal; }

/* serif heading override for Thai-display contexts — IBM Plex Sans Thai 500 reads like a soft display */
.thai-display, .ribbon, .ribbon.rose {
  font-family: 'IBM Plex Sans Thai', 'Playfair Display', sans-serif;
  font-weight: 500;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.005em;
  margin: 0;
  text-transform: none;
}

p { margin: 0; }

/* eng = lowercase, thai = sentence case (left as written) */
.lower { text-transform: lowercase; }

a { color: var(--deep-rose); text-decoration: none; }
a:hover { color: var(--bubblegum-deep); }

button { font-family: inherit; font-weight: 400; cursor: pointer; }

input, textarea, select {
  font-family: inherit;
  font-weight: 400;
  color: var(--ink);
}

::placeholder { color: var(--whisper); }

/* ─── polaroid frame ─── */
.polaroid {
  background: var(--paper);
  padding: 14px 14px 22px;
  border: 1px solid rgba(200, 117, 139, 0.18);
  border-radius: 4px;
  box-shadow: var(--shadow-polaroid);
  position: relative;
}

/* ─── scalloped border card ─── */
.scallop-card {
  background: var(--paper);
  position: relative;
  padding: 28px 26px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
}
.scallop-card::before,
.scallop-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 12px;
  background-image: radial-gradient(circle at 8px 12px, var(--paper) 7px, transparent 7.5px);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.scallop-card::before { top: -10px; }
.scallop-card::after { bottom: -10px; transform: scaleY(-1); }

/* alt: cream paper card */
.paper-card {
  background: var(--paper);
  border-radius: var(--radius-md);
  border: 1px solid rgba(200, 117, 139, 0.16);
  padding: 22px 24px;
  box-shadow: var(--shadow-paper);
  position: relative;
}

/* ─── washi tape ─── */
.washi {
  position: absolute;
  width: 110px;
  height: 22px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 143, 177, 0.0) 0 6px,
      rgba(255, 143, 177, 0.25) 6px 7px
    ),
    var(--lace-pink);
  opacity: 0.85;
  border-left: 1px dashed rgba(255,255,255,0.4);
  border-right: 1px dashed rgba(255,255,255,0.4);
  box-shadow: 0 2px 6px rgba(200,117,139,0.12);
}
.washi.lavender {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(184, 168, 232, 0.0) 0 6px,
      rgba(184, 168, 232, 0.25) 6px 7px
    ),
    var(--lavender-deep);
}
.washi.butter {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 213, 128, 0.0) 0 6px,
      rgba(255, 213, 128, 0.30) 6px 7px
    ),
    #F8E4B7;
}
.washi.dot {
  background:
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.5px) 0 0 / 7px 7px,
    var(--soft-coral);
}

/* ─── ribbon banner ─── */
.ribbon {
  display: inline-block;
  background: var(--bubblegum);
  color: #fff;
  padding: 9px 28px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  position: relative;
  white-space: nowrap;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%, 0 100%,
    /* notches subtle */ 0 100%
  );
  box-shadow: 0 4px 0 rgba(200,117,139,0.18);
}
.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  background: var(--bubblegum);
}
.ribbon::before {
  left: -14px;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.ribbon::after {
  right: -14px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.ribbon.rose { background: var(--deep-rose); }
.ribbon.rose::before, .ribbon.rose::after { background: var(--deep-rose); }

/* ─── pill button ─── */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(200,117,139,0.28);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  transition: all 160ms ease;
  text-transform: none;
}
.pill-btn:hover {
  border-color: var(--deep-rose);
  background: var(--pink-wash);
}
.pill-btn.active {
  background: var(--bubblegum);
  color: #fff;
  border-color: var(--bubblegum);
  box-shadow: 0 2px 0 rgba(200,117,139,0.18);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bubblegum);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 16px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(200,117,139,0.25), 0 10px 22px -10px rgba(255,143,177,0.45);
  transition: transform 120ms ease;
}
.cta-btn:hover { transform: translateY(-1px); }
.cta-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(200,117,139,0.2); }
.cta-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.cta-btn.outline {
  background: transparent;
  color: var(--deep-rose);
  border: 1.5px solid var(--deep-rose);
  box-shadow: none;
}
.cta-btn.outline:hover { background: var(--pink-wash); }

/* ─── mini status pill ─── */
.mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--pink-wash);
  color: var(--deep-rose);
}
.mini-pill.standard { background: var(--pink-wash); color: var(--deep-rose); }
.mini-pill.extra { background: var(--bubblegum); color: #fff; }
.mini-pill.animation { background: var(--lavender-bg); color: #6B4F8E; }

/* ─── form fields ─── */
.cream-input {
  width: 100%;
  background: var(--cream-bg);
  border: 1px solid rgba(200,117,139,0.22);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 120ms;
}
.cream-input:focus { border-color: var(--deep-rose); background: #fff; }

.cream-textarea {
  width: 100%;
  background: var(--cream-bg);
  border: 1px dashed rgba(200,117,139,0.35);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
  min-height: 96px;
  outline: none;
  font-family: var(--thai-body);
  line-height: 1.6;
}
.cream-textarea:focus { border-color: var(--deep-rose); background: var(--paper); }

/* ─── wavy divider ─── */
.wave-divider {
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'><path d='M0 6 Q 10 0 20 6 T 40 6 T 60 6 T 80 6' stroke='%23E8A8B8' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-size: 80px 12px;
  background-position: center;
}

/* ─── dashed price box ─── */
.price-box {
  border: 2px dashed var(--dusty-rose);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: var(--pink-wash);
}

/* ─── heart checkbox ─── */
.heart-check {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-block;
}
.heart-check input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.heart-check svg { width: 22px; height: 22px; display: block; transition: transform 140ms ease; }
.heart-check input:checked + svg { transform: scale(1.06); }

/* ─── thai utility ─── */
.thai { font-family: var(--thai-body); }
.thai-display { font-family: var(--thai-display); }

/* ─── hand-drawn underline ─── */
.handwritten-underline {
  position: relative;
  display: inline-block;
}
.handwritten-underline::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: -6px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7'><path d='M2 4 Q 25 1 50 3.5 T 98 3' stroke='%23FF8FB1' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ─── safety pin svg sits in corners ─── */
.pin-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* small float anim */
@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-4px) rotate(var(--rot, 0deg)); }
}
.float-soft { animation: float-soft 4s ease-in-out infinite; }

@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.shake { animation: shake-x 380ms ease-in-out; }

/* ─── tooltip ─── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream-bg);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

/* ─── scrollbar ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream-bg); }
::-webkit-scrollbar-thumb { background: var(--lace-pink); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dusty-rose); }

/* ─── shop status banner (shared by calculator + admin preview) ─── */
.status-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 22px;
  border: 1.5px solid var(--status-border, var(--lavender-deep));
  background: var(--status-bg, var(--lavender-bg));
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.status-banner::before, .status-banner::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--cream-bg);
  border: 1.5px solid var(--status-border, var(--lavender-deep));
  border-radius: 50%;
}
.status-banner::before { left: -10px; }
.status-banner::after { right: -10px; }

.status-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55);
}
.status-dot.open    { background: #A8D8B8; }
.status-dot.busy    { background: #FFD580; }
.status-dot.closed  { background: #D49090; }
.status-dot.pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: status-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.status-dot.open.pulse::after  { color: #A8D8B8; }
.status-dot.busy.pulse::after  { color: #FFD580; animation-duration: 3.2s; }
@keyframes status-pulse {
  0%   { transform: scale(0.7); opacity: 1; }
  80%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.marquee-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
  font-family: var(--thai-body);
  font-size: 13.5px;
  color: var(--ink);
  min-width: 0;
}
.marquee-text-inner {
  display: inline-block;
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.marquee-text-inner > span { padding-right: 60px; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.rush-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
}
.rush-pill.on  { background: var(--bubblegum); color: #fff; }
.rush-pill.off { background: var(--cream-deeper); color: var(--muted); border: 1px solid rgba(168,135,149,0.22); }

@media (max-width: 640px) {
  .status-banner { padding: 10px 18px; flex-wrap: wrap; }
}

/* responsive helpers */
@media (max-width: 760px) {
  body { font-size: 14px; }
}