/* ============================================================
   Pretix Express Checkout — Clean Checkout Theme & Component Styles
   ============================================================ */

:root {
    /* Brand Accent Colors */
    --pretix-brand-primary: #ff9c21 !important;
    --pretix-brand-primary-lighten-5: #ffa83b !important;
    --pretix-brand-primary-lighten-20: #ffc270 !important;
    --pretix-brand-primary-lighten-30: #ffd394 !important;
    --pretix-brand-primary-lighten-40: #ffe5bd !important;
    --pretix-brand-primary-lighten-48: #fff8f0 !important;
    --pretix-brand-primary-lighten-50: #fffbfa !important;
    --pretix-brand-primary-darken-5: #e68512 !important;
    --pretix-brand-primary-darken-10: #cc720a !important;
    --pretix-brand-primary-darken-15: #b35f00 !important;
    --pretix-brand-primary-darken-17: #9c5000 !important;
    --pretix-brand-primary-darken-20: #854200 !important;
    --pretix-brand-primary-darken-30: #542500 !important;
    --pretix-brand-primary-tint-90: #fff6eb !important;
    --pretix-brand-primary-shade-25: #a85800 !important;
    --pretix-brand-primary-shade-42: #804000 !important;
    --pretix-brand-primary-lighten-28-saturate-20: #ffd18a !important;
    --pretix-brand-primary-lighten-23-saturate-2: #ffca7d !important;

    --pretix-link-contrast-color: #ea580c !important;
    --pretix-link-hover-contrast-color: #9a3412 !important;
    --pretix-brand-success: #4d8b31 !important;
    --pretix-brand-success-darken-5: #3c7025 !important;
    --pretix-brand-success-darken-10: #30581d !important;
    --pretix-brand-success-tint-85: #eef5eb !important;

    --pretix-font-family-sans-serif: "Inter", "PingFang TC", "Helvetica Neue", sans-serif !important;
    --pretix-border-radius-base: 8px !important;
    --pretix-border-radius-large: 12px !important;
    --pretix-border-radius-small: 6px !important;
    --pretix-body-bg: #ffffff !important;
}

/* ----------------------------------------------------------
   1. Base Body & Layout Resets
   ---------------------------------------------------------- */
body {
    font-family: var(--pretix-font-family-sans-serif) !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Hide raw native Pretix step list */
.steps {
    display: none !important;
}

/* ----------------------------------------------------------
   Modern Stepper Bar Component (E-Transfer Guide Style)
   (Your Information > Review Order > Payment > Order Confirmed)
   ---------------------------------------------------------- */
.express-checkout-stepper-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    margin: 16px auto 24px auto !important;
    max-width: 860px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.express-checkout-stepper-bar::-webkit-scrollbar {
    display: none !important;
}

.express-checkout-step-node {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

a.express-checkout-step-node:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.express-checkout-step-node.active {
    background: #fff7ed !important;
    color: #ea580c !important;
    border-color: #ffedd5 !important;
    font-weight: 700 !important;
}

.express-checkout-step-node.completed {
    color: #334155 !important;
}

.express-checkout-step-num {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.express-checkout-step-node.active .express-checkout-step-num {
    background: #ff9c21 !important;
    color: #111111 !important;
}

.express-checkout-step-node.completed .express-checkout-step-num {
    background: #10b981 !important;
    color: #ffffff !important;
}

.express-checkout-step-line {
    flex: 1 !important;
    height: 2px !important;
    background: #e2e8f0 !important;
    min-width: 16px !important;
    flex-shrink: 1 !important;
    border-radius: 1px !important;
    transition: background 0.2s ease !important;
}

.express-checkout-step-line.active {
    background: #ff9c21 !important;
}

body:has(.steps) main#content > h2:first-of-type,
body:has(.steps-progressbar) main#content > h2:first-of-type,
body:has(.steps) #express-checkout-spa-content-wrapper > h2:first-of-type,
body:has(.steps-progressbar) #express-checkout-spa-content-wrapper > h2:first-of-type,
body:has(nav[aria-label="Checkout steps"]) main#content > h2:first-of-type,
body:has(nav[aria-label="Checkout steps"]) #express-checkout-spa-content-wrapper > h2:first-of-type {
    display: none !important;
}

body:has(.steps) .container.main-box,
body:has(.steps) main#content,
body:has(.steps) form,
body:has(.steps-progressbar) .container.main-box,
body:has(.steps-progressbar) main#content,
body:has(.steps-progressbar) form,
body:has(nav[aria-label="Checkout steps"]) .container.main-box,
body:has(nav[aria-label="Checkout steps"]) main#content,
body:has(nav[aria-label="Checkout steps"]) form {
    padding-bottom: 0 !important;
}

/* Hide original Pretix logos outside custom header */
header img:not(.express-checkout-event-poster-img),
a.logo img:not(.express-checkout-event-poster-img),
a.logo:not(.express-checkout-event-poster-wrapper),
.page-header img:not(.express-checkout-event-poster-img),
.event-header img:not(.express-checkout-event-poster-img),
.event-logo img:not(.express-checkout-event-poster-img),
.event-logo:not(.express-checkout-event-poster-wrapper),
.banner img:not(.express-checkout-event-poster-img) {
    display: none !important;
}

/* Ensure content and page inline images render properly */
#content img,
main#content img,
.page-body img,
.main-box img:not(.express-checkout-event-poster-img) {
    max-width: 100% !important;
    height: auto !important;
}

/* ----------------------------------------------------------
   2. Unified Card & Panel Components
   ---------------------------------------------------------- */
html body .panel,
body .panel,
.panel,
details.panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.panel:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05) !important;
    border-color: #94a3b8 !important;
}

.panel-heading,
details summary.panel-heading {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #1e293b !important;
    padding: 16px 24px 8px 24px !important;
}

.panel-heading *,
.panel-title,
.panel-title strong,
.panel-title span,
.panel-title a,
.panel-title label {
    color: #1e293b !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
}

.panel-heading input[type="radio"],
.panel-title input[type="radio"] {
    accent-color: #ff9c21 !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.panel-heading .fa-chevron-down,
.panel-heading .fa-chevron-right,
.panel-title a::before,
summary.panel-heading::marker,
summary.panel-heading::-webkit-details-marker {
    display: none !important;
}

.panel-body {
    padding: 8px 24px 24px 24px !important;
}

/* ----------------------------------------------------------
   3. Buttons & Form Input Modernization
   ---------------------------------------------------------- */
html body .btn-primary,
body .btn-primary,
.btn-primary {
    background-color: #ff9c21 !important;
    background-image: none !important;
    border-color: #ff9c21 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    box-shadow: 0 2px 6px rgba(255, 156, 33, 0.15) !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active,
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 156, 33, 0.25) !important;
}

html body .btn-default,
body .btn-default,
.btn-default {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

html body .btn-default:hover,
html body .btn-default:focus,
body .btn-default:hover,
body .btn-default:focus,
.btn-default:hover,
.btn-default:focus {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="url"],
select,
textarea {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    height: auto !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: #ff9c21 !important;
    box-shadow: 0 0 0 3px rgba(255, 156, 33, 0.15) !important;
    outline: none !important;
}

input.express-checkout-readonly-input,
input[readonly].express-checkout-readonly-input {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    cursor: not-allowed !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------
   4. Tables & Alert Components
   ---------------------------------------------------------- */
.table th, .table td {
    border-top: 1px solid #f1f5f9 !important;
    padding: 14px 10px !important;
    font-size: 0.92rem !important;
    vertical-align: middle !important;
}

.table th {
    font-weight: 700 !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
}

.table a, .table button {
    color: #ea580c !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}
.table a:hover, .table button:hover {
    color: #9a3412 !important;
    text-decoration: none !important;
}

.list-group-item.payment {
    border: none !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    color: #b45309 !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}
.alert-warning a {
    color: #d97706 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------------
   5. Loading Overlay
   ---------------------------------------------------------- */
body.checkout-processing-active::after {
    content: "Initializing Secure Connection...";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1.25rem; color: #ea580c;
    z-index: 99999;
    animation: fadeInOverlay 0.3s ease forwards;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ----------------------------------------------------------
   6. Membership Required Modal
   ---------------------------------------------------------- */
.express-checkout-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.express-checkout-modal.express-checkout-modal-open {
    opacity: 1;
}
.express-checkout-modal-backdrop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}
.express-checkout-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 16px;
    z-index: 1051;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.express-checkout-modal.express-checkout-modal-open .express-checkout-modal-dialog {
    transform: translateY(0);
}
.express-checkout-modal-content {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.express-checkout-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.express-checkout-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
}
.express-checkout-modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}
.express-checkout-modal-close:hover { color: #475569; }
.express-checkout-modal-body {
    padding: 32px 24px;
    text-align: center;
}
.express-checkout-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.1);
}
.express-checkout-modal-text {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
}
.express-checkout-modal-subtext {
    font-size: 0.92rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
.express-checkout-modal-footer {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.btn-join-renew {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
}
.btn-join-renew:hover {
    background-color: #92400e !important;
    border-color: #92400e !important;
}

/* ----------------------------------------------------------
   7. Streamlined Customer Login & Guest Options
   ---------------------------------------------------------- */
.express-checkout-streamlined {
    margin: 30px auto;
    max-width: 860px;
    padding: 0 15px;
}

.checkout-choice-header {
    text-align: center;
    margin-bottom: 35px;
}
.checkout-choice-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.checkout-choice-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 35px;
}

.checkout-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.checkout-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}
.checkout-card.disabled {
    opacity: 0.7;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.checkout-card.disabled:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

.checkout-card .card-icon {
    font-size: 2.5rem;
    color: #ff9c21;
    margin-bottom: 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-card.disabled .card-icon {
    color: #94a3b8;
}

.checkout-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0;
    margin-bottom: 12px;
}

.checkout-card .card-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}
.checkout-card.disabled .card-desc {
    color: #e11d48 !important;
    font-weight: 500;
}

.checkout-card .btn {
    width: 100%;
    margin-top: auto;
}

.btn-login-action {
    background-color: #ff9c21 !important;
    border-color: #ff9c21 !important;
    color: #111111 !important;
}
.btn-guest-action {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.checkout-choice-footer {
    text-align: center;
    margin-top: 20px;
}
.btn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
}
.btn-back-link:hover {
    color: #1e293b !important;
}

.hidden-accordion-original {
    display: none !important;
}

.checkout-card.express-checkout-clickable-card:not(.disabled) {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.checkout-card.express-checkout-clickable-card:not(.disabled):hover {
    border-color: #ff9c21 !important;
    box-shadow: 0 6px 20px rgba(255, 156, 33, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* ----------------------------------------------------------
   8. Ticket Quantity Steppers & Voucher Layout
   ---------------------------------------------------------- */
.express-checkout-ticket-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    user-select: none;
}

.express-checkout-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #ea580c;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
    padding: 0;
    line-height: 1;
    border-radius: 6px;
}
.express-checkout-stepper-btn:hover:not(:disabled) {
    color: #9a3412;
    transform: scale(1.15);
}
.express-checkout-stepper-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    transform: none;
}
.express-checkout-stepper-btn.express-checkout-stepper-trash {
    color: #ea580c;
    font-size: 0.9rem;
}
.express-checkout-stepper-btn.express-checkout-stepper-trash:hover:not(:disabled) {
    color: #e11d48;
}

.express-checkout-stepper-value {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    line-height: 32px;
}
.express-checkout-stepper-zero .express-checkout-stepper-value {
    color: #94a3b8;
}

.btn-voucher-submit {
    background-color: #ff9c21 !important;
    border-color: #ff9c21 !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.btn-voucher-submit:hover {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
}

.express-checkout-voucher-inline-wrapper {
    max-width: 300px !important;
    margin-top: 0 !important;
}

.express-checkout-ticket-submit-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    gap: 15px !important;
}

.express-checkout-voucher-side,
.express-checkout-submit-side {
    flex: 0 1 auto !important;
}
.express-checkout-submit-side button[type="submit"] {
    min-width: 180px !important;
    padding: 10px 24px !important;
}

/* Sticky Bottom Action Row */
body:has(.steps) .checkout-button-row,
body:has(.steps-progressbar) .checkout-button-row,
body:has(nav[aria-label="Checkout steps"]) .checkout-button-row {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    margin-top: 80px !important;
    margin-bottom: 0 !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.05) !important;
}

/* ----------------------------------------------------------
   9. Side-by-Side Event Header
   ---------------------------------------------------------- */
.express-checkout-event-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 16px 0 24px 0;
    padding: 16px;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.express-checkout-event-poster-wrapper {
    flex-shrink: 0;
    width: 140px;
    max-width: 140px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #cbd5e1;
}

.express-checkout-event-poster-img {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

.express-checkout-event-title-meta-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.express-checkout-event-title-sidebyside {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em;
}

.express-checkout-event-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
}

.express-checkout-event-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.express-checkout-event-meta-item svg {
    color: #ea580c;
    margin-top: 2px;
    flex-shrink: 0;
}

.express-checkout-event-location a.event-location-link {
    color: #d97706 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    margin-left: 2px;
}

/* ----------------------------------------------------------
   10. Payment Card Options & Helcim Integration
   ---------------------------------------------------------- */
.express-checkout-radio-card-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.express-checkout-radio-card {
    display: block !important;
    position: relative !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 0 !important;
    font-weight: normal !important;
}

.express-checkout-radio-card:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.express-checkout-radio-card.selected,
.express-checkout-radio-card:has(input[type="radio"]:checked) {
    border-color: #ff9c21 !important;
    background-color: #fffdfa !important;
    box-shadow: 0 4px 12px rgba(255, 156, 33, 0.12) !important;
}

.express-checkout-radio-card input[type="radio"] {
    display: inline-block !important;
    visibility: visible !important;
    position: relative !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #ff9c21 !important;
}

.express-checkout-radio-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    line-height: 1.4 !important;
}

.express-checkout-card-exp {
    font-size: 0.9em;
    white-space: nowrap;
    font-weight: normal;
}

.express-checkout-card-subtext {
    font-size: 0.85em;
    margin-top: 6px;
    margin-bottom: 0;
}

.express-checkout-checkbox-container {
    margin-top: 5px;
    margin-bottom: 5px;
}

.express-checkout-payment-total-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
}

/* Hide redundant modify links & payment hints */
.express-checkout-radio-card-group ~ .panel-heading a,
.panel:has([data-helcim-confirm]) .panel-heading a,
.panel:has(input[name="helcim_payment_option"]) .panel-heading a,
details:has([data-helcim-confirm]) summary a {
    display: none !important;
}

body[data-only-banktransfer="true"] a[href*="/pay/"][href*="change"],
body[data-only-banktransfer="true"] a[href*="/pay/change"],
body[data-only-banktransfer="true"] form[action*="/pay/"][action*="change"],
body[data-only-banktransfer="true"] form[action*="/pay/change"] {
    display: none !important;
}

.panel-body p.text-muted {
    display: none !important;
}

/* Helcim Pay Modals & Iframes */
.helcim-inline-body {
    padding: 0 !important;
    min-height: 680px !important;
    height: 680px !important;
    position: relative !important;
    overflow: hidden !important;
}

#helcimPayIframe {
    width: 100% !important;
    height: 680px !important;
    min-height: 680px !important;
    border: none !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 999999 !important;
}

iframe[src*="helcim"],
[id*="helcim"],
[class*="helcim-pay"] {
    z-index: 999999 !important;
}

.helcim-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.65) !important;
    z-index: 999999 !important;
}

.helcim-modal-wrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000000 !important;
    width: 90% !important;
    max-width: 450px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ----------------------------------------------------------
   11. SPA Content Transition Animations
   ---------------------------------------------------------- */
#express-checkout-spa-content-wrapper {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1;
    transform: translateY(0);
}

#express-checkout-spa-content-wrapper.express-checkout-fade-out {
    opacity: 0 !important;
    transform: translateY(12px) !important;
}

#express-checkout-spa-content-wrapper.express-checkout-fade-in {
    opacity: 0 !important;
    transform: translateY(-12px) !important;
}

/* ----------------------------------------------------------
   12. Utilities & Responsive Media Queries
   ---------------------------------------------------------- */
.express-checkout-hidden {
    display: none !important;
}

.express-checkout-card-subtext {
    font-size: 0.85em;
    margin-top: 6px;
    margin-bottom: 0;
}

.express-checkout-payment-total-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
}

.express-checkout-payment-total-label {
    font-weight: 500 !important;
    color: #475569 !important;
}

.express-checkout-payment-total-amount {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.express-checkout-checkbox-container {
    margin-top: 5px;
    margin-bottom: 5px;
}

.express-checkout-checkbox-label {
    font-weight: normal;
}

.express-checkout-panel-transparent {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.express-checkout-panel-transparent .panel-body {
    padding: 0 !important;
}

@media (min-width: 576px) {
    .express-checkout-ticket-submit-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 768px) {
    .checkout-choice-cards {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .express-checkout-event-header {
        gap: 14px;
        padding: 12px;
    }
    .express-checkout-event-poster-wrapper {
        width: 100px;
        max-width: 100px;
        border-radius: 8px;
    }
    .express-checkout-event-title-sidebyside {
        font-size: 1.15rem !important;
        margin-bottom: 6px !important;
    }
    .express-checkout-event-meta {
        font-size: 0.825rem;
        gap: 6px;
    }
}

@media (max-width: 575px) {
    .express-checkout-ticket-submit-row {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    .express-checkout-voucher-side,
    .express-checkout-submit-side {
        width: 100% !important;
    }
    .express-checkout-voucher-side .btn-voucher-toggle,
    .express-checkout-voucher-side .express-checkout-voucher-inline-wrapper,
    .express-checkout-submit-side button[type="submit"] {
        width: 100% !important;
        display: block !important;
    }
    .helcim-inline-body,
    #helcimPayIframe {
        height: 820px !important;
        min-height: 820px !important;
    }
}