/* SaafBook "Clean Water" design: deep rinse-water dark, aqua light, soap bubbles. */
@font-face { font-family: "Baloo 2"; src: url(fonts/baloo2-devanagari.woff2) format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Baloo 2"; src: url(fonts/baloo2-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Mukta"; src: url(fonts/mukta-400-devanagari.woff2) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; src: url(fonts/mukta-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Mukta"; src: url(fonts/mukta-600-devanagari.woff2) format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; src: url(fonts/mukta-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }

:root {
  --bg: #060b1c; --bg-2: #0b1430; --ink: #eef4ff; --muted: #9db0cf; --line: rgba(160, 200, 255, .16);
  --card: rgba(14, 22, 52, .72); --card-strong: rgba(32, 44, 86, .82); --input: rgba(4, 9, 26, .6);
  --paper-opacity: .85;
  --aqua: #35e6d2; --blue: #5a78ff; --on-accent: #04121f; --warn: #ffb37a; --warn-soft: rgba(255, 140, 70, .14);
  --good-soft: rgba(53, 230, 210, .14); --glow-1: rgba(53, 230, 210, .3); --glow-2: rgba(90, 120, 255, .42);
  --bar: rgba(8, 14, 36, .82); --shadow: 0 14px 40px rgba(0, 0, 0, .35);
  --display: "Baloo 2", system-ui, sans-serif; --body: "Mukta", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eaf3fb; --bg-2: #dcebf8; --ink: #0d1c33; --muted: #4c6079; --line: rgba(20, 60, 110, .15);
  --card: rgba(255, 255, 255, .84); --card-strong: #fff; --input: #fff; --paper-opacity: .8;
  --aqua: #00a896; --blue: #3657e0; --on-accent: #fff; --warn: #b4470f; --warn-soft: #fdeadf;
  --good-soft: #d8f4f0; --glow-1: rgba(0, 200, 180, .22); --glow-2: rgba(70, 110, 255, .2);
  --bar: rgba(255, 255, 255, .88); --shadow: 0 10px 30px rgba(30, 70, 120, .12);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body); padding-bottom: calc(92px + env(safe-area-inset-bottom)); overflow-x: hidden; }
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 34% at 22% 12%, var(--glow-2), transparent 70%), radial-gradient(44% 36% at 84% 30%, var(--glow-1), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3%, 4%, 0) scale(1.08); } }

h1, h2, .display { font-family: var(--display); font-weight: 800; line-height: 1.15; }
h1 { font-size: 26px; margin: 0 0 14px; text-wrap: balance; }
h2 { font-size: 17px; margin: 24px 0 10px; }
b { font-weight: 600; }
a { color: inherit; }

.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--bar); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 19px;
}
.topbar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--body); color: var(--muted); }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.sync[data-status="syncing"]::before { animation: pulse 1s infinite; }
.sync[data-status="offline"]::before, .sync[data-status="signedOut"]::before { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
@keyframes pulse { 50% { opacity: .3; } }

main { max-width: 640px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-left)); animation: rise .35s ease both; }
@keyframes rise { from { opacity: .4; transform: translateY(10px); } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card.link { display: block; color: inherit; text-decoration: none; transition: transform .15s; }
.card.link:active { transform: scale(.98); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.row > * { min-width: 0; }
.row > button { flex: none; }
.muted { color: var(--muted); font-size: 14px; }
.warn { color: var(--warn); font-weight: 600; }

/* Paper-cut shapes behind every screen */
.paper-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--paper-opacity); }
.paper-sky[hidden] { display: none; }
.paper { position: absolute; bottom: 0; will-change: transform; animation: paper-rise linear infinite; }
.paper svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .14)) drop-shadow(0 7px 8px rgba(0, 0, 0, .22)); animation: paper-sway 6s ease-in-out infinite alternate; }
.paper-star svg { animation-name: paper-twinkle; animation-duration: 3s; }
.drum { transform-box: fill-box; transform-origin: center; animation: drum-spin 4s linear infinite; }
.blink { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes paper-rise { from { transform: translate3d(0, 130px, 0); } to { transform: translate3d(0, -115vh, 0); } }
@keyframes paper-sway { from { transform: translateX(-14px) rotate(-10deg); } to { transform: translateX(14px) rotate(10deg); } }
@keyframes paper-twinkle { from { transform: scale(.75) rotate(-10deg); } to { transform: scale(1.1) rotate(14deg); } }
@keyframes drum-spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* Home */
.hello { color: var(--muted); margin: 2px 0 12px; }
.hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 20px; margin-bottom: 12px; color: var(--on-accent);
  background: linear-gradient(125deg, var(--aqua), var(--blue)); box-shadow: 0 16px 44px var(--glow-2);
}
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: -90px 110px 0 -48px rgba(255, 255, 255, .12); }
.hero small { font-size: 15px; font-weight: 600; }
.hero strong { display: block; font: 800 44px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.hero span { font-size: 14px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { display: block; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 10px; font-size: 13px; color: var(--muted); }
.stat b { display: block; color: var(--ink); font: 800 21px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.stat.alert { background: var(--warn-soft); border-color: transparent; }
.stat.alert b { color: var(--warn); }

/* Forms and buttons */
label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 5px; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; font: inherit; color: var(--ink);
  background: var(--input); border: 1px solid var(--line); border-radius: 12px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px var(--good-soft); }
input::placeholder { color: var(--muted); }
input[type="checkbox"] { width: 24px; min-height: 24px; flex: none; accent-color: var(--aqua); }
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--card-strong); color: var(--ink); font: 600 16px var(--body); text-decoration: none; cursor: pointer;
  transition: transform .12s, box-shadow .2s;
}
button:active, .btn:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
button.primary, .btn.primary { border: 0; color: var(--on-accent); font-weight: 600; background: linear-gradient(120deg, var(--aqua), var(--blue)); box-shadow: 0 8px 24px var(--glow-2); }
button.block, .btn.block { width: 100%; margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.garments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.days { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0 10px; padding-bottom: 4px; }
.day { flex: none; flex-direction: column; gap: 2px; min-width: 104px; padding: 8px; font-size: 14px; line-height: 1.25; }
.day small { color: var(--muted); font-size: 12px; }
.day.on { border-color: var(--aqua); box-shadow: inset 0 0 0 1px var(--aqua); }
.tabs { margin-top: 10px; }
.tabs button { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.tabs + .tabs { margin-top: 6px; }
#rate-search, #rate-edit-search { margin-top: 10px; }
details.card summary { cursor: pointer; font-weight: 600; }
.next-step .actions { margin-top: 0; }
.next-step .btn, .next-step button { flex: 1 1 140px; min-height: 54px; font-size: 17px; justify-content: center; }
.rate-row { margin-top: 8px; }
.rate-row input:first-child { flex: 1; }
.rate-row input:nth-child(2) { flex: none; width: 88px; }
#rate-rows { margin-bottom: 10px; }
.garment { flex-direction: column; gap: 2px; min-height: 92px; padding: 8px 4px; font-size: 14px; line-height: 1.2; }
.garment svg { width: 30px; height: 30px; color: var(--aqua); }
.garment small { color: var(--muted); font-size: 13px; }
.custom-row { flex-wrap: wrap; margin-top: 10px; }
.custom-row input { flex: 1 1 120px; }
.qty { display: flex; align-items: center; gap: 6px; flex: none; }
.qty button { width: 44px; min-height: 44px; padding: 0; }
.pill { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: var(--good-soft); color: var(--aqua); white-space: nowrap; }
.pill.due { background: var(--warn-soft); color: var(--warn); }
.total-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font: 800 20px var(--display); }

/* Order journey */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px 0 14px; }
.step { position: relative; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.step i { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 5px; border-radius: 50%; font-style: normal; background: var(--bg-2); border: 2px solid var(--line); }
.step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.step:first-child::before { display: none; }
.step.done { color: var(--ink); }
.step.done i { border: 0; color: var(--on-accent); background: linear-gradient(120deg, var(--aqua), var(--blue)); }
.step.done::before { background: var(--aqua); }
.step.now i { box-shadow: 0 0 0 5px var(--good-soft), 0 0 18px var(--aqua); }

.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.photos img[data-action] { cursor: zoom-in; }
.photo-full { position: fixed; inset: 0; z-index: 20; min-height: 0; padding: 12px; border: 0; border-radius: 0; background: rgba(0, 0, 0, .92); }
.photo-full img { max-width: 100%; max-height: 100%; object-fit: contain; }
.recovery-code { font: 700 22px/1.3 ui-monospace, Menlo, monospace; text-align: center; letter-spacing: 1px; user-select: all; overflow-wrap: anywhere; padding: 14px; border-radius: 12px; background: var(--good-soft); }

.receipt { font-size: 15px; }
.receipt table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.receipt td { padding: 3px 0; }
.receipt td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.receipt .sum td { border-top: 1px dashed var(--line); font-weight: 600; }
.receipt hr { border: 0; border-top: 1px solid var(--line); }

.chat { display: flex; flex-direction: column; gap: 8px; max-height: 46dvh; overflow-y: auto; padding: 4px 0 8px; }
.bubble { align-self: flex-start; max-width: 86%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--card-strong); border: 1px solid var(--line); overflow-wrap: anywhere; }
.bubble.mine { align-self: flex-end; border: 0; border-radius: 16px 16px 4px 16px; color: var(--on-accent); background: linear-gradient(120deg, var(--aqua), var(--blue)); }
.typing { display: flex; gap: 5px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: pulse 1s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
.bubble.team { border-color: var(--aqua); box-shadow: 0 0 14px var(--good-soft); }
.team-reply { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 7; max-width: 608px; margin: 0 auto; padding: 12px; border-radius: 14px; text-align: center; font-weight: 600; text-decoration: none; color: var(--on-accent); background: linear-gradient(120deg, var(--aqua), var(--blue)); }
.team-reply[hidden] { display: none; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-form button { flex: none; }

.tag-sheet { display: none; }

/* Bottom bar */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: var(--bar); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line);
}
.nav a { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; }
.nav svg { width: 24px; height: 24px; }
.nav a.on { color: var(--aqua); }
.nav a.fab svg { box-sizing: content-box; width: 28px; height: 28px; padding: 11px; margin-top: -24px; border-radius: 50%; color: var(--on-accent); background: linear-gradient(120deg, var(--aqua), var(--blue)); box-shadow: 0 8px 22px var(--glow-2); }

.toast { position: fixed; left: 16px; right: 16px; bottom: calc(94px + env(safe-area-inset-bottom)); z-index: 8; max-width: 608px; margin: 0 auto; background: var(--ink); color: var(--bg); padding: 12px 14px; border-radius: 12px; text-align: center; font-weight: 600; }

/* Welcome and login */
body.immersive { padding-bottom: 0; }
body.immersive .topbar, body.immersive .nav { display: none; }
body.immersive main { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; padding-block: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-bottom)); }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font: 800 24px var(--display); }
.brand svg { width: 40px; height: 40px; border-radius: 12px; }
.big-title { font-size: clamp(33px, 10vw, 46px); margin: 0 0 8px; }
.big-title em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--aqua), #9fb2ff); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .big-title em { background: linear-gradient(100deg, var(--aqua), var(--blue)); -webkit-background-clip: text; background-clip: text; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 24px; }
.lang-list { display: grid; gap: 12px; }
.lang-card { justify-content: space-between; width: 100%; min-height: 76px; padding: 12px 18px; border-radius: 18px; text-align: left; background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lang-card b { font: 800 24px var(--display); }
.lang-card small { color: var(--muted); font-size: 14px; font-weight: 400; }
.lang-card:hover { border-color: var(--aqua); box-shadow: 0 0 26px var(--glow-1); }
.link-btn { background: none; border: 0; color: var(--muted); }
.bubbles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bubbles span { position: absolute; bottom: -90px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .03) 42%, rgba(120, 220, 255, .12)); animation: float 14s linear infinite; }
.bubbles span:nth-child(1) { left: 7%; width: 54px; height: 54px; }
.bubbles span:nth-child(2) { left: 28%; width: 22px; height: 22px; animation-duration: 10s; animation-delay: -4s; }
.bubbles span:nth-child(3) { left: 52%; width: 86px; height: 86px; animation-duration: 19s; animation-delay: -9s; }
.bubbles span:nth-child(4) { left: 74%; width: 32px; height: 32px; animation-duration: 12s; animation-delay: -2s; }
.bubbles span:nth-child(5) { left: 90%; width: 62px; height: 62px; animation-duration: 16s; animation-delay: -12s; }
@keyframes float { to { transform: translate3d(26px, -120vh, 0); } }

/* Order saved */
.saved { position: fixed; inset: 0; z-index: 15; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 800 24px var(--display); animation: fade 1.5s ease both; pointer-events: none; }
.saved i { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; font-style: normal; font-size: 48px; color: var(--on-accent); background: linear-gradient(120deg, var(--aqua), var(--blue)); box-shadow: 0 0 50px var(--aqua); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { from { transform: scale(.3); } }

@media (prefers-reduced-motion: reduce) {
  .paper-sky { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bubbles { display: none; }
}

@media print {
  :root, :root[data-theme="light"] { --ink: #000; --muted: #333; --line: #999; }
  body { background: #fff; padding: 0; }
  body::before, .paper-sky, .team-reply, .topbar, .nav, .no-print, .toast, .saved { display: none !important; }
  main { padding: 0; max-width: 76mm; animation: none; }
  .card { background: none; border: 0; padding: 0; backdrop-filter: none; }
  .journey { display: none; }
  body.printing-tags .receipt { display: none; }
  body.printing-tags .no-print { display: block !important; }
  body.printing-tags .no-print > :not(.tag-sheet) { display: none; }
  body.printing-tags .tag-sheet { display: block; }
  .tag { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 2mm 0; border-bottom: 1px dashed #000; break-inside: avoid; font-size: 12pt; color: #000; }
  .tag b { font-size: 15pt; }
  /* A4 laser printers: one receipt at normal size, tags as a cut-out sheet. */
  body.paper-a4 .receipt { max-width: 120mm; margin: 0 auto; font-size: 12pt; }
  body.paper-a4.printing-tags .tag-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  body.paper-a4 .tag { padding: 4mm; border: 1px dashed #000; }
}