/* Checkout view on the ticket page (events/ticket/index.php) */

/* two column layout */
.checkout-page-layout {
    /* 28.4375rem is the design's 455px panel at a 16px root; the track also carries the side
       column's right padding, hence the calc() below */
    --checkout-summary-width: 28.4375rem;
    --checkout-column-gutter: 2rem;
    /* also read by CheckoutViewController for its scroll offset */
    --checkout-sticky-offset: 5rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--checkout-summary-width) + var(--checkout-column-gutter));
    gap: var(--checkout-column-gutter);
}

@media (min-width: 100rem) {
    .checkout-page-layout {
        max-width: 87.5rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.checkout-page-layout application-list-template {
    min-width: 0;
}

.checkout-steps-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-page-cta {
    margin-top: 1rem;
}

/* step card placeholder copy -- inside a section */
.checkout-step-placeholder {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

/* summary column; padding matches application-list-template's own so the top edges line up */
.checkout-page-side-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem var(--checkout-column-gutter) 1rem 0;
}

@media (min-width: 48.0625rem) {
    .checkout-page-side-column {
        position: sticky;
        top: var(--checkout-sticky-offset, 5rem);
        align-self: flex-start;
    }
}

@media (max-width: 48rem) {
    .checkout-page-layout {
        display: block;
    }

    .checkout-page-side-column {
        padding: 1rem;
    }

    /* tighter than the template's desktop default, matching css/events/ticket.css */
    .checkout-page-layout application-list-template {
        --template-header-padding: 1rem 1rem .5rem;
        --template-content-padding: .5rem 1rem 1rem;
    }
}

/* Tablet. The summary column's track is a fixed 455px, so the step stack gets what is left:
   237px at 820px wide. One column here, summary underneath, steps still the desktop accordion. */
@media (min-width: 48.0625rem) and (max-width: 71.25rem) {
    .checkout-page-layout {
        display: block;
    }

    .checkout-page-side-column {
        position: static;
        padding: 1rem 0;
    }
}

/* view chrome: desktop swaps the list out, mobile slides a sheet over it */

/* spelled out because [hidden] is only a UA rule and this page's own rules outrank it */
#ticket-list-view[hidden],
.checkout-view[hidden] {
    display: none;
}

/* the whole checkout surface, outside any individual section -- same background as the rest
   of the (themed) page */
.checkout-view {
    background: var(--bg-default, #FFFFFF);
}

/* mobile-only chrome, switched back on inside the breakpoint block below */
.checkout-sheet-header,
.checkout-sheet-progress,
.checkout-mobile-bar,
.checkout-backdrop {
    display: none;
}

.checkout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
}

/* applied to the page's fixed footer bar while checkout is open */
.checkout-view-hidden {
    display: none !important;
}

@media (max-width: 48rem) {
    .checkout-backdrop:not([hidden]) {
        display: block;
    }

    /* position: relative so a section's pushed screen can cover the sheet with inset: 0 */
    #checkout-sheet[mode="sheet"] .checkout-view {
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;
    }

    .checkout-sheet-header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        padding: 0.5rem 1rem 1rem;
        border-bottom: 1px solid var(--border-default, #C4CAC9);
    }

    .checkout-sheet-title {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: var(--text-primary, #222222);
    }

    .checkout-sheet-close {
        position: absolute;
        right: 1rem;
        display: flex;
        padding: 0.25rem;
        border: 0;
        background: none;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--icon-default, #3F4242);
        cursor: pointer;
    }

    .checkout-sheet-close:focus-visible {
        outline: none;
        border-radius: 0.25rem;
        box-shadow: 0 0 0 2px var(--brand-primary, #038580);
    }

    /* progress bar, Back and step counter -- page chrome, outside any section */
    .checkout-sheet-progress {
        display: block;
        flex: 0 0 auto;
        padding: 0.75rem 1rem 0;
    }

    .checkout-sheet-progress stepper-component {
        --status-color: var(--brand-primary, #038580);
        --empty-bar-color: var(--border-default, #C4CAC9);
        --secondary-text: var(--text-secondary, #5E6463);
    }

    /* one step at a time, keyed off the same expanded flag the desktop accordion uses */
    #checkout-sheet[mode="sheet"] checkout-step-card:not([expanded]) {
        display: none;
    }

    /* the sheet header already names the step */
    #checkout-sheet[mode="sheet"] breadcrumb-tabs-component[slot="tabs"],
    #checkout-sheet[mode="sheet"] h1[slot="header-title"] {
        display: none;
    }

    #checkout-sheet[mode="sheet"] application-list-template {
        --template-header-padding: 0;
        --template-content-padding: 1rem;
    }

    /* only the card stack scrolls */
    #checkout-sheet[mode="sheet"] .checkout-page-layout {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }

    /* the bottom bar is the only primary action on mobile */
    .checkout-page-cta,
    #checkout-sheet[mode="sheet"] [data-checkout-action="continue"] {
        display: none;
    }

    .checkout-mobile-bar {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--border-default, #C4CAC9);
        background: var(--bg-default, #FFFFFF);
    }

    .checkout-mobile-total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .checkout-mobile-total-row[hidden] {
        display: none;
    }

    .checkout-mobile-total-label {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: var(--text-primary, #222222);
    }

    /* amount doubles as the summary expand control */
    .checkout-mobile-total {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: var(--text-primary, #222222);
        cursor: pointer;
    }

    .checkout-mobile-edit {
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-weight: 400;
        color: var(--link-default, #026E80);
        text-decoration: underline;
        cursor: pointer;
    }

    .checkout-mobile-total:focus-visible,
    .checkout-mobile-edit:focus-visible {
        outline: none;
        border-radius: 0.25rem;
        box-shadow: 0 0 0 2px var(--brand-primary, #038580);
    }

    .checkout-mobile-total[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    /* summary column; the cart sheet shows the order on mobile */
    .checkout-page-side-column {
        display: none;
    }

    /* cart sheet raised over checkout by the total's chevron */
    body.checkout-view-open #cart-bottom-sheet {
        --bottom-sheet-z-index: 1010;
    }
}

/* attendee info section (step 2) */
.checkout-attendee {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* section heading, sheet only */
.checkout-attendee-heading {
    display: none;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

.checkout-attendee-intro {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-primary, #222222);
}

/* the base stylesheets set display on these, so [hidden] alone does not hide them */
.checkout-attendee[hidden],
.checkout-attendee-heading[hidden],
.checkout-attendee-intro[hidden],
.checkout-attendee-customize[hidden],
.checkout-attendee-question[hidden],
.checkout-attendee-summary[hidden] {
    display: none;
}

/* one per ticket that offers the choice, sitting above that ticket's attendees */
.checkout-attendee-customize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--bg-subtle, #F5F6F6);
    margin-bottom: 1rem;
}

.checkout-attendee-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* shared answers sit inset, so their labels line up with the banner's checkbox label. In the
   sheet the template's own padding already does this. */
@media (min-width: 48.0625rem) {
    .checkout-attendee-groups:not(.checkout-attendee-groups-customized) {
        padding-inline: 1rem;
    }
}

/* short answers and numbers stop short of the full width, as the frames draw them */
.checkout-attendee-question[data-question-type="sa"] form-field-element,
.checkout-attendee-question[data-question-type="nm"] form-field-element {
    max-width: 24rem;
}

.checkout-attendee-question {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* a follow-up sits under the question whose answer reveals it */
.checkout-attendee-question-child {
    margin-left: 1.5rem;
}

/* typed signature; nested to outrank the page's inline html :not(.material-icons) font rule */
.checkout-attendee .checkout-attendee-signature {
    min-height: 3.75rem;
    padding: 1.5rem 1rem;
    border: 3px dashed var(--border-default, #C4CAC9);
    border-radius: 0.5rem;
    font-family: 'Great Vibes', cursive !important;
    font-size: 2rem;
    line-height: 2.25rem;
    text-align: center;
    color: var(--text-disabled, #9DA6A5);
}

.checkout-attendee .checkout-attendee-signature-signed {
    color: var(--ticket-text-primary, #222222);
}

/* one group per ticket type, customize mode only */
.checkout-attendee-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-attendee-ticket {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.checkout-attendee-ticket-thumb {
    flex: 0 0 auto;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.25rem;
    object-fit: cover;
}

.checkout-attendee-ticket-thumb-empty {
    display: block;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-attendee-ticket-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.checkout-attendee-ticket-name {
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
    overflow-wrap: anywhere;
}

.checkout-attendee-ticket-dates {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--ticket-text-secondary, #5E6463);
}

.checkout-attendee-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-attendee-block-heading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

/* name pair */
.checkout-attendee-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* completed step read-back */
.checkout-attendee-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
}

/* clamped: this is a read-back, and a pasted paragraph would otherwise push the rest of
   checkout off the page. Edit reopens the field with the whole answer. */
.checkout-attendee-summary-line {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
    overflow-wrap: anywhere;
}

.checkout-attendee-summary-line strong {
    font-weight: 600;
}

.checkout-attendee-summary-ticket {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
    overflow-wrap: anywhere;
}

.checkout-attendee-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.checkout-attendee-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-attendee-summary-toggle {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 600;
    color: var(--brand-primary, #038580);
    cursor: pointer;
}

.checkout-attendee-summary-toggle i {
    font-size: 1.25rem;
}

.checkout-attendee-summary-toggle:focus-visible {
    outline: none;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 2px var(--brand-primary, #038580);
}

@media (max-width: 48rem) {
    .checkout-attendee {
        gap: 1.5rem;
    }

    .checkout-attendee-heading:not([hidden]) {
        display: block;
    }

    /* the heading and the line under it are one block */
    .checkout-attendee-heading + .checkout-attendee-intro {
        margin-top: -1.5rem;
    }

    /* full bleed, breaking out of the sheet's 1rem template padding */
    .checkout-attendee-customize {
        margin-inline: -1rem;
        border-radius: 0;
    }

    /* flat rather than carded; groups split by a full bleed strip */
    .checkout-attendee-block {
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .checkout-attendee-group + .checkout-attendee-group::before {
        content: "";
        display: block;
        height: 0.5rem;
        margin: 0 -1rem 1rem;
        border-top: 1px solid var(--border-default, #C4CAC9);
        border-bottom: 1px solid var(--border-default, #C4CAC9);
        background: var(--bg-subtle, #F5F6F6);
    }

    .checkout-attendee-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* account section (step 1) */
.checkout-account {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* section heading, sheet only */
.checkout-account-heading {
    display: none;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

.checkout-account-intro {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

.checkout-account-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* the base stylesheets set display on these, so [hidden] alone does not hide them */
.checkout-account-heading[hidden],
.checkout-account-intro[hidden],
#checkout-account-tabs[hidden],
.checkout-account-panel[hidden],
.checkout-account-save[hidden],
.checkout-account-passwords[hidden],
.checkout-account-error[hidden],
.checkout-account-summary[hidden] {
    display: none;
}

/* the guest/sign-in toggle: segmented-control is a shared, platform-wide component with its own
   fixed design-system palette, so this overrides just its custom properties for this instance
   (same shadow-piercing mechanism the rest of this theme already relies on) rather than touching
   the component itself, which other pages also use unthemed. */
#checkout-account-tabs {
    --selected-color: var(--brand-primary, #038580);
    --selected-text-color: var(--text-inverse, #FFFFFF);
    --seg-track-border: var(--border-default, #9DA6A5);
}

/* name pair */
.checkout-account-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkout-account-passwords {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-account-error {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--negative, #D63952);
}

/* hook the generated SSO callbacks write into; mirrored into the visible message */
.checkout-account-sso-error {
    display: none;
}

.checkout-account-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--link-default, #026E80);
    text-decoration: underline;
    cursor: pointer;
}

.checkout-account-link:focus-visible {
    outline: none;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 2px var(--brand-primary, #038580);
}

/* "Or" divider */
.checkout-account-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

.checkout-account-or::before,
.checkout-account-or::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--border-default, #C4CAC9);
}

.checkout-account-sso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* social buttons, restyled from the helpers' own markup */
.checkout-account-sso .social-btn-full {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-default, #C4CAC9);
    border-radius: 0.25rem;
    background: var(--ticket-bg, #FFFFFF);
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-primary, #222222);
    cursor: pointer;
}

.checkout-account-sso .social-btn-full:hover {
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-account-sso .social-btn-full:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-primary, #038580);
}

.checkout-account-sso .sso-btn-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* completed step read-back */
.checkout-account-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
}

.checkout-account-summary-line {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ticket-text-secondary, #5E6463);
}

/* actionable items in the read-back */
#checkout-account-summary-save {
    margin-top: 0.75rem;
}

#checkout-account-confirm {
    margin-top: 1.25rem;
}

.checkout-account-summary-line strong {
    color: var(--ticket-text-primary, #222222);
}

@media (max-width: 48rem) {
    .checkout-account-heading:not([hidden]) {
        display: block;
    }

    /* providers go one per row at this width */
    .checkout-account-sso {
        grid-template-columns: 1fr;
    }

    .checkout-account-row {
        gap: 0.75rem;
    }
}

@media (max-width: 48rem) {
    /* the sheet's bottom bar carries this step's action instead */
    #checkout-account-guest-submit,
    #checkout-account-signin-submit,
    #checkout-account-confirm {
        display: none;
    }
}

/* signed-in identity block, sheet only */
.checkout-welcome {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.checkout-welcome[hidden] {
    display: none;
}

.checkout-welcome-heading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #222222);
}

.checkout-welcome-subtext {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--text-secondary, #5E6463);
}

.checkout-welcome-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-welcome-avatar {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: var(--text-secondary, #5E6463);
}

.checkout-welcome-identity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.checkout-welcome-identity-text strong {
    color: var(--text-primary, #222222);
}

.checkout-welcome-identity-text span {
    color: var(--text-secondary, #5E6463);
    overflow-wrap: anywhere;
}

.checkout-welcome-switch {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--text-secondary, #5E6463);
}

@media (max-width: 48rem) {
    .checkout-welcome:not([hidden]) {
        display: flex;
    }
}

/* ---------------------------------------------------------------- */
/* evProtect section (step 4)                                        */
/* ---------------------------------------------------------------- */

.checkout-evprotect {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-evprotect-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.checkout-evprotect-icon {
    display: block;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--cyan-400, #35A1B3);
}

.checkout-evprotect-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

.checkout-evprotect-blurb {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-primary, #222222);
}

.checkout-evprotect-blurb strong {
    font-weight: 600;
}

/* quote states */
.checkout-evprotect-loading {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

.checkout-evprotect-failed {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--warning, #FCCB4D);
    border-radius: 0.5rem;
    background: var(--bg-warning, #FFFAED);
}

.checkout-evprotect-failed i {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.125rem;
    color: var(--warning, #FCCB4D);
}

.checkout-evprotect-failed-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-primary, #222222);
}

.checkout-evprotect-retry {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 600;
    color: var(--link-default, #026E80);
    text-decoration: underline;
    cursor: pointer;
}

.checkout-evprotect-choices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* opt-in card, with the badge overlapping its top border */
.checkout-evprotect-card {
    position: relative;
    margin-top: 1rem;
    padding: 1rem;
    border: 2px solid var(--brand-primary, #038580);
    border-radius: 0.5rem;
    background: var(--ticket-bg, #FFFFFF);
}

.checkout-evprotect-badge {
    position: absolute;
    right: 0;
    bottom: calc(100% - 0.125rem);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background: var(--brand-primary, #038580);
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;
    color: var(--text-inverse, #FFFFFF);
}

.checkout-evprotect-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.checkout-evprotect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkout-evprotect-radio {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--brand-primary, #038580);
    cursor: pointer;
}

.checkout-evprotect-radio:focus-visible {
    outline: 2px solid var(--brand-primary, #038580);
    outline-offset: 2px;
}

.checkout-evprotect-option-label {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ticket-text-primary, #222222);
}

/* opt-in with no quote behind it */
.checkout-evprotect-radio:disabled,
.checkout-evprotect-radio:disabled + .checkout-evprotect-option-label {
    cursor: default;
    color: var(--text-disabled, #9DA6A5);
}

.checkout-evprotect-option:has(.checkout-evprotect-radio:disabled) {
    cursor: default;
}

.checkout-evprotect-price {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

/* indented to sit under the option label rather than the radio */
.checkout-evprotect-benefits {
    margin: 0.5rem 0 0;
    padding: 0 0 0 1.75rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkout-evprotect-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 600;
    color: var(--brand-primary, #038580);
}

.checkout-evprotect-benefits i {
    font-size: 1rem;
    color: var(--brand-primary, #038580);
}

.checkout-evprotect-fineprint {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--ticket-text-primary, #222222);
}

.checkout-evprotect-terms-link {
    color: var(--link-default, #026E80);
    text-decoration: underline;
}

.checkout-evprotect-terms-link:focus-visible {
    outline: 2px solid var(--brand-primary, #038580);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* the decline sits outside the opt-in card, so it has to pay for that card's padding and
   border itself or its radio hangs to the left of the one above it */
.checkout-evprotect-decline {
    padding-left: calc(1rem + 2px);
}

.checkout-evprotect-decline-note {
    margin: 0.25rem 0 0 1.75rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

/* collapsed read-backs */
.checkout-evprotect-summary {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

.checkout-evprotect-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--warning, #FCCB4D);
    border-radius: 0.5rem;
    background: var(--bg-warning, #FFFAED);
}

.checkout-evprotect-warning > i {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--warning, #FCCB4D);
}

.checkout-evprotect-warning-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--ticket-text-primary, #222222);
}

.checkout-evprotect-warning-text span {
    display: block;
}

.checkout-evprotect-warning-dismiss {
    flex-shrink: 0;
    /* the glyph is 1rem; the box is padded out to a 1.5rem hit area */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--icon-default, #3F4242);
    cursor: pointer;
}

.checkout-evprotect-warning-dismiss:focus-visible {
    outline: 2px solid var(--brand-primary, #038580);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* the base stylesheets set display on these, so [hidden] alone does not hide them */
.checkout-evprotect[hidden],
.checkout-evprotect-loading[hidden],
.checkout-evprotect-failed[hidden],
.checkout-evprotect-choices[hidden],
.checkout-evprotect-price[hidden],
.checkout-evprotect-decline-note[hidden],
.checkout-evprotect-summary[hidden],
.checkout-evprotect-warning[hidden] {
    display: none;
}

@media (max-width: 48rem) {
    /* recommended badge */
    .checkout-evprotect-badge {
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 600;
    }

    .checkout-evprotect-card {
        padding: 0.75rem;
    }

    .checkout-evprotect-decline {
        padding-left: calc(0.75rem + 2px);
    }

    /* the label wraps on narrow screens, so the price leaves the row baseline alone */
    .checkout-evprotect-row {
        align-items: flex-start;
    }
}

/* shipping section (step 3) */
.checkout-shipping {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-shipping-intro {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-primary, #222222);
}

/* the base stylesheets set display on these, so [hidden] alone does not hide them */
.checkout-shipping[hidden],
.checkout-shipping-intro[hidden],
.checkout-shipping-pick[hidden],
.checkout-shipping-layout[hidden],
.checkout-shipping-picker[hidden],
.checkout-shipping-choice[hidden],
.checkout-shipping-choose-toggle[hidden],
.checkout-shipping-choose-static[hidden],
.checkout-shipping-summary[hidden],
.checkout-shipping form-field-element[hidden],
.checkout-shipping-choice-price[hidden] {
    display: none;
}

/* the gate matches one column of the address form below it, as the frames draw it */
.checkout-shipping-zip-gate {
    max-width: calc((100% - 1rem) / 2);
}

/* the two shipping choices */
.checkout-shipping-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-shipping-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.checkout-shipping-choice-main {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.checkout-shipping-choice-label {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ticket-text-primary, #222222);
}

.checkout-shipping-choice-price {
    justify-self: start;
    padding-left: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
    white-space: nowrap;
}

/* both indent to the label, clearing the 20px control plus its 8px gap */
.checkout-shipping-choice-note,
.checkout-shipping-choose {
    grid-column: 1 / -1;
    padding-left: 1.75rem;
}

.checkout-shipping-choice-note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

/* the picker control. Before shipping is chosen the frames show a plain label, so the two swap */
.checkout-shipping-choose {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
}

.checkout-shipping-choose-toggle::part(checkbox-label) {
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

.checkout-shipping-choose-static {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

/* native radios: radio-group takes no right aligned price, description or nested control, and
   checkbox-element[radio] draws a square box -- the "empty ring / filled dot" pattern follows
   the same button/border colors as checkout-step-card's own indicator */
.checkout-shipping-radio {
    /* grid centres the dot on the box. A margin cannot: box-sizing is border-box globally, so
       the checked ring takes 2px off each edge of the content box. */
    display: grid;
    place-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-default, #9DA6A5);
    border-radius: 100%;
    background: var(--ticket-bg, #FFFFFF);
    cursor: pointer;
}

.checkout-shipping-radio:checked {
    border: 2px solid var(--brand-primary, #038580);
}

.checkout-shipping-radio:checked::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background: var(--brand-primary, #038580);
}

.checkout-shipping-radio:hover:not(:disabled):not(:checked) {
    border-color: var(--icon-default, #3F4242);
}

.checkout-shipping-radio:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-primary, #038580);
}

/* an empty ring, as the frames draw it. The label greys too, so the state is not colour alone */
.checkout-shipping-radio:disabled {
    border-color: var(--bg-disabled, #D8DBDB);
    cursor: not-allowed;
}

/* a choice that cannot be taken yet says so in more than colour */
.checkout-shipping-radio:disabled ~ .checkout-shipping-choice-label {
    color: var(--text-disabled, #9DA6A5);
}

/* address form beside the picker panel */
.checkout-shipping-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Stacked by default, picker first: which tickets before where to, as the sheet frames order it */
.checkout-shipping-picker {
    order: -1;
}

/* Side by side only where both halves fit, asked of the section rather than the viewport: the
   step stack is 1fr of whatever the summary column leaves, so one viewport gives very different
   section widths. A viewport threshold left First name 119px wide at 1141px.

   Desktop only: container-type applies contain: layout, which would make this the containing
   block for the sheet's absolutely positioned pushed screen. */
@media (min-width: 48.0625rem) {
    .checkout-shipping {
        container-type: inline-size;
        container-name: checkout-shipping;
    }

    /* 38rem gives each half about 18.5rem, against the design's 24.8rem at 50.5rem */
    @container checkout-shipping (min-width: 38rem) {
        .checkout-shipping-picking .checkout-shipping-layout {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .checkout-shipping-picker {
            order: 0;
        }
    }
}

.checkout-shipping-address {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.checkout-shipping-address-heading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

.checkout-shipping-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkout-shipping-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
}

/* only the name pair stays side by side once the column narrows */
.checkout-shipping-picking .checkout-shipping-pair:not(.checkout-shipping-pair-name) {
    grid-template-columns: minmax(0, 1fr);
}

/* the picker: a bordered panel on desktop, a pushed screen in the sheet */
.checkout-shipping-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-default, #C4CAC9);
    border-radius: 0.5rem;
    background: var(--ticket-bg, #FFFFFF);
}

/* the sheet's own header for this screen; desktop has the title below instead */
.checkout-shipping-picker-bar {
    display: none;
}

.checkout-shipping-picker-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: var(--ticket-text-primary, #222222);
}

.checkout-shipping-picker-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Select all sits above the rows, ruled off from them */
.checkout-shipping-select-all {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-default, #EBEDED);
}

.checkout-shipping-tickets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkout-shipping-ticket {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* the checkbox's own label carries the accessible name; the visible copy is the span beside it */
.checkout-shipping-ticket-check::part(checkbox-label) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.checkout-shipping-ticket-check {
    flex: 0 0 auto;
}

.checkout-shipping-ticket-thumb {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

.checkout-shipping-ticket-thumb-empty {
    display: block;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-shipping-ticket-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.checkout-shipping-ticket-name {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
    overflow-wrap: anywhere;
}

.checkout-shipping-ticket-dates {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--ticket-text-secondary, #5E6463);
}

/* the total and its explanation are one block, ruled off from the tickets */
.checkout-shipping-picker-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-default, #EBEDED);
}

.checkout-shipping-picker-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.checkout-shipping-picker-total-label {
    color: var(--ticket-text-primary, #222222);
}

.checkout-shipping-picker-total-value {
    color: var(--brand-primary, #038580);
}

.checkout-shipping-picker-note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

/* mandatory shipping message */
.checkout-shipping-required {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--negative, #D63952);
}

.checkout-shipping-required:empty {
    display: none;
}

/* sheet only: the heading and push row that stand in for the desktop checkbox */
.checkout-shipping-pick {
    display: none;
}

/* completed step read-back */
.checkout-shipping-summary {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    .checkout-shipping {
        gap: 1.5rem;
    }

    .checkout-shipping-intro {
        text-align: center;
    }

    /* full width: the two column form it lines up with is desktop only */
    .checkout-shipping-zip-gate {
        max-width: none;
    }

    /* flat rather than a panel, with the price pushed to the far edge */
    .checkout-shipping-choices {
        gap: 0.75rem;
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .checkout-shipping-choice-price {
        justify-self: end;
        padding-left: 0.5rem;
    }

    /* the price of the choice not taken reads as the offer it is */
    .checkout-shipping-choice-main:has(.checkout-shipping-radio:not(:checked)) + .checkout-shipping-choice-price {
        color: var(--brand-primary, #038580);
    }

    /* the sheet reaches the picker through this row instead of the desktop checkbox */
    .checkout-shipping-choose {
        display: none;
    }

    .checkout-shipping-pick:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .checkout-shipping-pick-heading {
        margin: 0 0 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: var(--ticket-text-primary, #222222);
    }

    /* full bleed, breaking out of the sheet's 1rem template padding */
    .checkout-shipping-pick-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-inline: -1rem;
        padding: 0.75rem 1rem;
        border: 0;
        border-top: 1px solid var(--border-default, #EBEDED);
        border-bottom: 1px solid var(--border-default, #EBEDED);
        background: none;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

    .checkout-shipping-pick-row:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--brand-primary, #038580);
    }

    .checkout-shipping-pick-row i {
        flex: 0 0 auto;
        font-size: 1.25rem;
        color: var(--icon-secondary, #5E6463);
    }

    .checkout-shipping-pick-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .checkout-shipping-pick-count {
        font-size: 0.875rem;
        line-height: 1.125rem;
        font-weight: 600;
        color: var(--ticket-text-primary, #222222);
    }

    /* one line: the full list is on the screen this row opens */
    .checkout-shipping-pick-names {
        overflow: hidden;
        font-size: 0.75rem;
        line-height: 1rem;
        color: var(--ticket-text-secondary, #5E6463);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* the form fills the width again, since the picker is a pushed screen rather than a column */
    .checkout-shipping-picking .checkout-shipping-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* only the name pair stays side by side; the frames stack the rest at this width */
    .checkout-shipping-pair:not(.checkout-shipping-pair-name) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* its own screen, over the sheet's header, stepper and bar. .checkout-view is given
       position: relative above so inset resolves against the sheet. */
    .checkout-shipping-picker:not([hidden]) {
        position: absolute;
        inset: 0;
        z-index: 2;
        gap: 1rem;
        overflow-y: auto;
        padding: 0.5rem 1rem 1rem;
        border: 0;
        border-radius: 0;
    }

    .checkout-shipping-picker-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0.5rem 0 0.75rem;
    }

    .checkout-shipping-picker-bar-title {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: var(--ticket-text-primary, #222222);
    }

    .checkout-shipping-picker-back {
        position: absolute;
        left: 0;
        display: flex;
        padding: 0.25rem;
        border: 0;
        background: none;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--icon-default, #3F4242);
        cursor: pointer;
    }

    .checkout-shipping-picker-back:focus-visible {
        outline: none;
        border-radius: 0.25rem;
        box-shadow: 0 0 0 2px var(--brand-primary, #038580);
    }

    /* the sheet header already names this screen */
    .checkout-shipping-picker-title {
        display: none;
    }

    /* nothing behind the pushed screen is drawn or reachable */
    .checkout-shipping-subview-open > *:not(.checkout-shipping-layout),
    .checkout-shipping-subview-open .checkout-shipping-address {
        display: none;
    }
}

/* payment section (step 5) */
.checkout-payment {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* the base stylesheets set display on these, so [hidden] alone does not hide them */
#checkout-payment [hidden],
#checkout-payment-terms [hidden],
#checkout-payment-terms[hidden] {
    display: none;
}

/* In the sheet the design runs one grey panel from the rows through the billing address.
   On desktop only the rows and fields carry it, so the wrapper is bare there. */
.checkout-payment-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 48rem) {
    .checkout-payment-panel {
        gap: 1.25rem;
        padding: 1rem;
        border-radius: 0.5rem;
        background: var(--bg-subtle, #F5F6F6);
    }

    .checkout-payment-panel .checkout-payment-methods {
        padding: 0;
        border-radius: 0;
        background: none;
    }
}

/* method panel */
.checkout-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--bg-subtle, #F5F6F6);
}

.checkout-payment-methods-heading,
.checkout-payment-billing-heading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--ticket-text-primary, #222222);
}

/* asks Stripe what this browser offers; never seen */
.checkout-payment-express-probe {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 20rem;
    pointer-events: none;
}

/* Sized off the panel, not the window: the summary column beside the stack means a wide window
   can still leave this too narrow for two columns. */
.checkout-payment-methods {
    container-type: inline-size;
}

/* One column by default, so a browser without container queries gets the safe layout */
.checkout-payment-choice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Two columns only once the panel can spare the width for both of them */
@container (min-width: 34rem) {
    /* The cap is what holds the card fields to two rows: given much above 35rem Stripe lifts
       expiry and security code up beside the card number. */
    .checkout-payment-choice {
        grid-template-columns: minmax(9rem, 12rem) minmax(0, 34rem);
        gap: 1.5rem;
    }

    /* the provider's line sits where the card fields would, so the panel keeps its height */
    .checkout-payment-detail {
        min-height: 12.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.checkout-payment-method-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.checkout-payment-method {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkout-payment-method input[type="radio"] {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--brand-primary, #038580);
    cursor: pointer;
}

.checkout-payment-method-mark {
    flex: none;
    width: 1.75rem;
    height: 1.0625rem;
    object-fit: contain;
}

.checkout-payment-method-mark-wide {
    width: 2.4375rem;
}

.checkout-payment-method-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ticket-text-primary, #222222);
}

/* the right hand column */
.checkout-payment-detail {
    min-width: 0;
}

.checkout-payment-element {
    min-height: 3rem;
}

.checkout-payment-method-note {
    margin: 0;
    padding-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--ticket-text-primary, #222222);
}


/* a wallet or Klarna row's own button, where Complete checkout sits */
.checkout-express-cta {
    min-height: 3rem;
    margin-bottom: 0.75rem;
}

/* both sit outside #checkout-payment, so they need their own [hidden] rule */
.checkout-express-cta[hidden],
#checkout-complete-btn[hidden],
#checkout-complete-btn-mobile[hidden] {
    display: none;
}

.checkout-payment-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-secondary, #5E6463);
}

.checkout-payment-spinner {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-default, #C4CAC9);
    border-top-color: var(--brand-primary, #038580);
    border-radius: 100%;
    animation: checkout-payment-spin 0.8s linear infinite;
}

@keyframes checkout-payment-spin {
    to { transform: rotate(360deg); }
}

.checkout-payment-free {
    margin: 0;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--bg-subtle, #F5F6F6);
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ticket-text-primary, #222222);
}

/* billing address */
.checkout-payment-billing,
.checkout-payment-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-payment-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* purchase errors */
.checkout-payment-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--negative, #D63952);
    border-radius: 0.5rem;
}

.checkout-payment-error-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--negative, #D63952);
}

.checkout-payment-retry {
    padding: 0.25rem 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--link-default, #026E80);
    text-decoration: underline;
    cursor: pointer;
}

.checkout-payment-retry:focus-visible {
    outline: none;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 2px var(--brand-primary, #038580);
}

/* checkboxes under the stack */
.checkout-payment-terms {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.checkout-payment-term {
    --label-font-size: 0.875rem;
    /* outside any section, like the rest of this bottom block -- page text/button colors,
       not the ticket ones. checkbox-element exposes these three as override hooks (see
       js/Components/BasicCheckbox.js) instead of component-wide hardcoded colors. */
    --checkbox-checked-color: var(--brand-primary, #038580);
    --checkbox-checkmark-color: var(--text-inverse, #FFFFFF);
    --label-color: var(--text-primary, #484848);
}

@media (max-width: 48rem) {
    .checkout-payment-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-payment-terms {
        margin-top: 1rem;
    }
}