/* ═══════════════════════════════════════════════════════════════════
   RC SHOW 2027 — ZOHO BACKSTAGE CUSTOM CSS
   Backstage Admin → Event → Customise → Custom CSS
   ⚠️ @import MUST stay first. Anything above it is ignored.
 
   LAYOUT MODEL — read this before editing
   ───────────────────────────────────────
   The modal is a fixed 100dvh flex column. Exactly ONE element
   scrolls: .ticket-details (§9). Everything else is frozen chrome.
 
       modal ─ 100dvh, flex column, overflow hidden
       ├─ .header            red event bar      frozen
       └─ .content           overflow hidden
          ├─ .ticket-steps   breadcrumb + timer frozen
          ├─ .ticket-details ◄── THE SCROLLER
          └─ .by-tkt-footer  sticky, in flow    frozen
 
   The confirmation screen has no .ticket-details, so it falls back
   to scrolling .content. Every rule that builds the chain is scoped
   with :has(.ticket-details) for that reason — do not unscope it or
   the "What's Next" cards get clipped.
 
   NAMING TRAP: `.item` is used by BOTH .bs-breadcrumb (steps) and
   .tkt-countdown (clock digits). Always scope to one or the other.
 
   Requires :has() — Chrome/Edge 105+, Safari 15.4+, Firefox 121+.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
 
/* ══ 1. TOKENS ═══════════════════════════════════════════════════
Set on body, not :root, so they reach the Semantic UI dimmer, which
Ember may render outside .bs-website. */
body {
    --rc-red: #E01E26;
    --rc-red-dk: #B5121B;
    --rc-ink: #191414;
    --rc-paper: #FAF7F2;
    --rc-card: #FFFFFF;
    --rc-line: #E6DFD6;
    --rc-mute: #A99C8C;
    --rc-ff: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    /* Height of the frozen chrome. Only used by §9's fallback
    max-height, for the case where the flex chain breaks. */
    --rc-chrome: 236px;
}
 
/* ══ 2. SHELL — scroll lock, dimmer, modal ═══════════════════════ */
 
/* Semantic UI makes both the body and the dimmer scrollable once it
adds .scrolling. Both were producing their own scrollbar. */
html:has(.buy-ticket-modal),
body:has(.buy-ticket-modal),
body.dimmable.dimmed,
body.dimmable.scrolling {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
}
 
html body .ui.dimmer.modals,
html body .ui.dimmer.modals.page,
html body .ui.dimmer.modals.full-page,
html body .dimmable>.dimmer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--rc-paper) !important;
    opacity: 1 !important;
}
 
/* Specificity must beat Semantic's 0,3,0 + !important */
html body .ui.dimmer .ui.scrolling.modal.buy-ticket-modal,
html body .ui.dimmer .ui.modal.buy-ticket-modal,
div.ui.scrolling.modal.buy-ticket-modal,
div.ui.modal.large.buy-ticket-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* dvh so the mobile address bar can't push the footer off-screen */
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--rc-paper) !important;
    font-family: var(--rc-ff) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    z-index: 1001 !important;
}
 
/* ══ 3. RED EVENT BAR ════════════════════════════════════════════
.header and .details-modal-header are separate nodes: the close
button lives on .header, the red background on .details-modal-header. */
.ui.modal.buy-ticket-modal>.header {
    flex: 0 0 auto !important;
    position: relative !important;
    border-bottom: none !important;
    overflow: visible !important;
    z-index: 600 !important;
}
 
.ui.modal.buy-ticket-modal .details-modal-header,
html body .details-modal-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: var(--rc-red) !important;
    /* right pad clears the close button */
    padding: 22px 60px 22px 24px !important;
    min-height: 120px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
 
/* Logo + event name + venue.
Desktop keeps the absolute ::before; mobile (§11) swaps it for a
grid cell, which is what makes it align at any text length. */
.ui.modal.buy-ticket-modal .details-modal-header .bs-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100px !important;
    max-height: none !important;
    margin: 0 !important;
    padding-left: 120px !important;
    box-sizing: border-box !important;
}
 
.ui.modal.buy-ticket-modal .details-modal-header .bs-container::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 25% !important;
    transform: translateY(-50%) !important;
    width: 100px !important;
    height: 60px !important;
    display: block !important;
    background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48538000001092003?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MjU2NjU3Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MjU2NjU3IiwiaWQiOiI0ODUzODAwMDAwMTA5MjAwMyJ9") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
 
.details-modal-header h3,
.details-modal-header h2,
.details-modal-header .event-name {
    color: #fff !important;
    font-family: var(--rc-ff) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
    display: block !important;
    visibility: visible !important;
}
 
/* Venue rows forced visible — Backstage collapses them by default */
.details-modal-header .venue {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}
 
.details-modal-header .venue .row,
.details-modal-header .venue .middle-aligned,
.details-modal-header .venue .text-small {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}
 
.details-modal-header .venue .row>div,
.details-modal-header .venue .row>span,
.details-modal-header .venue .relative-element {
    color: rgba(255, 255, 255, .88) !important;
    font-family: var(--rc-ff) !important;
    font-size: .8rem !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}
 
/* brightness(0) invert(1) whitens the icon whatever it is —
sprite mask, icon font, pseudo-element or inline SVG */
.details-modal-header .venue .theme-icon,
.details-modal-header .venue .bs-icon,
.details-modal-header .venue i,
.details-modal-header .venue [class*="icon"],
.details-modal-header .venue svg {
    filter: brightness(0) invert(1) opacity(.88) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
 
/* Close button */
.ui.modal.buy-ticket-modal>.header button,
.ui.modal.buy-ticket-modal>.header .cancel,
.ui.modal.buy-ticket-modal>.header [class*="close"],
.ui.modal.buy-ticket-modal>.header>i.close {
    position: absolute !important;
    top: 20px !important;
    right: 16px !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    z-index: 10 !important;
}
 
/* Kills the reddish oval that inner icons brought with them */
.ui.modal.buy-ticket-modal>.header button *,
.ui.modal.buy-ticket-modal>.header [class*="close"] *,
.ui.modal.buy-ticket-modal>.header button:hover,
.modal.buy-ticket-modal .header:not(.ui) .cancel:after {
    background: none !important;
    box-shadow: none !important;
}
 
.ui.modal.buy-ticket-modal>.header svg {
    fill: #fff !important;
}
 
.ui.modal.buy-ticket-modal>.header .theme-icon,
.ui.modal.buy-ticket-modal>.header .bs-icon {
    background-color: #fff !important;
}
 
/* ══ 4. CONTENT COLUMN ═══════════════════════════════════════════
Scrolls only on the confirmation screen; on every other screen §9
hands the scroll to .ticket-details instead. */
.ui.modal.buy-ticket-modal>.content {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: var(--rc-paper) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
 
/* Fixed-height bands. Ancestors of the scroller are excluded — they
have to shrink so §9 can hand it the leftover space. */
.ui.modal.buy-ticket-modal>.content>*:not(.by-tkt-footer):not(:has(.ticket-details)) {
    flex: 0 0 auto !important;
}
 
.tkt-scrollable-content,
.details-modal-content {
    background: var(--rc-paper) !important;
}
 
/* ══ 5. BREADCRUMB (desktop) ═════════════════════════════════════
Full-bleed via negative margins, NOT left:50% + translateX — on a
sticky element `left` is a stick threshold, not an offset. */
.ticket-steps {
    position: sticky !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 12px 32px !important;
    box-sizing: border-box !important;
    background: var(--rc-card) !important;
    border-bottom: none !important;
    flex: 0 0 auto !important;
    z-index: 400 !important;
}
 
.ticket-steps .bs-breadcrumb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
    counter-reset: bs-step !important;
}
 
/* Separators are bare <div>s with an arrow <i> and no class of
their own, so they're targeted by exclusion */
.ticket-steps .bs-breadcrumb>div:not(.item):not(.tkt-countdown):not(.row),
.ticket-steps .bs-breadcrumb .divider,
.ticket-steps .bs-breadcrumb .separator,
.ticket-steps .bs-breadcrumb .item .bs-icon,
.ticket-steps .bs-breadcrumb .item .theme-icon,
.ticket-steps .bs-breadcrumb .item svg,
.ticket-steps .bs-breadcrumb .item>i {
    display: none !important;
}
 
.ticket-steps .bs-breadcrumb .item {
    counter-increment: bs-step !important;
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    font-family: var(--rc-ff) !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: #5F5751 !important;
    white-space: nowrap !important;
}
 
.ticket-steps .bs-breadcrumb .item::before {
    content: counter(bs-step) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    border: 2px solid #C9BFB2 !important;
    border-radius: 50% !important;
    background: var(--rc-card) !important;
    color: #5F5751 !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
 
.ticket-steps .bs-breadcrumb .item:not(:last-child)::after {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 1px !important;
    flex-shrink: 0 !important;
    margin: 0 .5rem !important;
    background: var(--rc-line) !important;
}
 
/* PROGRESSIVE HIGHLIGHT
Backstage only marks the CURRENT step .active, so completed steps
are inferred with :has(~ .item.active) — "an active item exists
after me, so I'm done". The :not(:has(.item.active)) branch covers
the confirmation screen, where .active is dropped entirely and all
four should light up. */
.ticket-steps .bs-breadcrumb .item.active,
.ticket-steps .bs-breadcrumb .item.done,
.ticket-steps .bs-breadcrumb .item.completed,
.ticket-steps .bs-breadcrumb .item.visited,
.ticket-steps .bs-breadcrumb .item:has(~ .item.active),
.ticket-steps .bs-breadcrumb:not(:has(.item.active)) .item {
    color: var(--rc-red) !important;
    font-weight: 700 !important;
}
 
.ticket-steps .bs-breadcrumb .item.active::before,
.ticket-steps .bs-breadcrumb .item.done::before,
.ticket-steps .bs-breadcrumb .item.completed::before,
.ticket-steps .bs-breadcrumb .item.visited::before,
.ticket-steps .bs-breadcrumb .item:has(~ .item.active)::before,
.ticket-steps .bs-breadcrumb:not(:has(.item.active)) .item::before {
    background: var(--rc-red) !important;
    border-color: var(--rc-red) !important;
    color: #fff !important;
}
 
.ticket-steps .bs-breadcrumb .item:has(~ .item.active)::after,
.ticket-steps .bs-breadcrumb:not(:has(.item.active)) .item::after {
    background: var(--rc-red) !important;
}
 
/* ══ 6. FOOTER ═══════════════════════════════════════════════════
STICKY, never fixed. Fixed pinned it to the viewport while the
document scrolled behind, dropping the bar into mid-page. Sticky
degrades correctly either way: as a sibling of .content it sits at
the bottom of the flex column; nested inside .content it pins to
the scroller's bottom edge. */
.by-tkt-footer,
.modal.buy-ticket-modal .by-tkt-footer {
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    margin-top: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    background: var(--rc-card) !important;
    border-top: 1px solid var(--rc-line) !important;
    /* vertical-only offset so no blur bleeds off the side edges */
    box-shadow: 0 -3px 10px 0 rgba(25, 20, 20, .06) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    z-index: 500 !important;
}
 
.by-tkt-footer .bs-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
.by-tkt-footer .ft-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 24px !important;
    box-sizing: border-box !important;
}
 
/* POWERED BY — one copy only, centred on the confirmation screen.
The footer is itself inside .content, so the hide rule must exclude
its descendants or both copies vanish. */
.ui.modal.buy-ticket-modal>.content .poweredby-logo:not(.by-tkt-footer *) {
    display: none !important;
}
 
html body .by-tkt-footer .poweredby-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
}
 
/* "No button in the row" identifies the confirmation screen.
:not(:has(.poweredby-logo)) is essential — Backstage wraps the logo
in a .bs-container, and hiding that wrapper hides the logo too. */
.by-tkt-footer .ft-content:not(:has(button)):not(:has(.bs-button)) {
    justify-content: center !important;
    position: relative !important;
}
 
.by-tkt-footer .ft-content:not(:has(button)):not(:has(.bs-button))>*:not(.poweredby-logo):not(:has(.poweredby-logo)) {
    display: none !important;
}
 
.by-tkt-footer .ft-content:not(:has(button)):not(:has(.bs-button))>*:has(.poweredby-logo) {
    display: flex !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    margin: 0 auto !important;
}
 
/* ══ 7. BUTTONS ══════════════════════════════════════════════════ */
[data-template="modals/community-checkout"] .bs-button.large {
    background: var(--rc-red) !important;
    border-color: var(--rc-red) !important;
    border-radius: 16px !important;
    padding: .6rem 1.6rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    font-family: var(--rc-ff) !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    color: #fff !important;
    white-space: nowrap !important;
}
 
[data-template="modals/community-checkout"] .bs-button.primary:hover {
    background: var(--rc-red-dk) !important;
    border-color: var(--rc-red-dk) !important;
}
 
[data-template="modals/community-checkout"] .bs-button.primary:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}
 
.bs-button.primary {
    box-shadow: none !important;
}
 
/* NOTE: not modal-scoped — this styles the site's main nav button
globally. Confirm that's intended. */
.bs-form.block-form>.form-field.main-nav .bs-button {
    border-radius: 100px;
    background-color: var(--rc-red);
    font-family: var(--rc-ff) !important;
    font-weight: 700 !important;
}
 
/* ══ 8. SCREEN CONTENT — tickets, forms, order summary ═══════════ */
.ticket-details .uls-flex.wrap.bs-container {
    align-items: flex-start !important;
}
 
.ticket-details .fxb.bs-segment,
.ticket-details>div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--rc-paper) !important;
}
 
.modal.buy-ticket-modal .ticket-list {
    padding-top: 24px !important;
    background-color: var(--rc-paper) !important;
}
 
.modal.buy-ticket-modal .ticket-order {
    padding: 24px 16px !important;
    background-color: var(--rc-paper) !important;
}
 
.modal.buy-ticket-modal .ticket-order>div {
    padding: 24px;
    border: 1px solid var(--rc-line);
    border-radius: 16px;
    background: var(--rc-card);
}
 
.buy-ticket-modal .ticket-classes .uls-accordion .list-item {
    padding: 24px !important;
    margin-bottom: 15px !important;
    border: 1px solid var(--rc-line);
    /* NOTE: left accent matches the border colour — confirm whether
    this should be var(--rc-red) instead */
    border-left: 4px solid var(--rc-line);
    border-radius: 16px;
    background-color: var(--rc-card);
}
 
.buy-ticket-modal .ticket-classes .uls-accordion .accordion-panel {
    background: transparent !important;
}
 
.modal.buy-ticket-modal .ticket-order .promo-input {
    margin-top: -20px !important;
}
 
/* Headings. Scoped to .buy-ticket-modal so the standalone ticket
listing page, which reuses these class names, is untouched. */
.buy-ticket-modal .ticket-list>h5,
.buy-ticket-modal .ticket-order>div>h5,
.buy-ticket-modal .ticket-order>div>.community-selected-tickets-summary>h5,
[data-template="modals/site-user-sign-in"] .bs-slide .slide h4 {
    font-family: var(--rc-ff) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}
 
.buy-ticket-modal .ticket-order>div>h5 {
    font-size: 14px !important;
}
 
.buy-ticket-modal .order-list .bs-order-list tr:first-child>th,
[data-template="modals/site-user-sign-in"] .bs-slide div:nth-child(3)>div.form-field,
[data-template="modals/site-user-sign-in"] div.bs-form.block-form.secondary.slide.show.active>div:nth-child(4) {
    font-family: var(--rc-ff) !important;
    font-weight: 700 !important;
    
}
.buy-ticket-modal .order-list .bs-order-list tr:first-child>th {
text-transform: uppercase;
}

 
.buy-ticket-modal td.stronger>div.stronger {
    font-family: var(--rc-ff) !important;
    font-weight: 400 !important;
}
 
/* Purchaser + Billing cards */
.buy-ticket-modal .ticket-list>form.bs-form.small.m-size,
.buy-ticket-modal .ticket-list .uls-grid.bs-form.small:not(.m-size) {
    padding: 20px;
    border-radius: 12px;
    background-color: var(--rc-card);
}
 
.buy-ticket-modal .ticket-list>form.bs-form.small.m-size>.form-head {
    margin: -20px -20px 0 -20px;
    padding: 0 20px;
    background-color: var(--rc-paper) !important;
}
 
.buy-ticket-modal .ticket-list .uls-grid.bs-form.small:not(.m-size)>.form-head {
    margin: -20px -20px 0 -20px;
    padding: 0 0 20px 0;
    background-color: var(--rc-paper) !important;
}
 
.buy-ticket-modal .ticket-list form .bs-accordion .accordion-panel {
    background-color: var(--rc-card);
}
 
.buy-ticket-modal .ticket-list>form .head {
    font-family: var(--rc-ff) !important;
    font-weight: 700 !important;
}
 
/* Inputs */
input.bs-input,
input.iti__tel-input {
    height: 3.5em !important;
}
 
.bs-action-input.small .bs-input {
    height: 30px !important;
}
 
.uls-dropdown>.dw-parent {
    padding: 6px 9px !important;
}
 
.uls-dropdown>.dw-parent>.down-arrow-icon {
    line-height: 1.4em !important;
}
 
[data-template="modals/site-user-sign-in"] .bs-divider,
.order-nav {
    display: none !important;
}
 
/* Extension iframe — Backstage's JS sets an inline max-height of
about 94px; !important beats inline styles that lack it */
.ticket-list.fluid {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
 
iframe[data-location="backstage.site.pre.registration"] {
    width: 100% !important;
    min-height: calc(100dvh - 220px) !important;
    display: block !important;
    border: none !important;
}
 
/* ══ 9. THE SINGLE SCROLLER ══════════════════════════════════════
Every height clamp Backstage ships is cleared here — those were
what clipped the confirmation cards and produced a second
scrollbar — then .ticket-details is handed the scroll.
 
:has(.ticket-details) is a DESCENDANT selector on purpose. With the
child combinator only the immediate parent matched, so grandparent
wrappers kept height:auto, grew to full content height, and got
clipped instead of scrolling.
 
⚠️ Trade-off: the desktop order summary scrolls with the ticket
list rather than staying put. To pin it, drop .ticket-order from
the reset below and add inside @media (min-width: 768px):
    .modal.buy-ticket-modal .ticket-order {
        position: sticky !important; top: 60px !important;
        max-height: calc(100dvh - 200px) !important;
        overflow-y: auto !important; }
══════════════════════════════════════════════════════════════════ */
.modal.buy-ticket-modal .ticket-list,
.modal.buy-ticket-modal .ticket-order,
.buy-ticket-modal .tkt-scrollable-content,
.buy-ticket-modal .details-modal-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
 
/* Flex chain: modal → … → .ticket-details */
.ui.modal.buy-ticket-modal>.content:has(.ticket-details),
.ui.modal.buy-ticket-modal>.content *:has(.ticket-details) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}
 
.buy-ticket-modal *:has(.ticket-details)>*:not(.ticket-details):not(:has(.ticket-details)) {
    flex: 0 0 auto !important;
    min-height: 0 !important;
}
 
/* flex:1 sizes it when the chain resolves; max-height is the safety
net if an Ember re-render breaks the chain — the failure mode
becomes a slightly-off height instead of no scroll at all */
.buy-ticket-modal .ticket-details {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--rc-chrome)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
 
/* Breadcrumb is outside the scroller now, so sticky is redundant */
.ui.modal.buy-ticket-modal>.content:has(.ticket-details) .ticket-steps {
    position: static !important;
}
 
/* Hide scrollbar chrome everywhere that can scroll */
.modal.buy-ticket-modal .ticket-list,
.modal.buy-ticket-modal .ticket-order,
.buy-ticket-modal .ticket-details {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
 
.modal.buy-ticket-modal .ticket-list::-webkit-scrollbar,
.modal.buy-ticket-modal .ticket-order::-webkit-scrollbar,
.buy-ticket-modal .ticket-details::-webkit-scrollbar {
    display: none;
}
 
/* Confirmation screen: last block clears the footer */
.buy-ticket-modal .details-modal-content>*:last-child {
    margin-bottom: 24px !important;
}
 
/* ══ 10. MOBILE (≤ 767px) ════════════════════════════════════════
Real DOM, from the inspector:
 
  .ticket-steps.st1
    ├ .bs-breadcrumb > .item …
    └ .row.middle-aligned.tkt-countdown
        └ .fxb.fvc > .bs-countdown.box-style
             > .item / .item-divider / .values
 
Chrome, top to bottom: red bar → breadcrumb → timer band →
[scroll] → footer.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
 
    /* red 58 + breadcrumb 30 + timer 30 + footer 64 */
    body {
        --rc-chrome: 184px;
    }
 
    /* ── Red bar: logo / name / venue on one grid ─────────────────
    The logo stops being an absolutely-positioned ::before and
    becomes a real grid cell spanning both text rows, which is what
    makes it centre against text of any length. */
    .ui.modal.buy-ticket-modal .details-modal-header,
    html body .details-modal-header {
        min-height: 0 !important;
        padding: 10px 46px 10px 12px !important;
        padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    }
 
    .ui.modal.buy-ticket-modal .details-modal-header .bs-container {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        align-items: center !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
 
    .ui.modal.buy-ticket-modal .details-modal-header .bs-container::before {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: start !important;
        width: 52px !important;
        height: 36px !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
 
    .details-modal-header h3,
    .details-modal-header h2,
    .details-modal-header .event-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        margin: 0 !important;
        font-size: .8rem !important;
        line-height: 1.2 !important;
    }
 
    .details-modal-header .venue {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        margin: 0 !important;
        gap: 10px !important;
        row-gap: 1px !important;
    }
 
    .details-modal-header .venue .row>div,
    .details-modal-header .venue .row>span,
    .details-modal-header .venue .relative-element {
        font-size: .62rem !important;
        line-height: 1.3 !important;
    }
 
    .details-modal-header .venue .theme-icon,
    .details-modal-header .venue .bs-icon,
    .details-modal-header .venue i,
    .details-modal-header .venue svg {
        width: 11px !important;
        height: 11px !important;
    }
 
    .ui.modal.buy-ticket-modal>.header button,
    .ui.modal.buy-ticket-modal>.header .cancel,
    .ui.modal.buy-ticket-modal>.header [class*="close"],
    .ui.modal.buy-ticket-modal>.header>i.close {
        top: max(4px, env(safe-area-inset-top, 0px)) !important;
        right: 4px !important;
        /* 40px keeps a usable touch target */
        width: 40px !important;
        height: 40px !important;
    }
 
    /* ── .ticket-steps: two stacked bands ────────────────────────
    Horizontal padding moves onto the breadcrumb so the timer band
    can run edge to edge. */
    .ticket-steps {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        border-bottom: none !important;
    }
 
    .ticket-steps .bs-breadcrumb {
        justify-content: center !important;
        flex-wrap: wrap !important;
        row-gap: 2px !important;
        width: 100% !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }
 
    /* Circles cost ~26px each before any text; chevrons cost ~10px,
    which is what lets all four labels fit a phone */
    .ticket-steps .bs-breadcrumb .item::before {
        display: none !important;
    }
 
    .ticket-steps .bs-breadcrumb .item {
        font-size: .7rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
 
    .ticket-steps .bs-breadcrumb .item.active,
    .ticket-steps .bs-breadcrumb:not(:has(.item.active)) .item:last-child {
        font-weight: 800 !important;
    }
 
    /* The ::after is a chevron here, not a connector line, so the
    red fill §5 gives completed steps has to come back off */
    .ticket-steps .bs-breadcrumb .item:not(:last-child)::after,
    .ticket-steps .bs-breadcrumb .item:has(~ .item.active)::after,
    .ticket-steps .bs-breadcrumb:not(:has(.item.active)) .item::after {
        content: ">" !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 .34rem !important;
        background: transparent !important;
        border: none !important;
        color: var(--rc-mute) !important;
        font-size: .72rem !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }
 
    .ticket-steps .bs-breadcrumb .item:last-child::after {
        display: none !important;
    }
 
    /* ── Timer: full-bleed black band ────────────────────────────
    Copy goes on ::before/::after so Backstage's live digits keep
    ticking between them, untouched. */
    .ticket-steps .tkt-countdown,
    .ticket-steps .row.middle-aligned.tkt-countdown {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        box-sizing: border-box !important;
        background: var(--rc-ink) !important;
        border: none !important;
        border-radius: 0 !important;
        font-family: var(--rc-ff) !important;
        font-size: .68rem !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        text-align: center !important;
        color: #fff !important;
    }
 
    .ticket-steps .tkt-countdown::before {
        content: "Tickets held for\00a0" !important;
        color: #fff !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
 
    .ticket-steps .tkt-countdown::after {
        content: "\00a0— complete checkout before they're released" !important;
        color: rgba(255, 255, 255, .8) !important;
        font-weight: 500 !important;
    }
 
    /* Strips the pale pill but never touches `display` — .values is
    the grid that drives the rolling digits */
    .ticket-steps .tkt-countdown .fxb,
    .ticket-steps .tkt-countdown .bs-countdown,
    .ticket-steps .tkt-countdown .bs-countdown.box-style,
    .ticket-steps .tkt-countdown .item,
    .ticket-steps .tkt-countdown .item-divider,
    .ticket-steps .tkt-countdown .values {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #fff !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }
 
    .ticket-steps .tkt-countdown .bs-countdown {
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums !important;
    }
 
    /* ── Cards ───────────────────────────────────────────────── */
    .modal.buy-ticket-modal .details-modal-content .ticket-list {
        padding: 10px 14px 14px !important;
    }
 
    .modal.buy-ticket-modal .ticket-order {
        padding: 0 14px 14px !important;
    }
 
    .modal.buy-ticket-modal .ticket-order>div,
    .buy-ticket-modal .ticket-classes .uls-accordion .list-item {
        border-radius: 12px !important;
    }
 
    .buy-ticket-modal .ticket-list>form.bs-form.small.m-size,
    .buy-ticket-modal .ticket-list .uls-grid.bs-form.small:not(.m-size) {
        padding: 16px !important;
    }
 
    .buy-ticket-modal .ticket-list>form.bs-form.small.m-size>.form-head {
        margin: -16px -16px 0 -16px !important;
        padding: 0 16px !important;
    }
 
    .buy-ticket-modal .ticket-list .uls-grid.bs-form.small:not(.m-size)>.form-head {
        margin: -16px -16px 0 -16px !important;
        padding: 0 0 16px 0 !important;
    }
 
    /* ── Footer ──────────────────────────────────────────────── */
    .by-tkt-footer .ft-content {
        padding: 10px 14px !important;
        min-height: 56px !important;
    }
 
    .by-tkt-footer button,
    .by-tkt-footer .bs-button {
        min-height: 44px !important;
    }
 
    /* Mobile-only markup: ticket-count toggle + price/Continue group */
    .by-tkt-footer .ft-content.mobile-view-only {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
 
    .by-tkt-footer .ft-content.mobile-view-only .uls-group.gap-2.vCenter {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
 
    .by-tkt-footer .ft-content.mobile-view-only .uls-group.gap-2.vCenter button.bs-button.primary {
        width: auto !important;
    }
 
    /* ── iOS: stop focus-zoom ────────────────────────────────────
    Safari zooms the viewport when a focused input is under 16px,
    which knocks the frozen header and footer out of alignment.
    This is the commonest cause of "the layout jumped" on iPhone. */
    .buy-ticket-modal input,
    .buy-ticket-modal select,
    .buy-ticket-modal textarea {
        font-size: 16px !important;
    }
 
    .buy-ticket-modal input.bs-input,
    .buy-ticket-modal input.iti__tel-input {
        height: 48px !important;
    }
 
    .ui.modal.buy-ticket-modal,
    .ui.modal.buy-ticket-modal>.content,
    .buy-ticket-modal .ticket-details {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}
 
/* ══ 11. NARROW PHONES (≤ 380px) ═════════════════════════════════
Breadcrumb wraps to two centred lines here, hence the taller chrome */
@media (max-width: 380px) {
    body {
        --rc-chrome: 202px;
    }
 
    .ui.modal.buy-ticket-modal .details-modal-header .bs-container {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }
 
    .ui.modal.buy-ticket-modal .details-modal-header .bs-container::before {
        width: 44px !important;
        height: 30px !important;
    }
 
    .ticket-steps .bs-breadcrumb {
        padding: 7px 10px !important;
    }
 
    .ticket-steps .bs-breadcrumb .item {
        font-size: .66rem !important;
    }
 
    .ticket-steps .bs-breadcrumb .item:not(:last-child)::after {
        margin: 0 .28rem !important;
    }
 
    .ticket-steps .tkt-countdown {
        font-size: .64rem !important;
        padding: 5px 10px !important;
    }
 
    .modal.buy-ticket-modal .details-modal-content .ticket-list {
        padding: 8px 10px 10px !important;
    }
 
    .buy-ticket-modal .ticket-list>form.bs-form.small.m-size,
    .buy-ticket-modal .ticket-list .uls-grid.bs-form.small:not(.m-size) {
        padding: 12px !important;
    }
 
    .buy-ticket-modal .ticket-list>form.bs-form.small.m-size>.form-head,
    .buy-ticket-modal .ticket-list .uls-grid.bs-form.small:not(.m-size)>.form-head {
        margin: -12px -12px 0 -12px !important;
    }
}
 
/* ══ 12. LANDSCAPE PHONES (≤ 500px tall) ═════════════════════════
Must come after §10/§11: at equal specificity source order decides,
and those blocks would otherwise hand back height a 400px-tall
viewport cannot spare. */
@media (max-height: 500px) and (max-width: 900px) {
    body {
        --rc-chrome: 150px;
    }
 
    .ui.modal.buy-ticket-modal .details-modal-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
 
    .ticket-steps .bs-breadcrumb {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
 
    .ticket-steps .tkt-countdown {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
 
    .by-tkt-footer .ft-content {
        padding: 6px 14px !important;
        min-height: 48px !important;
    }
}
 
@media (prefers-reduced-motion: reduce) {
 
    .buy-ticket-modal *,
    .buy-ticket-modal *::before,
    .buy-ticket-modal *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
 
/* ══ 13. EXISTING BUSINESS RULE ══════════════════════════════════
⚠️ Must stay below the @import at the top of the file. */
[data-field-id] .bs-label-input input {
    pointer-events: none !important;
    opacity: .45 !important;
}