/* =====================================================================
   Tickets — design system
   Tokens → base → layout shells (public / workspace) → components → pages
   ===================================================================== */
:root {
  --accent: #5b3df5;                         /* overridden per site / storefront */
  --accent-2: #ff4d8d;                       /* gradient partner */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ink: #ffffff;
  --bg: #f5f6fb; --surface: #ffffff; --surface-2: #f0f2f8; --text: #121528; --muted: #646a82; --line: #e4e7f0;
  --ok: #12855a; --bad: #d1343f; --warn: #9a6400;
  --ok-soft: #e3f6ed; --bad-soft: #fdeaec; --warn-soft: #fff4dc;
  --seat: #eceffe; --seat-ink: #2b2f6b; --held: #ffe1a8; --booked: #d5d8e2; --blocked: #3d4152;
  --radius: 16px; --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgb(16 18 40 / .06);
  --shadow: 0 1px 2px rgb(16 18 40 / .05), 0 8px 24px -8px rgb(16 18 40 / .12);
  --shadow-lg: 0 24px 48px -16px rgb(16 18 40 / .25);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --sidebar: 264px;
  font-family: var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e18; --surface: #151827; --surface-2: #1c2033; --text: #eceefa; --muted: #9aa0ba; --line: #262b42;
    --accent-ink: #ffffff; --ok-soft: #0f2e22; --bad-soft: #3a1418; --warn-soft: #33270b;
    --seat: #232848; --seat-ink: #d6dbff; --held: #6a521f; --booked: #33384f; --blocked: #05060b;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -8px rgb(0 0 0 / .6);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: .2rem 0 1rem; font-weight: 800; }
h2 { font-size: 1.2rem; margin: 1.4rem 0 .7rem; font-weight: 700; }
h3 { font-size: 1.02rem; margin: .6rem 0 .3rem; font-weight: 700; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .mono { font-family: ui-monospace, monospace; word-break: break-all; }
.center { text-align: center; } .right { text-align: right; } .error { color: var(--bad); }
.icon { flex-shrink: 0; vertical-align: middle; }
.hide-mobile { } .only-mobile { display: none !important; }
code { background: var(--surface-2); padding: .05rem .35rem; border-radius: 6px; font-size: .85em; }

/* ---------- Shell: public site ---------- */
.app { min-height: 100vh; }
.announcement { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; text-align: center; padding: .45rem 1rem; font-size: .88rem; font-weight: 500; }
.announcement a { color: #fff; text-decoration: underline; }
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.site-header-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text); text-decoration: none !important; letter-spacing: -.02em; }
.brand small { font-size: .72rem; font-weight: 500; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -6px var(--accent); }
.logo { height: 34px; width: auto; border-radius: 8px; }
.primary-nav { display: flex; gap: .25rem; flex: 1; }
.primary-nav a { color: var(--muted); padding: .5rem .8rem; border-radius: 999px; font-weight: 500; font-size: .95rem; text-decoration: none; transition: background .15s, color .15s; }
.primary-nav a:hover { background: var(--surface-2); color: var(--text); }
.primary-nav a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* Theme setting: menu next to the logo (default), in the middle, or on the right next to the buttons. */
.menu-center .primary-nav { justify-content: center; }
.menu-right .primary-nav { justify-content: flex-end; }
.header-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 40px; height: 40px; padding: 0 .55rem; border-radius: 12px;
  border: 0; background: transparent; color: var(--text); cursor: pointer; text-decoration: none !important; font: inherit; }
.icon-btn:hover { background: var(--surface-2); }
.lang-code { font-size: .75rem; font-weight: 700; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.avatar.initials { display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.avatar-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px;
  padding: 3px .6rem 3px 3px; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none !important; }
.avatar-chip:hover { box-shadow: var(--shadow-sm); }
.dropdown { position: relative; }
.dropdown-menu, .switcher-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 270px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: .4rem; z-index: 40; animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-user { padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; display: flex; flex-direction: column; }
.menu-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .6rem .7rem .3rem; font-weight: 600; }
.menu-sep { height: 1px; background: var(--line); margin: .35rem 0; }
.menu-item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: .93rem; text-align: left; cursor: pointer; text-decoration: none !important; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.current { background: var(--accent-soft); }
.menu-item span { display: flex; flex-direction: column; } .menu-item small { color: var(--muted); font-size: .76rem; }
.menu-item.danger { color: var(--bad); }
.scrim { position: fixed; inset: 0; background: rgb(8 10 24 / .45); z-index: 35; } .scrim.clear { background: transparent; z-index: 25; }
.content { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; min-height: 60vh; }
.footer { background: var(--surface); border-top: 1px solid var(--line); padding: 2.5rem 1.25rem 1.5rem; margin-top: 2rem; }
.footer-grid { max-width: 1240px; margin: 0 auto; display: grid; gap: 1.6rem; grid-template-columns: 1.4fr repeat(auto-fit, minmax(160px, 1fr)); }
.footer-title { font-family: var(--font-display); }
.footer a { color: var(--muted); } .footer a:hover { color: var(--accent); }
.footer-legal { max-width: 1240px; margin: 1.6rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.bottom-nav { display: none; }

/* ---------- Shell: staff workspace ---------- */
.ws { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); z-index: 40; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .6rem; }
.switcher { position: relative; padding: 0 .75rem .5rem; }
.switcher-btn { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.switcher-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.switcher-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.switcher-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.switcher-text strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher-text small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher-menu { left: .75rem; right: .75rem; min-width: 0; }
.side-nav { flex: 1; overflow-y: auto; padding: .3rem .75rem 1rem; }
.side-group { margin-top: .9rem; }
.side-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; padding: 0 .65rem .35rem; }
.side-link { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .65rem; border-radius: 10px; color: var(--muted); font: inherit; font-size: .92rem;
  font-weight: 500; border: 0; background: none; cursor: pointer; text-decoration: none !important; transition: background .12s, color .12s; }
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-link.active .icon { color: var(--accent); }
.sidebar-foot { border-top: 1px solid var(--line); padding: .6rem .75rem; }
.pad { padding: .5rem .65rem; }
.ws-main { min-width: 0; display: flex; flex-direction: column; }
.ws-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem; padding: .65rem 1.5rem; min-height: 60px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: .4rem; font-size: .92rem; min-width: 0; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.ws-content { padding: 1.5rem; max-width: 1320px; width: 100%; }

/* ---------- Components ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1rem; color: inherit;
  text-decoration: none !important; display: block; box-shadow: var(--shadow-sm); }
a.card { transition: transform .15s, box-shadow .15s, border-color .15s; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.narrow { max-width: 460px; margin: 2.5rem auto; padding: 1.8rem; box-shadow: var(--shadow); } .card.narrow.wide { max-width: 760px; }
.grid { display: grid; gap: 1.1rem; } .grid.cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid.tickets { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.two-col { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.form-grid { display: grid; gap: .7rem 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .span2 { grid-column: 1 / -1; }
.row { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin: .5rem 0; } .row.wrap { flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 500; margin-bottom: .6rem; color: var(--text); }
label.inline { flex-direction: row; align-items: center; gap: .45rem; display: inline-flex; margin-right: 1rem; font-weight: 400; }
input, select, textarea { font: inherit; font-size: .95rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); min-height: 44px; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
input[type=checkbox], input[type=radio] { min-height: auto; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: .7rem 0; padding: .8rem 1rem; }
legend { font-weight: 600; padding: 0 .3rem; }
.btn { font: inherit; font-weight: 600; font-size: .95rem; background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 12px; padding: .65rem 1.2rem;
  min-height: 44px; cursor: pointer; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  box-shadow: 0 6px 16px -8px var(--accent); transition: transform .12s, box-shadow .12s, filter .12s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.secondary { background: var(--surface); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: none; }
.btn.secondary:hover { background: var(--accent-soft); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.gradient { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.btn.danger { background: var(--bad); color: #fff; box-shadow: none; }
.btn.small { padding: .4rem .8rem; min-height: 36px; font-size: .88rem; border-radius: 10px; } .btn.big { font-size: 1.1rem; padding: .95rem 2rem; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; } .link.danger { color: var(--bad); }
.alert { padding: .8rem 1rem; border-radius: 12px; margin: .7rem 0; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.alert.error { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.alert.success { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .93rem; }
.table th { text-align: left; padding: .7rem .8rem; background: var(--surface-2); color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 1px solid var(--line); }
.table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.table.compact td, .table.compact th { padding: .45rem .6rem; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; } .total td { font-weight: 700; }
.status { display: inline-block; font-size: .74rem; font-weight: 600; padding: .18rem .6rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.status.confirmed, .status.approved, .status.active { background: var(--ok-soft); color: var(--ok); }
.status.cancelled, .status.rejected, .status.expired, .status.inactive { background: var(--bad-soft); color: var(--bad); }
.status.pendingpayment, .status.submitted, .status.pending { background: var(--warn-soft); color: var(--warn); }
.chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 99px; padding: .35rem .85rem; margin: .2rem; background: var(--surface);
  color: var(--text); font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none !important; transition: all .15s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.tab { background: none; border: 0; padding: .65rem 1rem; cursor: pointer; font: inherit; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; min-height: 44px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
ul.plain { list-style: none; padding: 0; margin: .4rem 0; } ul.plain li { margin: .35rem 0; }
.list { display: grid; gap: .6rem; } .row-card { display: flex; justify-content: space-between; gap: 1rem; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; } .dl dt { color: var(--muted); }
.social { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; font-size: .9rem; }
.big { font-size: 2rem; font-weight: 800; font-family: var(--font-display); }
.bar { height: .55rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; }
.stars { color: #f5a400; letter-spacing: 2px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; } .page-head p { margin: .25rem 0 0; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.empty .icon { color: var(--accent); margin-bottom: .5rem; }

/* KPI stats + quick actions (dashboards) */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 1.4rem; }
.stat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .2rem; color: var(--muted); font-size: .88rem; }
.stat .big { display: block; font-size: 1.7rem; color: var(--text); }
.stat .stat-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: .5rem; }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: var(--accent-soft); opacity: .6; }
.quick { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.tiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 1rem 0; }
.tile { font-weight: 600; display: flex !important; align-items: center; gap: .6rem; }

/* ---------- Home / discovery ---------- */
.hero-banner { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(1.8rem, 5vw, 3.6rem); color: #fff; margin-bottom: 2rem;
  background: radial-gradient(1200px 400px at 10% -10%, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent 60%),
              radial-gradient(900px 500px at 110% 120%, color-mix(in srgb, #00c2ff 55%, transparent), transparent 60%),
              linear-gradient(135deg, #17123a, color-mix(in srgb, var(--accent) 85%, #17123a)); box-shadow: var(--shadow-lg); }
.hero-banner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(120deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000); pointer-events: none; }
.hero-banner > * { position: relative; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: 99px;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2); }
.hero-banner h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 1rem 0 .6rem; max-width: 18ch; color: #fff; }
.hero-banner p.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); opacity: .85; max-width: 52ch; margin: 0 0 1.6rem; }
.hero-banner a { color: #fff; text-decoration: underline; }
.searchbar { display: flex; align-items: center; gap: .3rem; background: var(--surface); border-radius: 18px; padding: .4rem; box-shadow: var(--shadow-lg); max-width: 860px; flex-wrap: wrap; }
.searchbar .field { display: flex; align-items: center; gap: .5rem; padding: 0 .7rem; flex: 1 1 170px; color: var(--muted); min-width: 0; }
.searchbar .field + .field { border-left: 1px solid var(--line); }
.searchbar input, .searchbar select { border: 0; box-shadow: none !important; padding: .5rem 0; background: transparent; width: 100%; min-height: 46px; }
.searchbar .field.grow { flex: 2 1 240px; }
.searchbar .btn { min-height: 50px; padding: 0 1.6rem; border-radius: 14px; }
.hero-hints { margin-top: 1rem; font-size: .88rem; opacity: .85; }
.cat-row { display: flex; gap: .7rem; overflow-x: auto; padding: .2rem .1rem 1rem; margin-bottom: .8rem; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.cat { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 104px; padding: 1rem .6rem; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: .88rem; cursor: pointer; text-decoration: none !important; transition: all .15s; font-family: inherit; }
.cat .cat-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cat.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.section-head h2 { margin: 0; font-size: 1.4rem; }
.section-head a { font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 210px); gap: 1.1rem; overflow-x: auto; padding: .2rem .1rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.poster-card { display: flex; flex-direction: column; gap: .5rem; color: var(--text); text-decoration: none !important; }
.poster-card .art { position: relative; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.poster-card .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-card .art .initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 4rem; font-weight: 800; color: rgb(255 255 255 / .9); }
.poster-card .art .shade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgb(0 0 0 / .75)); }
.poster-card .art .when { position: absolute; left: .7rem; bottom: .6rem; right: .7rem; color: #fff; font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.poster-card .art .badge { position: absolute; top: .6rem; left: .6rem; background: rgb(255 255 255 / .92); color: #111; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; text-transform: capitalize; }
.poster-card:hover .art { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.poster-card h3 { margin: .2rem 0 0; font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-card .meta { color: var(--muted); font-size: .85rem; margin: 0; }
.poster-card .price { font-weight: 700; color: var(--text); font-size: .92rem; }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.4rem 1.1rem; }
.promo-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 2.2rem 0; }
.promo { position: relative; overflow: hidden; border-radius: 22px; padding: 1.8rem; color: #fff; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  text-decoration: none !important; box-shadow: var(--shadow); transition: transform .15s; }
.promo:hover { transform: translateY(-3px); }
.promo h3 { color: #fff; font-size: 1.4rem; margin: 0 0 .3rem; } .promo p { margin: 0; opacity: .88; }
.promo .promo-icon { position: absolute; right: -10px; bottom: -14px; opacity: .18; }
.promo.bus { background: linear-gradient(135deg, #0f766e, #22c55e); }
.promo.sell { background: linear-gradient(135deg, #1e1b4b, var(--accent)); }
.promo.ai { background: linear-gradient(135deg, #be185d, #f97316); }
.promo .btn { background: #fff; color: #111; box-shadow: none; align-self: flex-start; }

/* Legacy listing cards (search, store pages) */
.hero .filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }
.listing .poster { height: 150px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; color: #fff; overflow: hidden; }
.listing .poster img { width: 100%; height: 100%; object-fit: cover; } .listing h3 { margin: .7rem 0 .2rem; } .price { font-weight: 700; }

/* ---------- Booking flow ---------- */
.sessions { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.session { display: flex; flex-direction: column; gap: .2rem; } .session.soldout { opacity: .5; pointer-events: none; }
.seatmap-wrap { overflow-x: auto; padding: .5rem 0 1rem; }
.stage { text-align: center; background: linear-gradient(180deg, var(--accent-soft), transparent); border-top: 3px solid var(--accent); border-radius: 50% 50% 0 0 / 18px 18px 0 0;
  padding: .5rem; margin: 0 auto 1.4rem; max-width: 460px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.seatmap { display: grid; gap: 5px; justify-content: center; }
.seat { min-height: 30px; min-width: 28px; font-size: .62rem; font-weight: 600; border-radius: 7px 7px 4px 4px; border: 1px solid transparent; cursor: pointer; padding: 0; transition: transform .1s; }
.seat.available { background: var(--seat); color: var(--seat-ink); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.seat.available:hover { transform: scale(1.12); border-color: var(--accent); }
.seat.selected { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 10px -4px var(--accent); }
.seat.held { background: var(--held); color: #5b4300; cursor: not-allowed; } .seat.booked { background: var(--booked); color: transparent; cursor: not-allowed; }
.seat.blocked { background: var(--blocked); color: #999; } .seat.wheelchair { outline: 2px dashed var(--ok); }
.seat.female { box-shadow: inset 0 -4px 0 #e0457b; }
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; font-size: .8rem; margin-top: .9rem; color: var(--muted); }
.legend i.seat { display: inline-block; width: 16px; min-width: 16px; min-height: 16px; height: 16px; vertical-align: middle; margin-right: .3rem; }
.legend i.seat.female { background: var(--seat); }
.summary.sticky { position: sticky; bottom: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line);
  border-radius: 18px 18px 0 0; padding: .9rem 1.2rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.checkout { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.countdown { font-weight: 700; font-variant-numeric: tabular-nums; } .countdown.urgent { color: var(--bad); }
.ticket { border-top: 4px solid var(--accent); }
.ticket .qr { width: 100%; max-width: 220px; image-rendering: pixelated; background: #fff; padding: 10px; border-radius: 12px; } .ticket.cancelled { opacity: .55; }
.qty { display: flex; align-items: center; gap: .5rem; } .qty button { width: 2.2rem; }
.reserved { border-left: 4px solid #f5a400; }
.date-strip { display: flex; gap: .5rem; overflow-x: auto; margin: .5rem 0 1rem; }
.movie-head { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.movie-head .poster { width: 200px; border-radius: 16px; box-shadow: var(--shadow); }

/* ---------- Operations ---------- */
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.scan-box { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; } .scan-box .code { flex: 1; min-width: 240px; }
.scan-result { padding: 1.6rem; border-radius: 18px; font-size: 1.25rem; font-weight: 600; color: #fff; margin: 1rem 0; } .scan-result.ok { background: var(--ok); } .scan-result.bad { background: var(--bad); }
.timeline ol { padding-left: 1.2rem; }
.content-body p { line-height: 1.7; }
.organiser summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.selected-row td { background: var(--accent-soft) !important; }
.scroll-box { max-height: 360px; overflow: auto; }
.driver-status.live strong { color: var(--ok); }
.trip-map { height: 380px; border-radius: 16px; border: 1px solid var(--line); margin: 1rem 0; }
.bus-pin { font-size: 24px; line-height: 28px; text-align: center; }
.stops { list-style: none; padding: 0; } .stops li { padding: .5rem 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 1rem; }
.stops li.passed { color: var(--muted); text-decoration: line-through; } .stops li.mine { font-weight: 700; }
.trip-card { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
.trip-card .times { font-size: 1.15rem; font-weight: 700; }
.trip-card.has-image { grid-template-columns: 112px 1fr auto; }
.trip-thumb { width: 112px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); background: var(--line); }
.trip-date { text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
@media (max-width: 560px) { .trip-card.has-image { grid-template-columns: 76px 1fr; } .trip-card.has-image .trip-thumb { width: 76px; height: 64px; } .trip-card.has-image .right { grid-column: 2; text-align: left; } }
.print-ticket { display: flex; justify-content: space-between; gap: 1rem; page-break-inside: avoid; }
.invoice table { margin-top: 1rem; }
.store-hero .banner { width: 100%; max-height: 280px; object-fit: cover; border-radius: 20px; }
.store-hero .store-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; }
.embed { padding: .5rem; font-family: inherit; }
.embed-head { border-bottom: 3px solid var(--accent); padding: .3rem 0; margin-bottom: .5rem; }
.chat .msg { margin: .4rem 0; }
.chat .msg.user p { background: var(--accent-soft); padding: .55rem .8rem; border-radius: 12px; }
.image-upload { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.image-upload .label { font-weight: 600; font-size: .88rem; }
.image-upload .preview { max-width: 240px; max-height: 150px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.image-upload .preview.round { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ws { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .only-mobile { display: inline-flex !important; }
  .ws-top { padding: .6rem 1rem; }
  .ws-content { padding: 1rem; }
}
@media (max-width: 760px) {
  .hide-mobile { display: none !important; }
  .site-header-inner { gap: .6rem; padding: .6rem .9rem; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .6rem; box-shadow: var(--shadow-lg); }
  .primary-nav.open { display: flex; }
  .primary-nav a { border-radius: 10px; padding: .75rem 1rem; }
  .content { padding: 1rem .9rem 6rem; }
  .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .7rem; font-weight: 600; color: var(--muted); padding: .3rem 0; text-decoration: none; }
  .bottom-nav a.active { color: var(--accent); }
  .footer { padding-bottom: 6rem; }
  .table { font-size: .85rem; display: block; overflow-x: auto; }
  .searchbar .field + .field { border-left: 0; border-top: 1px solid var(--line); }
  .searchbar .field { flex-basis: 100%; }
  .searchbar .btn { width: 100%; }
  .hero-banner { border-radius: 20px; }
  .rail { grid-auto-columns: 46%; }
}
@media print {
  .site-header, .footer, .noprint, .announcement, .sidebar, .ws-top, .bottom-nav { display: none !important; }
  .ws { display: block; }
  body, .card { background: #fff; color: #000; border-color: #999; box-shadow: none; }
}
.poster-card.skeleton .art { background: linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; box-shadow: none; }
.poster-card.skeleton h3, .poster-card.skeleton .meta { background: var(--surface-2); border-radius: 6px; color: transparent; width: 80%; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* Page heroes (movies, search, buses) */
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 1.6rem 1.8rem; margin-bottom: 1.6rem; border: 1px solid var(--line);
  background: radial-gradient(600px 220px at 100% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
              radial-gradient(600px 260px at 0% 100%, var(--accent-soft), transparent 70%), var(--surface); box-shadow: var(--shadow-sm); }
.hero h1 { margin-top: 0; }
.hero .filters { align-items: flex-end; margin-bottom: 0; }
.hero .filters label { margin-bottom: 0; }
/* Delete with confirmation */
.delete-btn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.delete-btn .confirm { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .25rem .5rem; border-radius: 12px; background: var(--bad-soft); }
.btn.danger-text { color: var(--bad); }
.btn.danger-text:hover { background: var(--bad-soft); }
.delete-error { color: var(--bad); flex-basis: 100%; max-width: 46ch; }
/* KYC documents checklist + viewer */
.kyc { display: grid; gap: .6rem; }
.kyc-row { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; background: var(--surface); }
.kyc-row.missing { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.kyc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.kyc-head .status { margin-left: .4rem; }
.kyc-files { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; }
.kyc-files li { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .35rem .5rem; border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.kyc-files li.active { outline: 2px solid var(--accent); }
.kyc-files .name { flex: 1; min-width: 8rem; word-break: break-all; }
.kyc-viewer iframe { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 10px; margin-top: .6rem; background: #fff; }
.kyc-viewer img { display: block; max-width: 100%; max-height: 72vh; margin: .6rem auto 0; border-radius: 10px; border: 1px solid var(--line); }
.span-all { grid-column: 1 / -1; }
/* Profile: phone / email rows */
.contact-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.contact-edit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.contact-edit input { min-width: 14rem; }

/* =====================================================================
   Themes (classes and variables set on .app by MainLayout from the active theme)
   ===================================================================== */
.app { background: var(--bg); color: var(--text); font-family: var(--font); }
.app h1, .app h2, .app h3 { font-family: var(--font-display); }

/* Explicit light / dark palettes win over the visitor's OS setting. */
.app.mode-light { --ok-soft: #e3f6ed; --bad-soft: #fdeaec; --warn-soft: #fff4dc; --seat: color-mix(in srgb, var(--accent) 10%, #fff); --seat-ink: #2b2f6b;
  --held: #ffe1a8; --booked: #d5d8e2; --blocked: #3d4152; color-scheme: light; }
.app.mode-dark { --ok-soft: #0f2e22; --bad-soft: #3a1418; --warn-soft: #33270b; --seat: color-mix(in srgb, var(--accent) 22%, #15151c); --seat-ink: #f4efe6;
  --held: #6a521f; --booked: #33384f; --blocked: #05060b; color-scheme: dark; }
.app.mode-dark .poster-card .art .badge { background: rgb(0 0 0 / .6); color: #fff; }

/* Headline fonts that only come in one weight */
.heading-single :is(h1, h2, h3, .brand, .big, .stat .big) { font-weight: 400; letter-spacing: .01em; }

/* Corners */
.radius-sharp :is(.btn, .chip, input, select, textarea, .hero-banner, .hero, .promo, .cat, .cat-icon, .searchbar, .searchbar .btn, .table,
  .poster-card .art, .dropdown-menu, .icon-btn, .tab, .alert, .kyc-row, .switcher-btn, .side-link, .bottom-nav, .store-hero .banner) { border-radius: 3px; }
.radius-round :is(.btn, .chip, .icon-btn, .searchbar .btn) { border-radius: 999px; }
.radius-round :is(.hero-banner, .promo) { border-radius: 36px; }
.radius-round .searchbar { border-radius: 999px; padding: .45rem .45rem .45rem .8rem; }

/* Header styles (public site) */
.header-solid .site-header { background: var(--accent); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-solid .site-header :is(.brand, .icon-btn, .primary-nav a) { color: var(--accent-ink); }
.header-solid .site-header .primary-nav a:hover, .header-solid .site-header .icon-btn:hover { background: color-mix(in srgb, var(--accent-ink) 14%, transparent); color: var(--accent-ink); }
.header-solid .site-header .primary-nav a.active { background: color-mix(in srgb, var(--accent-ink) 20%, transparent); color: var(--accent-ink); }
.header-solid .site-header .brand-mark { background: var(--accent-ink); color: var(--accent); box-shadow: none; }
.header-solid .site-header .btn.ghost { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
.header-solid .site-header .btn:not(.ghost) { background: var(--accent-ink); color: var(--accent); }
.header-minimal .site-header { background: var(--bg); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-minimal .site-header .primary-nav a.active { background: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Spacing */
.density-compact .content { padding-top: 1rem; }
.density-compact :is(.card, .promo) { padding: .9rem; }
.density-compact :is(.poster-grid, .rail) { gap: .8rem; }
.density-compact .section-head { margin: 1.3rem 0 .7rem; }
.density-airy .content { padding-top: 2.2rem; }
.density-airy .card { padding: 1.6rem; }
.density-airy :is(.poster-grid, .rail) { gap: 1.8rem 1.5rem; }
.density-airy .section-head { margin: 2.8rem 0 1.3rem; }
.density-airy .hero-banner { padding: clamp(2.2rem, 6vw, 4.8rem); }

/* Card styles */
.card-wide .rail { grid-auto-columns: minmax(270px, 330px); }
.card-wide .poster-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card-wide .poster-card .art { aspect-ratio: 16 / 9; }
.card-wide .poster-card .art .initial { font-size: 3rem; }
.card-compact .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); overflow: visible; }
.card-compact .poster-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.card-compact .poster-card { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto 1fr; column-gap: .9rem; row-gap: .1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow-sm); }
.card-compact .poster-card .art { grid-row: 1 / span 3; aspect-ratio: 1; border-radius: calc(var(--radius) * .7); box-shadow: none; }
.card-compact .poster-card .art :is(.badge, .shade) { display: none; }
.card-compact .poster-card .art .when { inset: auto 0 0 0; padding: .25rem .35rem; background: var(--accent); color: var(--accent-ink); font-size: .68rem; justify-content: center; }
.card-compact .poster-card .art .when .icon { display: none; }
.card-compact .poster-card .art .initial { font-size: 2.2rem; }
.card-compact .poster-card:hover .art { transform: none; }
.card-compact .poster-card:hover { border-color: var(--accent); }
.card-compact .poster-card h3 { margin-top: .1rem; }

/* Home layouts */
.featured-show { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; min-height: 340px; border-radius: 28px; overflow: hidden; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); color: var(--text); text-decoration: none !important; }
.featured-show .art { position: relative; background: linear-gradient(135deg, var(--accent), var(--accent-2)); min-height: 260px; }
.featured-show .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-show .art .initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 6rem; color: rgb(255 255 255 / .85); }
.featured-show .info { padding: clamp(1.4rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.featured-show .eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.featured-show h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0; }
.featured-show .btn { align-self: flex-start; margin-top: .6rem; }
.home-grid-mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.home-grid-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
.home-grid-mosaic > :first-child h3 { font-size: 1.4rem; }
.price-sticker { position: absolute; top: .7rem; right: .7rem; background: var(--accent); color: var(--accent-ink); font-weight: 800; padding: .3rem .6rem;
  transform: rotate(4deg); box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5); font-size: .85rem; }
.hero-banner.with-image { background-size: cover; background-position: center; }
.hero-banner.with-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 8 30 / .85), rgb(10 8 30 / .35)); }
.hero-banner.with-image > * { z-index: 1; }
.hero-banner.minimal { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hero-banner.minimal::before { display: none; }
.hero-banner.minimal :is(h1, a) { color: var(--text); }
.hero-banner.minimal .hero-eyebrow { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
@media (max-width: 760px) {
  .featured-show { grid-template-columns: 1fr; }
  .home-grid-mosaic { grid-template-columns: repeat(2, 1fr); }
}

/* Theme studio */
.theme-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.theme-card { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.theme-card .swatch { height: 92px; position: relative; padding: .7rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; }
.theme-card .swatch .dots { display: flex; gap: .3rem; }
.theme-card .swatch .dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .7); }
.theme-card .swatch strong { font-size: 1.15rem; }
.theme-card .body { padding: .7rem .8rem .9rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.theme-card .actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.theme-editor { display: grid; gap: 1.2rem; grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; }
.theme-editor .controls { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.theme-editor .controls fieldset { margin: 0 0 .8rem; }
.color-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .9rem; }
.color-row input[type=color] { width: 46px; height: 34px; min-height: 34px; padding: 2px; }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.seg button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .85rem; cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-preview { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.theme-preview .app { min-height: 0; }
.theme-preview .pv-bar { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.theme-preview .pv-body { padding: 1rem; }
@media (max-width: 960px) { .theme-editor { grid-template-columns: 1fr; } .theme-editor .controls { position: static; max-height: none; } }

/* =====================================================================
   Printed tickets (TicketView): card | classic | foldable | boarding | thermal
   --tk = organiser colour, --tk-ink = readable text on it. Plain fonts so printing is reliable.
   ===================================================================== */
.tickets-print { display: grid; gap: 1.4rem; justify-items: center; }
.tk { --tk-line: #d8dbe3; background: #fff; color: #15171f; font-family: var(--font); position: relative; box-sizing: border-box;
  page-break-inside: avoid; break-inside: avoid; box-shadow: 0 10px 30px -14px rgb(0 0 0 / .35); }
.tk h2, .tk h3 { color: #15171f; margin: .2rem 0 .4rem; }
.tk-title { font-size: 1.35rem; line-height: 1.2; }
.tk-label { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7080; }
.tk-small { font-size: .78rem; color: #4a4f5c; }
.tk-big { font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; }
.tk-center { text-align: center; }
.tk-strong { font-weight: 700; }
.tk-brand { display: flex; align-items: center; gap: .55rem; min-height: 32px; }
.tk-brand .tk-logo { height: 34px; max-width: 140px; object-fit: contain; }
.tk-org { font-weight: 800; font-size: .95rem; }
.tk-band { background: var(--tk); color: var(--tk-ink); padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tk-band .tk-org { color: var(--tk-ink); }
.tk-band .tk-logo { background: #fff; border-radius: 6px; padding: 2px 4px; }
.tk-when { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .3rem 0 .6rem; font-size: .92rem; }
.tk-details { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .5rem 0; font-size: .86rem; }
.tk-details dt { color: #6b7080; } .tk-details dd { margin: 0; font-weight: 600; }
.tk-qr { width: 132px; height: 132px; image-rendering: pixelated; display: block; margin: .4rem auto; }
.tk-qr.placeholder { display: grid; place-items: center; background: repeating-conic-gradient(#15171f 0 25%, #fff 0 50%) 0 0 / 22px 22px; color: #fff;
  font-weight: 800; text-shadow: 0 0 4px #000; border: 6px solid #fff; outline: 1px solid var(--tk-line); }
.tk-support { font-size: .78rem; color: #4a4f5c; margin-top: .4rem; }
.tk-terms, .tk-back { font-size: .7rem; color: #4a4f5c; line-height: 1.45; border-top: 1px dashed var(--tk-line); padding: .6rem 1rem; }
.tk-terms p, .tk-back p { margin: .2rem 0; }
.tk-note { font-size: .78rem; text-align: center; padding: .45rem 1rem; background: color-mix(in srgb, var(--tk) 10%, #fff); color: #15171f; }
.tk-poster { width: 100%; height: 150px; object-fit: cover; display: block; }
.tk-poster.wide { height: 120px; border-radius: 8px; }

/* 1. Card — phone / wallet size, big QR */
.tk-card { width: 340px; border-radius: 18px; overflow: hidden; }
.tk-card .tk-body { padding: .9rem 1rem 1rem; }
.tk-card .tk-qr { width: 170px; height: 170px; }
.tk-card .tk-back { background: #fafbfc; }

/* 2. Classic stub — wide ticket with a tear-off stub */
.tk-classic { width: 720px; display: grid; grid-template-columns: 1fr 200px; border-radius: 10px; overflow: hidden; border-left: 10px solid var(--tk); }
.tk-classic .tk-main { padding: 1rem 1.2rem; }
.tk-classic .tk-stub { border-left: 2px dashed var(--tk-line); padding: 1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; position: relative; }
.tk-classic .tk-stub::before, .tk-classic .tk-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg, #eef0f5); }
.tk-classic .tk-stub::before { top: -10px; } .tk-classic .tk-stub::after { bottom: -10px; }
.tk-classic .tk-terms, .tk-classic .tk-note { grid-column: 1 / -1; }

/* 3. Foldable A4 — three panels: ticket, terms, information */
.tk-foldable { width: 210mm; max-width: 100%; min-height: 297mm; display: grid; grid-template-rows: 1fr 1fr 1fr; page-break-after: always; break-after: page; }
.tk-foldable .tk-panel { padding: 12mm 14mm; border-bottom: 1px dashed var(--tk-line); position: relative; overflow: hidden; }
.tk-foldable .tk-panel:first-child { border-top: 8px solid var(--tk); }
.tk-foldable .tk-panel:last-child { border-bottom: 0; }
.tk-foldable .tk-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tk-foldable .tk-fold { position: absolute; right: 8mm; bottom: 1mm; font-size: .65rem; color: #9aa0ad; margin: 0; }
.tk-foldable .tk-list { font-size: .88rem; padding-left: 1.1rem; }

/* 4. Boarding pass */
.tk-boarding { width: 720px; display: grid; grid-template-columns: 1fr 190px; grid-template-rows: auto 1fr auto; border-radius: 14px; overflow: hidden; }
.tk-boarding .tk-band { grid-column: 1 / -1; }
.tk-boarding .tk-kind { font-weight: 800; letter-spacing: .14em; font-size: .85rem; }
.tk-boarding .tk-body { padding: 1rem 1.2rem; }
.tk-boarding .tk-route { display: flex; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.tk-boarding .tk-route strong { font-size: 1.3rem; display: block; }
.tk-boarding .tk-arrow { font-size: 1.6rem; color: var(--tk); }
.tk-boarding .tk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem 1rem; margin-top: .8rem; }
.tk-boarding .tk-cell strong { font-size: .95rem; }
.tk-boarding .tk-cell.big strong { font-size: 1.5rem; }
.tk-boarding .tk-stub { border-left: 2px dashed var(--tk-line); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8rem; }
.tk-boarding .tk-terms, .tk-boarding .tk-note { grid-column: 1 / -1; }

/* 5. Thermal — 80 mm receipt printers, black & white */
.tk-thermal { width: 76mm; padding: 4mm 3mm; font-family: ui-monospace, "Courier New", monospace; font-size: 11px; box-shadow: 0 6px 18px -10px rgb(0 0 0 / .4); }
.tk-thermal .tk-logo { display: block; max-height: 40px; max-width: 60%; margin: 0 auto 2mm; filter: grayscale(1) contrast(1.4); }
.tk-thermal .tk-title { font-size: 14px; font-weight: 700; margin: 1mm 0; }
.tk-thermal .tk-rule { border-top: 1px dashed #000; margin: 2mm 0; }
.tk-thermal .tk-line { display: flex; justify-content: space-between; gap: 2mm; }
.tk-thermal .tk-line span:last-child { text-align: right; font-weight: 700; }
.tk-thermal .tk-qr { width: 120px; height: 120px; }
.tk-thermal .tk-terms { font-size: 9px; padding: 1mm 0; border-top: 1px dashed #000; color: #000; }
.tk-thermal .tk-cut { text-align: center; color: #555; margin-top: 2mm; }

@media (max-width: 760px) {
  .tk-classic, .tk-boarding { width: 100%; grid-template-columns: 1fr; }
  .tk-classic .tk-stub, .tk-boarding .tk-stub { border-left: 0; border-top: 2px dashed var(--tk-line); }
  .tk-boarding .tk-grid { grid-template-columns: repeat(2, 1fr); }
  .tk-card { width: 100%; max-width: 360px; }
}
@media print {
  .tickets-print { display: block; }
  .tk { box-shadow: none; margin: 0 auto 8mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tk-classic, .tk-boarding { border: 1px solid #ccc; }
}

/* Ticket designer */
.tk-templates { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 1rem; }
.tk-template { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: .7rem; background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.tk-template.on { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tk-template strong { display: block; } .tk-template small { color: var(--muted); }
.tk-fields { display: grid; gap: .2rem 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tk-preview { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--bg) 10px, var(--bg) 20px); border-radius: var(--radius); padding: 1.2rem; overflow: auto; }
.tk-sub { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35rem; background: color-mix(in srgb, var(--tk) 12%, #fff); color: #15171f; }
.tk-classic .tk-sub, .tk-boarding .tk-sub { grid-column: 1 / -1; }

/* Plugins page: checkbox / radio rows */
label.check { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; font-weight: 400; }
label.check input { width: auto; }
.check-list { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: .4rem .7rem; margin: .5rem 0; }

/* Premium items */
.status.premium { background: linear-gradient(135deg, #f7dc8b, #d9a93b); color: #3a2a05; }
.theme-card.locked .swatch, .theme-card.locked > :first-child { opacity: .55; filter: grayscale(.4); }
.tk-template.locked { opacity: .6; }
.tk-template.locked small::before { content: "🔒 "; }

/* ===================== Page width (theme setting) ===================== */
body { overflow-x: clip; }
.is-public.width-wide .content, .is-public.width-wide .site-header-inner, .is-public.width-wide .footer-grid, .is-public.width-wide .footer-legal { max-width: 1600px; }
.is-public.width-full .content, .is-public.width-full .site-header-inner, .is-public.width-full .footer-grid, .is-public.width-full .footer-legal {
  max-width: none; padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(1rem, 3vw, 3rem); }
.is-public.width-full .hero-banner { padding-left: clamp(1.5rem, 6vw, 6rem); padding-right: clamp(1.5rem, 6vw, 6rem); }
/* Edge-to-edge band inside any page width. */
/* Wide bands (carousel, app band) stay inside the page's side margins, so the gap is the same on the left and the right in every
   width (boxed, wide, full). They used to stretch to the window edges with 100vw maths, which got cut off on one side. */
.bleed { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; }

/* ===================== Hero carousel ===================== */
.carousel { position: relative; overflow: hidden; border-radius: 28px; margin: .25rem 0 2rem; background: #000; color: #fff; isolation: isolate; }
/* Full-width carousel: keeps a gap below the header (it used to slide under it). */
.carousel.bleed { border-radius: var(--radius, 16px); margin-top: .25rem; }
.carousel, .carousel-track, .slide { max-width: 100%; box-sizing: border-box; }
.carousel-track { display: flex; transition: transform .6s cubic-bezier(.22,.8,.2,1); will-change: transform; }
.slide { position: relative; flex: 0 0 100%; min-height: clamp(320px, 52vw, 560px); display: flex; align-items: flex-end; }
.slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .35) 45%, transparent 75%),
  linear-gradient(0deg, rgb(0 0 0 / .55) 0%, transparent 45%); }
.slide-text { position: relative; padding: clamp(1.5rem, 6vw, 5rem); padding-bottom: clamp(5.5rem, 9vw, 7.5rem); max-width: min(720px, 92%); }
.slide-text h2 { font-size: clamp(1.8rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 0 0 .6rem; color: #fff; text-wrap: balance; }
.slide-text p { font-size: clamp(1rem, 1.6vw, 1.2rem); opacity: .9; margin: 0 0 1.3rem; max-width: 52ch; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .35); color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.carousel-arrow:hover { background: rgb(0 0 0 / .6); transform: translateY(-50%) scale(1.06); }
.carousel-arrow.prev { left: clamp(.6rem, 2vw, 1.6rem); } .carousel-arrow.next { right: clamp(.6rem, 2vw, 1.6rem); }
.carousel-dots { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 1rem; display: flex; gap: .45rem; }
.carousel-dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: rgb(255 255 255 / .45); cursor: pointer; transition: width .3s, background .3s; }
.carousel-dots button.on { width: 28px; background: #fff; }
.carousel-overlay { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 2.6rem; width: min(980px, calc(100% - 2rem)); }
.carousel-overlay .searchbar { max-width: none; }
.carousel:has(.carousel-overlay) .slide-text { padding-bottom: clamp(9rem, 14vw, 11rem); }
.carousel:has(.carousel-overlay) .carousel-dots { bottom: .6rem; }

/* ===================== Split hero ===================== */
.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.2rem, 4vw, 3.5rem); align-items: center; margin: .5rem 0 2.2rem; }
.hero-split h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.05; margin: .9rem 0 .7rem; }
.hero-split .lead { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 52ch; margin-bottom: 1.4rem; }
.hero-split-art { border-radius: 28px; overflow: hidden; min-height: 320px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); position: relative; box-shadow: var(--shadow-lg); }
.hero-split-art > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-split-art .carousel { margin: 0; border-radius: 0; height: 100%; }
.hero-split-art .slide { min-height: 360px; }
.hero-split-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .55); }

/* ===================== Sliders with arrows ===================== */
.slider { position: relative; }
.slider .rail { scroll-behavior: smooth; }
.slider-arrow { position: absolute; top: 38%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; opacity: 0;
  transition: opacity .2s, transform .2s; }
.slider:hover .slider-arrow, .slider-arrow:focus-visible { opacity: 1; }
.slider-arrow:hover { transform: scale(1.08); }
.slider-arrow.prev { left: -14px; } .slider-arrow.next { right: -14px; }
@media (hover: none) { .slider-arrow { display: none; } }

.slider.offers .rail { grid-auto-columns: minmax(280px, 420px); }
.offer-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface-2); scroll-snap-align: start; }
.offer-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.offer-card:hover img { transform: scale(1.04); }
.offer-text { position: absolute; inset: auto 0 0 0; padding: .9rem 1rem; color: #fff; background: linear-gradient(0deg, rgb(0 0 0 / .7), transparent);
  display: flex; flex-direction: column; gap: .15rem; }
.offer-text small { opacity: .85; }

.slider.soon .rail { grid-auto-columns: minmax(260px, 320px); }
.soon-card { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; align-items: center; padding: .6rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; scroll-snap-align: start; }
.soon-art { position: relative; width: 96px; height: 120px; border-radius: calc(var(--radius) * .7); overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.soon-art img { width: 100%; height: 100%; object-fit: cover; }
.soon-badge { position: absolute; left: 4px; right: 4px; bottom: 4px; font-size: .66rem; font-weight: 700; text-align: center; padding: .2rem;
  border-radius: 6px; background: var(--accent); color: var(--accent-ink); }
.soon-info { display: flex; flex-direction: column; gap: .2rem; }
.soon-info small { color: var(--muted); } .soon-info .price { color: var(--accent); font-weight: 700; }

.slider.cities .rail { grid-auto-columns: max-content; }
.city-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem .45rem .45rem; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; white-space: nowrap; }
.city-chip.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.city-initial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* ===================== App / newsletter band ===================== */
.app-band { margin-top: 2.6rem; margin-bottom: 1rem; border-radius: var(--radius, 16px); background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; overflow: hidden; }
.app-band-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.4rem) clamp(1rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.app-band h2 { color: #fff; margin: 0 0 .4rem; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.app-band p { margin: 0; opacity: .9; max-width: 56ch; }
.app-band-actions { display: flex; gap: .7rem; flex-wrap: wrap; position: relative; z-index: 1; }
.app-band .btn.secondary { background: rgb(255 255 255 / .15); color: #fff; border-color: rgb(255 255 255 / .4); }
.app-band-icon { position: absolute; right: 2%; bottom: -30px; opacity: .14; pointer-events: none; }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-art { min-height: 240px; }
  .slide { min-height: 420px; }
  .carousel-arrow { display: none; }
  .carousel-overlay { bottom: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track, .offer-card img, .carousel-dots button { transition: none; }
}
.section-order { list-style: none; padding: 0; margin: .3rem 0; display: grid; gap: .3rem; }
.section-order li { display: flex; justify-content: space-between; align-items: center; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.section-order .icon-btn { width: 28px; height: 28px; font-size: .7rem; }
.slide-admin-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 1.6rem; }
.slide-admin { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.slide-admin.inactive { opacity: .6; }
.slide-admin img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.slide-admin .body { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.slide-admin .actions { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; }

/* ===================== Product-style detail pages ===================== */
.pdp { padding-bottom: 5rem; }
.pdp-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: start; margin-bottom: 1.2rem; }
.pdp-buy { position: sticky; top: 84px; display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; }
.pdp-buy h1 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15; }
.pdp-cat { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pdp-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0; color: var(--muted); }
.pdp-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.pdp-age { border: 1px solid var(--line); border-radius: 6px; padding: 0 .4rem; font-weight: 700; color: var(--text); }
.pdp-rating { display: inline-flex; gap: .4rem; align-items: center; padding: 0; text-align: left; }
.stars { color: #f5a623; letter-spacing: .05em; }
.pdp-price { font-size: 1.9rem; font-weight: 800; } .pdp-price small { font-size: .85rem; font-weight: 600; color: var(--muted); }
.pdp-next { margin: 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.pdp-left { margin: 0; font-weight: 600; color: var(--ok); } .pdp-left.low { color: var(--bad); }
.pdp-actions { display: flex; gap: .5rem; margin-top: .3rem; } .pdp-actions .btn:first-child { flex: 1; justify-content: center; }
.btn.icon-only { padding-left: .8rem; padding-right: .8rem; }
.pdp-chips { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pdp-chips li { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; padding: .25rem .6rem; border-radius: 99px; background: var(--surface-2); }
.pdp-by { margin: .2rem 0 0; }
.pdp-tabs { position: sticky; top: 64px; z-index: 5; display: flex; gap: .3rem; overflow-x: auto; padding: .5rem 0; margin: 1rem 0; background: var(--bg);
  border-bottom: 1px solid var(--line); scrollbar-width: none; }
.pdp-tabs button { border: 0; background: none; padding: .45rem .9rem; border-radius: 99px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pdp-tabs button:hover { background: var(--surface-2); color: var(--text); }
.pdp-section { padding: 1.4rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.pdp-section h2 { margin-top: 0; }
.pdp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pdp-list li { display: flex; gap: .55rem; align-items: flex-start; }
.pdp-list.check svg { color: var(--ok); flex: none; margin-top: 2px; } .pdp-list.info svg { color: var(--accent); flex: none; margin-top: 2px; }
.pdp-about.clamped { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.pdp-tiers { max-width: 520px; }
.pdp-venues { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: .8rem; }
.venue-card { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.pdp-org { display: flex; gap: 1rem; align-items: flex-start; } .pdp-org .logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; }
.plain.inline { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* Date strip + show times */
.date-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .8rem; scrollbar-width: thin; }
.date-chip { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer; line-height: 1.15; }
.date-chip strong { font-size: 1.3rem; } .date-chip small { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.date-chip.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .date-chip.on small { color: inherit; opacity: .85; }
.show-venue { margin: .6rem 0 1rem; } .show-venue > strong { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.show-times { display: flex; flex-wrap: wrap; gap: .6rem; }
.show-time { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: .55rem .8rem; border: 1.5px solid var(--ok); border-radius: var(--radius-sm);
  color: var(--ok); text-decoration: none; background: var(--surface); line-height: 1.2; }
.show-time small { color: var(--muted); font-size: .75rem; }
.show-time.fast { border-color: #e8a317; color: #b7790b; } .show-time .fast-tag { color: #b7790b; font-weight: 700; }
.show-time.soldout { border-color: var(--line); color: var(--muted); pointer-events: none; opacity: .6; }
.show-time:hover { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }

/* Reviews */
.review-summary { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.review-score { display: flex; flex-direction: column; align-items: center; } .review-score strong { font-size: 2.6rem; line-height: 1; }
.review-bars { flex: 1; min-width: 220px; max-width: 420px; display: grid; gap: .3rem; }
.review-bar { display: grid; grid-template-columns: 2.4rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .85rem; }
.review-bar .bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.review-bar .bar span { display: block; height: 100%; background: #f5a623; border-radius: 99px; }
.card.review { margin-bottom: .6rem; }

/* FAQ */
.faq { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem 1rem; margin-bottom: .5rem; background: var(--surface); }
.faq summary { font-weight: 600; cursor: pointer; } .faq[open] summary { margin-bottom: .4rem; }

/* Sticky mobile buy bar */
.pdp-sticky { display: none; }
@media (max-width: 860px) {
  .pdp-top { grid-template-columns: 1fr; }
  .pdp-buy { position: static; }
  .pdp-tabs { top: 56px; }
  .pdp-sticky { display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(0 0 0 / .08); align-items: center; justify-content: space-between; gap: 1rem; }
  .pdp-sticky strong { font-size: 1.2rem; }
}

/* Gallery */
.gallery { display: flex; flex-direction: column; gap: .6rem; }
.gallery-main { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 10; }
.gallery-main.empty-art { display: grid; place-items: center; color: rgb(255 255 255 / .5); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.gallery-open { border: 0; padding: 0; width: 100%; height: 100%; cursor: zoom-in; background: none; display: block; }
.gallery-open img { width: 100%; height: 100%; object-fit: contain; }
.gallery-count { position: absolute; right: .7rem; top: .7rem; background: rgb(0 0 0 / .55); color: #fff; font-size: .78rem; padding: .15rem .5rem; border-radius: 99px; }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .9rem; color: #fff; background: linear-gradient(0deg, rgb(0 0 0 / .65), transparent); font-size: .9rem; }
.gallery-thumbs { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: thin; }
.gallery-thumbs button { flex: none; width: 76px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; opacity: .7; }
.gallery-thumbs button.on { border-color: var(--accent); opacity: 1; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .92); display: grid; place-items: center; padding: 3rem 1rem; outline: none; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; color: #fff; cursor: pointer; }
.lightbox-caption { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #fff; }

/* Bus trip page */
.trip-times { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; margin: .3rem 0; }
.trip-times > div { display: flex; flex-direction: column; } .trip-times > div:last-child { text-align: right; align-items: flex-end; }
.trip-times strong { font-size: 1.35rem; } .trip-times small { color: var(--muted); } .trip-times span { font-size: .85rem; }
.trip-duration { align-items: center; color: var(--muted); }
.route-line { list-style: none; padding: 0; margin: 0; }
.route-line li { display: grid; grid-template-columns: 5.5rem 1.4rem 1fr; gap: .4rem; align-items: start; position: relative; padding-bottom: .9rem; }
.route-time { font-weight: 600; font-size: .9rem; text-align: right; }
.route-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); margin: .25rem auto 0; position: relative; z-index: 1; }
.route-line li::before { content: ""; position: absolute; left: calc(5.5rem + .4rem + .7rem - 1px); top: .9rem; bottom: -.2rem; width: 2px; background: var(--line); }
.route-line li:last-child::before { display: none; }
.route-line li.on .route-dot, .route-line li.board .route-dot, .route-line li.drop .route-dot { border-color: var(--accent); }
.route-line li.board .route-dot, .route-line li.drop .route-dot { background: var(--accent); }
.route-line li.off { opacity: .55; }
.route-stop { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.amenity-grid { list-style: none; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.amenity-grid li { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.amenity-grid svg { color: var(--accent); }

/* Partner editors */
.photo-editor { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: .4rem; }
.photo-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; gap: .35rem; padding-bottom: .4rem; }
.photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-item input { margin: 0 .4rem; width: auto; } .photo-item .row { padding: 0 .4rem; gap: .3rem; flex-wrap: wrap; }
.photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 160px; border: 2px dashed var(--line);
  border-radius: var(--radius-sm); color: var(--muted); }
.faq-edit { display: grid; gap: .35rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .5rem; }
.amenity-picks { display: grid; gap: .2rem 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: .6rem; }

/* ===================== Coming soon & wishlist ===================== */
.poster-card .badge.soon { left: auto; right: .5rem; display: inline-flex; align-items: center; gap: .25rem; background: #1f1f2e; color: #fff; }
.price.soon { color: #b7790b; font-weight: 700; }
.coming-soon-box { display: flex; flex-direction: column; gap: .35rem; padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #e8a317 10%, var(--surface)); border: 1px solid color-mix(in srgb, #e8a317 40%, var(--line)); }
.coming-soon-box p { margin: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.coming-soon-box .status { align-self: flex-start; }
.opens-countdown { font-weight: 700; color: #b7790b; }
.show-time.locked { border-color: var(--line); color: var(--muted); cursor: not-allowed; background: var(--surface-2); }
.show-time.locked small { display: inline-flex; align-items: center; gap: .2rem; }
.save-btn { display: inline-flex; align-items: center; gap: .4rem; }
.save-btn.saved { background: color-mix(in srgb, #e5484d 12%, var(--surface)); color: #e5484d; border: 1px solid color-mix(in srgb, #e5484d 40%, var(--line)); }
.save-btn.saved svg { fill: currentColor; }
.save-msg { margin: .3rem 0 0; }
.wish-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.wish-card { display: grid; grid-template-columns: 96px 1fr; gap: .9rem; align-items: start; }
.wish-card.past { opacity: .65; }
.wish-art { display: block; width: 96px; height: 128px; border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.wish-art img { width: 100%; height: 100%; object-fit: cover; } .wish-art .initial { display: grid; place-items: center; height: 100%; color: #fff; font-size: 2rem; font-weight: 800; }
.wish-body { display: flex; flex-direction: column; gap: .35rem; } .wish-body a { color: inherit; }
.wish-actions { gap: .6rem; align-items: center; flex-wrap: wrap; }
.known-customer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; }

/* ===================== Sign-in page (theme: Sign-in page) ===================== */
.auth-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); min-height: calc(100vh - 150px);
  margin: -.5rem 0 1rem; border-radius: calc(var(--radius, 16px) + 6px); overflow: hidden; background: var(--bg); }
/* (It used to stretch to the window edges with 100vw maths and the form side was cut off on wide screens.) */
.auth-shell.layout-split-right { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.15fr); }
.auth-shell.layout-split-right .auth-art { order: 2; }
.auth-shell.layout-card { grid-template-columns: 1fr; place-items: center; padding: 2rem 1rem;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%),
              radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 45%), var(--bg); }
.auth-shell.layout-background { grid-template-columns: 1fr; position: relative; place-items: center; padding: 2rem 1rem; }
.auth-shell.layout-background .auth-art { position: absolute; inset: 0; }
.auth-shell.layout-background .auth-main { position: relative; z-index: 1; }
.auth-shell.preview { margin: 0; min-height: 480px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); pointer-events: none; }

.auth-art { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: flex-end; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.auth-art img.on { opacity: 1; }
.auth-art-shade { position: absolute; inset: 0; }
.overlay .auth-art-shade { background: linear-gradient(180deg, rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .65) 100%); }
.auth-art-text { position: relative; padding: clamp(1.5rem, 5vw, 4rem); max-width: 620px; }
.auth-art-text h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.08; margin: 0 0 .7rem; text-wrap: balance; }
.auth-art-text p { opacity: .9; font-size: 1.05rem; margin: 0 0 1.2rem; }
.auth-art-text ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; }
.auth-art-text li { display: flex; gap: .55rem; align-items: center; font-weight: 600; }
.auth-art-text li svg { flex: none; padding: 3px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.auth-stats { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .25); }
.auth-stats div { display: flex; flex-direction: column; } .auth-stats strong { font-size: 1.6rem; } .auth-stats small { opacity: .8; }

.auth-main { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.auth-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: .8rem; }
.layout-background .auth-card, .layout-card .auth-card { background: var(--surface); padding: 2rem; border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-lg); }
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: var(--text); text-decoration: none; margin-bottom: .6rem; }
.auth-brand img { height: 40px; max-width: 160px; object-fit: contain; }
.auth-tag { margin: 0; font-weight: 700; color: var(--accent); }
.auth-title { margin: 0; font-size: 1.8rem; }
.auth-tabs { margin: .3rem 0; } .auth-tabs button { display: inline-flex; align-items: center; gap: .35rem; }
.auth-submit { width: 100%; justify-content: center; padding-top: .8rem; padding-bottom: .8rem; font-size: 1rem; }
.phone-field { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.phone-field .prefix { display: grid; place-items: center; padding: 0 .8rem; background: var(--surface-2); font-weight: 700; color: var(--muted); }
.phone-field input { border: 0; flex: 1; min-width: 0; }
/* Six code boxes drawn behind one input (paste and SMS autofill keep working). */
.otp-input { width: 100%; max-width: 320px; font: 700 1.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.32em; padding: .7rem 0 .7rem .62em;
  border: 0; background: repeating-linear-gradient(90deg, var(--surface-2) 0 calc(16.66% - 8px), transparent calc(16.66% - 8px) 16.66%); border-radius: 0; caret-color: var(--accent); }
.otp-input:focus { outline: none; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)) 0 calc(16.66% - 8px), transparent calc(16.66% - 8px) 16.66%); }
.auth-alt { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .4rem; }
.auth-privacy { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.auth-footer { margin: 0; }
@media (max-width: 860px) {
  .auth-shell, .auth-shell.layout-split-right { grid-template-columns: 1fr; min-height: 0; }
  .auth-shell.layout-split-right .auth-art { order: 0; }
  .layout-split-left .auth-art, .layout-split-right .auth-art { min-height: 200px; }
  .auth-art-text { padding: 1.4rem 1.2rem; } .auth-art-text ul, .auth-stats { display: none; }
  .auth-art-text h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .auth-art img { transition: none; } }

/* ===================== Footer (theme: Footer) ===================== */
.site-footer { --f-bg: #0f1020; --f-text: #e9eaf5; --f-muted: #a3a6c2; --f-line: rgb(255 255 255 / .1); background: var(--f-bg); color: var(--f-text); margin-top: 3rem; }
.site-footer.tone-light { --f-bg: var(--surface); --f-text: var(--text); --f-muted: var(--muted); --f-line: var(--line); border-top: 1px solid var(--line); }
.site-footer.tone-brand { --f-bg: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #000), color-mix(in srgb, var(--accent-2) 85%, #000));
  --f-text: #fff; --f-muted: rgb(255 255 255 / .78); --f-line: rgb(255 255 255 / .18); }
.site-footer a { color: var(--f-text); text-decoration: none; } .site-footer a:hover { text-decoration: underline; }
.f-inner { max-width: 1240px; margin: 0 auto; padding-left: clamp(1rem, 3vw, 1.25rem); padding-right: clamp(1rem, 3vw, 1.25rem); }
.is-public.width-wide .f-inner { max-width: 1600px; } .is-public.width-full .f-inner { max-width: none; padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(1rem, 3vw, 3rem); }
.f-muted, .f-about { color: var(--f-muted); }

.f-news { border-bottom: 1px solid var(--f-line); }
.f-news-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.f-news-inner > div:first-child { display: flex; flex-direction: column; } .f-news-inner strong { font-size: 1.2rem; } .f-news-inner span { color: var(--f-muted); }
.f-news-form { display: flex; gap: .5rem; flex: 1; max-width: 460px; min-width: 260px; }
.f-news-form input { flex: 1; min-width: 0; background: rgb(255 255 255 / .08); border: 1px solid var(--f-line); color: var(--f-text); }
.tone-light .f-news-form input { background: var(--surface-2); }
.f-news-done { display: inline-flex; gap: .35rem; align-items: center; font-weight: 700; } .f-news-error { color: #ffb4b4; flex-basis: 100%; }

.f-main { display: grid; gap: 2rem; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); padding-top: 2.4rem; padding-bottom: 2rem; }
.f-brand .brand { color: var(--f-text); font-size: 1.15rem; } .f-brand .logo { height: 36px; max-width: 160px; object-fit: contain; }
.f-about { margin: .7rem 0; max-width: 34ch; }
.f-contact { display: grid; gap: .45rem; margin: .8rem 0; } .f-contact li { display: flex; gap: .45rem; align-items: center; }
.f-title { background: none; border: 0; padding: 0; color: var(--f-text); font-weight: 700; font-size: .95rem; letter-spacing: .02em; display: flex; justify-content: space-between;
  width: 100%; cursor: default; margin-bottom: .7rem; }
.f-title svg { display: none; }
.f-col ul { display: grid; gap: .45rem; } .f-col a { color: var(--f-muted); } .f-col a:hover { color: var(--f-text); }
.site-footer .social a, .site-footer .social-links a { color: var(--f-text); }

.f-discover { display: grid; gap: .8rem; padding-top: 1.2rem; padding-bottom: 1.2rem; border-top: 1px solid var(--f-line); }
.f-discover > div { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; } .f-discover strong { margin-right: .4rem; }
.f-discover a { color: var(--f-muted); font-size: .9rem; }
.f-trust { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem;
  border-top: 1px solid var(--f-line); color: var(--f-muted); font-size: .88rem; }
.f-trust > span { display: inline-flex; gap: .4rem; align-items: center; }
.f-pay { gap: .4rem !important; flex-wrap: wrap; } .f-pay em { font-style: normal; font-weight: 700; font-size: .75rem; padding: .2rem .55rem; border-radius: 6px;
  border: 1px solid var(--f-line); color: var(--f-text); }
.f-bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1.2rem;
  border-top: 1px solid var(--f-line); color: var(--f-muted); font-size: .85rem; }
.f-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; } .f-legal a { color: var(--f-muted); }
.f-powered { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border: 1px solid var(--f-line, rgba(127,127,127,.3)); border-radius: 999px; color: inherit; text-decoration: none; }
.f-powered img { height: 18px; width: auto; max-width: 90px; object-fit: contain; }
.f-powered strong { font-weight: 700; color: var(--f-text); }
.f-top { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--f-line); background: transparent; color: var(--f-text); cursor: pointer; font-size: 1rem; }

/* Styles */
.f-centered .f-main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.f-centered .f-col { text-align: center; } .f-centered .f-contact li { justify-content: center; } .f-centered .f-about { margin-left: auto; margin-right: auto; }
.f-centered .f-main { grid-auto-flow: row; } .f-centered .f-col ul { justify-items: center; }
.f-simple .f-main { grid-template-columns: auto 1fr; align-items: start; gap: 1rem 2.5rem; padding-top: 1.4rem; padding-bottom: 1.2rem; }
.f-simple .f-col { display: inline-block; } .f-simple .f-main { display: flex; flex-wrap: wrap; justify-content: space-between; }
.f-simple .f-col ul { display: flex; flex-wrap: wrap; gap: .4rem 1rem; } .f-simple .f-title { display: none; }
.f-minimal { margin-top: 2rem; }

@media (max-width: 760px) {
  .f-main { grid-template-columns: 1fr; gap: 0; }
  .f-brand { padding-bottom: 1rem; }
  .f-col { border-top: 1px solid var(--f-line); }
  .f-title { cursor: pointer; margin: 0; padding: .9rem 0; } .f-title svg { display: inline; transition: transform .2s; }
  .f-col.open .f-title svg { transform: rotate(180deg); }
  .f-col ul { display: none; padding-bottom: .8rem; } .f-col.open ul { display: grid; }
  .f-simple .f-col ul, .f-centered .f-col ul { display: flex; }
  .f-contact li a, .f-col a { display: inline-block; padding: .2rem 0; }
}

/* ---------- Help centre (/help) ---------- */
.help-page { max-width: 880px; margin: 0 auto; }
.help-hero { text-align: center; padding: 2rem 1rem 1.2rem; }
.help-hero h1 { font-family: var(--font-display); margin: 0 0 .3rem; }
.help-search { display: flex; align-items: center; gap: .5rem; max-width: 560px; margin: 1rem auto .8rem; padding: .2rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--muted); }
.help-search input { flex: 1; border: 0; background: transparent; padding: .7rem .2rem; font-size: 1rem; color: var(--text); outline: none; box-shadow: none; }
.help-search:focus-within { border-color: var(--accent); }
.help-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; }
.help-section { margin: 1.6rem 0; }
.help-section h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0 0 .6rem; }
.help-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .5rem; }
.help-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1rem; font-weight: 600; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary svg { flex: none; transition: transform .2s; color: var(--muted); }
.help-item[open] summary svg { transform: rotate(180deg); }
.help-item[open] summary { color: var(--accent); }
.help-answer { padding: 0 1rem .9rem; color: var(--text); line-height: 1.6; }
.help-answer p { margin: .35rem 0; }
.help-contact { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.help-contact h2 { margin: 0; }
@media (max-width: 640px) { .help-hero { padding-top: 1rem; } .help-contact .row { width: 100%; } .help-contact .btn { flex: 1; text-align: center; } }

/* ---------- Platform team (Admin → Team & roles) ---------- */
.role-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; margin: .4rem 0 1rem; }
.role-pick { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font-weight: 400; }
.role-pick input { margin-top: .2rem; width: auto; }
.role-pick span { display: flex; flex-direction: column; gap: .15rem; }
.role-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.invite-card { border-left: 4px solid var(--ok); }
.invite-card h2 { display: flex; align-items: center; gap: .4rem; }
td.actions { white-space: nowrap; }
td.actions .link { margin-right: .6rem; }
@media (max-width: 720px) { td.actions { white-space: normal; } }

/* ---------- Admin moderation (business types, listings, pictures, buses) ---------- */
.type-toggles { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: .6rem 0 1rem; }
.switch-row { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; }
.switch-row input { width: 2.4rem; height: 1.3rem; accent-color: var(--accent); }
.mod-item { border-top: 1px solid var(--line); padding: .8rem 0; }
.mod-item.hidden-item > .row strong { text-decoration: line-through; color: var(--muted); }
.row.spread { justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.mod-pictures { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.mod-pictures figure { margin: 0; width: 120px; }
.mod-pictures img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.mod-pictures figcaption { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); }
.mod-pictures .hidden-pic img { opacity: .35; filter: grayscale(1); }

/* Phone menu opens from the side the theme puts the menu on. */
@media (max-width: 760px) {
  .menu-right .primary-nav, .menu-center .primary-nav { justify-content: flex-start; }
  .menu-right .primary-nav { text-align: right; align-items: flex-end; }
}

/* ---------- Download tickets (booking page) ---------- */
.download-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 1rem 0; border-color: var(--accent); background: var(--accent-soft); }
.download-bar .btn { font-weight: 700; }
.ticket .ticket-download { display: flex; justify-content: center; width: 100%; margin-top: .6rem; }
.ticket .pick { display: inline-flex; gap: .35rem; align-items: center; float: right; }
.ticket.picked { outline: 2px solid var(--accent); }
.ticket .cancel-pick { display: block; margin-top: .5rem; color: var(--muted); }

/* ---------- Plans & billing ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .45rem; background: var(--surface); }
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.plan-card h3 { margin: 0; }
.plan-price { font-size: 1.35rem; font-weight: 800; }
.plan-features { list-style: none; padding: 0; margin: .3rem 0; font-size: .9rem; display: grid; gap: .25rem; }
.plan-features li { display: flex; gap: .4rem; align-items: center; }
.plan-card .btn, .plan-card .status { margin-top: auto; align-self: flex-start; }
.charge-row { border-top: 1px solid var(--line); padding: .9rem 0; }
.charge-row.overdue strong { color: var(--bad); }
.bank-pay { margin-top: .8rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--surface-2, var(--bg)); }
.bank-details { display: grid; gap: .3rem; margin-bottom: .8rem; }
.bank-qr { width: 160px; height: 160px; object-fit: contain; background: #fff; border-radius: 8px; }

/* ---------- Hotels ---------- */
.hotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.hotel-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: var(--text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.hotel-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.hotel-card img, .hotel-card-art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface-2); }
.hotel-card-art { display: grid; place-items: center; color: var(--muted); }
.hotel-card-body { padding: .8rem 1rem 1rem; display: grid; gap: .25rem; }
.hotel-card-body h3 { margin: 0; font-size: 1.05rem; }
.hotel-card-body p { margin: 0; }
.hotel-card.sold-out { opacity: .65; }
.room-list { display: grid; gap: .9rem; margin-bottom: 2rem; }
.room-card { display: grid; grid-template-columns: 180px 1fr auto; gap: 1rem; align-items: start; }
.room-card > img { width: 180px; height: 130px; object-fit: cover; border-radius: var(--radius-sm); }
.room-card h3 { margin: 0 0 .2rem; }
.room-card.sold-out { opacity: .7; }
.room-price { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; text-align: right; min-width: 150px; }
.room-price strong { font-size: 1.25rem; }
@media (max-width: 720px) {
  .room-card { grid-template-columns: 1fr; }
  .room-card > img { width: 100%; height: 180px; }
  .room-price { align-items: flex-start; text-align: left; }
}
.amenity-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem .9rem; }
.amenity-list li { display: flex; gap: .4rem; align-items: center; }
.room-calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem; margin: .8rem 0 1.2rem; }
.room-day { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .55rem; display: grid; gap: .1rem; background: var(--surface); }
.room-day-date { font-size: .78rem; color: var(--muted); }
.room-day.custom { border-color: var(--accent); }
.room-day.full { background: var(--warn-soft, #fff4d6); }
.room-day.closed { background: var(--bad-soft, #fde7e9); }
.photo-strip { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.photo-strip figure { margin: 0; display: grid; gap: .2rem; justify-items: start; }
.photo-strip img { width: 120px; height: 86px; object-fit: cover; border-radius: 8px; }

/* ---------- Users & partners: clickable stat cards, growth chart ---------- */
button.stat { text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--line); }
.stat.clickable:hover, .stat.clickable.active, a.stat:hover { border-color: var(--accent); }
.stat small { font-size: .78rem; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.segmented button { border: 0; background: transparent; color: var(--text); padding: .35rem .9rem; font: inherit; cursor: pointer; }
.segmented button.active { background: var(--accent); color: var(--accent-ink); }
.growth-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--muted); margin: .4rem 0 .6rem; }
.growth-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.growth-scroll { overflow-x: auto; }
.growth-chart { width: 100%; height: auto; display: block; }
.growth-chart .grid { stroke: var(--line); stroke-width: 1; }
.growth-chart .axis { fill: var(--muted); font-size: 11px; }
.growth-chart .bar-users, .growth-legend .sw.users { fill: var(--accent); background: var(--accent); }
.growth-chart .bar-under, .growth-legend .sw.under { fill: var(--accent-2); background: var(--accent-2); }
.growth-chart .bar-partners, .growth-legend .sw.partners { fill: #16a34a; background: #16a34a; }
.growth-table { margin-top: 1rem; }
.growth-table tr.total td { font-weight: 600; border-top: 2px solid var(--line); }
.audience-tile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1rem; align-items: center; margin-bottom: 1.2rem;
  color: var(--text); text-decoration: none; border: 1px solid var(--line); }
.audience-tile:hover { border-color: var(--accent); }
.audience-tile > div { display: flex; flex-direction: column; gap: .1rem; padding-right: .8rem; border-right: 1px solid var(--line); }
.audience-tile > div:nth-child(3) { border-right: 0; }
.audience-tile .big { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.audience-go { color: var(--accent); font-weight: 600; display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
@media (max-width: 720px) {
  .audience-tile { grid-template-columns: 1fr 1fr; }
  .audience-tile > div { border-right: 0; }
}

/* ---------- Split top-of-page and featured banner (Fresh Market, Monsoon, Sunset Retro…) ----------
   Grid columns get minmax(0, …) so the carousel inside the picture side can't stretch the page sideways (its slides sit in one
   long row), and the carousel fills the picture box with text sized for half a page. */
.hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.hero-split > * { min-width: 0; }
.hero-split-text { align-self: center; }
.hero-split-art { min-height: 360px; }
.hero-split-art .carousel { position: absolute; inset: 0; height: auto; }
.hero-split-art .carousel-track, .hero-split-art .slide { height: 100%; }
.hero-split-art .slide { min-height: 0; }
.hero-split-art .slide-text { padding: clamp(1rem, 2.4vw, 1.8rem); padding-bottom: 3.2rem; max-width: 100%; }
.hero-split-art .slide-text h2 { font-size: clamp(1.3rem, 2.4vw, 2.1rem); }
.hero-split-art .slide-text p { font-size: .95rem; margin-bottom: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-split-art .carousel-arrow { width: 38px; height: 38px; }
.hero-split .searchbar { max-width: 100%; }
.featured-show { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.featured-show > * { min-width: 0; }
.featured-show h2 { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-split-art { min-height: 260px; }
  .featured-show { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Bus seat map (customer) and bus layout designer (partner) ---------- */
.seat.crew { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--line) 4px, var(--line) 8px); color: var(--muted); cursor: not-allowed; border-color: var(--line); }
.seat.sleeper { min-height: 64px; border-radius: 8px; }
.bus-map .seat { min-height: 36px; font-size: .7rem; }
.bus-map .seat.sleeper { min-height: 70px; }
.bus-decks { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; align-items: flex-start; }
.bus-deck { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.bus-deck-name { font-weight: 700; font-size: .85rem; color: var(--muted); }
.bus-body { border: 2px solid var(--line); border-radius: 22px 22px 12px 12px; padding: .6rem .7rem .9rem; background: var(--surface); }
.bus-front { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .1rem .2rem .6rem; margin-bottom: .6rem;
  border-bottom: 2px dashed var(--line); min-height: 34px; }
.bus-door { font-size: .7rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .4rem; }
.bus-driver { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.bus-designer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.2rem; align-items: start; }
.bus-designer .seatmap { gap: 6px; }
.bus-cell { min-height: 36px; min-width: 34px; border: 1px dashed var(--line); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0; }
.bus-cell:hover { border-color: var(--accent); color: var(--accent); }
.bus-designer .seat { min-height: 36px; min-width: 34px; font-size: .7rem; background: var(--seat); color: var(--seat-ink); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.bus-designer .seat.sleeper { min-height: 70px; }
.bus-designer .seat.picked { outline: 3px solid var(--accent); outline-offset: 1px; }
.bus-designer .seat.female { box-shadow: inset 0 -4px 0 #e0457b; }
.bus-designer .seat.cat-1 { background: #dbeafe; } .bus-designer .seat.cat-2 { background: #dcfce7; } .bus-designer .seat.cat-3 { background: #fef3c7; } .bus-designer .seat.cat-4 { background: #fce7f3; }
.bus-designer .side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: .8rem; }
.cat-table input { width: 100%; }
@media (max-width: 900px) { .bus-designer { grid-template-columns: minmax(0, 1fr); } .bus-designer .side { position: static; } }

/* ---------- Currencies ---------- */
.currency-pick { width: auto; min-height: 36px; padding: .3rem .5rem; font-size: .85rem; border-radius: 999px; }
.price-approx { display: inline-block; margin-left: .35rem; font-size: .78em; color: var(--muted); font-weight: 500; }

/* ---------- Notifications (bell, list) and alert rules ---------- */
.bell-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; color: inherit; text-decoration: none; }
.bell-chip:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.notification-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.notification { padding: .8rem 1rem; }
.notification.unread { border-left: 4px solid var(--accent); }
.notification.read { opacity: .75; }
.notification-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.notification-body { white-space: pre-line; margin: .4rem 0; }
.alert-kinds { gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.alert-editor .channels { border: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.alert-editor .channels legend { font-weight: 600; margin-bottom: .3rem; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.type-requests, .type-add { margin-top: 1rem; gap: .6rem; align-items: end; flex-wrap: wrap; }

/* ---------- Social links ---------- */
.social-link { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.social-link:hover { color: var(--accent); }
.social-icons { gap: .5rem; }
.social-icons .social-link { width: 36px; height: 36px; justify-content: center; border: 1px solid var(--line); border-radius: 999px; }
.social-editor { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 1rem 0; }
.social-editor legend { font-weight: 600; padding: 0 .3rem; }
.social-rows { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 2fr) minmax(0, 1fr); gap: .45rem .75rem; align-items: center; margin: .6rem 0; }
.social-name { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.social-preview { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.social-preview .social { margin-top: 0; }
@media (max-width: 640px) { .social-rows { grid-template-columns: 1fr; } .social-rows > .muted { display: none; } }

/* ---------- Mobile app ---------- */
.offline-note { background: color-mix(in srgb, #f5b100 16%, var(--surface)); border: 1px solid color-mix(in srgb, #f5b100 45%, transparent); }
/* Inside the app: respect the phone's notch / gesture bar; no text selection on taps. */
body.in-app { padding-top: env(safe-area-inset-top); -webkit-tap-highlight-color: transparent; }
body.in-app .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
body.in-app .hide-in-app { display: none !important; }

/* ---------- Website camera scanner ---------- */
.qr-overlay { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.qr-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-frame { position: relative; width: min(70vw, 70vh, 320px); aspect-ratio: 1; border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); }
.qr-hint { position: relative; color: #fff; margin-top: 1rem; font-weight: 600; text-shadow: 0 1px 3px #000; }
.qr-cancel { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); }
.location-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.location-status .ok { color: #1a7f37; font-weight: 600; }
.location-status .bad { color: #b42318; font-weight: 600; }

/* ---------- Help desk ---------- */
.side-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; margin-left: .3rem;
    background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); vertical-align: middle; }
.side-badge.side-platform { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.side-badge.side-partner { background: color-mix(in srgb, #0e9f6e 16%, transparent); color: #0e7a55; }
.side-badge.internal { background: color-mix(in srgb, #f5b100 22%, transparent); color: #8a5b00; }
.msg.internal { border-left: 3px solid #f5b100; }
.call-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.call-card .phone { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; }

/* ---------- Booking forms: people (passengers / guests) and checkout sections ---------- */
.people { display: grid; gap: .75rem; }
.person { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: .85rem 1rem 1rem; }
.person.has-error { border-color: #d64545; box-shadow: 0 0 0 3px color-mix(in srgb, #d64545 15%, transparent); }
.person-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.person-head strong { font-size: .98rem; }
.person-no { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.person-pick { margin-left: auto; width: auto; min-width: 12rem; max-width: 100%; font-size: .85rem; padding: .4rem .6rem; }
.person-fields { display: grid; gap: .75rem 1rem; grid-template-columns: minmax(0, 2fr) minmax(7.5rem, .9fr) minmax(0, 1.5fr); align-items: start; }
.person-fields label { margin: 0; }
.person-fields input { width: 100%; }
.f-label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: .3rem; }
.age-box { position: relative; display: block; }
.age-box input { padding-right: 4.6rem; }
.age-group { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); pointer-events: none; }
.age-group.infant { background: #fde7f1; color: #a3195b; } .age-group.child { background: #e5f3ff; color: #145a96; }
.age-group.senior { background: #fff1db; color: #8a5300; } .age-group.adult { background: #e8f6ec; color: #1f6b3a; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.segmented .seg { flex: 1; font: inherit; font-size: .9rem; padding: .6rem .5rem; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.segmented .seg + .seg { border-left: 1px solid var(--line); }
.segmented .seg.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.segmented .seg:disabled { opacity: .35; cursor: not-allowed; }
.booking-form h2, .booking-form h3 { margin: 0 0 .25rem; }
.booking-form .section-sub { margin: 0 0 .9rem; }
.booking-form .form-section { padding: 1rem 0; border-top: 1px solid var(--line); }
.booking-form .form-section:first-of-type { border-top: 0; padding-top: .25rem; }
.booking-form .pay-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1rem;
  border-top: 1px solid var(--line); margin-top: .5rem; }
.booking-form .pay-bar .total { font-size: 1.15rem; }
@media (max-width: 640px) {
  .person-fields { grid-template-columns: 1fr 1fr; }
  .person-fields .f-name, .person-fields .f-gender { grid-column: 1 / -1; }
  .person-pick { margin-left: 0; width: 100%; }
  .booking-form .pay-bar .btn { width: 100%; }
}
.pay-options { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pay-option { flex-direction: row; align-items: center; gap: .6rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font-weight: 500; }
.pay-option input { width: auto; }
.pay-option.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.booking-form .known-customer { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin: 0; }

/* ---------- Ticket status on printed tickets ---------- */
.tk-status { position: absolute; top: 10px; right: 10px; z-index: 3; font: 700 .7rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .6rem; border-radius: 999px; border: 2px solid currentColor; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tk-status-active { color: #1b7a3d; }
.tk-status-used { color: #6b7080; }
.tk-status-cancelled { color: #c62828; }
.tk-void { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; overflow: hidden;
  background: rgba(255, 255, 255, .55); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tk-void span { transform: rotate(-18deg); font: 800 clamp(1.6rem, 6vw, 3rem)/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: #c62828; border: 4px solid #c62828; border-radius: 12px; padding: .35rem 1.1rem; background: rgba(255, 255, 255, .85); }

/* Help desk: attach a file */
.support-attach { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.support-attach > label.inline { position: relative; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center;
  border: 1px dashed var(--line); padding: .35rem .7rem; border-radius: var(--radius-sm); }
.support-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.msg .attachment { display: inline-flex; gap: .3rem; align-items: center; }

/* Top menu drop-downs (admin / partner submenus) */
.nav-drop { position: relative; display: flex; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; font: inherit; color: var(--muted);
  padding: .5rem .8rem; border-radius: 999px; font-weight: 500; font-size: .95rem; cursor: pointer; }
.nav-drop-toggle:hover, .nav-drop.open .nav-drop-toggle { background: var(--surface-2); color: var(--text); }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 200px; padding: .35rem; margin-top: .25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); flex-direction: column; }
.nav-drop-menu a { display: block; border-radius: 8px; white-space: nowrap; }
.nav-drop.open .nav-drop-menu { display: flex; }
@media (hover: hover) and (min-width: 761px) {
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: flex; }
}
.header-solid .site-header .nav-drop-toggle { color: var(--accent-ink); }
.header-solid .site-header .nav-drop-menu a { color: var(--text); }
@media (max-width: 760px) {
  .nav-drop { flex-direction: column; }
  .nav-drop-toggle { width: 100%; justify-content: space-between; border-radius: 10px; padding: .75rem 1rem; }
  .nav-drop-menu { position: static; box-shadow: none; border: 0; margin: 0; padding: 0 0 0 1rem; min-width: 0; }
}
.menu-editor fieldset { margin-bottom: .5rem; }
.menu-editor .submenu-row { margin-left: 1.25rem; }

/* ---------- Search bar on phones ----------
   The stacked bar used to keep a pill radius (999px) in "round" themes, which drew a huge white circle, and it sat on top of the
   carousel slides. On phones it's a rounded card under the slides, with the two dates side by side. */
.searchbar .field.date { flex: 1 1 140px; }
.searchbar .field.date input { min-width: 0; }
.searchbar .date-sep { color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
  .searchbar, .radius-round .searchbar { border-radius: 18px; padding: .4rem; }
  .radius-sharp .searchbar { border-radius: 3px; }
  .searchbar .field.date { flex: 1 1 calc(50% - .5rem); }
  .searchbar .field.date + .field.date { border-top: 0; border-left: 1px solid var(--line); }
  .carousel-overlay { position: static; transform: none; width: auto; margin: .75rem; }
  .carousel:has(.carousel-overlay) .slide-text { padding-bottom: 2.6rem; }
  .carousel:has(.carousel-overlay) .slide { min-height: 320px; }
  .carousel:has(.carousel-overlay) .carousel-dots { bottom: auto; top: .8rem; }
}

/* ---------- Banners and sliders on phones: show the whole picture ----------
   On a narrow screen a wide banner stretched to fill a tall box (object-fit: cover) lost most of its sides. On phones each slide
   shows the full picture at its own shape, with the headline and button underneath; offer cards and the store banner likewise. */
@media (max-width: 760px) {
  .slide, .carousel:has(.carousel-overlay) .slide { min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .carousel-track { align-items: flex-start; }
  .slide > img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
  .slide-shade { display: none; }
  .slide-text, .carousel:has(.carousel-overlay) .slide-text { max-width: 100%; padding: 1rem 1rem 2.4rem; }
  .slide-text h2 { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .slide-text p { font-size: .95rem; margin-bottom: .8rem; }
  .carousel-dots, .carousel:has(.carousel-overlay) .carousel-dots { top: auto; bottom: .7rem; }
  .carousel:has(.carousel-overlay) .carousel-dots { top: .7rem; bottom: auto; }  /* the search bar sits below the slides */
  .hero-split-art { min-height: 0; }
  .hero-split-art .carousel { position: relative; inset: auto; }
  .hero-split-art .carousel-track, .hero-split-art .slide { height: auto; }
  .offer-card { aspect-ratio: auto; }
  .offer-card img { display: block; height: auto; object-fit: contain; }
  .store-hero .banner { max-height: none; height: auto; object-fit: contain; }
}

/* Print / Download PDF buttons */
.print-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
@media (max-width: 760px) { .print-actions .btn { flex: 1 1 140px; justify-content: center; } }

/* Partner sign-up: extra detail sections */
.details-section { font-size: 1rem; margin: 1rem 0 .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Booking question answers */
.booking-answers { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .85rem; margin-top: .25rem; }
.file-pick { position: relative; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; border: 1px dashed var(--line);
  padding: .35rem .7rem; border-radius: var(--radius-sm); }
.file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }