/* ==========================================================================
   LTickets storefront — production page, booking, order/tickets, my tickets.
   Builds on main.css tokens (dark premium theatre theme). Static and calm:
   no entrance animation beyond the site-wide .reveal; the only motion is the
   payment spinner (disabled by prefers-reduced-motion in main.css).
   ========================================================================== */

/* ------------------------------------------------------------- utilities */
.tk-narrow { max-width: 980px; }
.tk-gold { color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 1.12em; }
.tk-break { overflow-wrap: anywhere; }
.tk-link {
    color: var(--accent-alt);
    text-decoration: underline;
    text-decoration-color: rgba(255, 78, 84, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--t-fast);
}
.tk-link:hover { text-decoration-color: currentColor; }
.tk-book [hidden],
.tk-order [hidden] { display: none !important; }

/* ============================================================ hero ===== */
.tk-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.8rem, 1rem + 3.5vw, 4.2rem) clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
    border-bottom: 1px solid var(--hairline);
}
/* Static, blurred wash of the poster behind the masthead. */
.tk-hero__backdrop {
    position: absolute;
    inset: -60px;
    width: calc(100% + 120px);
    max-width: none;
    height: calc(100% + 120px);
    object-fit: cover;
    filter: blur(56px) saturate(1.15);
    opacity: 0.24;
    pointer-events: none;
    z-index: 0;
    /* fade out towards the bottom so the hero melts into the page (no seam) */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.tk-hero > .container { position: relative; z-index: 1; }

.tk-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: clamp(1.6rem, 1rem + 3vw, 4.2rem);
    align-items: center;
}

.tk-hero__poster {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-lg);
    background:
        radial-gradient(120% 120% at 100% 0%, var(--cat, var(--accent)) 0%, transparent 55%),
        linear-gradient(160deg, var(--surface-2), #100c09);
}
.tk-hero__poster img {
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: cover;
}
.tk-hero__poster--empty { aspect-ratio: 4 / 5; }
.tk-hero__poster--empty::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: clamp(6rem, 4rem + 8vw, 11rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(246, 241, 234, 0.08);
}

.tk-hero__info { min-width: 0; }

.tk-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.tk-crumbs a { color: var(--text-muted); transition: color var(--t-fast); }
.tk-crumbs a:hover { color: var(--accent-alt); }
.tk-crumbs [aria-current] {
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-hero__title {
    margin-top: 0.9rem;
    font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-shadow: 0.02em 0.028em 0 rgba(226, 31, 40, 0.45);
}
.tk-hero__lead {
    margin-top: 1.1rem;
    max-width: 56ch;
    color: var(--text-muted);
    font-size: clamp(1.02rem, 1rem + 0.35vw, 1.2rem);
}

.tk-facts {
    list-style: none;
    padding: 0;
    margin-top: 1.7rem;
    display: grid;
    gap: 0.9rem;
}
.tk-facts li { display: flex; align-items: flex-start; gap: 0.8rem; }
.tk-facts svg { width: 20px; height: 20px; flex: none; margin-top: 0.2rem; color: var(--accent-alt); }
.tk-facts__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.tk-facts__fee { display: block; font-size: 0.82rem; color: var(--text-muted); }

.tk-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.3rem;
    border-radius: var(--r-pill);
    border: 1px dashed rgba(247, 180, 29, 0.4);
    color: var(--gold);
    font-weight: 600;
}

/* ========================================================= booking ===== */
.tk-booking { scroll-margin-top: 5rem; }

.tk-book {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
    align-items: start;
}
.tk-book--single { grid-template-columns: minmax(0, 1fr); }
.tk-book__main { display: grid; gap: 1.4rem; min-width: 0; }

.tk-step {
    min-width: 0;
    margin: 0;
    padding: clamp(1.2rem, 0.9rem + 1.4vw, 2rem);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
/* float + full width lifts the legend off the fieldset border so it styles like a heading */
.tk-step > .tk-step__head {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    margin-bottom: 1.1rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
}
.tk-step > .tk-step__head + * { clear: both; }
.tk-step__num {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-contrast);
    background: linear-gradient(135deg, var(--accent-alt), var(--accent));
}
.tk-step__note { margin-top: 0.9rem; font-size: 0.85rem; color: var(--text-muted); }

/* --------------------------------------------------- performance cards */
.tk-perfs {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.tk-perf {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.85rem 1rem;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: rgba(12, 9, 7, 0.45);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.tk-perf:hover { border-color: var(--border); }
.tk-perf__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.tk-perf.is-selected,
.tk-perf:has(.tk-perf__input:checked) {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(226, 31, 40, 0.16), rgba(226, 31, 40, 0.04));
    box-shadow: inset 0 0 0 1px var(--accent), 0 14px 34px -22px rgba(226, 31, 40, 0.75);
}
.tk-perf:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.tk-perf:has(.tk-perf__input:focus:not(:focus-visible)) { outline: none; }
.tk-perf.is-disabled { cursor: not-allowed; opacity: 0.55; }
.tk-perf.is-disabled:hover { border-color: var(--border-soft); }

.tk-perf__date,
.tk-orow__date {
    flex: none;
    width: 3.6rem;
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0 0.4rem;
    text-align: center;
    line-height: 1.05;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.tk-perf__dow, .tk-orow__dow {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.tk-perf__day, .tk-orow__day {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text);
}
.tk-perf__mon, .tk-orow__mon {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-alt);
}
.tk-perf.is-selected .tk-perf__date,
.tk-perf:has(.tk-perf__input:checked) .tk-perf__date {
    background: linear-gradient(160deg, var(--accent-alt), var(--accent-deep));
    border-color: transparent;
}
.tk-perf.is-selected .tk-perf__date span,
.tk-perf:has(.tk-perf__input:checked) .tk-perf__date span { color: #fff; }

.tk-perf__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tk-perf__when { font-weight: 600; color: var(--text); }
.tk-perf__where { font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }

.tk-perf__state {
    flex: none;
    align-self: flex-start;
    padding: 0.22rem 0.55rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
}
.tk-perf__state--ok     { color: #6ee7a8; border-color: rgba(110, 231, 168, 0.25); background: rgba(110, 231, 168, 0.06); }
.tk-perf__state--low    { color: var(--gold); border-color: rgba(247, 180, 29, 0.35); background: var(--gold-soft); }
.tk-perf__state--out    { color: #ff8a82; border-color: rgba(226, 31, 40, 0.35); background: rgba(226, 31, 40, 0.1); }
.tk-perf__state--closed { color: var(--text-dim); }

/* ------------------------------------------------------ ticket types */
.tk-types { display: grid; gap: 0.6rem; }
.tk-type {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem 1.1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: rgba(12, 9, 7, 0.45);
    transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.tk-type.is-picked {
    border-color: rgba(247, 180, 29, 0.35);
    background: linear-gradient(135deg, rgba(247, 180, 29, 0.07), rgba(12, 9, 7, 0.45));
}
.tk-type.is-soldout { opacity: 0.55; }
.tk-type__info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tk-type__name { font-weight: 600; color: var(--text); }
.tk-type__desc { font-size: 0.85rem; color: var(--text-muted); }
.tk-type__note { font-size: 0.78rem; font-weight: 600; color: #ff9a92; }
.tk-type__note:empty { display: none; }
.tk-type__price {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tk-field-half { max-width: calc(50% - 0.6rem); }

/* ----------------------------------------------------------- summary */
.tk-summary { position: sticky; top: 6rem; min-width: 0; }
.tk-summary__card {
    display: grid;
    gap: 0.9rem;
    padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #2c1c17, var(--surface));
    box-shadow: var(--shadow-lg);
}
.tk-summary__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-alt);
}
.tk-summary__title { font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
.tk-summary__perf {
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background: rgba(12, 9, 7, 0.5);
    font-size: 0.9rem;
    color: var(--text);
}
.tk-summary__perf.is-empty { color: var(--text-dim); font-style: italic; }
.tk-summary__lines { list-style: none; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; }
.tk-summary__lines li { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); }
.tk-summary__lines li span:last-child { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-summary__lines .tk-summary__empty { color: var(--text-dim); font-size: 0.88rem; }
.tk-summary__lines[hidden] { display: none; }
.tk-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
}
.tk-summary__total span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tk-summary__total strong {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.tk-summary__alert { font-size: 0.9rem; }
.tk-summary__msg {
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-sm);
    border: 1px solid rgba(216, 48, 47, 0.3);
    background: rgba(216, 48, 47, 0.08);
    color: #ffc7c2;
    font-size: 0.9rem;
}
.tk-summary__warn { color: var(--gold); }
.tk-summary__confirm { font-size: 0.85rem; line-height: 1.5; }
.tk-summary__submit.is-busy { opacity: 0.8; cursor: progress; transform: none; }
.tk-summary__secure {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.tk-summary__secure svg { width: 16px; height: 16px; flex: none; margin-top: 0.15rem; color: var(--gold); }

/* ------------------------------------------------- notices & empties */
.tk-notice__title { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; margin-bottom: 0.4rem; }
.tk-empty { padding: clamp(2rem, 1.5rem + 2vw, 3.2rem) 1.5rem; background: rgba(23, 16, 14, 0.4); }
.tk-empty__icon { width: 44px; height: 44px; margin: 0 auto 1rem; color: var(--gold); }
.tk-empty__title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); color: var(--text); margin-bottom: 0.6rem; }
.tk-empty p { max-width: 54ch; margin-inline: auto; color: var(--text-muted); }

/* ------------------------------------------------------------- about */
.tk-about { border-top: 1px solid var(--hairline); }
.tk-about__inner { max-width: 760px; }
.tk-prose {
    margin-top: 1.4rem;
    display: grid;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}
.tk-prose p { color: inherit; }

/* ===================================================== order page ===== */
.tk-order__head { margin-bottom: 1.8rem; }
.tk-order__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); text-wrap: balance; }

.tk-wait,
.tk-state {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    margin-bottom: 1.6rem;
    text-align: center;
}
.tk-wait .muted,
.tk-state .muted { max-width: 54ch; margin-inline: auto; }
.tk-wait__title,
.tk-state__title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
}
.tk-wait [data-poll-active],
.tk-wait [data-poll-timeout] { display: grid; justify-items: center; gap: 0.6rem; }
.tk-wait__hold strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.tk-wait__alt { margin-top: 0.4rem; }

.tk-spinner {
    width: 48px;
    height: 48px;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    border: 3px solid rgba(247, 180, 29, 0.22);
    border-top-color: var(--gold);
    animation: tk-spin 0.9s linear infinite;
}
@keyframes tk-spin { to { transform: rotate(360deg); } }

.tk-state__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(247, 180, 29, 0.3);
    background: var(--gold-soft);
    color: var(--gold);
}
.tk-state__icon svg { width: 26px; height: 26px; }
.tk-state__icon--muted { border-color: var(--border-soft); background: rgba(246, 241, 234, 0.05); color: var(--text-muted); }
.tk-state__actions { justify-content: center; margin-top: 0.6rem; }

.tk-order__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}
.tk-order__note { flex: 1 1 260px; margin-left: 0.3rem; }
.tk-order__note strong { color: var(--text); overflow-wrap: anywhere; }
.tk-order__void { margin: -0.6rem 0 1.6rem; }

.tk-order__summary { margin-top: 0.4rem; }
.tk-order__subtitle { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; margin-bottom: 1.1rem; }
.tk-order__summary .info-list .v { overflow-wrap: anywhere; }
.tk-order__total .k { color: var(--text); font-weight: 700; }
.tk-order__total .v { color: var(--gold); font-family: var(--font-display); font-size: 1.3rem; }

/* ---------------------------------------------------------- tickets */
.tk-tickets { display: grid; gap: 1.3rem; margin-bottom: 1.8rem; }
.tk-ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #2e1d18 0%, var(--surface) 62%);
    box-shadow: var(--shadow);
}
.tk-ticket::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--accent-alt), var(--accent-deep));
}
.tk-ticket__main {
    min-width: 0;
    padding: clamp(1.3rem, 1rem + 1.2vw, 2rem) clamp(1.3rem, 1rem + 1.5vw, 2.2rem);
}
.tk-ticket__brand {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.tk-ticket__title {
    margin-top: 0.5rem;
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
}
.tk-ticket__when { margin-top: 0.6rem; font-weight: 600; color: var(--accent-alt); }
.tk-ticket__where { font-size: 0.95rem; color: var(--text-muted); }
.tk-ticket__facts {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.4rem;
}
.tk-ticket__facts dt {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.tk-ticket__facts dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tk-ticket__used {
    display: inline-flex;
    margin-top: 1rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(247, 180, 29, 0.35);
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
}

.tk-ticket__stub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.4rem clamp(1.2rem, 1rem + 1vw, 1.8rem);
    border-left: 2px dashed rgba(246, 241, 234, 0.16);
    background: rgba(12, 9, 7, 0.35);
}
/* ticket notches at the perforation */
.tk-ticket__stub::before,
.tk-ticket__stub::after {
    content: "";
    position: absolute;
    left: -13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
}
.tk-ticket__stub::before { top: -13px; }
.tk-ticket__stub::after { bottom: -13px; }

.tk-qr {
    width: clamp(150px, 120px + 8vw, 200px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.tk-qr svg { display: block; width: 100%; height: 100%; }
.tk-qr__fallback { padding: 0.9rem; font-size: 0.78rem; line-height: 1.35; text-align: center; color: #5b4a42; }
.tk-ticket__code {
    margin-top: 0.45rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text);
}
.tk-ticket__hint {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.tk-ticket.is-used .tk-qr { opacity: 0.45; }

/* ===================================================== my tickets ===== */
.tk-list-title { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 0.9rem; }
.tk-list-title--past { margin-top: 2.4rem; color: var(--text-muted); }
.tk-orows { display: grid; gap: 0.75rem; }
.tk-orow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    transition: border-color var(--t-fast);
}
.tk-orow:hover { border-color: var(--border); }
.tk-orow--past { background: var(--surface); opacity: 0.8; }
.tk-orow__date { width: 3.8rem; background: rgba(12, 9, 7, 0.5); }
.tk-orow__body { min-width: 0; }
.tk-orow__title { font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.tk-orow__when { margin-top: 0.2rem; font-size: 0.9rem; color: var(--text-muted); }
.tk-orow__meta {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.tk-orow__meta .tag { text-transform: none; }
.tk-orow__action { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; text-align: right; }
.tk-orow__hint { font-size: 0.75rem; color: var(--text-dim); }
.tk-mine__foot { margin-top: 2rem; text-align: center; }

/* ========================================================== resend ===== */
.tk-resend__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--accent-alt);
}
.tk-resend__icon svg { width: 26px; height: 26px; }
form[data-once] .btn.is-busy { opacity: 0.8; cursor: progress; transform: none; }

/* ====================================================== responsive ===== */
@media (max-width: 1020px) {
    .tk-book { grid-template-columns: 1fr; }
    .tk-summary { position: static; }
}

@media (max-width: 760px) {
    .tk-hero__grid { grid-template-columns: 1fr; }
    .tk-hero__poster { width: min(100%, 320px); }
    .tk-hero__poster img { max-height: 60vh; }
    .tk-crumbs [aria-current] { max-width: 24ch; }
}

@media (max-width: 640px) {
    .tk-ticket { grid-template-columns: 1fr; }
    .tk-ticket__stub {
        order: -1;
        padding-top: 1.6rem;
        border-left: 0;
        border-bottom: 2px dashed rgba(246, 241, 234, 0.16);
    }
    .tk-ticket__stub::before { top: auto; bottom: -13px; left: -13px; }
    .tk-ticket__stub::after { bottom: -13px; left: auto; right: -13px; }
    .tk-qr { width: min(68vw, 260px); }

    .tk-orow { grid-template-columns: auto minmax(0, 1fr); }
    .tk-orow__action { grid-column: 1 / -1; align-items: stretch; text-align: left; }
    .tk-orow__action .btn { width: 100%; }
}

@media (max-width: 560px) {
    .tk-field-half { max-width: none; }
    .tk-type { grid-template-columns: minmax(0, 1fr) auto; }
    .tk-type__info { grid-column: 1 / -1; }
    .tk-perf { padding: 0.75rem 0.85rem; gap: 0.8rem; }
}

/* =========================================================== print ===== */
/* Printing the order page gives clean, ink-light tickets: one per block,
   never split across pages, site chrome hidden. */
@media print {
    @page { margin: 12mm; }

    body:has(.tk-tickets) { background: #fff !important; color: #000 !important; }
    body:has(.tk-tickets)::before,
    body:has(.tk-tickets)::after,
    body:has(.tk-tickets) .site-header,
    body:has(.tk-tickets) .site-footer,
    body:has(.tk-tickets) .flash-stack,
    body:has(.tk-tickets) .skip-link,
    body:has(.tk-tickets) .tk-order__head,
    body:has(.tk-tickets) [data-noprint],
    body:has(.tk-tickets) .grecaptcha-badge { display: none !important; }
    body:has(.tk-tickets) .section { padding: 0 !important; }
    body:has(.tk-tickets) .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }

    .reveal { opacity: 1 !important; transform: none !important; }

    .tk-tickets { display: block; margin: 0; }
    .tk-ticket {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        margin: 0 0 8mm;
        border: 1.5px solid #000 !important;
        border-radius: 4mm;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .tk-ticket::before { display: none; }
    .tk-ticket,
    .tk-ticket * { color: #000 !important; text-shadow: none !important; }
    .tk-ticket__facts dt,
    .tk-ticket__hint { color: #444 !important; }
    .tk-ticket__stub {
        order: 0 !important;
        padding: 6mm !important;
        border-left: 1.5px dashed #000 !important;
        border-bottom: 0 !important;
        background: #fff !important;
    }
    .tk-ticket__stub::before,
    .tk-ticket__stub::after { display: none; }
    .tk-ticket__used { border-color: #000 !important; background: none !important; }
    .tk-qr {
        width: 45mm !important;
        height: 45mm;
        border-radius: 0;
        box-shadow: none !important;
    }
    .tk-ticket.is-used .tk-qr { opacity: 1; }
}

/* ------------------------------------------------------------------------
   External booking panel — festivals / cruises booked elsewhere (e.g. MSC).
   Shown in the booking box while a production has no ticketed performances.
   ------------------------------------------------------------------------ */
.tk-extbook {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
    align-items: center;
    padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
}
.tk-extbook__title { margin: 0.25rem 0 0.35rem; }
.tk-extbook__place { color: var(--text-muted); margin: 0 0 1rem; }
.tk-extbook__price {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    color: var(--gold);
    line-height: 1.2;
    margin: 0 0 1.1rem;
}
.tk-extbook__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; color: var(--text-muted); font-size: 0.95rem; }
.tk-extbook__notes li { position: relative; padding-left: 1.25rem; }
.tk-extbook__notes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--accent);
}
.tk-extbook__cta { display: grid; gap: 0.6rem; justify-items: center; text-align: center; }
.tk-extbook__cta .help { margin: 0; }
@media (max-width: 760px) {
    .tk-extbook { grid-template-columns: 1fr; }
    .tk-extbook__cta { justify-items: stretch; }
    .tk-extbook__cta .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------- festival programme */
.tk-partof { margin: 1.1rem 0 0; color: var(--text-muted); font-size: 0.92rem; }
.tk-partof a { color: var(--accent-alt); font-weight: 600; }
.tk-partof a:hover { text-decoration: underline; }

.tk-prog__days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    margin: 0 0 1.6rem;
    padding: 0.2rem 0;
    scrollbar-width: none;
}
.tk-prog__days::-webkit-scrollbar { display: none; }
.tk-prog__days a {
    flex: none;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.tk-prog__days a span { color: var(--text-dim); font-weight: 500; }
.tk-prog__days a:hover { border-color: var(--border); color: var(--accent-alt); }

.tk-prog__day { margin-bottom: 2.4rem; scroll-margin-top: 7rem; /* clear the sticky site header */ }
.tk-prog__dayhead {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}
.tk-prog__dayhead span { color: var(--gold); }
.tk-prog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tk-prog__item {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    gap: 1.1rem;
    align-items: center;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    transition: border-color var(--t-fast);
}
.tk-prog__item:hover { border-color: var(--border); }
.tk-prog__item.is-draft { opacity: 0.7; border-style: dashed; }
.tk-prog__time {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.tk-prog__time--tba { color: var(--text-dim); }
.tk-prog__body { min-width: 0; }
.tk-prog__title { display: inline; font-weight: 700; font-size: 1.04rem; color: var(--text); line-height: 1.35; }
.tk-prog__title:hover { color: var(--accent-alt); }
.tk-prog__blurb {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tk-prog__meta { margin: 0.25rem 0 0; color: var(--text-dim); font-size: 0.8rem; }
.tk-prog__buy { display: flex; align-items: center; gap: 0.8rem; justify-content: flex-end; }
.tk-prog__price { font-family: var(--font-display); font-size: 1.08rem; color: var(--gold); white-space: nowrap; }
@media (max-width: 640px) {
    .tk-prog__item { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.4rem 0.8rem; align-items: start; padding: 0.85rem 0.9rem; }
    .tk-prog__time { font-size: 1.1rem; padding-top: 0.05rem; }
    .tk-prog__buy { grid-column: 2; justify-content: space-between; margin-top: 0.35rem; }
}

/* credits under "Oor die produksie" */
.tk-credits { display: grid; gap: 0.55rem; margin: 1.6rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--hairline); }
.tk-credits__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }
.tk-credits__row dt { color: var(--text-dim); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.2rem; }
.tk-credits__row dd { margin: 0; color: var(--text); }
.tk-credits__row dd:only-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .tk-credits__row { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ------------------------------------------- maintenance-mode reminder */
.maint-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-bottom: 1.4rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(226, 31, 40, 0.5);
    border-radius: var(--r);
    background: rgba(226, 31, 40, 0.14);
    color: var(--text);
    font-size: 0.9rem;
}
.maint-bar form { margin: 0; }
.maint-bar__btn { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); }
.maint-bar--site { margin: 0; border-radius: 0; border-width: 0 0 1px; justify-content: center; text-align: center; font-size: 0.85rem; }
.maint-bar__link { color: var(--accent-alt); font-weight: 600; text-decoration: underline; }

/* ------------------------------------------------ programme → cart ticks */
.tk-prog__how { margin-top: 0.6rem; }
.tk-prog__item.is-picked { border-color: var(--accent); background: linear-gradient(180deg, rgba(226, 31, 40, 0.12), var(--surface)); }
.tk-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.45rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tk-pick:hover { border-color: var(--accent); }
.tk-pick__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tk-pick__box {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid var(--text-dim);
    border-radius: 6px;
    color: transparent;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.tk-pick__box svg { width: 0.95rem; height: 0.95rem; }
.tk-pick__input:checked + .tk-pick__box { background: var(--accent); border-color: var(--accent); color: #fff; }
.tk-pick__input:focus-visible + .tk-pick__box { outline: 2px solid var(--accent-alt); outline-offset: 2px; }
.tk-pick:has(.tk-pick__input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.tk-cartbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.2rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    padding: 0.85rem 0.9rem 0.85rem 1.3rem;
    border: 1px solid var(--accent);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
}
.tk-cartbar__text { margin: 0; color: var(--text); }
.tk-cartbar__text strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); }
.tk-cartbar.is-enhanced:not(.is-floating) { display: none; }
.tk-cartbar.is-floating {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 90;
    width: min(760px, calc(100% - 32px));
    margin: 0;
    transform: translateX(-50%);
}
.tk-prog__form.has-bar { padding-bottom: 5.5rem; }
@media (max-width: 520px) {
    .tk-cartbar { padding: 0.75rem 0.8rem 0.75rem 1rem; }
    .tk-cartbar .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------- the cart */
.tk-clines { display: grid; gap: 0.8rem; }
.tk-cline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface);
}
.tk-cline.is-empty { opacity: 0.7; }
.tk-cline.is-soldout { border-color: rgba(226, 31, 40, 0.5); }
.tk-cline .tk-perf__date { width: 3.6rem; }
.tk-cline__body { min-width: 0; }
.tk-cline__title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.tk-cline__title a { color: var(--text); }
.tk-cline__title a:hover { color: var(--accent-alt); }
.tk-cline__meta { margin: 0.2rem 0 0.7rem; color: var(--text-muted); font-size: 0.88rem; }
.tk-cline__note { margin: -0.4rem 0 0.7rem; color: var(--gold); font-size: 0.82rem; }
.tk-cline__warn { margin: -0.4rem 0 0.7rem; color: #ff8a82; font-size: 0.85rem; }
.tk-cline__side { display: grid; justify-items: end; gap: 0.6rem; }
.tk-cline__sub { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); white-space: nowrap; }
.tk-cline__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}
.tk-cline__remove:hover { color: var(--accent-alt); }
.tk-types--compact { gap: 0.45rem; }
.tk-types--compact .tk-type { padding: 0.6rem 0.75rem; }
.tk-cart__all {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: var(--r);
}
.tk-cart__all[hidden] { display: none; }
.tk-cart__all-label { color: var(--text-muted); font-size: 0.9rem; }
.tk-cart__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1rem; }
@media (max-width: 640px) {
    .tk-cline { grid-template-columns: auto minmax(0, 1fr); }
    .tk-cline__side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; }
}

/* cart confirmation: one row per show */
.tk-glist { margin-top: 1.4rem; }
.tk-glist__title { margin: 0 0 0.9rem; font-size: 1.15rem; }
.tk-glist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tk-glist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface);
}
.tk-glist__body { display: grid; gap: 0.15rem; min-width: 0; }
.tk-glist__name { font-weight: 700; color: var(--text); }
.tk-glist__meta { color: var(--text-muted); font-size: 0.85rem; }

/* header cart link */
.nav__badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.25rem;
    padding: 0 0.35rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.tk-cart__add { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }

/* ----------------------------------------- old-site tickets (/ou-kaartjies) */
.lg-card { max-width: 520px; }
.lg-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.lg-ref::placeholder { text-transform: none; letter-spacing: 0; }
.lg-claim__wrap { max-width: 960px; }
.lg-claim .tk-step + .tk-step { margin-top: 1.2rem; }
.lg-claim__intro { margin: 0 0 1rem; }
.lg-claim__error { margin-top: 1rem; }
.lg-claim__submit { display: grid; gap: 0.7rem; justify-items: start; margin-top: 1.4rem; }
.lg-claim__submit .help { margin: 0; max-width: 46rem; }
.lg-paid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2.2rem;
    padding: 1rem 1.3rem;
    margin-bottom: 1.4rem;
}
.lg-paid > div { display: grid; gap: 0.1rem; }
.lg-paid__k { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.lg-paid__v { color: var(--text); font-weight: 700; }

.lg-rows__list { display: grid; gap: 0.8rem; }
/* The show list names the production, date and price class: give it the full width. */
.lg-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 2.4rem;
    gap: 0.7rem;
    align-items: end;
    padding: 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: rgba(246, 241, 234, 0.02);
}
.lg-row .field { margin: 0; min-width: 0; }
.lg-row__pick { grid-column: 1 / -1; }
.lg-row__seats .input { max-width: 18rem; }
.lg-row__chosen { display: none; margin-top: 0.4rem; color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; }
.lg-row__remove { justify-self: end; }
.lg-row .select { width: 100%; }
.lg-row__remove {
    width: 2.4rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.lg-row__remove svg { width: 1rem; height: 1rem; }
.lg-row__remove:hover, .lg-row__remove:focus-visible { color: var(--accent-alt); border-color: var(--border); }
.lg-row__remove[hidden] { display: grid; visibility: hidden; }
.lg-rows__add { margin-top: 0.9rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.lg-rows__add[hidden] { display: none; }

.lg-total {
    display: grid;
    gap: 0.35rem;
    max-width: 26rem;
    margin: 1.2rem 0 0 auto;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface);
}
.lg-total__line { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: 0.92rem; }
.lg-total__line--sum { padding-top: 0.45rem; border-top: 1px solid var(--hairline); color: var(--text); font-size: 1rem; }
.lg-total__line--paid strong { color: var(--gold); }
.lg-total__msg { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
.lg-rows.is-match .lg-total { border-color: rgba(110, 231, 168, 0.4); }
.lg-rows.is-match .lg-total__msg { color: #6ee7a8; }
.lg-rows.is-off .lg-total__msg { color: #ffb37a; }

.lg-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lg-done__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
}
.lg-done__main { display: grid; gap: 0.15rem; min-width: 0; }
.lg-done__main .muted { font-size: 0.85rem; }

/* admin */
.lg-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.lg-choices .checkbox { align-items: flex-start; }
.lg-choices .ta-sub { display: block; }
.lg-pending { border-color: rgba(247, 180, 29, 0.35); }
.lg-lines { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.lg-reject { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.lg-reject .input { flex: 1 1 14rem; width: auto; }
.lg-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; font-size: 0.9rem; }
.lg-history .tag { margin-right: 0.4rem; }
.lg-issue .lg-total { margin-left: 0; }

.lg-contact { white-space: nowrap; }

@media (max-width: 720px) {
    .lg-row { grid-template-columns: 5rem minmax(0, 1fr) 2.4rem; }
    .lg-row__chosen:not(:empty) { display: block; } /* the closed select cuts the long label off */
    .lg-total { margin-left: 0; max-width: none; }
    .lg-done__item { flex-wrap: wrap; }
    .lg-paid { gap: 0.6rem 1.4rem; }
}