:root {
    color-scheme:dark;
    font-family:'Space Grotesk',sans-serif;
    background:#111316;
    color:#f5f5f6
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:radial-gradient(ellipse at 60% -20%,#33263d 0,transparent 48%),#111316;
    min-height:100vh
}
a {
    color:inherit;
    text-decoration:none
}
.checkout-header {
    height:86px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1320px;
    margin:auto;
    padding:0 5%;
    border-bottom:1px solid #ffffff18;
    font-size:.8rem;
    color:#aaa
}
.wordmark {
    font-family:Orbitron,sans-serif;
    color:#fff;
    font-weight:700
}
.checkout-main {
    max-width:1120px;
    margin:auto;
    padding:5rem 2rem 7rem
}
.checkout-heading {
    max-width:740px;
    margin-bottom:3rem
}
.eyebrow {
    font-size:.7rem;
    letter-spacing:.18em;
    color:#e59ee2;
    font-weight:700
}
.checkout-heading h1 {
    font-family:Orbitron,sans-serif;
    font-size:clamp(2rem,5vw,3.8rem);
    line-height:1.1;
    letter-spacing:-.04em;
    margin:1rem 0
}
.checkout-heading em {
    font-style:normal;
    color:#eca9e5
}
.checkout-heading>p:not(.eyebrow),.panel>p,.ticket>p:not(.eyebrow) {
    color:#a7a6ae;
    line-height:1.6
}
.checkout-grid {
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);
    gap:1.5rem;
    align-items:start
}
.panel,.ticket {
    background:#191a20;
    border:1px solid #ffffff18;
    border-radius:18px;
    padding:2rem
}
.ticket {
    background:linear-gradient(145deg,#25202c,#191a20)
}
.steps {
    display:flex;
    gap:2rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid #ffffff18;
    color:#777;
    font-size:.8rem;
    letter-spacing:.05em
}
.steps b {
    font-weight:500;
    margin-left:.35rem
}
.steps .current {
    color:#edafe8
}
.panel h2,.ticket h2 {
    font-size:1.3rem;
    margin:2rem 0 .6rem
}
.panel form {
    display:grid;
    gap:.5rem;
    margin-top:1.8rem
}
label {
    font-size:.85rem;
    margin-top:.8rem
}
input {
    background:#111217;
    border:1px solid #ffffff27;
    border-radius:8px;
    padding:.9rem;
    color:#fff;
    font:inherit;
    width:100%
}
input:focus {
    outline:2px solid #d595d3;
    outline-offset:2px
}
.validation {
    color:#ff9fa7;
    font-size:.8rem
}
button,.primary-button {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    border:0;
    border-radius:8px;
    background:#e4abe4;
    color:#17121a;
    font:700 .9rem 'Space Grotesk',sans-serif;
    padding:1rem 1.2rem;
    margin-top:2rem;
    cursor:pointer
}
.primary-button {
    width:max-content;
    max-width:100%
}
.ticket-total {
    display:flex;
    justify-content:space-between;
    gap:1rem;
    border-top:1px solid #ffffff22;
    margin-top:2rem;
    padding-top:1.5rem
}
.ticket-total strong {
    font-size:1.3rem
}
.ticket-note {
    font-size:.8rem;
    margin-top:1.5rem
}
.checkout-mobile-total {
    display: none;
}

@media (min-width: 701px) {
    .ticket--sticky {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

@media(max-width:700px) {
    html {
        scroll-padding-top: 5rem;
    }
    .checkout-mobile-total {
        position: fixed;
        top: 0.75rem;
        left: 1.2rem;
        right: 1.2rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border: 1px solid #ffffff24;
        border-radius: 10px;
        background: #211d27;
        box-shadow: 0 8px 24px #00000040;
        font-size: 0.85rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.75rem);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .checkout-mobile-total.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
    }
    .checkout-mobile-total small {
        color: #c5a9c7;
        font-size: 0.7rem;
    }
    .checkout-mobile-total strong {
        color: #f5f5f6;
        font-size: 1rem;
        white-space: nowrap;
    }
    .checkout-main {
        padding:3rem 1.2rem
    }
    .checkout-grid {
        grid-template-columns:1fr
    }
    .ticket {
        grid-row:1
    }
    .panel,.ticket {
        padding:1.4rem
    }
    .checkout-header {
        padding:0 1.2rem
    }
}
.brick-loading:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkout-reuse {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #ffffff24;
    border-radius: 10px;
    background: #111217;
}

.checkout-reuse-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.checkout-reuse-option input {
    width: auto;
    flex: none;
    margin: 0.2rem 0 0;
    accent-color: #e4abe4;
}

.checkout-reuse p {
    color: #a7a6ae;
    font-size: 0.75rem;
    line-height: 1.5;
}

.checkout-reuse .checkout-copy-name {
    display: inline-flex;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid #edafe870;
    background: transparent;
    color: #edafe8;
    overflow-wrap: anywhere;
    text-align: left;
}

.checkout-copy-status {
    display: block;
    margin-top: 0.5rem;
    color: #edafe8;
    font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-mobile-total {
        transition: none;
    }
}

.checkout-optional { color: #a7a6ae; font-size: .75rem; }
.ticket-discount { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: #c7c4cc; font-size: .85rem; overflow-wrap: anywhere; }