/* The customer pages' look (booking portal, payment page, community resale): the same white-and-pink, printed-ticket
   style as the seller website. Loaded after each page's own styles, so it only restyles them. */
[hidden] { display: none !important; }
:root { --bg: #fff5f8; --fg: #2a1620; --muted: #7a6470; --card: #ffffff; --accent: #d6336c; --accent-fg: #ffffff;
        --danger: #c0291a; --line: #2a1620; --shadow: #f7b6cb; color-scheme: light; }
body { font: 16px/1.55 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--fg);
       background-image: radial-gradient(rgba(214,51,108,.10) 1px, transparent 1px); background-size: 14px 14px; }
h1 { font: 800 30px/1.15 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.02em; margin: 10px 0 6px; }
h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; }
.sub { color: var(--muted); }

/* boxes: white, dark outline, rounded corners, pink offset shadow */
.opt, .summary, .evcard, .cat, .lot, .mitem, .terms, .nostock, .mtotal, .info, .empty, .done, .lst, .card, .timer, .switch {
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 4px 4px 0 var(--shadow); }
.opt { margin-bottom: 14px; }
.opt[aria-checked="true"], .lot.on, .lst[aria-checked="true"] { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); }
.opt::after { border-color: var(--line); }
.opt[aria-checked="true"]::after { box-shadow: inset 0 0 0 4px #fff; }
.opt b, .cat b, .evcard b, .lst b { font-weight: 700; }
.catbody .lot { box-shadow: none; }
.evcard .cover { border-radius: 12.5px 12.5px 0 0; }   /* (the cover runs to the card's edges) */

/* choices and fields */
.chip { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.evcard .chip { background: #fff; }
.evcard .chip[aria-checked="true"], .evcard .chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip[aria-checked="true"] small, .chip[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.lot .picks button { border-radius: 10px; border: 1.5px solid var(--line); }
input, select, textarea { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--line); box-shadow: 3px 3px 0 var(--accent); }
.agree input { accent-color: var(--accent); }

/* buttons */
#next { border-radius: 12px; border: 1.5px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); font-weight: 700; font-size: 16px;
        background: var(--accent); color: #fff; }
.btn2 { border-radius: 12px; border: 1.5px solid var(--line); color: var(--fg); background: #fff; box-shadow: 3px 3px 0 var(--shadow); }
.back { color: var(--accent); font-weight: 600; }
.stepper button { background: #fff; border: 1.5px solid var(--line); }
.mstep button { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
.total { border-top: 1.5px dashed var(--line); }

/* order pages (merch & locker, Help-to-Buy orders) and the delivery page */
.btn { border-radius: 12px; border: 1.5px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); font-weight: 700;
       background: var(--accent); color: #fff; }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
.btn.ghost { background: #fff; color: var(--fg); }
.btn.danger { background: var(--danger); color: #fff; }
.item, .quote, .pin { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 4px 4px 0 var(--shadow); }
.status { background: #fff0f5; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 10px; font-weight: 700; }
.pin { color: var(--accent); }
.chk input, input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.sz { border-top-color: rgba(42,22,32,.18); }
.shoot { border-radius: 12px; border: 1.5px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); background: var(--accent); color: #fff; }
.test { border-radius: 10px; border: 1.5px solid var(--line); }
img#prev, img#lockPrev { border: 1.5px solid var(--line); border-radius: 10px; }

/* payment page */
#form { border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 4px 4px 0 var(--shadow); }
.pm { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
.pm:hover, .pm:focus-visible { border-color: var(--accent); }
main > button:not(.link), .switch button:not(.pm):not(.link) { border-radius: 12px; border: 1.5px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }