/* ==========================================================================
   EventGo Australia — ticket selection, "TIER STUBS"
   (branch eventgo-v3-attendee-conversion-flow)
   --------------------------------------------------------------------------
   Each ticket type is a slim row whose right end is a STUB, separated by a
   perforation. The quantity stepper lives in the stub. Selecting a tier
   wakes a thin HOLOGRAPHIC SECURITY STRIP along the tear line (the Access
   System's violet → blue → teal, opacity only) and the digits roll. The
   summary underneath is the ticket's lower edge; on a phone that edge
   docks to the bottom of the screen as the purchase bar.

   Not a giant cinematic ticket per tier: the Physical Master is a marketing
   object; this is a fast, accessible control that is recognisably EventGo Australia.

   States: available · selected · limit reached · sold out · unavailable ·
   free · price TBA (no tiers). Every state has WORDS, never colour alone.

   The steppers only appear with eg-tickets.js (.eg-c-tix--live). Without
   JavaScript the list still shows every tier and price, and the button
   opens the listing.
   ========================================================================== */

.eg-c-tix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
/* minmax(0, 1fr), never the implicit auto track: an auto track grew to the
   unbreakable 'Get tickets on EventGo Australia' and made the page 377px
   wide on a 320px phone (CLAUDE.md, homepage rules). */
@media (min-width: 1000px) { .eg-c-tix { position: sticky; top: calc(var(--hdr-h) + 1rem); } }
.eg-c-tix__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.eg-c-tix__h { margin: 0; font-size: var(--t-title); letter-spacing: -.03em; }
.eg-c-tix__label { margin: 0; font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); }

.eg-c-tix__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; padding: 0; margin: 0; list-style: none; }

/* ---- a tier ---------------------------------------------------------------- */
.eg-c-tier {
  --stub: 9.5rem;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  min-height: 5.25rem; border-radius: var(--radius-lg); border: 1px solid var(--c-line-strong);
  background: var(--c-ink-soft); overflow: hidden;
}
@media (max-width: 379.98px) { .eg-c-tier { --stub: 8.25rem; } }
.eg-c-tier__main { display: grid; align-content: center; gap: .125rem; padding: .875rem 1rem .875rem 1.125rem; min-width: 0; }
.eg-c-tier__n { margin: 0; font-family: var(--font-ui); font-size: var(--t-body); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.eg-c-tier__note { margin: 0; font-size: .8125rem; color: var(--c-text-2); }
.eg-c-tier__p { margin: .25rem 0 0; }
.eg-c-tier__p b { font-family: var(--font-headline); font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; }

/* The stub, with its tear line and two notches cut out of the edges. */
.eg-c-tier__stub {
  position: relative; display: grid; place-items: center; align-content: center; gap: .375rem;
  padding: .5rem .5rem .5rem .75rem; border-left: 2px dashed var(--c-line-strong);
}
.eg-c-tier::before, .eg-c-tier::after {
  content: ""; position: absolute; right: calc(var(--stub) - .5rem); width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--c-ink); border: 1px solid var(--c-line-strong); z-index: 1;
}
.eg-c-tier::before { top: -.5rem; }
.eg-c-tier::after { bottom: -.5rem; }
/* The security strip: wakes on selection, opacity only. */
.eg-c-tier__stub::before {
  content: ""; position: absolute; left: -2px; top: .5rem; bottom: .5rem; width: 2px;
  background: linear-gradient(180deg, var(--c-violet), var(--c-blue), var(--c-teal));
  opacity: 0;
}
.eg-c-tier__avail { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-3); }
/* Without JavaScript each tier is a plain number field (it is a real GET
   form to /checkout/). With eg-tickets.js the stepper replaces it and keeps
   its value — the field is still what the form submits. */
.eg-c-tier__avail { display: none; }
.eg-c-qty__nojs { display: block; }
.eg-c-qty__in {
  width: 4.5rem; min-height: 48px; padding: .5rem; text-align: center; font: inherit; font-weight: 700; font-size: 1.125rem;
  color: var(--c-text); background: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md);
}
.eg-c-tix--live .eg-c-qty__nojs { display: none; }

/* ---- the stepper ------------------------------------------------------------ */
.eg-c-qty { display: none; }
.eg-c-tix--live .eg-c-qty { display: inline-grid; grid-template-columns: 44px 2.25rem 44px; align-items: center; }
.eg-c-qty__b {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: var(--radius-full); border: 1px solid var(--c-line-strong); background: none; color: var(--c-text); cursor: pointer;
}
.eg-c-qty__b svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.eg-c-qty__b:hover:not(:disabled) { border-color: var(--c-text); }
.eg-c-qty__b:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.eg-c-qty__b:disabled { opacity: .35; cursor: not-allowed; }
.eg-c-qty__v { position: relative; height: 1.75rem; overflow: hidden; text-align: center; font-family: var(--font-headline); font-weight: 800; font-size: 1.375rem; line-height: 1.75rem; font-variant-numeric: tabular-nums; }
.eg-c-qty__v span { display: block; }
@media (min-width: 1000px) and (max-width: 1199.98px) { .eg-c-tier { --stub: 8.75rem; } .eg-c-tix--live .eg-c-qty { grid-template-columns: 40px 2rem 40px; } .eg-c-qty__b { width: 40px; height: 40px; } }
/* Phones: touch targets stay 48px. */
@media (hover: none) and (pointer: coarse) {
  .eg-c-tix--live .eg-c-qty { grid-template-columns: 48px 2rem 48px; }
  .eg-c-qty__b { width: 48px; height: 48px; }
  .eg-c-tier { --stub: 9.75rem; }
}

/* ---- states ------------------------------------------------------------------ */
.eg-c-tier.is-selected { border-color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 7%, var(--c-ink-soft)); }
.eg-c-tier.is-selected .eg-c-tier__stub::before { opacity: 1; }
.eg-c-tier.is-selected::before, .eg-c-tier.is-selected::after { border-color: var(--c-teal); }
.eg-c-tier[data-state="sold-out"], .eg-c-tier[data-state="unavailable"] { background: none; border-style: dashed; }
.eg-c-tier[data-state="sold-out"] .eg-c-tier__n, .eg-c-tier[data-state="sold-out"] .eg-c-tier__p,
.eg-c-tier[data-state="unavailable"] .eg-c-tier__n, .eg-c-tier[data-state="unavailable"] .eg-c-tier__p { color: var(--c-text-3); }
.eg-c-tier[data-state="sold-out"] .eg-c-tier__p b { text-decoration: line-through; text-decoration-thickness: 2px; }
.eg-c-tix--live .eg-c-tier:is([data-state="sold-out"], [data-state="unavailable"]) .eg-c-qty { display: none; }
.eg-c-tier:is([data-state="sold-out"], [data-state="unavailable"]) .eg-c-tier__avail { display: block; color: var(--c-text-2); }
.eg-c-tier:is([data-state="sold-out"], [data-state="unavailable"]) .eg-c-qty__nojs { display: none; }
.eg-c-tier__limit { margin: 0; font-size: .75rem; color: var(--c-text-2); text-align: center; }

/* ---- summary: the ticket's lower edge ----------------------------------------- */
.eg-c-tix__sum {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; padding: 1.25rem; margin-top: .375rem;
  border-radius: var(--radius-lg); border: 1px solid var(--c-line-strong); background: var(--c-ink-soft);
}
.eg-c-tix__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; font-weight: 600; }
.eg-c-tix__total b { font-family: var(--font-headline); font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; }
.eg-c-tix__go { width: 100%; white-space: normal; text-align: center; }
.eg-c-tix__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
/* The breakdown: only the lines that exist, so there is no surprise later. */
.eg-c-tix__break { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; margin: -.25rem 0 0; font-size: var(--t-meta); color: var(--c-text-2); }
.eg-c-tix__break[hidden] { display: none; }
.eg-c-tix__break dt, .eg-c-tix__break dd { margin: 0; }
.eg-c-tix__break dd { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text); font-weight: 600; }
.eg-c-tix__go[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.eg-c-tix__next { display: flex; align-items: center; gap: .625rem; margin: 0; font-size: var(--t-meta); color: var(--c-text-2); }
.eg-c-tix__next b { color: var(--c-text); }
.eg-c-tix__ico {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: var(--radius-full); border: 1px solid var(--c-line-strong); color: var(--c-teal);
}
.eg-c-tix__ico svg { width: .9rem; height: .9rem; }
.eg-c-tix__preview { margin: 0; font-size: .8125rem; color: var(--c-text-3); }

/* Price TBA: no tiers yet. */
.eg-c-tix__tba { display: grid; gap: .75rem; justify-items: start; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px dashed var(--c-line-strong); }
.eg-c-tix__tba p { margin: 0; color: var(--c-text-2); }
.eg-c-tix__tba .eg-c-tix__tba-h { font-family: var(--font-headline); font-weight: 800; font-size: var(--t-card); color: var(--c-text); }

/* ---- the mobile purchase bar: the lower edge of the ticket, docked ----------- */
.eg-c-buybar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem var(--c-gut) calc(.875rem + env(safe-area-inset-bottom));
  background: var(--c-ink-soft); border-top: 1px solid var(--c-line-strong);
  box-shadow: 0 -20px 40px -20px rgb(0 0 0 / .7);
}
/* Perforation along its top edge. */
.eg-c-buybar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-line-strong) 0 8px, transparent 8px 14px);
}
.eg-c-buybar[hidden] { display: none; }
.eg-c-buybar__t { display: grid; margin: 0; min-width: 0; font-size: var(--t-meta); color: var(--c-text-2); }
.eg-c-buybar__t span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eg-c-buybar__t b { font-family: var(--font-headline); font-weight: 800; font-size: 1.375rem; color: var(--c-text); }
.eg-c-buybar__go { flex: none; min-height: 48px; }
@media (min-width: 1000px) { .eg-c-buybar { display: none !important; } }
/* While the bar is showing, the page reserves its height so it never covers
   the last of the content (UI/UX Pro Max: fixed bars must not obscure). */
@media (max-width: 999.98px) { body:has(.eg-c-buybar:not([hidden])) { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); } }

/* ---- motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .eg-c-tier__stub::before { transition: opacity .45s var(--c-ease); }
  .eg-c-qty__b { transition: transform .15s var(--c-ease); }   /* colour changes are instant: only transform and opacity animate */
  .eg-c-qty__b:active:not(:disabled) { transform: scale(.9); }
  .eg-c-qty__v.is-up span { animation: eg-roll-up .28s var(--c-ease); }
  .eg-c-qty__v.is-down span { animation: eg-roll-down .28s var(--c-ease); }
  .eg-c-qty.is-limit { animation: eg-limit .3s ease-in-out; }
  .eg-c-tix__total b.is-roll, .eg-c-buybar__t b.is-roll { animation: eg-roll-up .28s var(--c-ease); }
  .eg-c-buybar { animation: eg-bar-in .35s var(--c-ease); }
}
@keyframes eg-roll-up { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes eg-roll-down { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes eg-limit { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes eg-bar-in { from { transform: translateY(100%); } to { transform: none; } }

/* ==========================================================================
   TICKET DELIVERY V2 — two route cards on the Access Route (Phase 2.1 · Figma 16 C/D)
   --------------------------------------------------------------------------
   Native radios under large cards. The cards' own marks are NODES on one
   route (94-access-route.css draws the route): Email is lit in both options
   because email is included; choosing Email + WhatsApp grows the route on
   to the WhatsApp node — the ticket gained a second destination. The
   selected card also carries a teal edge and its price turns teal.
   Shared by the ticket selector and the checkout (92-checkout.css reuses it).
   ========================================================================== */
.eg-c-dlv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dlv-gap, .625rem); min-width: 0; margin: .25rem 0 0; padding: 0; border: 0; }
.eg-c-dlv__h { position: relative; display: flex; align-items: center; gap: .625rem; padding: 0; margin: 0 0 .75rem; font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); }
/* the route's origin: the ticket's edge, a notch */
.eg-c-dlv__src { flex: none; width: .625rem; height: .625rem; margin-left: calc(1rem + 1.25rem - .3125rem); border-radius: 50%; border: 2px solid var(--c-violet); background: var(--c-ink); box-sizing: border-box; }
.eg-c-dlv__opt { position: relative; display: block; min-width: 0; }
.eg-c-dlv__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; }
.eg-c-dlv__card {
  position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .875rem;
  min-height: 4.75rem; padding: .875rem 1rem; box-sizing: border-box;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); background: var(--c-ink-soft);
}
.eg-c-dlv__card .eg-c-ar-node { background: var(--c-ink-soft); }
.eg-c-dlv__t { display: grid; gap: .125rem; min-width: 0; }
.eg-c-dlv__t b { font-size: var(--t-body); font-weight: 700; line-height: 1.25; }
.eg-c-dlv__t small { font-size: .8125rem; line-height: 1.35; color: var(--c-text-2); }
.eg-c-dlv__p { display: grid; justify-items: end; font-family: var(--font-headline); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eg-c-dlv__p small { font-family: var(--font-ui); font-weight: 600; font-size: .6875rem; letter-spacing: .02em; color: var(--c-text-2); }
.eg-c-dlv__in:checked + .eg-c-dlv__card { border-color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 8%, var(--c-ink-soft)); }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-ar-node { background: color-mix(in srgb, var(--c-teal) 8%, var(--c-ink-soft)); }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-dlv__p { color: var(--c-teal); }
.eg-c-dlv__in:focus-visible + .eg-c-dlv__card { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (hover: hover) { .eg-c-dlv__opt:hover .eg-c-dlv__card { border-color: var(--c-text-2); } .eg-c-dlv__opt:hover .eg-c-dlv__in:checked + .eg-c-dlv__card { border-color: var(--c-teal); } }
.eg-c-dlv__fee {
  margin: 0; padding: .75rem 1rem .75rem 4.375rem; border-radius: var(--radius-md); font-size: var(--t-meta); font-weight: 600;
  color: var(--c-text); background: color-mix(in srgb, var(--c-teal) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--c-teal) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.eg-c-dlv__fee[hidden] { display: none; }
@media (max-width: 379.98px) {
  .eg-c-dlv__card { gap: .625rem; padding: .75rem .875rem; }
  .eg-c-dlv { --rx: calc(.875rem + 1.25rem); }
  .eg-c-dlv__src { margin-left: calc(.875rem + 1.25rem - .3125rem); }
  .eg-c-dlv__fee { padding-left: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .eg-c-dlv__card { transition: transform .15s var(--c-ease); }
  .eg-c-dlv__in:active + .eg-c-dlv__card { transform: scale(.99); }
  .eg-c-dlv__fee:not([hidden]) { animation: eg-roll-up .3s var(--c-ease); }
}
}