/* =====================================================================
   Ticket Monkey hosted event page (Pages/EventListing.razor),
   its layout (Shared/EventPageLayout.razor) and the booking modal
   (Components/Modal.razor).

   Styled to the Ticket Monkey customer-facing design system:
   black & white base + orange (#F26B2C) accent, Bricolage Grotesque
   display / Hanken Grotesk body / JetBrains Mono meta, and the signature
   hard "stamp" shadow (soft drop-shadows are off-brand).

   Tokens come from ticket-monkey.css. Loaded globally via _Layout.cshtml
   (the app doesn't bundle component-scoped .razor.css). All selectors are
   `tm-`prefixed and applied only under .tm-event-page / .tm-modal so the
   rest of the app is untouched.
   ===================================================================== */

/* ---------- Layout shell ---------- */
.tm-event-page {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    /* Own stacking context so the negative-z hero backdrop sits above this
       background but below all page content (incl. the sticky header and
       booking modal, whose relative order is unchanged). */
    isolation: isolate;
}

/* Blurred hero artwork behind the content card, blending into the page
   colour — the card appears to float on the event's own artwork. Fixed, so
   content scrolls over it. */
.tm-page-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72vh;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.15);
    /* Push the blur's faded edges off-screen at the top and sides; the
       bottom edge is handled by the gradient below. */
    transform: scale(1.2);
    transform-origin: center top;
    pointer-events: none;
}

.tm-page-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--paper) 15%, transparent) 0%,
        color-mix(in srgb, var(--paper) 55%, transparent) 60%,
        var(--paper) 100%);
}

.tm-event-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Brand black, deliberately literal: var(--ink) re-themes per event
       (light on Dark/Bold) and the bar must stay black with the white logo
       on every theme. */
    background: #0A0A0B;
    padding: 0 var(--space-6);
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: var(--border-width) solid #0A0A0B;
}

/* Customer login — white text, white border, no fill, on the black bar. */
.tm-event-login {
    color: #FFFFFF;
    border: var(--border-width) solid #FFFFFF;
    border-radius: var(--radius-md);
    background: none;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.tm-event-login:hover {
    background: #FFFFFF;
    color: #0A0A0B;
}

.tm-event-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.tm-event-logo {
    height: 28px;
    width: auto;
}

.tm-event-main {
    padding: var(--space-8) var(--space-4) var(--space-16);
}

.tm-event-container {
    max-width: 880px;
    margin: 0 auto;
    background: var(--paper);
    /* --frame-border is transparent on dark themes (set from the resolved
       theme in EventListing): ink borders read as white frames there. */
    border: var(--border-width) solid var(--frame-border, var(--ink));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-stamp);
    overflow: hidden;
}

/* ---------- Hero ---------- */
.tm-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--ink);
    border-bottom: var(--border-width) solid var(--frame-border, var(--ink));
}

.tm-hero--fallback {
    background: linear-gradient(135deg, var(--orange), var(--ink));
}

/* Slim cover strip for the checkout pages. */
.tm-hero--compact {
    aspect-ratio: unset;
    height: 140px;
    min-height: 0;
}

/* ---------- Body & sections ---------- */
.tm-listing-body {
    padding: var(--space-6) var(--space-8) var(--space-4);
}

.tm-section {
    padding: var(--space-5) 0;
    border-bottom: var(--border-width) solid var(--ink-10);
}

.tm-section--head {
    border-bottom: none;
    padding-top: var(--space-2);
}

/* Eyebrow-style section heading: mono caps with the brand orange tick. */
.tm-section__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 var(--space-4);
}

.tm-section__heading::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--orange);
}

.tm-title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--ink);
    margin: 0 0 var(--space-3);
    text-wrap: balance;
}

/* Date/time metadata — mono caps */
.tm-datetime {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--fs-body-sm);
    color: var(--ink-80);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tm-datetime i {
    color: var(--orange);
}

/* Head row: meta on the left, Buy tickets on the right (wraps below the
   meta on narrow screens). Anchor scrolls land clear of the sticky header. */
html:has(.tm-event-page) {
    scroll-behavior: smooth;
}

.tm-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.tm-head-meta {
    flex: 1 1 320px;
    min-width: 0;
}

.tm-head-cta {
    flex-shrink: 0;
}

/* Location line in the event meta, under the date/time. */
.tm-meta-location {
    margin: var(--space-2) 0 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    color: var(--ink-80);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-base);
}

.tm-meta-location i {
    color: var(--orange);
}

.tm-map-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--navy);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tm-map-link:hover {
    color: var(--ink);
}

/* Geocoded map inside the Location modal. */
.tm-map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: var(--border-width) solid var(--ink-10);
    border-radius: var(--radius-md);
}

.tm-map-address {
    color: var(--ink-80);
    font-size: var(--fs-body-sm);
    margin: var(--space-3) 0 0;
}

/* Directions deep links (driving / walking / public transport). */
.tm-directions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.tm-directions a {
    text-decoration: none;
}

.tm-description {
    color: var(--ink-80);
    line-height: var(--lh-loose);
    white-space: pre-line;
    margin: 0;
}

/* Collapsed state for long descriptions (8 lines + Read more). */
.tm-description--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
}

.tm-readmore {
    background: none;
    border: 0;
    padding: 0;
    margin-top: var(--space-2);
    color: var(--navy);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    cursor: pointer;
}

.tm-readmore:hover {
    color: var(--ink);
}

.tm-organiser__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h4);
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

/* Responsibility line above the contact details (R7-11). */
.tm-organiser__responsibility {
    color: var(--ink-80);
    margin: 0 0 var(--space-2);
    line-height: var(--lh-base);
}

.tm-organiser__responsibility strong {
    color: var(--ink);
}

.tm-organiser__contact {
    color: var(--ink-80);
    margin: var(--space-1) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tm-organiser__contact i {
    color: var(--orange);
}

.tm-organiser__contact a {
    color: var(--navy);
    text-decoration: none;
}

.tm-organiser__contact a:hover {
    text-decoration: underline;
}

/* Legal links under the customer-service block (R7-14). */
.tm-legal-links {
    margin: var(--space-3) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-80);
}

.tm-legal-links a {
    color: var(--navy);
    text-decoration: none;
}

.tm-legal-links a i {
    color: var(--orange);
    margin-right: 4px;
}

/* "Ticketing powered by" footer (Shared/PoweredByFooter.razor). The logo
   asset is white-on-transparent; invert(1) flips it dark for light
   backgrounds. On the themed event page the link follows the theme ink and
   --powered-logo-filter (set from the resolved theme in EventListing) keeps
   the logo legible against the chosen background. */
.tm-powered__logo {
    height: 1.25em;
    width: auto;
    filter: invert(1);
}

.tm-event-page .tm-powered {
    border-color: var(--ink-10);
}

.tm-event-page .tm-powered a {
    color: var(--ink-60);
    text-decoration: none;
}

.tm-event-page .tm-powered a:hover {
    color: var(--ink);
    text-decoration: none;
}

.tm-event-page .tm-powered__logo {
    filter: var(--powered-logo-filter, invert(1));
}

.tm-legal-back {
    color: var(--navy);
    text-decoration: none;
    font-size: 0.9rem;
}

.tm-legal-back:hover {
    text-decoration: underline;
}

/* ---------- Checkout (R7-19, design-system pass) ---------- */
/* One consistent card treatment for the checkout sections, matching the
   event page's ticket panels: paper, hairline border, no soft shadow. */
.tm-co-card {
    margin: 1rem 0;
    padding: 1.25rem;
    background: var(--paper);
    border: var(--border-width) solid var(--ink-10);
    border-radius: var(--radius-md);
}

/* Card headings follow the booking-box title treatment. */
.tm-co-card > h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--weight-bold);
    color: var(--ink);
}

@media (max-width: 480px) {
    .tm-co-card {
        padding: 1rem 0.875rem;
    }
}

/* Page heading + back link above the cards. */
.tm-co-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0;
}

.tm-co-back {
    color: var(--orange);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    text-decoration: none;
}

.tm-co-back:hover {
    color: var(--orange-hover);
}

/* Checkout links default to the brand orange, no underlines. tm-co-link is
   the same treatment for links outside a card (and link-styled buttons).
   Button-styled anchors (tm-btn) keep their own colours. */
.tm-co-card a:not(.tm-btn),
.tm-co-link {
    color: var(--orange);
    text-decoration: none;
}

.tm-co-card a:not(.tm-btn):hover,
.tm-co-link:hover {
    color: var(--orange-hover);
    text-decoration: none;
}

/* The Pay button is the page's single prominent action — the brand primary
   (orange, ink border, hard stamp shadow), full width. */
.tm-co-pay {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    background: var(--orange);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: var(--weight-bold);
    border: var(--border-width) solid var(--ink);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-stamp);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
}

.tm-co-pay:hover {
    background: var(--orange-hover);
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-stamp-sm);
}

.tm-co-pay:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--ink);
}

/* Checkout under the themed event layout: the markup still carries Tailwind
   slate/gray text utilities tuned for white paper. Re-point them at the
   theme's ink scale so dark/bold/custom themes stay readable. Status
   callouts (amber/green/red) keep their own fixed colours. */
.tm-event-page .text-slate-900,
.tm-event-page .text-gray-900 {
    color: var(--ink) !important;
}

.tm-event-page .text-slate-700,
.tm-event-page .text-slate-800,
.tm-event-page .text-gray-800 {
    color: var(--ink-80) !important;
}

.tm-event-page .text-slate-500,
.tm-event-page .text-slate-600,
.tm-event-page .text-gray-500,
.tm-event-page .text-gray-400 {
    color: var(--ink-60) !important;
}

.tm-event-page .hover\:text-slate-900:hover,
.tm-event-page .hover\:text-gray-900:hover {
    color: var(--ink) !important;
}

.tm-event-page .border-gray-100,
.tm-event-page .border-gray-200,
.tm-event-page .border-gray-300 {
    border-color: var(--ink-10) !important;
}

.tm-event-page .bg-white {
    background-color: var(--paper) !important;
}

.tm-event-page .bg-gray-50 {
    background-color: var(--paper-50) !important;
}

/* Payment plan schedule: comfortable cell padding (the Tailwind py-1.5
   pl-2/pr-2 utilities on the cells are tighter than the cards around it). */
.tm-co-schedule th,
.tm-co-schedule td {
    padding: var(--space-3) var(--space-4) !important;
}

/* Payment plan schedule: the due-today row + badge in brand orange. */
.tm-co-duerow {
    background: var(--orange-soft);
}

.tm-co-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--orange);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
}

/* Spotify embedded player (R7-7). */
.tm-spotify {
    width: 100%;
    height: 352px;
    border: 0;
    border-radius: 12px;
}

/* Rendered legal document body (terms / privacy pages). */
.tm-legal-doc {
    line-height: var(--lh-loose);
    color: var(--ink-80);
    overflow-wrap: anywhere;
}

/* ---------- Buttons ---------- */
.tm-btn {
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--fs-body-sm);
    letter-spacing: var(--tracking-snug);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

.tm-btn--primary {
    background: var(--orange);
    color: var(--ink);
    box-shadow: var(--shadow-stamp);
}

.tm-btn--primary:hover {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-stamp-sm);
    background: var(--orange-hover);
}

.tm-btn--primary:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--ink);
}

.tm-btn--secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

.tm-btn--lg {
    font-size: var(--fs-body-lg);
    padding: var(--space-4) var(--space-8);
}

.tm-tickets {
    /* a touch more breathing room around the primary CTA */
    padding-bottom: var(--space-6);
    /* anchor target for the head/fab Buy tickets links */
    scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ---------- Share ---------- */
.tm-share__buttons {
    display: flex;
    gap: var(--space-3);
}

.tm-share__btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

.tm-share__btn:hover {
    background: var(--orange);
    color: var(--ink);
    box-shadow: var(--shadow-stamp-sm);
    transform: translate(-1px, -1px);
}

/* ---------- Not found ---------- */
.tm-listing-missing {
    text-align: center;
    padding: var(--space-24) var(--space-6);
    color: var(--ink-60);
}

.tm-listing-missing i {
    font-size: 2.5rem;
    color: var(--orange);
    margin-bottom: var(--space-4);
}

.tm-listing-missing h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

/* =====================================================================
   Booking modal (Components/Modal.razor)
   ===================================================================== */
.tm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10, 10, 11, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    overflow-y: auto;
    animation: tm-modal-fade var(--duration-base) var(--ease-out);
}

.tm-modal {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    border: var(--border-width) solid var(--frame-border, var(--ink));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-stamp);
    width: 100%;
    max-width: 560px;
    margin: auto;
    max-height: calc(100vh - var(--space-16));
    display: flex;
    flex-direction: column;
    animation: tm-modal-pop var(--duration-base) var(--ease-out);
}

.tm-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--ink-10);
}

.tm-modal__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
    margin: 0;
}

.tm-modal__close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.tm-modal__close:hover {
    background: var(--ink);
    color: var(--paper);
}

.tm-modal__body {
    padding: var(--space-6);
    overflow-y: auto;
}

@keyframes tm-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tm-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   Side cart — Modal Placement="End" (right-side slide-in drawer).
   Mirrors the wwwroot/embed.js panel, in Ticket Monkey brand tokens.
   ===================================================================== */
.tm-modal-overlay--end {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
}

.tm-modal.tm-modal--drawer {
    width: min(440px, 100vw);
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: var(--border-width) solid var(--frame-border, var(--ink));
    animation: tm-drawer-in var(--duration-slow) var(--ease-out);
}

@keyframes tm-drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ---------- Floating cart button + badge ---------- */
.tm-cart-fab {
    /* The fab is an <a> in inline-tickets mode: without this, the default
       anchor underline renders as small dashes either side of the icon. */
    text-decoration: none;
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 60;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper);
    border: var(--border-width) solid var(--ink);
    box-shadow: var(--shadow-stamp);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.tm-cart-fab:hover {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-stamp-sm);
}

.tm-cart-fab__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--orange);
    color: var(--ink);
    border: var(--border-width) solid var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ---------- Thank-you page (Pages/CheckoutSuccess.razor) ----------
   Wears the same chrome as checkout: compact hero, tm-listing-body
   gutter, tm-co-card sections. tm-ty-* covers the page-specific bits;
   the green confirmation tick keeps fixed status colours (like the
   checkout's amber/green callouts) rather than theming. */
.tm-ty-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-4) 0 var(--space-2);
}

.tm-ty-check {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: #dcfce7;
    color: #16a34a;
    margin-bottom: var(--space-4);
}

.tm-ty-check svg {
    width: 32px;
    height: 32px;
}

.tm-ty-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.tm-ty-sub {
    color: var(--ink-60);
    max-width: 44ch;
    margin: 0;
}

/* Card variant with edge-to-edge sections (hairline-separated). */
.tm-co-card.tm-ty-flush {
    padding: 0;
    overflow: hidden;
}

.tm-ty-section {
    padding: var(--space-4) var(--space-5);
}

.tm-ty-section + .tm-ty-section {
    border-top: var(--border-width) solid var(--ink-10);
}

.tm-ty-section > h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.tm-ty-section p {
    margin: 0;
}

.tm-ty-tint {
    background: var(--paper-50);
}

@media (max-width: 480px) {
    .tm-ty-section {
        padding: var(--space-3) var(--space-4);
    }
}

/* Order reference / customer header row. */
.tm-ty-refrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.tm-ty-refrow-right {
    text-align: right;
}

.tm-ty-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-60);
    margin: 0 0 var(--space-1);
}

.tm-ty-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
}

/* Hairline-separated line items (tickets, instalments). */
.tm-ty-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-ty-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--ink-10);
}

.tm-ty-list > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tm-ty-item {
    min-width: 0;
}

.tm-ty-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.tm-ty-totals .tm-ty-row + .tm-ty-row {
    margin-top: var(--space-1);
}

.tm-ty-total {
    font-weight: var(--weight-bold);
    color: var(--ink);
    border-top: var(--border-width) solid var(--ink-10);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

.tm-ty-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tm-ty-muted {
    color: var(--ink-60);
}

.tm-ty-small {
    font-size: var(--fs-caption);
}

/* Payment plan extras. */
.tm-ty-plan-paid {
    margin-bottom: var(--space-3);
}

.tm-ty-due {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tm-ty-tick {
    width: 16px;
    height: 16px;
    color: #16a34a;
    flex-shrink: 0;
}

.tm-ty-paid {
    color: var(--ink-40);
    text-decoration: line-through;
}

/* "What happens next" bullet list. */
.tm-ty-next {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--ink-80);
}

.tm-ty-next li {
    display: flex;
    gap: var(--space-3);
}

/* Password setup form. */
.tm-ty-intro {
    margin: 0 0 var(--space-3);
}

.tm-ty-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 380px;
}

.tm-ty-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tm-ty-field > span {
    font-size: var(--fs-body-sm);
    font-weight: var(--weight-medium);
    color: var(--ink-80);
}

.tm-ty-self-start {
    align-self: flex-start;
}

.tm-ty-skip {
    font-size: var(--fs-caption);
    color: var(--ink-40);
    margin: 0;
}

.tm-ty-err {
    color: #dc2626;
    font-size: var(--fs-body-sm);
    margin: 0;
}

.tm-ty-ok {
    color: var(--success);
    margin: 0;
}

/* Dashboard CTA + app store links. */
.tm-ty-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    text-align: center;
}

.tm-ty-stores {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tm-ty-fallback {
    text-align: center;
    margin-top: var(--space-4);
}

/* =====================================================================
   Ticket purchase widget (Components/TicketPurchaseWidget.razor) — the
   ticket flow shared by the hosted page (inline + modal) and the embed.
   Styled to the TM design system; tokens resolve from :root
   (ticket-monkey.css) and re-theme automatically under .tm-event-page.
   The old per-modal Tailwind retint overrides are gone with the Tailwind
   classes themselves.
   ===================================================================== */
/* Accordion ticket flow: sections stack vertically, one open at a time.
   The open section's header carries the orange accent (left edge) that the
   active folder tab used to carry on its top edge. The body keeps the
   per-tab `{key}-tab-body` class so organiser theme colours still apply. */
.tmw-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.tmw-acc-item {
    border: var(--border-width) solid var(--ink-20);
    border-radius: var(--radius-sm);
    /* Clip the header/body backgrounds to the rounded corners. */
    overflow: hidden;
}

.tmw-acc-header {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: var(--paper-50);
    border: 0;
    border-left: var(--border-width-thick) solid transparent;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--weight-bold);
    color: var(--ink-60);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.tmw-acc-header:hover {
    color: var(--ink);
    background: var(--paper);
}

.tmw-acc-item.open > .tmw-acc-header {
    background: var(--paper);
    color: var(--ink);
    border-left-color: var(--orange);
    border-bottom: var(--border-width) solid var(--ink-10);
}

.tmw-acc-chevron {
    font-size: 12px;
    color: var(--ink-40);
    transition: transform var(--duration-fast) var(--ease-out);
}

.tmw-acc-item.open .tmw-acc-chevron {
    transform: rotate(180deg);
}

.tmw-acc-body {
    padding: var(--space-2) var(--space-5) var(--space-4);
}

.tmw-tab-header {
    padding: var(--space-2) 0;
    color: var(--ink-80);
}

/* Tab-advance (continue) button: small, right-aligned outline — no fill. */
.tmw-next {
    display: block;
    margin-left: auto;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: none;
    border: var(--border-width) solid var(--ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.tmw-next:hover {
    background: var(--ink);
    color: var(--paper) !important;
}

.tmw-divider {
    border: 0;
    border-top: var(--border-width) solid var(--ink-10);
    margin: 0;
}

.tmw-product {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.tmw-product-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--orange-soft);
    color: var(--orange);
}

.tmw-product-info {
    flex: 1;
    min-width: 0;
}

.tmw-product-title {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.tmw-product-desc {
    font-size: var(--fs-caption);
    color: var(--ink-60);
    margin: 2px 0 0;
}

.tmw-product-buy {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.tmw-price {
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.tmw-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tmw-step {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width) solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.tmw-step:hover {
    background: var(--ink);
    color: var(--paper);
}

.tmw-qty {
    min-width: 1.5em;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ink);
}

.tmw-panel {
    border: var(--border-width) solid var(--ink-10);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.tmw-booking {
    margin: var(--space-4) 0;
    padding: var(--space-4);
}

.tmw-booking-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.tmw-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tmw-actions-buttons {
    display: flex;
    gap: var(--space-2);
}

.tmw-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink-60);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    cursor: pointer;
}

.tmw-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

.tmw-coupon {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.tmw-input {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--ink-20);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
}

.tmw-input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 2px var(--orange-soft);
}

.tmw-coupon-msg {
    font-size: var(--fs-body-sm);
    margin: var(--space-2) 0 0;
}

.tmw-coupon-msg.ok { color: var(--success, #16a34a); }
.tmw-coupon-msg.err { color: var(--error, #dc2626); }

@media (max-width: 480px) {
    .tm-listing-body { padding: var(--space-5) var(--space-5) var(--space-3); }
    .tm-event-main { padding: var(--space-4) var(--space-2) var(--space-12); }
}