/* ============================================================
   events.css — Event management + paid registration surfaces
   Inner Join Technologies · built on the IJT design tokens.

   Scope: Events list, Event detail, Registration (incl. inline
   Stripe Elements payment), and the three confirmation pages.
   Loaded AFTER page.css so it can lean on shared primitives
   (.wrap, .section, .btn, .field, .bloghead, .crumb, .tstatus,
   .checklist, .slcta, .faq) rather than restating them.

   Every value is a design-system token. No new colors.
   Component inventory (each repeats with dynamic data):
     .evcard      event card (list page)
     .evbar       filter / sort toolbar
     .evfacts     date / time / location fact list
     .evcap       capacity + registration status indicator
     .sesrow      agenda session row
     .spkcard     speaker card
     .sponsors    sponsor logo row
     .pass        pass / ticket option (radio card)
     .seschk      individual-session checkbox row
     .paybox      inline card payment section
     .evalert     inline status / error banner
     .regsum      sticky order summary
     .confirm     confirmation header + recap + QR
   ============================================================ */

/* ---------- small shared utilities used by these pages ---------- */
.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; }
.linkbtn { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.field-legend { padding: 0; }
.field code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--ink-100); border-radius: 3px; padding: 1px 4px; }
.regfield-note code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--ink-100); border-radius: 3px; padding: 1px 4px; }

/* ---------- shared: functional page header band ---------- */
/* Reuses .bloghead's charcoal gradient; tighter for utility pages. */
.evhead { padding: 128px 0 52px; }
.evhead h1 { max-width: 24ch; }
.evhead__row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.evhead__meta { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 18px; }
.evhead__fact { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: rgba(255,255,255,.84); }
.evhead__fact svg { width: 17px; height: 17px; color: var(--ijt-orange); flex: none; }
.evhead__fact strong { font-weight: 500; color: #fff; }

/* ---------- event type / status badges ---------- */
.evbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.evbadge svg { width: 13px; height: 13px; }
.evbadge--inperson { color: var(--orange-700); background: var(--orange-100); }
.evbadge--virtual { color: var(--blue-700); background: var(--blue-100); }
.evbadge--hybrid { color: var(--ink-700); background: var(--ink-100); }
.evbadge--past { color: var(--ink-500); background: var(--ink-100); }
.evbadge--free { color: var(--ink-900); background: #fff; border: 1px solid var(--ink-300); }
.evbadge--onlight { background: rgba(255,255,255,.14); color: #fff; }

/* ============================================================
   1. EVENTS LIST
   ============================================================ */
.evbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.evbar__tabs { display: flex; gap: 6px; background: var(--ink-100); padding: 5px; border-radius: var(--r-pill); }
.evbar__tab { font: 500 14px/1 var(--font-sans); color: var(--ink-500); background: none; border: 0; padding: 10px 20px; border-radius: var(--r-pill); cursor: pointer; transition: all .16s cubic-bezier(.4,0,.2,1); }
.evbar__tab:hover { color: var(--ink-900); }
.evbar__tab[aria-selected="true"] { background: #fff; color: var(--ink-900); font-weight: 700; box-shadow: var(--shadow-sm); }
.evbar__spacer { flex: 1 1 auto; }
.evbar select { font-family: var(--font-sans); font-size: 14.5px; padding: 11px 14px; padding-right: 34px; border: 1px solid var(--ink-300); border-radius: 10px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 11px center/15px; color: var(--ink-900); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.evbar select:focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
.evbar__count { font-size: 14px; color: var(--ink-500); }

/* month grouping heading */
.evmonth { display: flex; align-items: center; gap: 16px; margin: 44px 0 22px; }
.evmonth:first-of-type { margin-top: 0; }
.evmonth h2 { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.evmonth .rule { flex: 1; height: 1px; background: var(--ink-200); }

.evgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* --- .evcard : one event. Repeats per event record. --- */
.evcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1); }
.evcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.evcard__thumb { position: relative; aspect-ratio: 16/9; background: var(--ink-100); overflow: hidden; }
.evcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder when an event has no image record */
.evcard__thumb--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ink-100) 0%, #E9EBEF 100%); }
.evcard__thumb--ph svg { width: 42px; height: 42px; color: var(--ink-300); }
.evcard__date { position: absolute; top: 14px; left: 14px; background: #fff; border-radius: 11px; box-shadow: var(--shadow-md); padding: 8px 12px 9px; text-align: center; min-width: 58px; }
.evcard__date .m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ijt-orange); }
.evcard__date .d { display: block; font-size: 22px; font-weight: 700; line-height: 1.05; color: var(--ink-900); }
.evcard__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; gap: 12px; }
.evcard__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.evcard__title { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink-900); margin: 0; text-wrap: pretty; }
.evcard__title a { color: inherit; text-decoration: none; }
.evcard__title a:hover { color: var(--ijt-orange); }
.evcard__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-500); margin: 0; }
.evcard__facts { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
.evcard__facts li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-700); line-height: 1.45; }
.evcard__facts svg { width: 16px; height: 16px; color: var(--ink-400); flex: none; margin-top: 1px; }
.evcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ink-100); }
.evcard__price { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.evcard__price small { font-weight: 400; font-size: 13px; color: var(--ink-400); }
.evcard__link { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--ijt-orange); text-decoration: none; }
.evcard__link svg { width: 16px; height: 16px; transition: transform .16s cubic-bezier(.4,0,.2,1); }
.evcard__link:hover svg { transform: translateX(3px); }
.evcard--past { opacity: .72; }
.evcard--past:hover { opacity: 1; }

.evempty { text-align: center; padding: 76px 24px; background: var(--canvas); border: 1px dashed var(--ink-300); border-radius: var(--r-lg); }
.evempty svg { width: 40px; height: 40px; color: var(--ink-300); }
.evempty h3 { font-size: 19px; font-weight: 700; color: var(--ink-900); margin: 16px 0 8px; }
.evempty p { font-size: 15px; color: var(--ink-500); margin: 0 auto; max-width: 42ch; line-height: 1.6; }

@media (max-width: 1000px) { .evgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) {
  .evgrid { grid-template-columns: 1fr; gap: 20px; }
  .evbar__tabs { width: 100%; }
  .evbar__tab { flex: 1; padding: 10px 8px; }
  .evbar select { flex: 1; }
}

/* ============================================================
   2. EVENT DETAIL
   ============================================================ */
.evdetail { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 48px; align-items: start; }
.evshot { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; margin-bottom: 42px; }

.evsec { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--ink-200); }
.evsec:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.evsec > h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); margin: 0 0 20px; }
.evsec > p { font-size: 16.5px; line-height: 1.75; color: var(--ink-700); margin: 0 0 16px; }
.evsec > p:last-child { margin-bottom: 0; }

/* --- .evfacts : date / time / location. Also used in the sidebar. --- */
.evfacts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.evfacts li { display: flex; gap: 14px; }
.evfacts__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--orange-100); color: var(--orange-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.evfacts__ic svg { width: 19px; height: 19px; }
.evfacts__ic.b { background: var(--blue-100); color: var(--blue-600); }
.evfacts dt, .evfacts__k { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); }
.evfacts__v { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink-900); line-height: 1.45; margin-top: 3px; }
.evfacts__note { display: block; font-size: 13.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.5; }
.evfacts a { color: var(--link); }

/* --- .evcap : capacity / registration status --- */
.evcap { background: var(--canvas); border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: 16px 18px; }
.evcap__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.evcap__lead { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.evcap__of { font-size: 13px; color: var(--ink-500); }
.evcap__bar { height: 7px; border-radius: var(--r-pill); background: var(--ink-200); overflow: hidden; margin-top: 11px; }
.evcap__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ijt-orange); }
.evcap--low .evcap__lead { color: var(--orange-700); }
.evcap--full .evcap__fill { background: var(--ink-400); }
.evcap--full .evcap__lead { color: var(--ink-700); }
.evcap__note { font-size: 13px; color: var(--ink-500); margin: 10px 0 0; line-height: 1.5; }

/* --- .sesrow : agenda session. Repeats per session record. --- */
.agenda { display: flex; flex-direction: column; }
.agenda__day { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ijt-orange); margin: 26px 0 12px; }
.agenda__day:first-child { margin-top: 0; }
.sesrow { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 22px; padding: 20px 0; border-top: 1px solid var(--ink-100); }
.sesrow:first-of-type { border-top: 0; padding-top: 0; }
.sesrow__time { font-size: 14px; font-weight: 700; color: var(--ink-900); line-height: 1.4; }
.sesrow__time small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-400); margin-top: 2px; }
.sesrow__title { font-size: 16.5px; font-weight: 700; color: var(--ink-900); margin: 0; line-height: 1.35; }
.sesrow__by { font-size: 14px; color: var(--ink-500); margin: 6px 0 0; }
.sesrow__by strong { font-weight: 500; color: var(--ink-700); }
.sesrow__desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-500); margin: 8px 0 0; }
.sesrow__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.track { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-sm); background: var(--ink-100); color: var(--ink-700); }
.track--o { background: var(--orange-100); color: var(--orange-700); }
.track--b { background: var(--blue-100); color: var(--blue-700); }

/* --- .spkcard : speaker bio. Repeats per speaker record. --- */
.spkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.spkcard { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.spkcard__head { display: flex; align-items: center; gap: 18px; }
.spkcard__photo { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ink-100); }
/* Initials placeholder when a speaker has no photo record */
.spkcard__photo--ph { display: inline-flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; color: var(--ink-400); }
.spkcard h3 { font-size: 16.5px; font-weight: 700; color: var(--ink-900); margin: 0; line-height: 1.3; }
.spkcard__role { font-size: 13.5px; color: var(--ijt-orange); font-weight: 500; margin: 4px 0 0; }
.spkcard__bio { font-size: 14px; line-height: 1.6; color: var(--ink-500); margin: 10px 0 0; }

/* --- .sponsors : logo row --- */
.sponsors { display: flex; flex-wrap: wrap; gap: 14px; }
.sponsor { flex: 1 1 160px; max-width: 210px; height: 88px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: 16px; }
.sponsor img { max-width: 100%; max-height: 46px; object-fit: contain; filter: grayscale(1); opacity: .72; }
/* Text placeholder until sponsor logo assets are supplied */
.sponsor span { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); text-align: center; line-height: 1.35; }
.sponsors__tier { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 12px; }
.sponsors__tier + .sponsors { margin-bottom: 24px; }

/* --- registration rail (sticky on desktop) --- */
.evrail { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 20px; }
.evrail__card { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 26px 24px; }
.evrail__price { display: flex; align-items: baseline; gap: 9px; }
.evrail__price b { font-size: 30px; font-weight: 700; color: var(--ink-900); line-height: 1; letter-spacing: -.02em; }
.evrail__price span { font-size: 14px; color: var(--ink-500); }
.evrail__from { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 8px; }
.evrail .btn { width: 100%; justify-content: center; margin-top: 20px; }
.evrail__fine { font-size: 12.5px; color: var(--ink-400); line-height: 1.5; margin: 14px 0 0; text-align: center; }
.evrail__divider { height: 1px; background: var(--ink-200); margin: 22px 0; }

@media (max-width: 980px) {
  .evdetail { grid-template-columns: 1fr; gap: 40px; }
  .evrail { position: static; }
  .spkgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sesrow { grid-template-columns: 1fr; gap: 8px; }
  .sesrow__time small { display: inline; margin-left: 8px; }
}

/* ============================================================
   3. REGISTRATION FORM (single continuous flow)
   ============================================================ */
.reglayout { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 44px; align-items: start; }
.regform { display: flex; flex-direction: column; gap: 22px; }

/* numbered form step card — a section of the ONE form, not a page */
.regstep { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px 28px 30px; }
.regstep__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.regstep__n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink-900); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.regstep__head h2 { font-size: 19px; font-weight: 700; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.regstep__head p { font-size: 13.5px; color: var(--ink-500); margin: 3px 0 0; }
.regstep--muted { background: var(--canvas); box-shadow: none; }
.reggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reggrid .field--full { grid-column: 1/-1; }
.field .hint { font-size: 12.5px; color: var(--ink-400); line-height: 1.5; }
.field .req { color: var(--ijt-orange); }
.field select, .field input[type="tel"] { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--ink-300); border-radius: 10px; outline: none; color: var(--ink-900); background: #fff; }
.field select:focus, .field input[type="tel"]:focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
/* dynamic custom-field group: checkbox / radio set */
.optset { display: flex; flex-direction: column; gap: 10px; }
.optrow { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink-700); line-height: 1.45; cursor: pointer; }
.optrow input { margin: 2px 0 0; accent-color: var(--ijt-orange); width: 17px; height: 17px; flex: none; }
.regfield-note { font-size: 12.5px; color: var(--ink-400); border-left: 2px solid var(--ink-200); padding-left: 12px; margin: 0; line-height: 1.55; }

/* --- .pass : pass / ticket option. Repeats per pass record. --- */
.passlist { display: flex; flex-direction: column; gap: 12px; }
.pass { display: block; position: relative; border: 2px solid var(--ink-200); border-radius: var(--r-md); padding: 18px 20px; cursor: pointer; transition: border-color .16s cubic-bezier(.4,0,.2,1), background .16s cubic-bezier(.4,0,.2,1); }
.pass:hover { border-color: var(--ink-300); }
.pass__top { display: flex; align-items: flex-start; gap: 14px; }
.pass input { margin: 3px 0 0; accent-color: var(--ijt-orange); width: 19px; height: 19px; flex: none; }
.pass__main { flex: 1; min-width: 0; }
.pass__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16.5px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.pass__desc { font-size: 14px; line-height: 1.6; color: var(--ink-500); margin: 6px 0 0; }
.pass__incl { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pass__incl li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-700); line-height: 1.45; }
.pass__incl svg { width: 15px; height: 15px; color: var(--success, #2F8F4E); flex: none; margin-top: 2px; }
.pass__price { text-align: right; flex: none; }
.pass__price b { display: block; font-size: 22px; font-weight: 700; color: var(--ink-900); line-height: 1; letter-spacing: -.01em; }
.pass__price small { display: block; font-size: 12px; color: var(--ink-400); margin-top: 4px; }
.pass__avail { font-size: 12.5px; font-weight: 500; color: var(--ink-500); margin: 12px 0 0; display: flex; align-items: center; gap: 7px; }
.pass__avail svg { width: 14px; height: 14px; }
.pass__avail.is-low { color: var(--orange-700); }
.pass:has(input:checked) { border-color: var(--ijt-orange); background: color-mix(in srgb, var(--orange-100) 34%, #fff); }
.pass:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--blue-100); }
.pass.is-soldout { cursor: not-allowed; background: var(--canvas); border-style: dashed; }
.pass.is-soldout .pass__name, .pass.is-soldout .pass__price b { color: var(--ink-400); }
.pass.is-soldout .pass__avail { color: var(--danger); }

/* --- .seschk : individual session pick. Repeats per session. --- */
.seschks { display: flex; flex-direction: column; gap: 2px; }
.seschk { display: grid; grid-template-columns: auto 96px minmax(0,1fr); gap: 14px; align-items: start; padding: 14px 12px; border-radius: var(--r-md); cursor: pointer; transition: background .14s cubic-bezier(.4,0,.2,1); }
.seschk:hover { background: var(--canvas); }
.seschk input { margin: 2px 0 0; accent-color: var(--ijt-orange); width: 17px; height: 17px; }
.seschk__time { font-size: 13.5px; font-weight: 700; color: var(--ink-700); line-height: 1.4; }
.seschk__title { font-size: 15px; font-weight: 500; color: var(--ink-900); line-height: 1.4; }
.seschk__by { font-size: 13px; color: var(--ink-400); margin: 3px 0 0; }
.seschk:has(input:checked) { background: color-mix(in srgb, var(--orange-100) 40%, #fff); }
.seschk:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.seschk__cap { font-size: 12.5px; color: var(--ink-400); margin-top: 3px; }

/* ---------- .paybox : INLINE card payment ----------
   Appears in-page below pass selection when a paid pass is chosen.
   Never navigates away. Stripe Elements mounts into [data-stripe-*]. */
.paybox { border: 2px solid var(--ink-900); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.paybox__head { display: flex; align-items: center; gap: 12px; background: var(--ink-900); color: #fff; padding: 16px 22px; }
.paybox__lock { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.paybox__lock svg { width: 17px; height: 17px; color: var(--ijt-orange); }
.paybox__head h2 { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
.paybox__head p { font-size: 12.5px; color: rgba(255,255,255,.68); margin: 2px 0 0; }
.paybox__body { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.paybox__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.paybox__grid .field--full { grid-column: 1/-1; }
/* expiry + security code + billing ZIP share one row at card-field widths */
.paybox__pair { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; grid-column: 1/-1; align-items: start; }

/* Stripe Elements mount point — styled to match .field inputs so the
   iframe'd card field reads as a native part of the form.
   Bind Elements appearance API to these same tokens. */
.stripefield { font-family: var(--font-sans); font-size: 15px; padding: 13px 14px; border: 1px solid var(--ink-300); border-radius: 10px; background: #fff; min-height: 48px; transition: border-color .14s, box-shadow .14s; }
.stripefield.StripeElement--focus, .stripefield.is-focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
.stripefield.StripeElement--invalid, .stripefield.is-invalid { border-color: var(--danger); }
/* Static visual stand-in shown in this mockup only — remove on implementation */
.stripefield--mock { display: flex; align-items: center; gap: 10px; color: var(--ink-400); }
.stripefield--mock .dots { letter-spacing: .18em; }
.stripefield--mock svg { width: 24px; height: 17px; flex: none; }

.paybox__trust { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--ink-200); background: var(--canvas); padding: 14px 22px; }
.paybox__msg { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.paybox__msg svg { width: 15px; height: 15px; color: var(--success, #2F8F4E); flex: none; }
.paybox__brand { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--ink-400); white-space: nowrap; }
.paybox__brand svg { width: 15px; height: 15px; }
.cardmarks { display: flex; align-items: center; gap: 7px; }
.cardmarks span { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--ink-500); background: #fff; border: 1px solid var(--ink-200); border-radius: 4px; padding: 4px 6px; }

/* ---------- .evalert : inline status / error banner ----------
   Rendered adjacent to the section it concerns; never replaces the form. */
.evalert { display: flex; gap: 13px; padding: 15px 17px; border-radius: var(--r-md); border: 1px solid; font-size: 14px; line-height: 1.55; }
.evalert[hidden] { display: none; } /* .evalert's own display:flex otherwise wins over the [hidden] UA rule at equal specificity */
.evalert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.evalert strong { display: block; font-weight: 700; margin-bottom: 2px; }
.evalert p { margin: 0; }
.evalert a { color: inherit; font-weight: 700; }
.evalert--error { background: #FDF1EC; border-color: #F3C9B8; color: #8A2F09; }
.evalert--error svg { color: var(--danger); }
.evalert--warn { background: #FDF7E6; border-color: #F0DFAE; color: #7A5B06; }
.evalert--warn svg { color: var(--warning); }
.evalert--info { background: var(--blue-100); border-color: var(--blue-300); color: var(--blue-700); }
.evalert--info svg { color: var(--blue-600); }
.evalert--success { background: #EDF7F0; border-color: #B9DCC5; color: #1F6B39; }
.evalert--success svg { color: var(--success, #2F8F4E); }
.field.is-invalid .field-error { display: block; }

/* ---------- submit row + inline processing state ---------- */
.regsubmit { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.regsubmit__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.regsubmit .btn { flex: 1 1 260px; justify-content: center; }
.regsubmit__total { font-size: 14px; color: var(--ink-500); }
.regsubmit__total b { display: block; font-size: 22px; font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; }
.regsubmit__fine { font-size: 12.5px; color: var(--ink-400); line-height: 1.55; margin: 0; }
.regsubmit__fine a { color: var(--link); }
/* inline status area — no full-page transition */
.paystatus { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 500; color: var(--ink-700); }
.paystatus[hidden] { display: none; } /* same [hidden]-vs-display:flex specificity fix as .evalert */
.spin { width: 17px; height: 17px; border: 2px solid var(--ink-200); border-top-color: var(--ijt-orange); border-radius: 50%; animation: evspin .7s linear infinite; flex: none; }
@keyframes evspin { to { transform: rotate(360deg); } }
.btn.is-busy { pointer-events: none; opacity: .78; }
.btn .btn__spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: evspin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spin, .btn__spin { animation-duration: 2s; } }

/* --- .regsum : sticky order summary --- */
.regsum { position: sticky; top: 108px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.regsum__ev { padding: 20px 22px; border-bottom: 1px solid var(--ink-200); }
.regsum__ev h2 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; line-height: 1.35; }
.regsum__ev ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.regsum__ev li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-500); line-height: 1.45; }
.regsum__ev svg { width: 15px; height: 15px; color: var(--ink-400); flex: none; margin-top: 1px; }
.regsum__body { padding: 20px 22px; }
.regsum__k { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 12px; }
.regsum__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-700); padding: 7px 0; }
.regsum__line span:last-child { font-weight: 500; color: var(--ink-900); white-space: nowrap; }
.regsum__line--sub { font-size: 13px; color: var(--ink-400); padding: 3px 0 3px 12px; }
.regsum__none { font-size: 13.5px; color: var(--ink-400); line-height: 1.55; margin: 0; }
.regsum__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ink-200); margin-top: 14px; padding-top: 16px; }
.regsum__total span { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.regsum__total b { font-size: 24px; font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; }
/* reservation hold timer */
.regsum__hold { display: flex; align-items: center; gap: 9px; background: var(--canvas); border-top: 1px solid var(--ink-200); padding: 13px 22px; font-size: 12.5px; color: var(--ink-500); line-height: 1.45; }
.regsum__hold svg { width: 15px; height: 15px; color: var(--ink-400); flex: none; }
.regsum__hold b { color: var(--ink-900); font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .reglayout { grid-template-columns: 1fr; gap: 28px; }
  .regsum { position: static; order: -1; }
}
@media (max-width: 620px) {
  /* Inline card fields stack full width on small screens — expiry/CVC
     stay side by side so the numeric keypad flow is uninterrupted. */
  .reggrid, .paybox__grid { grid-template-columns: 1fr; }
  /* keep expiry + CVC side by side so the numeric keypad flow holds;
     ZIP drops to its own full-width row beneath them */
  .paybox__pair { grid-template-columns: 1fr 1fr; }
  .paybox__pair .field--zip { grid-column: 1/-1; }
  .regstep, .regsubmit { padding: 22px 18px 24px; }
  .paybox__body { padding: 20px 16px; }
  .paybox__head { padding: 14px 16px; }
  .paybox__trust { padding: 13px 16px; }
  .pass { padding: 16px 15px; }
  .pass__top { flex-wrap: wrap; }
  .pass__price { text-align: left; width: 100%; padding-left: 30px; }
  .pass__price b { display: inline; font-size: 18px; }
  .pass__price small { display: inline; margin-left: 6px; }
  .seschk { grid-template-columns: auto minmax(0,1fr); }
  .seschk__time { grid-column: 2; }
  .regsubmit .btn { flex: 1 1 100%; }
}

/* ============================================================
   4-6. CONFIRMATION + CANCELLATION
   ============================================================ */
.confirm { max-width: 760px; margin: 0 auto; }
.confirm--narrow { max-width: 560px; }
.confirm__head { text-align: center; padding: 8px 0 36px; }
.confirm__mark { width: 68px; height: 68px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 22px; color: #fff; background: var(--success, #2F8F4E); }
.confirm__mark svg { width: 32px; height: 32px; }
.confirm__mark--neutral { background: var(--ink-200); color: var(--ink-500); }
.confirm__head h1 { font-size: clamp(27px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); margin: 0; line-height: 1.15; }
.confirm__head p { font-size: 16.5px; line-height: 1.65; color: var(--ink-500); margin: 14px auto 0; max-width: 52ch; }
.confirm__head p b { color: var(--ink-900); font-weight: 500; }

.recap { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.recap__head { display: flex; gap: 20px; align-items: flex-start; padding: 24px 26px; border-bottom: 1px solid var(--ink-200); }
.recap__head img { width: 116px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-md); flex: none; background: var(--ink-100); }
.recap__head h2 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 0 0 12px; line-height: 1.3; letter-spacing: -.01em; }
.recap__body { padding: 24px 26px; }
.recap__sec { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--ink-100); }
.recap__sec:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.recap__k { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 14px; }
.recap__line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--ink-700); padding: 6px 0; }
.recap__line b { font-weight: 500; color: var(--ink-900); text-align: right; }
.recap__line--total { border-top: 1px solid var(--ink-200); margin-top: 10px; padding-top: 14px; font-weight: 700; color: var(--ink-900); }
.recap__line--total b { font-size: 18px; font-weight: 700; }
.recap__id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--ink-700); background: var(--ink-100); border-radius: var(--r-sm); padding: 3px 8px; }

/* QR check-in placeholder */
.qrpanel { display: flex; gap: 24px; align-items: center; background: var(--canvas); border-top: 1px solid var(--ink-200); padding: 24px 26px; }
.qrbox { width: 132px; height: 132px; flex: none; border-radius: var(--r-md); background: #fff; border: 1px solid var(--ink-200); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-300); text-align: center; }
.qrbox svg { width: 52px; height: 52px; }
.qrbox small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.qrpanel h3 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0 0 8px; }
.qrpanel p { font-size: 14px; line-height: 1.6; color: var(--ink-500); margin: 0; }

/* add-to-calendar + secondary actions */
.calrow { display: flex; flex-wrap: wrap; gap: 10px; }
.calbtn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--ink-900); background: #fff; border: 1px solid var(--ink-300); border-radius: var(--r-pill); padding: 11px 18px; text-decoration: none; transition: all .16s cubic-bezier(.4,0,.2,1); }
.calbtn:hover { border-color: var(--ink-900); background: var(--ink-100); }
.calbtn svg { width: 16px; height: 16px; color: var(--ink-500); }
.confirm__next { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.confirm__next li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.6; color: var(--ink-700); }
.confirm__next svg { width: 18px; height: 18px; color: var(--ijt-orange); flex: none; margin-top: 2px; }
.confirm__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.confirm__foot p { font-size: 13px; color: var(--ink-400); margin: 0; line-height: 1.55; }
.cancel-link { font-size: 13.5px; color: var(--ink-500); text-decoration: underline; text-underline-offset: 3px; }
.cancel-link:hover { color: var(--danger); }

@media (max-width: 620px) {
  .recap__head { flex-direction: column; gap: 16px; padding: 20px; }
  .recap__head img { width: 100%; }
  .recap__body, .qrpanel { padding: 20px; }
  .qrpanel { flex-direction: column; text-align: center; }
  .recap__line { flex-direction: column; gap: 2px; }
  .recap__line b { text-align: left; }
  .calbtn { flex: 1 1 100%; justify-content: center; }
}