/* SnapDance for Events — Order + Setup flow.
   Visual language ported from design-mockups/events/order-flow/Order Flow B - Live
   Configurator.html (approved design) — tokens, cards, buttons, right-panel layout
   copied 1:1; prototype chrome (badge, demo toasts) removed; a few blocks added for
   things the approved mock left as static/mock (payment note, country field, event
   details completion banner, extra-video add-on). See docs/events-platform.md. */

:root{
  --accent:#ff2d55;
  --accent2:#ff9800;
  --purple:#9d6bff;
  --green:#00c853;
  --ink:#fcfcfd;
  --surface:#ffffff;
  --card:#ffffff;
  --card2:#f6f6f8;
  --border:#eaeaec;
  --border2:#e2e2e6;
  --text:#0a0a0a;
  --text2:#4a4a52;
  --text3:#6e6e78;
  --text4:#9a9aa2;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-full:9999px;
  --maxw:1360px;
  --shadow-card: 0 1px 2px rgba(10,10,10,.04), 0 12px 32px rgba(10,10,10,.06);
  --shadow-card-hover: 0 2px 6px rgba(10,10,10,.06), 0 24px 48px rgba(10,10,10,.10);
  --shadow-glow: 0 18px 50px rgba(255,45,85,.16);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media (max-width:900px){.wrap{padding:0 24px;}}
@media (max-width:480px){.wrap{padding:0 16px;}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--r-full);
  border:1px solid transparent;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#ff5470);color:#fff;
  box-shadow:0 8px 24px rgba(255,45,85,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,45,85,.5);}
.btn-primary:disabled{background:#d6d6da;color:#9a9aa2;box-shadow:none;cursor:not-allowed;transform:none;}
.btn-book{background:var(--green);color:#fff;box-shadow:0 8px 24px rgba(0,200,83,.35);}
.btn-book:hover{background:#00b34a;box-shadow:0 12px 32px rgba(0,200,83,.5);transform:translateY(-2px);}
.btn-book:disabled{background:#d6d6da;color:#9a9aa2;box-shadow:none;cursor:not-allowed;transform:none;}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text);}
.btn-ghost:hover{background:rgba(10,10,10,.04);border-color:#c7c7cd;}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-xs{padding:7px 12px;font-size:12.5px;border-radius:var(--r-full);}

/* ============ DASHBOARD-EDIT BANNER (?from=dashboard) ============ */
.dash-edit-banner{
  background:rgba(255,152,0,.1);border-bottom:1px solid rgba(255,152,0,.28);
  color:#8a5900;font-size:12.5px;font-weight:700;text-align:center;padding:9px 16px;
}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;}
.nav-brand img{height:28px;width:28px;border-radius:8px;object-fit:cover;}
.nav-brand small{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--accent2);text-transform:uppercase;}
.nav-actions{display:flex;align-items:center;gap:14px;}
.nav-back{font-size:13.5px;font-weight:600;color:var(--text3);}
.nav-back:hover{color:var(--text);}
@media (max-width:480px){.nav-inner{padding:12px 16px;}.btn{padding:11px 18px;font-size:13px;}}

/* ============ PAGE HEADER ============ */
/* 2026-09-18: now lives inside .of-left-col (see order.html) instead of as a full-width band
   above .of-shell — it no longer needs the old top padding (the grid's own top padding already
   separates it from the nav) or a max-width wrap (the grid column already bounds its width). */
.of-header{padding:0 0 20px;}
.of-header .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent2);background:rgba(255,152,0,.1);
  border:1px solid rgba(255,152,0,.25);padding:6px 14px;border-radius:var(--r-full);
}
.of-header h1{font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.02em;margin-top:14px;}
.of-header p{color:var(--text3);font-size:15px;margin-top:8px;max-width:560px;line-height:1.55;}
.tier-notice{
  margin-top:16px;padding:12px 16px;border-radius:var(--r-md);
  background:rgba(157,107,255,.08);border:1px solid rgba(157,107,255,.28);
  color:#5a3dbb;font-size:13.5px;font-weight:600;display:none;align-items:flex-start;gap:10px;
}
.tier-notice.show{display:flex;}
.tier-notice svg{flex:0 0 auto;margin-top:2px;color:var(--purple);}
.tier-notice button{margin-left:auto;flex:0 0 auto;background:none;border:none;color:#5a3dbb;font-weight:800;font-size:16px;line-height:1;padding:2px;}

/* ============ SHELL ============ */
.of-shell{
  max-width:var(--maxw);margin:0 auto;padding:24px 32px 100px;
  display:grid;grid-template-columns:52px minmax(0,1fr) 400px;gap:0 36px;align-items:start;
}
@media (max-width:1023px){
  .of-shell{grid-template-columns:1fr;padding:20px 24px 120px;}
}
@media (max-width:480px){.of-shell{padding:16px 16px 128px;}}

/* rail */
.rail{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:0;padding-top:8px;}
.rail-line{width:2px;flex:1;background:var(--border2);min-height:14px;}
.rail-item{position:relative;display:flex;flex-direction:column;align-items:center;}
.rail-btn{
  width:34px;height:34px;border-radius:50%;background:var(--card);border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--text3);
  transition:all .2s ease;flex:0 0 auto;
}
.rail-item.active .rail-btn{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px rgba(255,45,85,.12);}
.rail-item.done .rail-btn{background:var(--green);border-color:var(--green);color:#fff;}
.rail-item:last-child .rail-line{display:none;}
.rail-tooltip{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);
  background:#111;color:#fff;font-size:12px;font-weight:700;letter-spacing:0;white-space:nowrap;
  padding:6px 11px;border-radius:8px;box-shadow:0 10px 24px rgba(10,10,10,.3);
  opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;z-index:60;
}
.rail-tooltip::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#111;}
.rail-item:hover .rail-tooltip,.rail-item:focus-within .rail-tooltip{opacity:1;transform:translateY(-50%) translateX(0);}
@media (max-width:1023px){.rail{display:none;}}

/* left column sections */
.of-left-col{display:flex;flex-direction:column;min-width:0;}
.of-left{display:flex;flex-direction:column;gap:20px;min-width:0;}
/* 2026-09-17: guarantees the grid row is always at least as tall as .of-right's own sticky
   travel (top offset + its max rendered height), so a short step list (e.g. the order stage,
   steps 1-3, before any order exists) can never leave the sticky column running out of row —
   the grid track is sized to the tallest item, and this stops .of-left-col from ever being the
   short one. Matches .of-right's own top offset (88px) — see RIGHT PANEL CSS.
   2026-09-18: moved from .of-left to .of-left-col, which is the actual grid-track child now
   that the intro (.of-header) lives inside it too — see PAGE HEADER above.
   2026-09-18 (owner request): `min-height` alone only protects a page shorter than one
   viewport. On a short SECTION LIST (order stage: 3 sections) that's already taller than the
   viewport, scrolling to the LAST section approaches the bottom of `.of-left-col`'s real content
   height — and once continuing to stick would push `.of-right` past that bottom edge, sticky
   positioning un-sticks it early: `.of-right` starts scrolling with the page again, its top goes
   negative, and the phone preview (the first thing inside it) gets pushed off the top of the
   viewport while the summary card at its bottom is still comfortably on screen. The fix is the
   standard one for this: pad the container's bottom by a full sticky-travel's worth of room, so
   `.of-right` never runs out of room to keep tracking no matter which section is in view. */
@media (min-width:1024px){.of-left-col{min-height:calc(100vh - 88px);padding-bottom:calc(100vh - 88px - 16px);}}
.sec-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:28px;box-shadow:var(--shadow-card);scroll-margin-top:90px;
}
@media (max-width:480px){.sec-card{padding:20px 16px;border-radius:var(--r-lg);}}
.sec-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;}
.sec-num{
  width:52px;height:52px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1;
}
.sec-num.sn-a{background:linear-gradient(135deg,#ffab2e,#ff6a2b);box-shadow:0 10px 22px rgba(255,120,30,.28);}
.sec-num.sn-b{background:linear-gradient(135deg,#9d6bff,#ff2d55);box-shadow:0 10px 22px rgba(157,107,255,.30);}
.sec-num.sn-c{background:linear-gradient(135deg,#ff2d55,#ff9800);box-shadow:0 10px 22px rgba(255,45,85,.28);}
.sec-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-top:4px;}
.sec-sub{font-size:13.5px;color:var(--text3);margin-top:4px;line-height:1.5;}
.sec-body{display:flex;flex-direction:column;gap:18px;}

/* form basics */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:700;color:var(--text2);padding-bottom:5px;}
.field .hint{font-size:11.5px;color:var(--text4);font-weight:500;}
.field input[type="text"],.field input[type="date"],.field input[type="time"],.field input[type="number"],
.field input[type="email"],.field input[type="tel"],.field select,.field textarea{
  border:1.5px solid var(--border2);border-radius:var(--r-md);padding:11px 13px;font-size:14px;
  color:var(--text);background:#fff;width:100%;transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
#tellByPhone{font-size:16px;}
.field-err{font-size:12px;color:var(--accent);font-weight:600;display:none;}
.field-err.show{display:block;}
.field.invalid input,.field.invalid select{border-color:var(--accent);}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.field-row.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:560px){.field-row,.field-row.cols-3{grid-template-columns:1fr;}}
.counter-sm{font-size:11px;color:var(--text4);text-align:right;}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:#111;color:#fff;padding:12px 20px;border-radius:var(--r-full);font-size:13.5px;font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:1000;opacity:0;pointer-events:none;transition:all .25s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============ PACKAGE CARDS ============ */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:860px){.pkg-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.pkg-grid{grid-template-columns:1fr;}}
.pkg-card{
  text-align:left;background:var(--card2);border:1.5px solid var(--border2);border-radius:var(--r-lg);
  padding:18px 16px;display:flex;flex-direction:column;gap:8px;position:relative;transition:all .18s ease;
  min-height:44px;
}
.pkg-card:hover{border-color:#c7c7cd;}
.pkg-card[aria-pressed="true"]{
  background:linear-gradient(180deg, rgba(255,45,85,.07), var(--card) 60%);
  border-color:var(--accent);box-shadow:0 10px 26px rgba(255,45,85,.14);
}
.pkg-card .pk-name{font-size:13px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.pkg-card[aria-pressed="true"] .pk-name{color:var(--accent);}
.pkg-card .pk-price{font-size:22px;font-weight:900;letter-spacing:-.01em;}
.pkg-card .pk-price.quote{font-size:16px;}
.pkg-card .pk-videos{font-size:12.5px;color:var(--text3);font-weight:600;}
.pkg-card .pk-check{
  position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center;
}
.pkg-card[aria-pressed="true"] .pk-check{display:flex;}

/* experience mode cards */
.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:640px){.mode-grid{grid-template-columns:1fr;}}
.mode-card{
  text-align:left;background:var(--card2);border:1.5px solid var(--border2);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:6px;position:relative;transition:all .18s ease;
}
.mode-card[aria-pressed="true"]{border-color:var(--purple);background:linear-gradient(180deg, rgba(157,107,255,.08), var(--card) 60%);box-shadow:0 10px 26px rgba(157,107,255,.14);}
.mode-card .mc-title{font-size:14.5px;font-weight:800;}
.mode-card .mc-desc{font-size:12.5px;color:var(--text3);line-height:1.45;}
.mode-card.locked{opacity:.62;cursor:default;}
.mode-card .mc-upgrade{margin-top:4px;font-size:11.5px;font-weight:800;color:var(--purple);text-decoration:underline;align-self:flex-start;}

/* ============ EVENT DETAILS ============ */
.radio-pair{display:flex;gap:10px;flex-wrap:wrap;}
.radio-pill{
  border:1.5px solid var(--border2);border-radius:var(--r-full);padding:9px 16px;font-size:13.5px;font-weight:700;
  background:#fff;color:var(--text2);
}
.radio-pill[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,45,85,.07);color:var(--accent);}

/* ============ CHOOSE DANCES — SLOTS ============ */
.dance-count-toggle{display:flex;gap:8px;}
/* ============ SUGGESTED-FOR-EVENT-TYPE BATCH (2026-09-17 owner request) ============
   A dropdown + refresh + a visible batch of dances, matching design-mockups/events/order-flow/
   Order Flow B - Live Configurator.html. Picking from the batch uses the same .dance-card
   markup/behaviour as the Browse Dances sheet below. */
.starter-chips{display:flex;flex-wrap:wrap;gap:8px;}
.starter-chip{border:1.5px solid var(--border2);border-radius:var(--r-full);padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--text2);background:#fff;}
.starter-chip:hover{border-color:var(--purple);color:var(--purple);}
.starter-chip[aria-pressed="true"]{border-color:var(--purple);color:#fff;background:var(--purple);}
.suggest-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.suggest-bar label{font-size:12.5px;font-weight:700;color:var(--text3);white-space:nowrap;}
.suggest-type-select{border:1.5px solid var(--border2);border-radius:var(--r-md);padding:8px 10px;font-size:12.5px;font-weight:700;color:var(--text2);background:#fff;flex:1 1 180px;min-width:140px;}
.suggest-refresh-btn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border2);background:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--text2);}
.suggest-refresh-btn:hover{border-color:var(--purple);color:var(--purple);}
.suggest-refresh-btn:disabled{opacity:.45;pointer-events:none;}
.suggest-explain{font-size:12px;color:var(--text4);}
.suggest-browse-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--purple);text-decoration:underline;cursor:pointer;}
.suggest-browse-link:hover{color:var(--purple-dk, var(--purple));}
.suggest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;}
.suggest-card{aspect-ratio:9/16;}
.suggest-empty{grid-column:1/-1;font-size:12.5px;color:var(--text4);padding:14px 0;}
.dc-energy-dot{position:absolute;bottom:32px;left:8px;z-index:2;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.6);}
.dc-energy-calm{background:#5fb8ff;}
.dc-energy-medium{background:#ffb020;}
.dc-energy-high{background:#ff4d4d;}
.slots-wrap{display:flex;flex-wrap:wrap;gap:10px;}
@media (max-width:640px){.slots-wrap{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}}
.dance-slot{width:72px;flex:0 0 72px;aspect-ratio:9/16;border-radius:10px;position:relative;overflow:hidden;}
.dance-slot.filled{background:#0c0c0c;}
.dance-slot.filled img{width:100%;height:100%;object-fit:cover;display:block;}
.dance-slot.filled::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.72), transparent 55%);pointer-events:none;}
.dance-slot.filled .ds-name{position:absolute;left:4px;right:4px;bottom:4px;font-size:8px;font-weight:700;color:#fff;line-height:1.2;z-index:2;}
.dance-slot.filled .ds-remove{position:absolute;top:3px;right:3px;z-index:3;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;}
.dance-slot.empty{border:1.5px dashed var(--border2);background:var(--card2);display:flex;align-items:center;justify-content:center;color:var(--text4);font-size:22px;font-weight:300;}
.dance-slot.empty:hover{border-color:var(--accent);color:var(--accent);}
.dance-toolrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;}
.dance-toast-row{display:flex;flex-wrap:wrap;gap:8px;}
.dance-empty{grid-column:1/-1;text-align:center;padding:40px 10px;color:var(--text4);font-size:13.5px;}
.dance-locked-note{padding:18px;text-align:center;color:var(--text3);font-size:13.5px;background:var(--card2);border-radius:var(--r-md);}
.chip-btn{border:1.5px solid var(--border2);border-radius:var(--r-full);padding:8px 16px;font-size:13px;font-weight:700;background:#fff;color:var(--text2);}
.chip-btn[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,45,85,.07);color:var(--accent);}

/* ============ DANCE BROWSER SHEET ============ */
.db-overlay{
  display:none;position:fixed;inset:0;z-index:700;background:rgba(10,10,10,.6);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
.db-overlay.active{display:flex;}
@media (min-width:768px){.db-overlay{align-items:center;padding:24px;}}
.db-modal{background:var(--surface);width:100%;max-width:1100px;border-radius:20px 20px 0 0;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
@media (min-width:768px){.db-modal{border-radius:20px;max-height:86vh;}}
.db-head{display:flex;align-items:center;gap:14px;padding:18px 20px 12px;border-bottom:1px solid var(--border);flex:0 0 auto;flex-wrap:wrap;}
.db-head h3{font-size:17px;font-weight:800;flex:0 0 auto;}
.db-search{flex:1 1 220px;min-width:150px;}
.db-search input{width:100%;border:1.5px solid var(--border2);border-radius:var(--r-full);padding:9px 16px;font-size:13.5px;}
.db-close{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--border2);font-size:16px;flex:0 0 auto;}
.db-controls{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border);flex:0 0 auto;align-items:center;}
.db-view-switch,.db-tier-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.filter-btn{border:1.5px solid var(--border2);border-radius:var(--r-full);padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--text3);background:#fff;}
.filter-btn[aria-pressed="true"]{border-color:var(--text);color:var(--text);background:var(--card2);}
#dbVideoPark{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
.db-sort select{border:1.5px solid var(--border2);border-radius:var(--r-full);padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--text2);background:#fff;}
.db-count{padding:8px 20px 0;font-size:12px;color:var(--text4);font-weight:700;flex:0 0 auto;}
.db-body{flex:1 1 auto;overflow-y:auto;padding:12px 20px 20px;}
.db-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:900px){.db-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.db-grid{grid-template-columns:repeat(2,1fr);}}
.dance-card{position:relative;border-radius:var(--r-md);overflow:hidden;background:#0c0c0c;border:2px solid transparent;text-align:left;padding:0;display:block;}
.dance-card img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;}
.dance-card video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none;}
.dance-card.previewing video{opacity:1;}
.dance-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.68), transparent 55%);pointer-events:none;}
.dance-card .dc-name{position:absolute;left:8px;right:8px;bottom:36px;color:#fff;font-size:11.5px;font-weight:700;z-index:2;line-height:1.25;}
.dance-card .dc-tier-badge{position:absolute;top:7px;left:7px;z-index:3;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);padding:3px 7px;border-radius:var(--r-full);}
.dance-card.picked{border-color:var(--green);box-shadow:0 8px 20px rgba(0,200,83,.22);}
.dance-card .dc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:40px;height:40px;font-size:14px;z-index:3;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);}
.dance-card.previewing .dc-play{opacity:0;}
@media (hover:hover){
  .dance-card .dc-play{opacity:0;transition:opacity .15s ease;}
  .dance-card:hover .dc-play,.dance-card .dc-play:focus-visible{opacity:1;}
  .dance-card.previewing .dc-play{opacity:0;}
}
.dance-card .dc-heart{position:absolute;top:6px;right:6px;z-index:4;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid rgba(255,255,255,.3);}
.dance-card .dc-heart.active{color:var(--accent);}
.dance-card .dc-add-btn{
  position:absolute;left:6px;right:6px;bottom:6px;z-index:3;font-size:10.5px;font-weight:800;
  padding:6px 8px;border-radius:var(--r-full);background:rgba(255,255,255,.92);color:var(--text);border:none;
  text-align:center;
}
.dance-card .dc-add-btn.added{background:var(--green);color:#fff;}
.dance-card .dc-add-btn[aria-disabled="true"]{opacity:.5;}
.db-empty{grid-column:1/-1;text-align:center;padding:50px 10px;color:var(--text4);font-size:13.5px;}
.db-empty button{margin-top:10px;}
.db-skel{aspect-ratio:9/16;border-radius:var(--r-md);background:linear-gradient(100deg,var(--card2) 30%,var(--border) 50%,var(--card2) 70%);background-size:200% 100%;animation:dbSkel 1.1s ease-in-out infinite;}
@keyframes dbSkel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.db-sentinel{grid-column:1/-1;height:1px;}
.db-foot{flex:0 0 auto;border-top:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:12px;background:var(--surface);}
.db-foot-thumbs{display:flex;gap:6px;flex:1 1 auto;overflow-x:auto;min-width:0;}
.db-foot-thumb{width:32px;height:32px;border-radius:8px;overflow:hidden;flex:0 0 auto;border:1px solid var(--border2);}
.db-foot-thumb img{width:100%;height:100%;object-fit:cover;}
.db-foot-count{font-size:12.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;}

/* ============ DISTRIBUTION ============ */
.opt-list{display:flex;flex-direction:column;gap:8px;}
.opt-card{
  display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--border2);border-radius:var(--r-md);
  padding:12px 14px;background:#fff;text-align:left;
}
.opt-card[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,45,85,.05);}
.opt-card .opt-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border2);flex:0 0 auto;margin-top:1px;position:relative;}
.opt-card[aria-pressed="true"] .opt-dot{border-color:var(--accent);}
.opt-card[aria-pressed="true"] .opt-dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent);}
.opt-card .opt-t{font-size:13.5px;font-weight:700;}
.opt-card .opt-d{font-size:12px;color:var(--text3);margin-top:2px;}
.per-guest-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.math-box{background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);padding:14px 16px;}
.math-line{font-size:14px;font-weight:700;}

/* ============ ADD-ONS ROW (branding + extra videos) ============ */
.addons-row{display:flex;flex-direction:column;gap:10px;}
.addon-item{display:flex;align-items:center;gap:14px;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);padding:14px 16px;flex-wrap:wrap;justify-content:space-between;}
.addon-item .ai-text{flex:1 1 220px;min-width:0;}
.addon-item .ai-t{font-size:13.5px;font-weight:700;}
.addon-item .ai-helper{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.45;}
.yn-toggle{position:relative;flex:0 0 auto;width:84px;height:34px;border-radius:var(--r-full);background:var(--border2);display:flex;align-items:center;padding:2px;cursor:pointer;}
.yn-toggle[aria-checked="true"]{background:rgba(0,200,83,.18);}
.yn-opt{flex:1;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.02em;z-index:1;color:var(--text3);}
.yn-toggle[aria-checked="true"] .yn-yes{color:#fff;}
.yn-toggle[aria-checked="false"] .yn-no{color:var(--text);}
.yn-knob{position:absolute;top:2px;bottom:2px;left:2px;width:40px;border-radius:var(--r-full);background:var(--text3);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease, background .18s ease;}
.yn-toggle[aria-checked="true"] .yn-knob{background:var(--green);transform:translateX(40px);}

/* ============ "SET UP LATER" NOTICE CARD ============ */
.setup-notice-card{
  display:flex;gap:14px;background:linear-gradient(180deg, rgba(157,107,255,.07), var(--card) 55%);
  border:1px solid rgba(157,107,255,.25);border-radius:var(--r-xl);padding:22px 24px;box-shadow:var(--shadow-card);
}
.setup-notice-card .snc-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:rgba(157,107,255,.14);color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.setup-notice-card h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em;}
.setup-notice-card p{font-size:13px;color:var(--text2);line-height:1.6;margin-top:6px;}
.snc-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.snc-pill{font-size:11.5px;font-weight:700;color:var(--purple);background:rgba(157,107,255,.1);border:1px solid rgba(157,107,255,.25);padding:5px 12px;border-radius:var(--r-full);}
@media (max-width:480px){.setup-notice-card{padding:18px;flex-direction:column;}}

/* ============ SETUP HEADER STRIP ============ */
.setup-header-strip{
  background:linear-gradient(135deg, rgba(255,152,0,.08), rgba(255,45,85,.05));
  border:1px solid rgba(255,152,0,.25);border-radius:var(--r-xl);padding:16px 22px;margin-bottom:4px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
}
.setup-header-strip .shs-order{font-size:13.5px;font-weight:700;color:var(--text2);}
.setup-header-strip .shs-paid{color:var(--green);font-weight:800;}
.setup-header-strip .shs-pending{color:var(--accent2);font-weight:800;}
.setup-header-strip .shs-progress{font-size:12.5px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.05em;}

/* ============ SETUP PROGRESS CARD ============ */
#setupProgressList{display:flex;flex-wrap:wrap;gap:6px;}
.sp-item{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:var(--r-full);background:var(--card2);border:1px solid var(--border2);font-size:12px;font-weight:700;color:var(--text2);}
.sp-check{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--text3);flex:0 0 auto;}
.sp-item.done{background:rgba(0,200,83,.08);border-color:rgba(0,200,83,.3);color:var(--text);}
.sp-item.done .sp-check{background:var(--green);border-color:var(--green);color:#fff;}
.save-state{font-size:11.5px;color:var(--text4);text-align:center;min-height:16px;}
.save-state.err{color:var(--accent);font-weight:700;}

.preview-caption{font-size:11.5px;color:var(--text3);text-align:center;margin-top:12px;line-height:1.5;flex:0 0 auto;}

/* ============ BRANDING ============ */
.branding-off-note{background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);padding:12px 14px;font-size:12.5px;color:var(--text3);}
.branding-locked-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:rgba(255,152,0,.08);border:1px solid rgba(255,152,0,.28);border-radius:var(--r-md);padding:12px 14px;font-size:13px;color:var(--text2);font-weight:600;}
.branding-locked-note a{color:var(--accent2);font-weight:800;text-decoration:underline;cursor:pointer;}
.switch{position:relative;width:44px;height:26px;border-radius:var(--r-full);background:var(--border2);flex:0 0 auto;transition:background .2s ease;}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease;}
.switch[aria-checked="true"]{background:var(--accent);}
.switch[aria-checked="true"]::after{transform:translateX(18px);}
#brandingControls{display:flex;flex-direction:column;gap:18px;}
.branding-disabled{opacity:.55;pointer-events:none;}
.locked-disabled{opacity:.55;pointer-events:none;}
.logo-drop{
  border:1.5px dashed var(--border2);border-radius:var(--r-lg);padding:20px;display:flex;align-items:center;gap:14px;
  cursor:pointer;background:var(--card2);
}
.logo-drop:hover{border-color:var(--accent);}
.logo-drop.dragover{border-color:var(--accent);background:rgba(255,45,85,.05);}
.logo-drop .logo-thumb{
  width:56px;height:56px;min-width:56px;max-width:180px;border-radius:var(--r-md);
  border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto;font-size:20px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;
}
.logo-drop .logo-thumb img{width:100%;height:100%;object-fit:contain;}
.logo-drop .logo-txt{font-size:13px;color:var(--text3);}
.logo-drop .logo-txt b{color:var(--text);display:block;font-size:13.5px;margin-bottom:2px;}
.logo-actions{display:flex;gap:8px;}
.corner-toggle,.color-toggle{display:flex;gap:8px;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;}
.checkbox-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);}
.checkbox-row label{font-size:13px;color:var(--text2);line-height:1.5;}

/* ============ GUEST/PRIVACY ============ */
.pref-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);}
.pref-row:last-child{border-bottom:none;padding-bottom:0;}
.pref-row .pr-t{font-size:13.5px;font-weight:700;}
.pref-row .pr-d{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.5;max-width:420px;}
.pref-row.locked{opacity:.55;}
.pref-lock{font-size:11px;color:var(--purple);font-weight:700;margin-top:4px;}

/* ============ STEP 9 — GUEST PAGE PREVIEW (2026-09-18, Guest Mode only) ============ */
.setup-preview-explain{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:14px;}
.setup-preview-phone{display:flex;justify-content:center;padding:8px 0;}
/* NOT `.phone-frame` — that class is `flex:1 1 auto`, meant to grow/shrink along a COLUMN flex
   container's main axis (height, inside `.preview-card`). Reused here inside a plain (row-
   direction) flex row, `flex:1 1 auto` grows it along the ROW axis instead, producing a wide
   landscape box instead of a phone (owner-reported bug). This is its own fixed-aspect box,
   sized by width alone, with no flex participation at all. */
.setup-preview-frame{
  position:relative;width:min(360px,80vw);aspect-ratio:9/19.5;margin:0 auto;
  background:#050505;border:2px solid #2a2a2a;border-radius:26px;padding:9px 7px;
  box-shadow:0 24px 50px rgba(10,10,10,.30);flex:none;
}
.setup-preview-frame::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:var(--r-full);background:#000;border:1px solid #2a2a2a;}
.setup-preview-screen{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#000;}
/* The iframe is a real mobile viewport width (390px, see scaleGuestPreviewIframe() in
   evt-order.js) so guest.html's own responsive CSS renders its phone layout, then scaled down
   with a transform to whatever .setup-preview-screen's actual (much smaller) size is. */
#setupPreviewIframe{display:block;border:0;transform-origin:top left;}
.setup-preview-openfull{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--purple);text-decoration:none;}
.setup-preview-openfull:hover{text-decoration:underline;}

/* ============ BIG SCREEN — TRANSITION PREVIEWS ============ */
.transition-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px;margin-top:4px;}
@media (max-width:640px){.transition-grid{grid-template-columns:1fr;}}
.transition-card{
  border:2px solid var(--border2);border-radius:var(--r-lg);background:#0c0c0c;overflow:hidden;
  text-align:left;padding:0;display:flex;flex-direction:column;width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.transition-card:hover{border-color:#c7c7cd;}
.transition-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 8px 20px rgba(255,45,85,.22);}
.transition-screen-host{position:relative;width:100%;aspect-ratio:16/9;min-width:280px;}
@media (max-width:640px){.transition-screen-host{min-width:0;}}
.transition-label{padding:10px 12px;font-size:13px;font-weight:700;color:#fff;background:#151515;}
.transition-desc{display:block;font-weight:600;font-size:11px;color:#c6c6cc;margin-top:2px;}

/* ============ REVIEW / ACCOUNT / PAYMENT-DEFERRED ============ */
.acct-row{display:flex;gap:10px;flex-wrap:wrap;}
.acct-btn{border:1.5px solid var(--border2);border-radius:var(--r-md);padding:11px 16px;font-size:13.5px;font-weight:700;background:#fff;display:flex;align-items:center;gap:8px;}
.acct-btn:hover{border-color:var(--text);}
.acct-signedin{display:none;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);padding:12px 16px;font-size:13.5px;}
.acct-signedin.show{display:flex;}
.acct-signedin b{font-weight:700;}
.acct-signedin button{margin-left:auto;font-size:12.5px;color:var(--text3);text-decoration:underline;font-weight:600;background:none;border:none;}
/* Read-only receipt email shown for a signed-in account instead of a second
   editable field (owner request 2026-09-19) — matches the input's own box
   so swapping the two doesn't shift layout. */
.acct-readonly-value{border:1.5px solid var(--border2);border-radius:var(--r-md);padding:11px 14px;font-size:14px;font-weight:600;background:var(--card2);color:var(--text2);}
.pay-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--r-lg);padding:16px 18px;
}
.pay-note .pn-icon{flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:rgba(0,200,83,.12);color:var(--green);display:flex;align-items:center;justify-content:center;}
.pay-note p{font-size:13px;color:var(--text2);line-height:1.55;}
.pay-note b{color:var(--text);}
.footline{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--text3);}
.footline a{font-weight:700;text-decoration:underline;color:var(--text2);cursor:pointer;}
.price-footnote{font-size:11.5px;color:var(--text4);margin-top:4px;}

/* ============ RIGHT PANEL ============ */
/* 2026-09-17 revision (owner request), third iteration.
   Attempt 1 (align-self:stretch): .of-right was as tall as the WHOLE grid row, so its own
   sticky-top had no travel distance and it just scrolled away with the page.
   Attempt 2 (align-self:start + max-height + overflow:hidden on .of-right, with a
   ".of-right-scroll" wrapper on `flex:1 1 auto`): the wrapper doesn't reliably shrink below
   its content size with an `auto` flex-basis even with min-height:0 — it claimed the whole
   capped box and .of-right-foot rendered past it, clipped away, on short pages scrolled to
   the very bottom.
   Attempt 3 (.of-right itself as the scroll container, .of-right-foot sticky;bottom:0 inside
   it): fixed the clipping, but introduced a worse bug — a sticky-bottom item inside a
   scroll container that's sitting at scrollTop 0 (nobody has manually scrolled .of-right
   itself) gets pulled UP to overlap whatever is still visually rendered above it in normal
   flow, because nothing has scrolled that content out of the way. On the order stage before
   an order exists (a tall phone-frame + a short "enter your details" note), the summary
   card's "Signature Event package" line rendered directly under the phone preview's overlay
   pills.
   Fixed for real: .of-right-scroll is back, with an explicit `flex-basis:0%` (not `auto`) —
   this is what actually makes flex-shrink/grow correctly divide the FIXED max-height between
   the two children (verified: the 0% basis is what lets the browser compute "how much is
   left after .of-right-foot's own natural size" instead of trying to shrink the scroll area
   down FROM its content size, which is the calculation that silently failed with `auto`).
   .of-right-foot is a plain (non-sticky) flex:0 0 auto item again — it doesn't need position
   tricks now that the scroll wrapper reliably leaves it its own full, unshared space. */
.of-right{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;align-self:start;max-height:calc(100vh - 88px - 16px);overflow:hidden;}
@media (max-width:1023px){.of-right{display:none;}}
.of-right-scroll{flex:1 1 0%;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;}
.of-right-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:14px;background:var(--ink);padding-top:10px;border-radius:var(--r-xl);}
/* 2026-09-18 (owner request): the phone preview is never removed or collapsed on any step, and
   never clipped/scrolled either — it SCALES to the real remaining space. `.preview-card` is a
   plain flex column with no floor of its own; `.phone-frame`'s exact height is computed and
   written by evt-order.js's syncPhoneHeight() from the actual measured layout (this card's real
   available room after the foot, any sibling card, and this card's own padding/gap/extra
   content) rather than a guessed CSS constant — see that function's comment for the full budget
   and why a fixed `calc(100vh - <guess>)` clamp couldn't get Step 1's unscrolled first paint
   right. */
/* 2026-09-18 (owner request, revised): NOT sized by a hard min-height floor any more — a floor
   that doesn't fit forced `.of-right-scroll` to scroll internally, which cut the phone's own
   bottom bezel off and pushed the "Your event" recap out of the initial view entirely (a
   clipped/partially-hidden phone is exactly what "never removed" must not degrade into).
   `.preview-card` is a plain flex column (`min-height:0`, free to be whatever size its content
   needs) and `.phone-frame` gets an explicit `height` written by evt-order.js's
   syncPhoneHeight() — computed from the REAL remaining space inside this card (the right
   column's measured max-height, minus the foot's real size, minus any sibling cards, minus this
   card's own padding/gap/extra content), clamped to [200px, 560px]. Below the 200px floor
   `.of-right-scroll`'s own overflow-y:auto (see RIGHT PANEL CSS) is the last-resort scroll, not
   the default — see syncPhoneHeight()'s own comment for the full budget. */
.preview-card{flex:1 1 auto;min-height:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px;}
.phone-frame{
  position:relative;background:#050505;border:2px solid #2a2a2a;border-radius:26px;padding:9px 7px;
  box-shadow:0 24px 50px rgba(10,10,10,.30);margin:0 auto;
  flex:0 0 auto;height:400px;width:auto;aspect-ratio:9/19.5;max-width:100%;
}
.phone-frame::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:var(--r-full);background:#000;border:1px solid #2a2a2a;}
.phone-screen{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#000;}
.phone-screen video{width:100%;height:100%;object-fit:cover;}
.pv-slot{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-weight:800;line-height:1.2;border-radius:10px;text-shadow:0 1px 3px rgba(0,0,0,.7);transition:opacity .2s ease, width .2s ease, height .2s ease;}
.pv-logo{top:4%;width:26%;aspect-ratio:1/1;font-size:8px;padding:4px;background:rgba(15,15,20,.18);border:1.4px dashed rgba(255,255,255,.85);backdrop-filter:blur(1.5px);}
.pv-logo.corner-left{left:4%;}
.pv-logo.corner-right{right:4%;}
.pv-logo.has-img{border-style:solid;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.9);}
.pv-logo.has-img img{width:100%;height:100%;object-fit:contain;}
.pv-logo.wide-logo{padding:5px 10px;box-sizing:content-box;}
.pv-textbar{
  left:3%;right:3%;top:73%;height:14%;flex-direction:column;gap:2px;padding:4px 6px;justify-content:center;
  background:rgba(15,15,20,.18);border:1.4px dashed rgba(255,255,255,.85);backdrop-filter:blur(1.5px);border-radius:10px;
  font-size:9px;font-weight:700;
}
.pv-textbar .pt1{font-size:9.5px;font-weight:800;}
.pv-textbar .pt2{font-size:7.5px;font-weight:600;opacity:.85;}
.pv-textbar.has-text{border-style:solid;border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.22);backdrop-filter:blur(2px);text-shadow:0 1px 3px rgba(0,0,0,.6);}
.pv-textbar.color-black{color:#0a0a0a;text-shadow:none;}
.pv-textbar.color-black.has-text{background:rgba(255,255,255,.28);}
.pv-logo.pv-dim,.pv-textbar.pv-dim{opacity:.45;}
.thumb-row{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:2px;flex:0 0 auto;}
.thumb-item{position:relative;width:38px;aspect-ratio:9/16;border-radius:7px;overflow:hidden;flex:0 0 auto;border:2px solid transparent;opacity:.85;}
.thumb-item.active{border-color:var(--accent);opacity:1;}
.thumb-item img{width:100%;height:100%;object-fit:cover;}
.thumb-empty{font-size:11.5px;color:var(--text4);margin-top:12px;text-align:center;flex:0 0 auto;}
/* 2026-09-18 (owner request): hidden on short screens to give that line back to the phone —
   part of syncPhoneHeight()'s budget. !important because renderThumbRow() (evt-order.js) sets
   `style.display` inline, which would otherwise beat this rule at every height regardless. */
@media (max-height:800px){.thumb-empty{display:none !important;}}

.event-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;box-shadow:var(--shadow-card);flex:0 0 auto;}
.ec-name{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.ec-meta{font-size:12.5px;color:var(--text3);margin-top:4px;line-height:1.5;}
.ec-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.ec-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-full);background:rgba(157,107,255,.12);color:var(--purple);border:1px solid rgba(157,107,255,.3);}
.event-card.compact{padding:12px 16px;flex:0 0 auto;}
.event-card.compact .summary-title{margin-bottom:8px;}
/* 2026-09-18 (owner request): the row used to force nowrap+overflow:hidden on the WHOLE row,
   which clipped the tier badge itself ("GUEST MODE" → "GUES…") whenever the name pushed it out
   of the available width. Only the name truncates now; the badge row wraps to its own line
   instead of being cut off. */
.ec-line1{display:flex;align-items:center;gap:8px 8px;flex-wrap:wrap;}
.ec-line1 .ec-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ec-line1 .ec-badges{margin-top:0;flex:0 0 auto;gap:5px;flex-wrap:wrap;}
.ec-line1 .ec-badge{padding:3px 8px;font-size:9.5px;white-space:nowrap;}
.ec-line2{font-size:12px;color:var(--text3);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 2026-09-18 (owner request): on short screens the "Your event" recap drops to one line (name +
   badges only) to give that room back to the phone — part of syncPhoneHeight()'s budget. */
@media (max-height:800px){.event-card.compact .ec-line2{display:none;}}

.summary-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px;box-shadow:var(--shadow-card);flex:0 0 auto;}
.summary-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
/* 2026-09-18 (owner request): on short screens the note moves into this tooltip instead of
   being removed — see the @media (max-height:800px) block below. Always in the DOM (title +
   aria-label), just visually hidden until there's no room for the full sentence. */
.summary-note-icon{display:none;flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--border2);color:var(--text3);font-size:11px;line-height:16px;text-align:center;text-transform:none;letter-spacing:0;font-weight:800;cursor:help;}
.summary-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--border);}
.summary-line .sl-label{color:var(--text2);}
.summary-line .sl-edit{font-size:11px;color:var(--purple);font-weight:700;text-decoration:underline;margin-left:6px;cursor:pointer;}
.summary-line .sl-val{font-weight:700;white-space:nowrap;}
.waived-strike{color:var(--text4);font-weight:600;text-decoration:line-through;margin-right:5px;}
.waived-free{color:var(--green);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.03em;}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:4px;}
.summary-total .st-label{font-size:14px;font-weight:800;}
.summary-total .st-val{font-size:26px;font-weight:900;letter-spacing:-.01em;}
.summary-note{font-size:11.5px;color:var(--text4);margin-top:10px;line-height:1.5;}
/* Compact order summary on short screens (owner request 2026-09-18) — tighter rows, and the
   footnote sentence becomes the ⓘ tooltip above instead of its own line. Nothing is removed,
   only reflowed: the same text is still reachable (title/aria-label on .summary-note-icon). */
@media (max-height:800px){
  .summary-card{padding:12px;}
  .summary-title{margin-bottom:8px;}
  .summary-note-icon{display:inline-block;}
  .summary-line{padding:5px 0;}
  .summary-total{padding-top:8px;margin-top:2px;}
  .summary-note{display:none;}
}
.pay-wrap{position:relative;margin-top:14px;}
.pay-missing{
  position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#111;color:#fff;border-radius:var(--r-md);
  padding:12px 14px;font-size:12px;line-height:1.6;opacity:0;pointer-events:none;transition:opacity .15s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.3);z-index:5;
}
.pay-missing b{display:block;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent2);}
.pay-missing.show{opacity:1;pointer-events:auto;}
.field-err.top-err{display:block;margin-top:4px;}

/* ============ MOBILE-ONLY WIDGETS ============ */
/* 2026-09-17 fix: display is governed ONLY by this media query now — JS (buildMobileWidgets())
   toggles the .has-content class to say whether there's anything to show, never an inline
   style. An inline `style.display` would win over this rule at every width, which is exactly
   how the recap used to duplicate itself below the fold on desktop regardless of viewport. */
.mobile-recap{display:none;}
@media (max-width:1023px){
  .mobile-recap.has-content{display:block;max-width:var(--maxw);margin:0 auto;padding:0 24px 20px;}
}
@media (max-width:480px){.mobile-recap.has-content{padding:0 16px 20px;}}

.mobile-sheet{
  display:none;position:fixed;inset:0;z-index:600;background:rgba(10,10,10,.75);backdrop-filter:blur(6px);
  align-items:flex-end;
}
.mobile-sheet.active{display:flex;}
.sheet-inner{background:var(--surface);width:100%;border-radius:24px 24px 0 0;padding:20px 20px 28px;max-height:88vh;overflow-y:auto;}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.sheet-head h3{font-size:16px;font-weight:800;}
.sheet-close{width:32px;height:32px;border-radius:50%;background:var(--card2);border:1px solid var(--border2);font-size:16px;}

.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:300;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border-top:1px solid var(--border);padding:10px 14px;align-items:center;gap:10px;
  box-shadow:0 -8px 24px rgba(0,0,0,.06);
}
@media (max-width:1023px){.mobile-bar.active{display:flex;}}
.mbar-total{flex:0 0 auto;min-width:0;}
.mbar-total .mt-label{font-size:10px;color:var(--text4);font-weight:700;text-transform:uppercase;}
.mbar-total .mt-val{font-size:17px;font-weight:900;white-space:nowrap;}
.mbar-btn{flex:1;min-width:0;padding-left:14px;padding-right:14px;}
.mbar-preview-btn{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--border2);background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text2);
}
.mbar-preview-btn:hover{border-color:var(--text);}

/* ============ CONFIRMATION / ALL-SET ============ */
.confirm-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;}
.confirm-inner{max-width:720px;width:100%;text-align:center;margin:0 auto;}
.confirm-icon{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--green),#00e676);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 16px 36px rgba(0,200,83,.3);}
.confirm-inner h1{font-size:clamp(24px,4vw,32px);font-weight:900;letter-spacing:-.02em;}
.confirm-meta{margin-top:10px;color:var(--text3);font-size:14.5px;line-height:1.6;}
.confirm-order{display:inline-block;margin-top:14px;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-full);padding:8px 18px;font-size:13px;font-weight:800;letter-spacing:.03em;}
.confirm-branding-line{margin-top:12px;font-size:13px;color:var(--text2);font-weight:600;}
.confirm-total-charged{margin-top:14px;font-size:14px;color:var(--text2);}
.confirm-total-charged b{font-size:16px;color:var(--text);}
.confirm-fee-note{font-size:12px;color:var(--text4);font-weight:600;}
.confirm-subnote{max-width:420px;margin:14px auto 0;font-size:13px;color:var(--text3);line-height:1.6;}
.confirm-later-note{margin-top:16px;font-size:12.5px;color:var(--text3);background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);padding:10px 14px;display:inline-block;}
/* Post-payment contact verification (owner request 2026-09-19). */
.verify-card{margin-top:24px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-card);}
.verify-card h3{font-size:15px;font-weight:800;}
.verify-card p{font-size:12.5px;color:var(--text3);margin-top:4px;line-height:1.5;}
.verify-card .verify-method-row{display:flex;gap:8px;margin-top:12px;}
.verify-card .verify-target{margin-top:12px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;}
.verify-card .verify-target a{font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:underline;cursor:pointer;}
.verify-card .verify-target input{border:1.5px solid var(--border2);border-radius:var(--r-md);padding:9px 12px;font-size:14px;}
.verify-card .field{margin-top:14px;}
.verify-card .btn{margin-top:14px;}
.verify-card #verifyResendLink{margin-left:10px;font-size:12.5px;font-weight:700;color:var(--text3);text-decoration:underline;cursor:pointer;}
.verify-card.verified{background:rgba(0,200,83,.06);border-color:rgba(0,200,83,.28);text-align:center;}
.verify-card.verified b{color:var(--green);font-size:14px;}
.verify-card.verified div{font-size:12.5px;color:var(--text3);margin-top:4px;}
.confirm-checklist{text-align:left;margin-top:32px;display:flex;flex-direction:column;gap:14px;}
.cl-item{display:flex;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-card);align-items:flex-start;}
.cl-num{width:30px;height:30px;border-radius:50%;background:var(--card2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;}
.cl-body h4{font-size:14px;font-weight:800;}
.cl-body p{font-size:12.5px;color:var(--text3);margin-top:3px;line-height:1.5;}
.qr-sign{
  margin-top:12px;background:#fff;border:1px solid var(--border2);border-radius:var(--r-md);padding:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;max-width:180px;box-shadow:var(--shadow-card);
}
.qr-sign .qs-logo{font-size:9px;font-weight:800;color:var(--text3);}
.qr-sign .qs-name{font-size:11px;font-weight:800;text-align:center;}
.qr-sign canvas{display:block;}
.qr-sign .qs-cta{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.guest-link-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.guest-link-row input{flex:1 1 200px;min-width:0;border:1.5px solid var(--border2);border-radius:var(--r-md);padding:9px 11px;font-size:12.5px;background:var(--card2);}
.confirm-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px;}
@media (max-width:480px){.confirm-actions .btn{flex:1 1 100%;}}

.not-found-view{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;text-align:center;}
.not-found-view h1{font-size:24px;font-weight:900;}
.not-found-view p{color:var(--text3);margin-top:10px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- Embedded in the planner dashboard (evt-order.js EMBED, 2026-09-19) ----
   The dashboard hosts this page in an iframe that fills its content area; the
   dashboard's own sidebar/topbar are the chrome, so this page's nav is hidden
   and the sticky right panel pins near the top of the frame instead of under
   a nav that is not there. */
html.evt-embed .nav{display:none;}
html.evt-embed .of-right{top:16px;max-height:calc(100vh - 32px);}
html.evt-embed body{background:var(--ink);}

/* ---- Saved payment methods chooser (EvtPayment.chooserHtml) ---- */
.pm-chooser{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.pm-chooser-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.pm-opt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--border2);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;background:var(--card);}
.pm-opt.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,45,85,.10);}
.pm-opt input{accent-color:var(--accent);width:16px;height:16px;margin:0;}
.pm-opt-main{font-size:14px;font-weight:700;color:var(--text);}
.pm-opt-sub{font-size:12px;color:var(--text3);margin-left:auto;}
.pm-default{display:inline-block;font-size:10.5px;font-weight:800;color:var(--green);background:rgba(0,200,83,.10);border-radius:var(--r-full);padding:2px 8px;margin-left:6px;vertical-align:middle;}
.pm-save{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);margin:0 0 12px;cursor:pointer;}
.pm-save input{accent-color:var(--accent);width:16px;height:16px;margin:0;}