/* ==========================================================================
   لیکسی — glassmorphism design system
   Airy blue → lavender → blush gradients, frosted panels, fine white
   outlines, pill buttons, floating round controls. Readability first:
   text, prices, schedules and forms use stronger (more opaque) surfaces.
   ========================================================================== */

/* Vazirmatn (SIL OFL) loaded from jsDelivr; falls back to system Persian fonts. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
}

:root {
  --bg: #DCE6FA;
  --peri: #A8BAEF;
  --peri-deep: #6C7FE0;
  --peri-ink: #4A5BC4;
  --lav: #C9B8ED;
  --blush: #E8CDE6;
  --ink: #23304A;
  --slate: #5A6785;
  /* Transparency dial: the glass layers sit noticeably lighter than the page
     behind them, while text/form surfaces keep enough opacity to stay legible. */
  --line: rgba(255, 255, 255, 0.6);
  --glass: rgba(255, 255, 255, 0.42);
  --glass-strong: rgba(255, 255, 255, 0.7);
  --glass-soft: rgba(255, 255, 255, 0.24);
  --success: #3F9E7A;
  --success-bg: rgba(94, 199, 158, 0.18);
  --warn: #B77A2B;
  --warn-bg: rgba(240, 185, 96, 0.22);
  --danger: #C05A6B;
  --danger-bg: rgba(226, 122, 140, 0.18);
  --info-bg: rgba(124, 143, 232, 0.18);
  --shadow: 0 10px 30px rgba(84, 102, 168, 0.16);
  --shadow-soft: 0 4px 16px rgba(84, 102, 168, 0.12);
  --radius: 22px;
  --radius-sm: 14px;
  --font: 'Vazirmatn', 'Segoe UI', Tahoma, 'IRANSans', sans-serif;
}

* { box-sizing: border-box; }

/* No scrollbars anywhere in the app — scrollable areas stay scrollable. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 90% -10%, rgba(232, 205, 230, 0.9), transparent 60%),
    radial-gradient(1000px 600px at -10% 10%, rgba(168, 186, 239, 0.75), transparent 55%),
    linear-gradient(160deg, #E7EDFC 0%, var(--bg) 45%, #E9DFF6 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.75;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* soft floating blobs behind everything */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.blob-1 { width: 420px; height: 420px; background: #B9C8F4; top: -120px; right: -80px; }
.blob-2 { width: 380px; height: 380px; background: #D9C4F0; bottom: 8%; left: -140px; }
.blob-3 { width: 320px; height: 320px; background: #F3D3E7; top: 42%; right: 12%; opacity: 0.4; }

img { max-width: 100%; display: block; }
a { color: var(--peri-ink); text-decoration: none; }
/* Titles get their own voice: a soft indigo→violet gradient wash instead of the
   flat near-black that fought the rest of the palette. */
h1, h2, h3, h4 {
  line-height: 1.4; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.2px;
  background: linear-gradient(120deg, #4A5BC4 0%, #7A64C9 55%, #B56BA8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Elements that tint a heading's color inline (status/empty states) fall back to
   the plain ink so a background-clip gradient never hides them. */
.empty h3, .notice h3 { -webkit-text-fill-color: currentColor; color: var(--ink); background: none; }
p { margin: 0 0 0.8em; }
button { font-family: inherit; }

.skip-link {
  position: absolute; right: -9999px; top: 0; z-index: 100;
  background: var(--glass-strong); padding: 10px 18px; border-radius: 0 0 12px 0;
}
.skip-link:focus { right: 0; }

:focus-visible { outline: 3px solid rgba(108, 127, 224, 0.55); outline-offset: 2px; border-radius: 8px; }

/* ---------------- glass surfaces ---------------- */
.glass, .panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
}
.panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 38%);
}
.panel > * { position: relative; z-index: 1; }
.panel-soft { background: var(--glass-soft); box-shadow: var(--shadow-soft); }
.panel-strong { background: var(--glass-strong); }
.pad { padding: 18px; }
.pad-lg { padding: 24px; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; cursor: pointer; font-weight: 600; font-size: 13.5px;
  padding: 9px 18px; border-radius: 999px; min-height: 38px;
  background: linear-gradient(135deg, var(--peri-deep), #8E7FE0);
  color: #fff; box-shadow: 0 6px 16px rgba(108, 127, 224, 0.3);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(0.96); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn-soft {
  background: var(--glass-strong); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-soft);
}
.btn-ghost {
  background: transparent; color: var(--peri-ink);
  border: 1px solid rgba(108, 127, 224, 0.35); box-shadow: none;
}
.btn-danger { background: linear-gradient(135deg, #D9738A, #C05A6B); box-shadow: 0 8px 20px rgba(192, 90, 107, 0.28); }
.btn-success { background: linear-gradient(135deg, #4FB690, #3F9E7A); box-shadow: 0 8px 20px rgba(63, 158, 122, 0.28); }
.btn-sm { padding: 6px 13px; min-height: 31px; font-size: 12.5px; border-radius: 999px; }

/* floating circular controls */
.fab {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--line);
  background: var(--glass-strong); color: var(--peri-ink); cursor: pointer;
  box-shadow: var(--shadow-soft); transition: transform 0.16s ease, background 0.16s ease;
  flex: none;
}
.fab:hover { transform: translateY(-2px); background: #fff; }
.fab:active { transform: scale(0.9); }
.fab.active { background: linear-gradient(135deg, #F0A8C4, #E58FB6); color: #fff; border-color: transparent; }
.fab svg { width: 18px; height: 18px; }

.btn svg, .nav-link svg, .side-link svg { width: 16px; height: 16px; flex: none; }

/* ---------------- forms ---------------- */
.field { display: block; margin-bottom: 14px; }
.field > span.lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--slate); margin: 0 6px 6px; }
input[type='text'], input[type='tel'], input[type='password'], input[type='number'],
input[type='time'], input[type='date'], input[type='search'], input:not([type]), select, textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(84, 102, 168, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(108, 127, 224, 0.65);
  box-shadow: 0 0 0 4px rgba(108, 127, 224, 0.16);
  outline: none;
}
/* Selects speak the app's language: lavender-tinted pill, brand-coloured
   text, and a chevron sitting in its own soft chip instead of the system
   arrow. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: 44px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
  color: var(--peri-ink);
  border: 1px solid rgba(108, 127, 224, 0.32);
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.5' fill='%23EBEFFD'/><path d='M7.6 10.4l4.4 4.4 4.4-4.4' fill='none' stroke='%236C7FE0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 22px 22px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 10px rgba(84, 102, 168, 0.1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
select:hover {
  border-color: rgba(108, 127, 224, 0.6); background-color: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(84, 102, 168, 0.16);
  transform: translateY(-1px);
}
select:focus { padding-inline-end: 44px; }
select:disabled { opacity: 0.55; cursor: not-allowed; }
select option { background: #fff; color: var(--ink); font-weight: 500; }
textarea { resize: vertical; min-height: 92px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.hint { font-size: 12.5px; color: var(--slate); margin: 4px 6px 0; }
.form-error {
  background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(192, 90, 107, 0.3);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 14px;
}

/* chips / toggles */
[hidden] { display: none !important; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; min-height: 36px; cursor: pointer;
  font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.16s ease; box-shadow: var(--shadow-soft);
}
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: scale(0.95); }
.chip[aria-pressed='true'], .chip.active {
  background: linear-gradient(135deg, var(--peri-deep), #9083E2);
  color: #fff; border-color: transparent;
}
.chip.cat { min-width: 96px; justify-content: center; }
.chip-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { flex: none; }

/* ---------------- header ---------------- */
/* The top bar is brand-only now — no links, no menu. Navigation lives in the
   bottom bar, so this strip is just the wordmark. */
.site-header {
  position: sticky; top: 10px; z-index: 60; margin: 10px auto 6px; max-width: 1180px;
  padding: 0 14px;
}
.header-inner {
  /* [mark at the start/right corner] [page title, centred] [back control] */
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 6px 14px;
  position: relative;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-soft);
}
.header-inner > .brand { grid-column: 1; justify-self: start; }
.header-inner > .page-title {
  /* Exactly centred in the bar — absolute so the brand/back widths can't shift
     it. Lalezar (the brand voice) + the brand gradient make it a designed
     element, not plain label text. */
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 54%; text-align: center;
  font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
  font-size: 22px; font-weight: 400; line-height: 1.55; letter-spacing: 0.2px;
  background: linear-gradient(120deg, #6C7FE0 8%, #B25BC4 55%, #E08BB8 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 2px rgba(108, 127, 224, 0.16));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-inner > .top-back, .header-inner > span:empty { grid-column: 3; justify-self: end; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 32px; height: 32px; display: block; filter: drop-shadow(0 3px 8px rgba(108, 127, 224, 0.35)); }
/* Lalezar gives the wordmark its own voice — the rest of the app stays Vazirmatn. */
.brand-word {
  font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
  font-size: 23px; font-weight: 400; letter-spacing: 0.5px; line-height: 1;
  background: linear-gradient(115deg, #6C7FE0 0%, #9083E2 45%, #D98FB0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-word small {
  display: block; font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: 10px; color: var(--slate); font-weight: 500; line-height: 1.3; letter-spacing: 0;
}
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
/* Shared back control: parked in the end (left) corner so the mark keeps the
   start (right) corner and the page title stays centred. */
.top-back {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--peri-ink);
  box-shadow: var(--shadow-soft); cursor: pointer; padding: 0;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  animation: backIn 0.24s ease both;
}
.top-back:hover { background: #fff; box-shadow: 0 6px 16px rgba(84, 102, 168, 0.2); }
.top-back:active { transform: scale(0.9); }
.top-back svg { width: 18px; height: 18px; }
@keyframes backIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

/* Artist pages drop the top bar entirely (bottom nav covers everything). A
   lone floating back button keeps them from ever being stranded. */
body.bare-top .site-header { display: none; }
.float-back {
  position: fixed; top: 14px; inset-inline-start: 14px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--glass-strong);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: var(--peri-ink); box-shadow: var(--shadow); cursor: pointer; padding: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  animation: backIn 0.24s ease both;
}
.float-back:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(84, 102, 168, 0.28); }
.float-back:active { transform: scale(0.9); }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink);
  box-shadow: var(--shadow-soft); transition: transform 0.16s ease, background 0.16s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: #fff; }
.icon-btn:active { transform: scale(0.9); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn[aria-current='page'] { color: var(--peri-ink); box-shadow: 0 0 0 3px rgba(108, 127, 224, 0.16), var(--shadow-soft); }
.icon-btn .badge-count { position: absolute; top: -4px; inset-inline-start: -4px; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--glass-strong); border-radius: 999px;
  padding: 7px 13px; min-height: 38px; cursor: pointer; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-soft); font-family: inherit; font-size: 13px;
  transition: transform 0.16s ease, background 0.16s ease;
}
.menu-toggle:hover { background: #fff; }
.menu-toggle:active { transform: scale(0.95); }
.menu-toggle svg { width: 18px; height: 18px; }

.main-nav { display: none; }
.main-nav.open {
  display: flex; position: absolute; top: calc(100% + 10px); inset-inline: 0;
  flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  z-index: 60; max-height: min(72vh, 520px); overflow-y: auto;
}
.nav-link {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 14px;
  color: var(--slate); font-weight: 600; font-size: 13.5px; min-height: 42px;
  border: none; background: none; width: 100%; text-align: start; font-family: inherit; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.nav-link:active { transform: scale(0.97); }
.nav-link[aria-current='page'] { background: var(--glass-strong); color: var(--peri-ink); box-shadow: var(--shadow-soft); }
.nav-link.danger { color: var(--danger); }
.nav-divider { height: 1px; background: rgba(90, 103, 133, 0.16); margin: 6px 4px; }
.header-user { display: flex; align-items: center; gap: 8px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  background: var(--glass-strong); border-radius: 999px; padding: 6px 14px 6px 6px;
  cursor: pointer; font-weight: 600; color: var(--ink); min-height: 44px;
}
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-soft); background: linear-gradient(135deg, var(--peri), var(--lav)); display: grid; place-items: center; color: #fff; font-weight: 700; overflow: hidden; flex: none; }
.avatar.lg { width: 76px; height: 76px; font-size: 26px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.badge-count {
  background: linear-gradient(135deg, #E58FB6, #C05A6B); color: #fff; font-size: 11px;
  min-width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center;
  padding: 0 6px; font-weight: 700;
}

/* ---------------- layout ---------------- */
.main { max-width: 1180px; margin: 0 auto 120px; padding: 10px 14px 40px; min-height: 60vh; }
.page { animation: fadeUp 0.32s ease; }
.page-narrow { max-width: 560px; margin: 0 auto; }
.page-wide { max-width: 1180px; margin: 0 auto; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 4px 14px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 20px; }
.section-head .sub { color: var(--slate); font-size: 13px; }

.hero { padding: 26px; margin-bottom: 20px; overflow: hidden; }
.hero h1 { font-size: clamp(22px, 4.4vw, 34px); margin-bottom: 6px; }
.hero p { color: var(--slate); max-width: 620px; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hero-stat {
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 16px; font-size: 13px; color: var(--slate); box-shadow: var(--shadow-soft);
}
.hero-stat b { display: block; font-size: 18px; color: var(--ink); }

/* feed grid */
.feed { columns: 4 220px; column-gap: 16px; }
.feed-item {
  break-inside: avoid; margin-bottom: 16px; overflow: hidden; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feed-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feed-item img { width: 100%; object-fit: cover; background: linear-gradient(135deg, var(--peri), var(--blush)); }
.feed-meta { padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.feed-meta .who { flex: 1; min-width: 0; }
.feed-meta .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-meta .who span { font-size: 12px; color: var(--slate); }

/* explore: compact filter bar + floating city leaderboard + square grid */
/* Compact filter bar: search + chips + two selects, one slim glass strip. */
.explore-bar { padding: 8px 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
/* One single line: همه · ناخن · مژه · شهر · سورتینگ — icons keep the chips
   narrow, and the row scrolls sideways instead of ever wrapping. */
.explore-bar .x-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
  /* the red cart-count badge overhangs the button by a few px — the scroll
     box needs vertical breathing room or it clips the badge in half */
  padding: 10px 4px; margin: -10px -4px;
}
.explore-bar .x-row::-webkit-scrollbar { display: none; }
.explore-bar .chip-scroll { padding: 0; gap: 6px; flex: 0 0 auto; overflow: visible; }
.explore-bar .chip { min-height: 32px; padding: 4px 11px; font-size: 12.5px; gap: 5px; }
.explore-bar .chip svg { width: 14px; height: 14px; flex: none; }
.explore-bar .chip.icon-only { padding: 4px 9px; }
.explore-bar .chip.icon-only svg { width: 16px; height: 16px; }
.explore-bar .chip.cat { min-width: 0; }
.explore-bar .x-controls { display: flex; gap: 6px; flex: 0 0 auto; }
/* The pill itself is chrome: the native select inside is fully reset (the UA
   arrow / squeezed chrome was what made these look broken) and gets a drawn
   chevron, so the closed control renders identically everywhere. */
.explore-bar .x-controls .x-pick {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 26px;
  border: 1px solid var(--line); background: var(--glass-strong); border-radius: 999px;
  color: var(--peri-ink); box-shadow: var(--shadow-soft); flex: none; min-width: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.explore-bar .x-controls .x-pick:focus-within {
  border-color: rgba(108, 127, 224, 0.65); box-shadow: 0 0 0 3px rgba(108, 127, 224, 0.14);
}
.explore-bar .x-controls .x-pick > svg { width: 14px; height: 14px; flex: none; }
.explore-bar .x-controls .x-pick::after {
  content: ''; position: absolute; left: 10px; top: 50%; margin-top: -6px;
  width: 7px; height: 7px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg); pointer-events: none;
}
.explore-bar .x-controls select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  flex: 0 1 auto; min-width: 0; width: auto; max-width: 118px;
  height: 32px; padding: 0 4px 0 0; margin: 0; min-height: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.explore-bar .x-controls select:focus { border: 0; box-shadow: none; outline: none; }
/* options pop up as an OS menu, but the browser honours these two */
.explore-bar .x-controls select option { background: #fff; color: var(--ink); font-weight: 500; }
.x-search {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); border-radius: 999px;
  color: var(--slate); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7);
}
.x-search:focus-within { border-color: rgba(108, 127, 224, 0.65); box-shadow: 0 0 0 4px rgba(108, 127, 224, 0.16); }
.x-search input {
  border: 0; background: transparent; box-shadow: none; padding: 8px 0; min-height: 38px;
  font-size: 14px; flex: 1; min-width: 0;
}
.x-search input:focus { box-shadow: none; border: 0; padding: 8px 0; }
.leader-card {
  position: sticky; top: 74px; z-index: 5; padding: 12px 14px; margin-bottom: 12px;
  backdrop-filter: blur(18px); box-shadow: var(--shadow);
}
.leader-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.leader-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.leader-row {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px;
  text-decoration: none; color: inherit;
}
.leader-row:hover { background: rgba(255, 255, 255, 0.55); }
.leader-row .leader-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.leader-row .leader-info b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-row .leader-info small { font-size: 11.5px; color: var(--slate); }
.leader-row .leader-score {
  display: flex; flex-direction: column; align-items: center; font-size: 15px; font-weight: 800;
  color: var(--ink); background: rgba(255, 255, 255, 0.5); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px 9px;
}
.leader-row .leader-score small { font-size: 9.5px; font-weight: 600; color: var(--slate); }
.leader-cat { font-size: 12px; font-weight: 700; color: var(--slate); }
.leader-hint { font-size: 11.5px; color: var(--slate); margin-top: 6px; }

/* explore grid — instagram-style wall of every published post */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.explore-tile {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  background: linear-gradient(135deg, var(--peri), var(--lav) 55%, var(--blush));
}
.explore-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.28s ease; }
.explore-tile:hover img { transform: scale(1.06); }
.tile-cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(24, 32, 56, 0.82), rgba(24, 32, 56, 0));
  color: #fff; display: flex; flex-direction: column; gap: 1px; pointer-events: none;
}
.tile-cap b { font-size: 11.5px; font-weight: 700; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.tile-cap small { font-size: 10px; opacity: 0.88; }
.tile-cat {
  position: absolute; top: 7px; inset-inline-start: 7px; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; color: var(--peri-ink);
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.7);
}
.tile-cat.lash { color: #A04C86; }

/* artist cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.artist-card { overflow: hidden; display: flex; flex-direction: column; }
.artist-card .cover { height: 120px; background: linear-gradient(135deg, var(--peri), var(--lav) 60%, var(--blush)); position: relative; }
.artist-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.artist-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.artist-card .avatar { margin-top: -38px; }
/* Favorites page: the full explore card was far too tall here — keep the
   2×2 grid small: no cover strip, tight padding, compact avatar/name/rating. */
.cards-fav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cards-fav .artist-card .cover { display: none; }
.cards-fav .artist-card .body { padding: 12px 11px 13px; gap: 6px; }
.cards-fav .artist-card .avatar { margin-top: 0; width: 36px; height: 36px; font-size: 15px; }
.cards-fav .artist-card .fab { width: 32px; height: 32px; }
.cards-fav .artist-card .fab svg { width: 16px; height: 16px; }
.cards-fav .artist-card b { font-size: 13.5px; line-height: 1.45; }
.cards-fav .artist-card .muted { font-size: 11.5px; }
.cards-fav .artist-card .tag { font-size: 11px; padding: 3px 9px; }
.cards-fav .artist-card .rating { font-size: 11.5px; }
.cards-fav .artist-card .rating .muted { font-size: 11.5px; }
.cards-fav .artist-card .btn { justify-content: center; font-size: 12.5px; padding: 7px 8px; width: 100%; }
.cards-fav .artist-card .notice { font-size: 11.5px; padding: 6px 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  background: var(--info-bg); color: var(--peri-ink); padding: 4px 12px; border-radius: 999px;
}
.tag.nail { background: rgba(124, 143, 232, 0.18); }
.tag.lash { background: rgba(226, 160, 210, 0.24); color: #A04C86; }
.muted { color: var(--slate); font-size: 13px; }
/* Permanent profile QR: a small clean tile beside the reserve button — no
   caption around it; only the artist viewing her own profile gets a download
   affordance (the anchor with `download`). */
.qr-mini {
  display: block; flex: none; box-sizing: border-box;
  width: 62px; height: 62px; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--shadow-soft); cursor: default;
  object-fit: contain; image-rendering: pixelated;
}
a.qr-mini { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
button.qr-mini { cursor: zoom-in; border: 1px solid var(--line); font: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.qr-mini:hover, button.qr-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(84, 102, 168, 0.22); }
a.qr-mini:active, button.qr-mini:active { transform: scale(0.95); }
.qr-mini img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 9px; image-rendering: pixelated; }
/* Enlarged QR popup: big enough for a phone camera to read. */
.qr-big {
  width: min(320px, 72vw); aspect-ratio: 1; margin: 4px auto 10px;
  padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-soft);
}
.qr-big img { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: pixelated; }
.price { font-weight: 700; color: var(--peri-ink); }

/* rating */
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--slate); font-weight: 600; }
.rating svg { width: 16px; height: 16px; color: #E0A94B; }
.stars { display: inline-flex; gap: 3px; }
.stars button { border: none; background: none; cursor: pointer; padding: 2px; color: #D9CBB4; }
.stars button.on { color: #E0A94B; }
.stars svg { width: 28px; height: 28px; }

/* status chips */
.status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 5px 13px; border-radius: 999px; border: 1px solid transparent;
}
.status.confirmed { background: var(--success-bg); color: var(--success); border-color: rgba(63, 158, 122, 0.25); }
.status.pending { background: var(--warn-bg); color: var(--warn); border-color: rgba(183, 122, 43, 0.25); }
.status.cancelled, .status.declined, .status.expired, .status.no_show { background: var(--danger-bg); color: var(--danger); border-color: rgba(192, 90, 107, 0.25); }
.status.completed { background: var(--info-bg); color: var(--peri-ink); border-color: rgba(108, 127, 224, 0.25); }

/* ---------------- booking ---------------- */
/* Slim one-row progress: the steps must not eat the page. */
.steps { display: flex; gap: 6px; margin: 2px 0 12px; flex-wrap: wrap; }
.step {
  flex: 1 1 0; min-width: 0; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--slate);
  padding: 5px 4px; border-radius: 999px; background: var(--glass-soft); border: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step.done { background: rgba(63, 158, 122, 0.16); color: var(--success); }
.step.current { background: linear-gradient(135deg, var(--peri-deep), #9083E2); color: #fff; border-color: transparent; }

/* Icon-only circular back button — everyone recognises the arrow; the text
   just burned vertical space on every page. (Page-level back now lives in the
   top bar; this one is kept for the onboarding wizard's step-back.) */
.back-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); color: var(--peri-ink);
  box-shadow: 0 2px 8px rgba(84, 102, 168, 0.12); margin-bottom: 12px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.back-btn svg { width: 18px; height: 18px; }
.back-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(84, 102, 168, 0.2); }
.back-btn:active { transform: scale(0.9); }

.summary-panel { padding: 18px; position: sticky; top: 92px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(90, 103, 133, 0.18); font-size: 14px; }
.summary-line:last-child { border-bottom: none; }
.summary-line .k { color: var(--slate); }
.summary-line .v { font-weight: 700; text-align: left; }

.calendar { padding: 16px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-head b { font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11.5px; color: var(--slate); font-weight: 700; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line); cursor: pointer;
  background: rgba(255, 255, 255, 0.66); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--ink); transition: all 0.15s ease; position: relative;
}
.cal-day small { font-size: 9.5px; color: var(--peri-ink); font-weight: 700; }
.cal-day.empty { background: transparent; border: none; cursor: default; box-shadow: none; }
/* Outside the 3-day window (or full/past): present but plainly un-bookable. */
.cal-day.off {
  opacity: 0.5; cursor: not-allowed; text-decoration: none;
  background: rgba(255, 255, 255, 0.44); border-color: rgba(90, 103, 133, 0.14); color: var(--slate);
}
.cal-day.off small { display: none; }
.cal-day.is-today { border-color: rgba(108, 127, 224, 0.7); box-shadow: inset 0 0 0 1px rgba(108, 127, 224, 0.35); }
/* chosen day = a step DARKER than the bright purple of an open day */
.cal-day.selected { background: linear-gradient(135deg, #6153D6, #4A3DAE); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(74, 61, 174, 0.42); }
.cal-day.selected small { color: rgba(255, 255, 255, 0.88); }
.cal-day.pulse { animation: pop 0.28s ease; }
@keyframes pop { from { transform: scale(0.86); } to { transform: scale(1); } }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.slot {
  padding: 8px 6px; text-align: center; border-radius: 12px; cursor: pointer; font-weight: 700;
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); color: var(--peri-ink);
  transition: all 0.15s ease; box-shadow: var(--shadow-soft); font-size: 13px;
}
.slot:hover { transform: translateY(-2px); }
.slot:active { transform: scale(0.95); }
.slot.selected { background: linear-gradient(135deg, var(--peri-deep), #9083E2); color: #fff; border-color: transparent; }
/* rolling eligible-date strip + neutral "not offered" windows */
.elig-strip { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.elig-strip .slot { font-size: 13px; line-height: 1.5; }
.slot.picked { border-color: rgba(108, 127, 224, 0.75); box-shadow: inset 0 0 0 1px rgba(108, 127, 224, 0.35); }
.slot.off, .slot:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; background: rgba(255, 255, 255, 0.55); transform: none; }

/* ---------------- dashboard ---------------- */
/* minmax(0,…) instead of bare 1fr: a bare fr column cannot shrink below its
   content's min-content width, so one wide row (e.g. the transaction filter
   chips) blew the whole page sideways on mobile. */
/* No side/tab card any more: the dashboard body is the whole page — the bottom
   bar owns the four tabs and the «حساب» sheet owns the rest. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.side-nav { position: sticky; top: 92px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 14px;
  color: var(--slate); font-weight: 600; font-size: 13.5px; transition: background 0.15s ease, transform 0.12s ease;
}
.side-link:active { transform: scale(0.96); }
.side-link:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
.side-link[aria-current='page'] { background: linear-gradient(135deg, rgba(108, 127, 224, 0.18), rgba(144, 131, 226, 0.18)); color: var(--peri-ink); }

/* Compact summary tiles: read at a glance, not full cards — exactly three
   columns per row so the dashboard never stretches into a wall of numbers. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stat { padding: 10px 12px; border-radius: 16px; }
.stat b { font-size: 19px; display: block; line-height: 1.25; }
.stat span { font-size: 11.5px; color: var(--slate); font-weight: 600; }
.stat.warn b { color: var(--warn); }
.stat.good b { color: var(--success); }

.list-card { padding: 6px 4px; }
.list-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px;
  transition: background 0.15s ease; flex-wrap: wrap;
}
.list-row + .list-row { border-top: 1px solid rgba(255, 255, 255, 0.6); }
.list-row:hover { background: rgba(255, 255, 255, 0.55); }
.list-row .grow { flex: 1; min-width: 150px; }
.list-row .t { font-weight: 700; font-size: 14.5px; }
.list-row .s { font-size: 12.5px; color: var(--slate); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th { text-align: right; color: var(--slate); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(90, 103, 133, 0.15); white-space: nowrap; }
table.tbl td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.55); vertical-align: middle; }

/* onboarding */
.onboard { max-width: 720px; margin: 0 auto; padding: 26px; }
.progress-track { height: 8px; background: rgba(255, 255, 255, 0.6); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--peri), #9083E2, #E5A6CE); border-radius: 999px; transition: width 0.4s ease; }
.check-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.check-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; background: rgba(255,255,255,0.55); padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); }
.check-list li.done { color: var(--success); }
.check-list li .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.9); border: 1px solid var(--line); flex: none; }
.check-list li.done .dot { background: var(--success-bg); }

.service-edit { padding: 16px; margin-bottom: 12px; }
.opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.opt-row input { flex: 1; min-width: 110px; }

/* notifications */
.notif { display: flex; gap: 12px; padding: 14px; border-radius: 16px; align-items: flex-start; }
.notif.unread { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); }
.notif .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--info-bg); color: var(--peri-ink); flex: none; }
.notif b { font-size: 14px; }
.notif p { font-size: 13px; color: var(--slate); margin: 2px 0 0; }

/* modal & toast */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(52, 62, 96, 0.35); backdrop-filter: blur(6px);
  display: grid; place-items: center; z-index: 90; padding: 16px; animation: fadeUp 0.2s ease;
}
.modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 24px;
  background: rgba(255, 255, 255, 0.84); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 30px 70px rgba(50, 60, 110, 0.35);
}
.modal h3 { margin-top: 0; }
/* Modal fields wear the app's glass style (they were rendering as bare
   platform inputs on the white modal sheet). */
.modal .field { margin-bottom: 13px; }
.modal .field > span.lbl { font-size: 12.5px; font-weight: 800; color: var(--peri-ink); margin: 0 8px 7px; }
.modal input, .modal select, .modal textarea {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(108, 127, 224, 0.24);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(84, 102, 168, 0.08);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
/* Inputs and selects share one exact height, so a form row of mixed controls
   (e.g. the shop editor) lines up instead of looking jagged. */
.modal input, .modal select { height: 46px; box-sizing: border-box; }
.modal textarea { height: auto; min-height: 74px; box-sizing: border-box; }
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none; border-color: rgba(108, 127, 224, 0.65);
  box-shadow: 0 0 0 4px rgba(108, 127, 224, 0.14);
}
.modal textarea { resize: vertical; min-height: 74px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; flex-wrap: wrap; }

.toast-region { position: fixed; bottom: 92px; right: 50%; transform: translateX(50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: rgba(35, 48, 74, 0.92); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 12px 30px rgba(35, 48, 74, 0.35); animation: fadeUp 0.25s ease;
  max-width: 90vw; text-align: center;
}
.toast.error { background: rgba(178, 66, 88, 0.95); }
.toast.success { background: rgba(48, 132, 103, 0.95); }

/* bottom nav — the app's one navigation bar, visible at every width */
.bottom-nav {
  display: flex; position: fixed; bottom: 12px; right: 12px; left: 12px;
  max-width: 640px; margin-inline: auto; z-index: 50;
  padding: 8px; border-radius: 24px; gap: 4px;
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(84, 102, 168, 0.25);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 16px; color: var(--slate); font-size: 10.5px; font-weight: 700;
  min-height: 48px; justify-content: center; position: relative;
}
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 16px; color: var(--slate); font-size: 10.5px; font-weight: 700;
  min-height: 48px; justify-content: center; cursor: pointer; font-family: inherit;
  border: 0; background: transparent;
}
.bottom-nav button svg { width: 21px; height: 21px; }
.bottom-nav button:hover, .bottom-nav a:hover { color: var(--peri-ink); }
/* press feedback + the tab-pop that plays on every tap */
.bottom-nav a, .bottom-nav button {
  transition: transform 0.16s ease, color 0.16s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a:active, .bottom-nav button:active { transform: scale(0.9); }
.bottom-nav .tab-pop { animation: tabFlash 0.45s ease; }
.bottom-nav .tab-pop svg { animation: tabPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tabPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) translateY(-3px); }
  100% { transform: scale(1); }
}
@keyframes tabFlash {
  0% { background: rgba(144, 131, 226, 0.3); }
  100% { background: rgba(255, 255, 255, 0); }
}

/* «حساب» sheet — the old hamburger menu, now a bottom sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(52, 62, 96, 0.35); backdrop-filter: blur(5px); padding: 12px;
  animation: fadeUp 0.18s ease;
}
.sheet {
  width: min(460px, 100%); padding: 14px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.84); box-shadow: 0 20px 50px rgba(50, 60, 110, 0.3);
  margin-bottom: 76px; max-height: 70vh; overflow-y: auto;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head b { font-size: 15px; }
.sheet-links { display: flex; flex-direction: column; gap: 2px; }
.sheet-links a, .sheet-links button {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
  border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: start;
}
.sheet-links a:hover, .sheet-links button:hover { background: rgba(108, 127, 224, 0.08); }
.sheet-links a[aria-current='page'] { background: rgba(108, 127, 224, 0.12); color: var(--peri-ink); }
.sheet-links .danger { color: var(--danger); }
.sheet-links svg { width: 19px; height: 19px; flex: none; }

/* credit page: readable on small screens */
.credit-hero { display: flex; flex-direction: column; gap: 12px; }
.credit-balance {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 16px 12px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(108, 127, 224, 0.12), rgba(201, 184, 237, 0.18));
  border: 1px solid var(--line);
}
.credit-balance b { font-size: 34px; line-height: 1.2; }
.credit-balance .lbl { font-size: 12px; color: var(--slate); font-weight: 600; }
.credit-balance.good b { color: var(--success); }
.credit-balance.warn b { color: var(--warn); }
.credit-balance.danger b { color: var(--danger); }
@media (min-width: 700px) {
  .credit-hero { flex-direction: row; align-items: stretch; }
  .credit-balance { flex: 0 0 240px; }
  .credit-hero .stats { flex: 1; margin-bottom: 0; }
}
.credit-hero .stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); margin-bottom: 0; }
.pkg-card { text-align: center; }
.pkg-card .price { font-size: 18px; }

/* service card + its remove action (onboarding) */
.svc-wrap { display: flex; flex-direction: column; gap: 6px; }

/* rating page (artist) */
.rate-hero { display: flex; align-items: center; gap: 16px; }
.rate-hero > b { font-size: 40px; line-height: 1; color: var(--peri-ink); }
.rate-line { margin: 6px 0; }
.rate-bar { display: block; height: 7px; border-radius: 999px; background: rgba(108, 127, 224, 0.14); overflow: hidden; }
.rate-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--peri-deep), #9083E2); }
.bottom-nav a[aria-current='page'] { color: var(--peri-ink); background: rgba(255, 255, 255, 0.7); }
.bottom-nav .badge-count { position: absolute; top: 3px; left: 50%; margin-left: 6px; }

/* empty & loading */
.empty { text-align: center; padding: 46px 20px; color: var(--slate); }
.empty .ico { width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 22px; display: grid; place-items: center; background: var(--glass-strong); border: 1px solid var(--line); color: var(--peri-ink); }
.empty .ico svg { width: 30px; height: 30px; }
.empty h3 { color: var(--ink); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(108, 127, 224, 0.2); border-top-color: var(--peri-deep); animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-page { display: grid; place-items: center; min-height: 46vh; color: var(--slate); gap: 12px; }

.boot { display: grid; place-items: center; min-height: 70vh; gap: 14px; color: var(--slate); }
.boot-mark {
  width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  font-size: 30px; font-weight: 800;
  background: linear-gradient(135deg, var(--peri), var(--lav) 55%, var(--blush));
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow);
  animation: breathe 1.8s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.noscript { text-align: center; padding: 60px 20px; }

.notice {
  padding: 13px 16px; border-radius: 16px; font-size: 13.5px; margin-bottom: 14px;
  background: var(--info-bg); border: 1px solid rgba(108, 127, 224, 0.22); color: var(--ink);
}
.notice.warn { background: var(--warn-bg); border-color: rgba(183, 122, 43, 0.25); }
.notice.danger { background: var(--danger-bg); border-color: rgba(192, 90, 107, 0.25); }
.notice.success { background: var(--success-bg); border-color: rgba(63, 158, 122, 0.25); }

.divider { height: 1px; background: rgba(90, 103, 133, 0.14); margin: 16px 0; }
.stack { display: grid; gap: 12px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.hidden { display: none !important; }
.ltr { direction: ltr; unicode-bidi: embed; }

/* portfolio grid on artist profile */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.portfolio-grid img { border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); aspect-ratio: 1; object-fit: cover; cursor: pointer; transition: transform 0.2s ease; width: 100%; }
.portfolio-grid img:hover { transform: scale(1.02); }

.artist-hero { overflow: hidden; margin-bottom: 18px; }
.artist-hero .cover { height: 170px; background: linear-gradient(120deg, var(--peri), var(--lav) 55%, var(--blush)); position: relative; }
.artist-hero .cover img { width: 100%; height: 100%; object-fit: cover; }
.artist-hero .id-row { display: flex; gap: 14px; align-items: flex-end; padding: 0 22px; margin-top: -42px; flex-wrap: wrap; }
.artist-hero .id-row .meta { flex: 1; min-width: 180px; padding-bottom: 6px; }
.artist-hero .body { padding: 16px 22px 22px; }
/* Instagram-style follower pill — it must catch the eye, not hide in gray */
.fav-count {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  margin-top: 5px; padding: 5px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #ED68A4, #E0518F);
  color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 6px 16px rgba(237, 104, 164, 0.38);
}
.fav-count b { color: #fff; font-weight: 800; font-size: 15px; }
.fav-count .fc-heart { display: inline-grid; place-items: center; }
.fav-count .fc-heart svg { width: 15px; height: 15px; fill: rgba(255, 255, 255, 0.9); }
.fav-count.bump { animation: favBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes favBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.2) rotate(-3deg); }
  100% { transform: scale(1); }
}

/* category mark tucked beside the artist's name */
.artist-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.name-cat {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--glass-strong); border: 1px solid var(--line); flex: none;
  color: var(--peri-ink); vertical-align: middle;
}
.name-cat.nail { color: #B06BC8; }
.name-cat.lash { color: #6C7FE0; }
.name-cat svg { width: 16px; height: 16px; }

/* profile with no summary sidebar */
.single-col { display: block; }

.service-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.service-card.selected { border-color: rgba(108, 127, 224, 0.7); box-shadow: 0 0 0 3px rgba(108, 127, 224, 0.18), var(--shadow); }

/* artist profile: services as square tiles — duration and price line up
   across the grid so they can be compared at a glance */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.service-tile {
  aspect-ratio: 1; padding: 14px; border-radius: 18px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.service-tile .st-name { font-size: 14.5px; line-height: 1.4; }
.service-tile .st-desc {
  margin: 0; font-size: 12px; color: var(--slate); line-height: 1.65; flex: 1; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.service-tile .st-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.service-tile .st-opts { display: block; font-size: 10.5px; color: var(--slate); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }

footer.site-footer { max-width: 1180px; margin: 0 auto; padding: 24px 18px 110px; color: var(--slate); font-size: 12.5px; text-align: center; }

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .side-nav {
    position: static; flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; padding: 8px; scrollbar-width: none;
  }
  .side-nav .side-link {
    flex: none; padding: 9px 15px; font-size: 13.5px; white-space: nowrap;
    border-radius: 999px; border: 1px solid transparent;
  }
  .side-nav .side-link svg { display: none; }
  .side-nav .side-link[aria-current='page'] { border-color: rgba(108, 127, 224, 0.35); }
  .side-nav .secondary { display: none; }
  .summary-panel { position: static; }
}
@media (max-width: 860px) {
  body { font-size: 14.5px; }
  /* fixed-attachment backgrounds freeze scrolling on mobile webviews — the
     settings page (and any long page) must stay scrollable */
  body { background-attachment: scroll; }
  .main { margin-bottom: 150px; padding-bottom: 30px; }
  .bottom-nav { display: flex; }
  .site-header { top: 8px; }
  .header-inner { padding: 8px 10px; gap: 10px; }
  .brand { font-size: 17px; }
  .brand-mark { width: 36px; height: 36px; }
  .feed { columns: 2 150px; }
  .hero { padding: 20px; }
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .explore-grid { gap: 6px; }
  .pad { padding: 15px; }
  .pad-lg { padding: 20px; }
  .onboard { padding: 18px 16px; }
}
/* mobile calendars: day cells must fit a 390px screen without clipping */
@media (max-width: 560px) {
  .calendar { padding: 12px 8px; }
  .calendar-head { margin-bottom: 10px; }
  .calendar-head b { font-size: 15px; }
  .cal-grid { gap: 5px; }
  .cal-dow { font-size: 10.5px; padding: 2px 0; }
  .cal-day {
    aspect-ratio: auto; min-height: 46px; padding: 5px 1px 4px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.2; gap: 1px;
  }
  .cal-day small { font-size: 8.5px; }
}
@media (max-width: 400px) {
  /* one line or nothing: the pills drop their leading icon and tighten so the
     whole filter row still fits a 390px screen */
  .explore-bar .x-controls .x-pick { padding: 0 8px 0 20px; gap: 4px; }
  .explore-bar .x-controls .x-pick > svg { display: none; }
  .explore-bar .x-controls select { max-width: 100px; }
  .feed { columns: 2 130px; column-gap: 10px; }
  .stat b { font-size: 20px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .explore-grid { gap: 5px; }
  .tile-cap b { font-size: 10.5px; }
  .cal-day { min-height: 43px; font-size: 13px; }
  .menu-toggle { padding: 8px 13px; }
}

/* =============== redesigned slider tutorial (one popup page) =============== */
.tutor-popup { display: grid; gap: 12px; }
.tutor-intro { margin: 0; font-size: 14px; line-height: 1.9; color: var(--peri-ink); font-weight: 600; text-align: right; direction: rtl; }
.tutor-row {
  display: grid; gap: 6px; padding: 12px 12px 11px;
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); border-radius: 18px;
}
.tutor-figure { position: relative; }
.tutor-row .tutor-art { max-width: 340px; width: 100%; margin: 0 auto; display: block; height: auto; }
.tutor-text { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--ink); text-align: right; direction: rtl; }
/* The confirm button stays pinned at the bottom of the scrolling modal. */
.modal-tutor .modal-actions {
  position: sticky; bottom: -24px; margin: 16px -24px -24px;
  padding: 12px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96) 26%);
  border-top: 1px solid var(--line); z-index: 2;
}
.modal-tutor .tutor-ok { flex: 1; justify-content: center; font-weight: 800; }

/* =================== urgent booking (نوبت فوری) =================== */
.tag-urgent { background: rgba(198, 40, 57, 0.13); color: #C62839; font-weight: 700; }

/* entry button on the service-selection step */
.urgent-cta {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  padding: 13px 14px; margin-bottom: 14px; cursor: pointer; font-family: inherit; color: inherit;
  background: linear-gradient(135deg, rgba(198, 40, 57, 0.1), rgba(255, 255, 255, 0.65));
  border: 1px solid rgba(198, 40, 57, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.urgent-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(198, 40, 57, 0.18); }
.urgent-cta:active { transform: scale(0.98); }
.urgent-cta .uc-ico {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  display: grid; place-items: center; background: #C62839; color: #fff;
  box-shadow: 0 6px 16px rgba(198, 40, 57, 0.35);
}
.urgent-cta .uc-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.urgent-cta .uc-txt b { font-size: 15px; color: #A81F2F; }
.urgent-cta .uc-txt small { font-size: 12px; color: var(--slate); }
.urgent-h { color: #C62839; display: inline-flex; align-items: center; gap: 7px; }
.urgent-note { border-color: rgba(198, 40, 57, 0.35); background: rgba(198, 40, 57, 0.07); }
.urgent-note.big { padding: 14px; line-height: 2.1; font-size: 13.5px; }
.step.urgent-step.current { border-color: rgba(198, 40, 57, 0.45); color: #C62839; }

/* day selection: only today & tomorrow */
.u-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.urgent-day {
  display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; cursor: pointer;
  text-align: right; font-family: inherit; color: inherit;
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-soft); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.urgent-day .ud-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.urgent-day .ud-head b { font-size: 15px; }
.urgent-day:hover { transform: translateY(-2px); }
.urgent-day:active { transform: scale(0.97); }
.urgent-day.ok { border-color: rgba(46, 158, 123, 0.45); background: linear-gradient(135deg, rgba(46, 158, 123, 0.1), rgba(255, 255, 255, 0.72)); }
.urgent-day .ud-ok { font-size: 11.5px; color: var(--success); font-weight: 700; }
.urgent-day.off { cursor: not-allowed; opacity: 0.75; }
.urgent-day .ud-off { font-size: 11.5px; color: var(--slate); }/* Urgent candidate hours (customer picker): a plain grid of big tappable time
   pills, grouped morning / afternoon / evening — each pick gets its priority
   badge (max three). The day's booked appointments show above as quiet chips. */
.u-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
}
.u-slot {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 6px; border-radius: 15px; border: 1px solid var(--line);
  background: var(--glass-strong); color: var(--ink);
  font-family: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.u-slot:hover { transform: translateY(-2px); border-color: rgba(198, 40, 57, 0.4); }
.u-slot:active { transform: scale(0.96); }
/* dashed edge = this slot sits half over a booked appointment (be there exactly on the hour) */
.u-slot.straddle { border-style: dashed; border-color: rgba(198, 40, 57, 0.45); }
.u-slot.on {
  background: linear-gradient(135deg, rgba(198, 40, 57, 0.15), rgba(198, 40, 57, 0.08));
  border-color: #C62839; color: #A81F2F; border-style: solid;
  box-shadow: 0 6px 16px rgba(198, 40, 57, 0.18);
}
.u-slot .u-rank {
  position: absolute; top: -8px; inset-inline-start: -7px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #C62839; color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 3px 8px rgba(198, 40, 57, 0.35);
}
.u-period > b {
  display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: var(--slate);
}
.u-period + .u-period { margin-top: 16px; }
.u-busy { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.u-busy::before { content: 'نوبت‌های پر'; font-size: 11.5px; font-weight: 700; color: var(--slate); }
.u-busy-chip {
  direction: ltr; font-size: 12px; font-weight: 700; color: var(--slate);
  background: rgba(108, 127, 224, 0.1); border: 1px dashed rgba(108, 127, 224, 0.45);
  border-radius: 999px; padding: 4px 11px;
}
.urgent-svc { cursor: pointer; border-color: rgba(198, 40, 57, 0.3); }

.utl-picked { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; direction: rtl; }
.up-chip {
  background: rgba(198, 40, 57, 0.12); color: #C62839;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 800;
}
.u-countdown { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------------- marketplace (فروشگاه لیکسی) ---------------- */
/* list view: one row per product with a domain thumbnail */
.mkt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mkt-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; transition: transform 0.13s ease, box-shadow 0.13s ease; }
.mkt-row:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(84, 102, 168, 0.16); }
.mkt-thumb { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.mkt-thumb.d-nail { background: linear-gradient(135deg, #7C8FE8, #6153D6); }
.mkt-thumb.d-lash { background: linear-gradient(135deg, #E58FC4, #A04C86); }
.mkt-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mkt-row-title { font-size: 13.5px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-row-meta { font-size: 11.5px; color: var(--peri-ink); }
.mkt-row-shop { font-size: 11px; color: var(--slate); display: inline-flex; align-items: center; gap: 4px; }
.mkt-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mkt-row-side .btn { padding: 5px 10px; }
.mkt-sheet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkt-sheet-head .price { margin-inline-start: auto; font-size: 16px; }
.mkt-off { opacity: 0.6; }
/* favorite shops strip («فروشگاه‌های من») + the heart on every product row */
.mkt-favs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 11px; }
.mkt-favs-lbl { font-size: 11.5px; font-weight: 800; color: var(--peri-ink); display: inline-flex; align-items: center; gap: 4px; }
.mkt-fav-wrap { display: inline-flex; align-items: center; }
.fav-chip small { font-size: 10px; opacity: 0.75; font-weight: 800; }
.fav-x {
  margin-inline-start: -9px; z-index: 1; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--slate); display: grid; place-items: center;
  border: 1px solid var(--line); cursor: pointer;
}
.fav-x:hover { color: #C62839; }
.mkt-row-acts { display: inline-flex; align-items: center; gap: 6px; }
.mkt-fav { color: var(--slate); }
.mkt-fav.on { color: #C62839; background: rgba(198, 40, 57, 0.12); }
/* Market shortcut buttons (فروشگاه‌های من · پرتکرارها · سفارش‌های من): always
   ONE line — three equal columns that always fit, never cropped, never
   scrolling. The 1fr grid makes each button shrink with the viewport; on
   narrow phones the icons step aside so the Persian labels stay whole. */
.section-head .mkt-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.section-head .mkt-links > * {
  min-width: 0;
  justify-content: center;
  padding-inline: 6px;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .section-head .mkt-links > * { font-size: 12px; gap: 4px; padding-inline: 3px; }
  .section-head .mkt-links > * svg { display: none; } /* labels first on tiny screens */
}

/* Store (supplier) profile page — market/shop/:id */
.mkt-shop-head .mkt-shop-name { font-size: 16.5px; font-weight: 900; display: block; }
.mkt-shop-head .mkt-shop-loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--slate); margin-top: 3px; }
.mkt-shop-link { color: inherit; font-weight: 800; text-decoration: none; }
.mkt-shop-link:hover { text-decoration: underline; }
.mkt-row-off { opacity: 0.55; filter: grayscale(0.3); }
.btn-soft.on { border-color: rgba(198, 40, 57, 0.45); color: #C62839; background: rgba(198, 40, 57, 0.08); }
/* search scope + cart in the market bar — the scope chip is pinned to the far
   left of the search pill and never eats the typing room (input keeps flex:1) */
.x-search .x-scope {
  width: auto; flex: none; max-width: 108px;
  border: none; background: transparent; box-shadow: none;
  border-inline-start: 1px solid var(--line);
  padding: 6px 2px 6px 10px; margin-inline-end: -6px;
  font-family: inherit; font-size: 11px; font-weight: 800; color: var(--slate); outline: none;
  text-overflow: ellipsis; cursor: pointer;
}
.m-cart-btn { position: relative; }
.cart-badge { position: absolute; top: -7px; inset-inline-start: -7px; min-width: 19px; height: 19px; border-radius: 50%; background: #C62839; color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 3px 8px rgba(198, 40, 57, 0.35); }
.flt-badge { background: #C62839; color: #fff; border-radius: 50%; min-width: 18px; height: 18px; font-size: 10.5px; display: inline-grid; place-items: center; margin-inline-start: 5px; }
/* filter modal: domain chips + category tree */
.flt-domains { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* The tree is NOT a nested 320px scroll box anymore: the whole modal scrolls,
   so opening branches near the top pushes content down instead of stacking and
   cropping items in a tiny inner viewport. Several branches can stay open. */
.flt-tree { display: flex; flex-direction: column; gap: 6px; }
.flt-cat { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--glass-strong); transition: border-color 0.15s ease, background 0.15s ease; }
/* Category with at least one active selection — visible at a glance, and it
   survives clicking around because selections are multi-select now. */
.flt-cat.picked { border-color: rgba(108, 127, 224, 0.55); background: linear-gradient(155deg, rgba(108, 127, 224, 0.1), rgba(255, 255, 255, 0.72)); }
.flt-cat.picked .flt-cat-head small { color: #6153D6; font-weight: 800; }
.flt-cat-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; background: none; border: none; font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink); cursor: pointer; }
.flt-cat-head small { color: var(--slate); font-size: 10.5px; font-weight: 700; }
.flt-cat-head svg { transition: transform 0.15s ease; }
.flt-cat.open .flt-cat-head svg { transform: rotate(-90deg); }
.flt-subs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 10px 11px; }
.flt-sub { border: 1px solid var(--line); background: var(--glass); border-radius: 999px; padding: 5px 13px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--slate); cursor: pointer; }
.flt-sub.on { background: linear-gradient(135deg, #6153D6, #8E7BE8); color: #fff; border-color: transparent; }
/* cart lines */
.cart-line { display: flex; align-items: center; gap: 10px; }
.cart-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-line-main b { font-size: 13px; }
.cart-line-main small { font-size: 11px; }
.cart-qty { display: inline-flex; align-items: center; gap: 7px; }
.cart-qty .chip { padding: 3px 10px; cursor: pointer; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.stat-row .stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; }
.stat-row .stat b { font-size: 15px; }
.stat-row .stat span { font-size: 11.5px; color: var(--slate); }
.u-countdown.expired { color: #C62839; }

/* artist dashboard: pending urgent request cards */
.urgent-sh h2 { color: #C62839; display: inline-flex; align-items: center; gap: 7px; }
.urgent-card {
  border-color: rgba(198, 40, 57, 0.45);
  background: linear-gradient(155deg, rgba(198, 40, 57, 0.1), rgba(255, 255, 255, 0.72));
  box-shadow: 0 12px 28px rgba(198, 40, 57, 0.14);
}
.urgent-card.expired { opacity: 0.72; filter: grayscale(0.35); }
.u-head { align-items: center; }
.u-title { color: #A81F2F; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.u-timer { font-size: 12.5px; color: #C62839; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.u-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 7px; font-size: 13.5px; direction: rtl; }
.u-note { font-size: 12.5px; line-height: 1.95; margin: 8px 0 0; direction: rtl; }
.u-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.u-time {
  padding: 9px 6px; border-radius: 14px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid rgba(198, 40, 57, 0.38); background: rgba(255, 255, 255, 0.85);
  color: #8E1F2E; font-weight: 800; font-size: 15px;
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.u-time small { font-weight: 600; font-size: 10.5px; color: var(--slate); }
.u-time:hover { transform: translateY(-1px); }
.u-time.on {
  background: linear-gradient(135deg, #C62839, #8E1F2E); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(198, 40, 57, 0.3);
}
.u-time.on small { color: rgba(255, 255, 255, 0.85); }
.u-actions { margin-top: 10px; }
.btn-urgent {
  background: linear-gradient(135deg, #C62839, #8E1F2E); color: #fff; border: 0;
}
.btn-urgent:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-urgent .tag { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ustatus { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.ustatus.pending { background: rgba(198, 40, 57, 0.13); color: #C62839; }
.ustatus.expired { background: rgba(90, 103, 133, 0.14); color: var(--slate); }
.ustatus.confirmed { background: rgba(46, 158, 123, 0.16); color: var(--success); }
.urgent-row { border-color: rgba(198, 40, 57, 0.35); }
.urgent-row.expired { opacity: 0.7; }
.urgent-row .s { font-size: 12.5px; color: var(--slate); margin-top: 5px; }

/* notifications: the immediate red, bold «درخواست نوبت فوری» */
.notif.urgent { background: rgba(198, 40, 57, 0.1); border: 1.5px solid rgba(198, 40, 57, 0.55); }
.notif.urgent b { color: #A81F2F; font-weight: 800; font-size: 14.5px; }
.notif.urgent .ico { background: rgba(198, 40, 57, 0.15); color: #C62839; }
.notif.urgent p { white-space: pre-line; color: var(--ink); font-weight: 600; }

/* onboarding: mandatory urgent choice row */
.urgent-choice { margin-top: 6px; }
.urgent-choice .hint { display: block; line-height: 2; }
.urgent-mode h2, .urgent-mode h3 { color: #C62839; }

/* accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- micro-interactions ----------------
   Every tap answers back: controls press inward, and content that is swapped
   in (a booking step, a list of cards, a newly selectable day) rises into
   place instead of appearing abruptly. */
.cal-day:active:not(:disabled):not(.empty) { transform: scale(0.9); }
.cal-day.selected { animation: pop 0.28s ease; }
.service-card:active, .explore-tile:active, .post-card:active { transform: scale(0.985); }
summary:active, .sheet-links a:active, .sheet-links button:active { transform: scale(0.97); }

@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* ---------------- booking: multi-day pick + range sliders ---------------- */
.two-col.solo { grid-template-columns: minmax(0, 1fr); }
/* bookable day (inside the 3-day window) = bright purple accent */
.cal-day.has-cap {
  background: linear-gradient(150deg, #9A8CF0, #8B7BEA); color: #fff;
  border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 6px 14px rgba(124, 105, 232, 0.3);
}
.cal-day.has-cap small { color: rgba(255, 255, 255, 0.92); }
/* chosen beats bookable: same spot, one step darker */
.cal-day.selected, .cal-day.selected.has-cap {
  background: linear-gradient(135deg, #6153D6, #4A3DAE);
  border-color: transparent; box-shadow: 0 8px 18px rgba(74, 61, 174, 0.42);
}
.cal-day.selected small, .cal-day.selected.has-cap small { color: rgba(255, 255, 255, 0.88); }
.cal-legend { line-height: 1.7; }

.range-card { margin-bottom: 14px; }
.range-card[data-bad='1'] { border-color: rgba(192, 90, 107, 0.5); box-shadow: 0 0 0 3px rgba(226, 122, 140, 0.14), var(--shadow-soft); }
.range-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.range-head b { font-size: 15px; margin: 0; }
.range-status { font-size: 11.5px; font-weight: 700; color: var(--success); background: var(--success-bg); border-radius: 999px; padding: 3px 10px; transition: color 0.16s ease, background 0.16s ease; }
.range-status.bad { color: var(--danger); background: var(--danger-bg); }
.range-list { display: grid; gap: 16px; }
.range-labels { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.range-value { font-size: 13.5px; color: var(--peri-ink); direction: rtl; }
.range-track { position: relative; height: 34px; }
.range-base {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(84, 102, 168, 0.14);
}
.range-fill {
  position: absolute; top: 50%; transform: translateY(-50%); height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--peri-deep), #E58FB6); pointer-events: none;
  transition: left 0.12s ease, width 0.12s ease;
}
.range-in {
  position: absolute; top: 50%; transform: translateY(-50%); left: 0;
  width: 100%; height: 22px; margin: 0; padding: 0; background: none;
  -webkit-appearance: none; appearance: none; pointer-events: none; cursor: pointer;
}
.range-in:focus { outline: none; }
.range-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(108, 127, 224, 0.3), 0 3px 10px rgba(84, 102, 168, 0.35); }
.range-in::-webkit-slider-runnable-track { height: 22px; background: none; border: none; }
.range-in::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 2px solid var(--peri-deep); box-shadow: 0 3px 10px rgba(84, 102, 168, 0.35);
  cursor: grab; transition: transform 0.12s ease;
}
.range-in::-webkit-slider-thumb:active { transform: scale(1.14); cursor: grabbing; }
.range-in::-moz-range-track { height: 22px; background: none; border: none; }
.range-in::-moz-range-thumb {
  pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--peri-deep); box-shadow: 0 3px 10px rgba(84, 102, 168, 0.35); cursor: grab;
}
.range-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--slate); direction: ltr; margin-top: 1px; }
.range-foot { margin-top: 12px; display: flex; justify-content: flex-start; }

#flow-main > * { animation: popIn 0.24s ease both; }
.stack > * { animation: popIn 0.26s ease both; }
.slot-grid > * { animation: popIn 0.2s ease both; }
.cal-grid > .cal-day:not(.empty) { animation: popIn 0.22s ease both; }
.notice, .form-error, .hint-live { animation: popIn 0.2s ease both; }
.pick-day, .range-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.pick-day:active, .range-card:active { transform: scale(0.985); }

/* ---------------- profile: corner report + rating clarity ---------------- */
.hero-report {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.78);
  color: var(--slate); box-shadow: 0 2px 8px rgba(84, 102, 168, 0.18);
  cursor: pointer; transition: transform 0.15s ease, color 0.15s ease;
}
.hero-report:hover { transform: translateY(-1px); color: var(--danger); }
.hero-report:active { transform: scale(0.9); }
.hero-report svg { width: 14px; height: 14px; }

/* ---------------- booking: service pick animation ----------------
   Picking a service flips the whole flow, so the whole card reacts — but with
   ONE clean bounce (lift once, settle once), never a repeated bobbing. There
   is deliberately no checkmark badge: the tinted card itself is the answer. */
@keyframes svcPick {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-7px) scale(1.03); }
  70% { transform: translateY(0) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}
.service-card.picking {
  animation: svcPick 0.72s cubic-bezier(0.28, 0.84, 0.42, 1) 1;
  background: linear-gradient(135deg, rgba(108, 127, 224, 0.16), rgba(144, 131, 226, 0.2));
  border-color: var(--peri-deep);
  box-shadow: 0 0 0 4px rgba(108, 127, 224, 0.28), 0 14px 30px rgba(108, 127, 224, 0.28);
}
.service-card.selected {
  background: linear-gradient(135deg, rgba(108, 127, 224, 0.16), rgba(144, 131, 226, 0.2));
  border-color: var(--peri-deep);
  box-shadow: 0 0 0 3px rgba(108, 127, 224, 0.2), var(--shadow);
}

/* ---------------- calendar: filled days + «خالی شد خبرم کن» ---------------- */
.cal-day.full {
  background: rgba(255, 255, 255, 0.66); opacity: 1;
  border: 1px dashed rgba(90, 103, 133, 0.5); color: var(--slate);
  cursor: pointer;
}
.cal-day.full small { color: var(--warn); font-weight: 700; }
.cal-day.full:hover { border-color: rgba(108, 127, 224, 0.65); transform: translateY(-1px); }
.cal-day.full:active { transform: scale(0.92); }
.cal-day.watching {
  background: var(--warn-bg); border: 1px solid rgba(183, 122, 43, 0.55);
  color: var(--warn);
}
.cal-day.watching small { color: var(--warn); }
.cal-bell {
  position: absolute; top: 3px; left: 4px; display: inline-grid; place-items: center;
  color: var(--warn); animation: bellRing 2.2s ease infinite;
}
.cal-bell svg { width: 11px; height: 11px; }
@keyframes bellRing {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(12deg); }
  80% { transform: rotate(-12deg); }
  85% { transform: rotate(8deg); }
  90% { transform: rotate(-8deg); }
}

/* ---------------- step-4 tutorial (range sliders) ----------------
   A small round «؟» sits inline with the heading (no dedicated row), and the
   help itself is ONE collage — every idea visible at once, not a carousel. */
.tutor-head { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.tutor-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  border: 1px solid rgba(108, 127, 224, 0.4); background: rgba(255, 255, 255, 0.8);
  color: var(--peri-ink); font-weight: 800; font-size: 13px; font-family: inherit; line-height: 1;
  border-radius: 50%; cursor: pointer; padding: 0;
  box-shadow: var(--shadow-soft); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tutor-btn:hover { transform: translateY(-1px) scale(1.08); background: #fff; box-shadow: 0 6px 14px rgba(84, 102, 168, 0.24); }
.tutor-btn:active { transform: scale(0.9); }
.tutor-slide { text-align: center; animation: fadeUp 0.22s ease; }
.tutor-art { width: 100%; max-width: 340px; height: auto; margin: 2px auto 6px; display: block; }
.tutor-collage { max-width: 380px; }
.tutor-lead { margin: 2px 0 10px; color: var(--slate); font-size: 13.5px; line-height: 1.9; text-align: right; }
.tutor-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: right; }
.tutor-notes li {
  position: relative; padding: 9px 13px 9px 13px; font-size: 13px; line-height: 1.75; color: var(--slate);
  background: var(--glass-soft); border: 1px solid var(--line); border-radius: 12px;
}
.tutor-notes li b { color: var(--ink); }

/* ---------------- PWA install banner + guidance ----------------
   Once installed (display: standalone) the browser chrome — address bar and
   everything around it — is gone; this bar is what teaches that. */
.pwa-bar {
  position: fixed; inset-inline: 12px; bottom: 74px; z-index: 80;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(50, 60, 110, 0.28); backdrop-filter: blur(8px);
  animation: fadeUp 0.25s ease;
}
.pwa-bar .pwa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-bar b { font-size: 13px; }
.pwa-bar .pwa-txt span { font-size: 11.5px; color: var(--slate); line-height: 1.7; }
.pwa-bar .btn { flex: none; }
.pwa-dismiss {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(108, 127, 224, 0.1);
  color: var(--slate); cursor: pointer; display: grid; place-items: center; font-family: inherit; padding: 0;
}
.pwa-dismiss:hover { color: var(--ink); }
.pwa-steps { display: flex; flex-direction: column; gap: 12px; }
.pwa-step { display: flex; gap: 10px; align-items: flex-start; }
.pwa-step .step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #6153D6, #8E7BE8); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.pwa-step p { margin: 0; font-size: 13px; line-height: 1.9; }
.pwa-step small { color: var(--slate); font-size: 11.5px; line-height: 1.8; display: block; }
@media (max-width: 480px) { .pwa-bar { inset-inline: 8px; bottom: 70px; } }