/* =============================================================================
   ZEETIUS — "STADIUM ENERGY" PREMIUM FORMS
   -----------------------------------------------------------------------------
   Additive, opt-in component layer. Every rule is scoped under .ds-form-stadium
   so it has zero effect on any page that doesn't explicitly wrap itself in that
   class. Reuses existing mechanisms rather than replacing them:
     - .ds-float floating labels (ui-vibrant.css) — retthemed, not rebuilt.
     - .is-invalid / .field-validation-error / .ds-field-warning / .ds-shake
       (ui-vibrant.css) — the unified validation-message system stays as the
       source of truth; we only add compatible accents.
     - Flatpickr is already wired site-wide (ui-enhance.js initFlatpickr) — we
       only retheme its generated DOM, scoped, no JS changes.
     - .btn-stadium (design-system.css) — reused for primary CTAs.

   CONTENTS
     1. Page shell & section cards      6. Checkboxes & radio cards
     2. Section header                  7. Dropzone (file upload)
     3. Fields — inputs & floating lbl  8. Textarea (auto-expand + counter)
     4. Select & TomSelect theme        9. Stepper
     5. Buttons                        10. Flatpickr retheme (scoped)
                                        11. Responsive / sticky mobile actions
   ========================================================================== */

.ds-form-stadium {
    --dsf-navy: var(--stadium-navy, #0a0e1a);
    --dsf-navy-2: var(--stadium-navy-2, #1e2e52);
    --dsf-lime: var(--stadium-lime, #c6f135);
    --dsf-lime-ink: var(--stadium-navy, #0a0e1a);
    --dsf-font: var(--stadium-font, 'Archivo', var(--ds-font-display));
    --dsf-radius: 18px;
    --dsf-radius-lg: 22px;
    --dsf-border: #E7E9F2;
    --dsf-shadow: 0 10px 30px rgba(10,14,26,.06), 0 2px 8px rgba(10,14,26,.04);
    --dsf-shadow-lg: 0 24px 56px rgba(10,14,26,.10), 0 4px 14px rgba(10,14,26,.05);
    font-family: var(--ds-font);
}

/* ============================ 1. PAGE SHELL =============================== */
.ds-form-stadium {
    background:
        radial-gradient(900px 420px at 88% -8%, rgba(198,241,53,.10), transparent 60%),
        radial-gradient(700px 460px at 6% 8%, rgba(99,102,241,.08), transparent 60%),
        linear-gradient(180deg, #F6F7FB 0%, #FFFFFF 40%);
    border-radius: 0;
    padding-bottom: var(--space-9, 64px);
}
.ds-form-stadium .registration-hero,
.ds-form-stadium .edit-hero {
    background:
        radial-gradient(700px 320px at 85% -30%, rgba(198,241,53,.22), transparent 60%),
        linear-gradient(135deg, var(--dsf-navy-2) 0%, var(--dsf-navy) 100%) !important;
    box-shadow: 0 20px 44px rgba(10,14,26,.28);
    /* This banner is a fixed-dark decorative surface by design (twilight navy,
       same "stays dark in both themes" identity as the rest of the site's hero
       sections) — border-radius/padding/color were never set at all, so it was
       rendering as an unstyled dark <div> with the ambient (theme-flipping)
       text color painted straight onto it: invisible in light theme, where
       that ambient color is near-black. Pin layout + text color here so it
       reads correctly regardless of the page's light/dark toggle. */
    border-radius: var(--dsf-radius-lg);
    padding: clamp(26px, 5vw, 44px) clamp(20px, 4vw, 40px);
    text-align: center;
    color: #fff;
}
.ds-form-stadium .registration-hero h1,
.ds-form-stadium .edit-hero h1 {
    font-family: var(--dsf-font); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase;
    color: #fff; margin: 0;
}
.ds-form-stadium .registration-hero p,
.ds-form-stadium .edit-hero p { color: rgba(255,255,255,.75); margin: 8px 0 0; }
.ds-form-stadium .registration-hero p strong,
.ds-form-stadium .edit-hero p strong { color: var(--dsf-lime); }
.ds-form-stadium .form-container,
.ds-form-stadium .registration-container .form-container {
    background: #fff;
    border-radius: var(--dsf-radius-lg);
    box-shadow: var(--dsf-shadow-lg);
    border: 1px solid var(--dsf-border);
    overflow: visible;
    backdrop-filter: none;
}
.ds-form-stadium .form-content { padding: 0; }

.ds-form-stadium .form-section {
    padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px);
    border-bottom: 1px solid var(--dsf-border);
    background: transparent;
}
.ds-form-stadium .form-section:nth-of-type(even) {
    background: linear-gradient(180deg, rgba(99,102,241,.03) 0%, transparent 100%);
}
.ds-form-stadium .form-section.active { animation: dsf-fade-in .5s var(--ds-ease-out, ease) both; }
@keyframes dsf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================ 2. SECTION HEADER =========================== */
/* `align-items`/`gap` need a flex (or grid) container to do anything — this
   rule never set `display`, so it fell back to the browser default (block),
   which stacks the icon above the title/description instead of placing them
   side by side. */
.ds-form-stadium .section-header { display: flex; gap: 18px; margin-bottom: 28px; align-items: center; }
.ds-form-stadium .section-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 3.25rem; height: 3.25rem; border-radius: 15px;
    background: var(--dsf-navy); color: var(--dsf-lime);
    box-shadow: 0 8px 20px rgba(10,14,26,.22);
    font-size: 1.3rem;
}
.ds-form-stadium .section-title {
    font-family: var(--dsf-font); font-weight: 800; letter-spacing: -0.01em;
    color: var(--dsf-navy); font-size: 1.3rem; margin: 0 0 2px;
}
.ds-form-stadium .section-description { color: #6B7280; margin: 0; font-size: .92rem; }

/* Event details summary card */
.ds-form-stadium .event-details-card {
    border-radius: var(--dsf-radius); border: 1px solid var(--dsf-border);
    background: linear-gradient(180deg, #FAFBFF 0%, #fff 100%);
    box-shadow: var(--dsf-shadow);
}
.ds-form-stadium .event-details-header { color: var(--dsf-navy); }
.ds-form-stadium .event-details-header i { color: var(--dsf-lime); background: var(--dsf-navy); border-radius: 50%; padding: 6px; font-size: 14px; }
.ds-form-stadium .detail-value { font-family: var(--dsf-font); font-weight: 800; color: var(--dsf-navy); }

/* ============================ 3. FIELDS ==================================== */
.ds-form-stadium .field-label {
    font-family: var(--dsf-font); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .03em; color: #4B5566;
}
.ds-form-stadium .field-icon { color: var(--dsf-navy-2); opacity: .8; }
.ds-form-stadium .required-indicator { color: #E0562F; }
.ds-form-stadium .optional-indicator { color: #74809A; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ds-form-stadium .field-hint { color: #6B7484; font-size: .8rem; margin-top: 5px; }
.ds-form-stadium .error-summary:not(:empty) {
    border-radius: var(--dsf-radius); border: 1px solid #FBD5C8; border-left: 4px solid #E0562F;
    background: #FFF5F2; color: #A23A1D; padding: 14px 18px; font-weight: 600; font-size: .88rem;
}

.ds-form-stadium .form-input,
.ds-form-stadium .form-control,
.ds-form-stadium .form-select {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    border: 1.5px solid var(--dsf-border);
    background: #fff;
    padding: 12px 16px;
    font-size: .95rem;
    color: var(--dsf-navy);
    transition: border-color .18s var(--ds-ease, ease), box-shadow .18s var(--ds-ease, ease), transform .12s var(--ds-ease, ease);
}
.ds-form-stadium .form-input:hover:not(:focus):not(:disabled),
.ds-form-stadium .form-control:hover:not(:focus):not(:disabled),
.ds-form-stadium .form-select:hover:not(:focus):not(:disabled) {
    border-color: #C9CEDD;
}
.ds-form-stadium .form-input:focus,
.ds-form-stadium .form-control:focus,
.ds-form-stadium .form-select:focus {
    border-color: var(--dsf-lime);
    box-shadow: 0 0 0 4px rgba(198,241,53,.28);
    outline: none;
}
.ds-form-stadium .form-input.is-invalid,
.ds-form-stadium .form-control.is-invalid,
.ds-form-stadium .form-select.is-invalid,
.ds-form-stadium .form-input.ds-invalid,
.ds-form-stadium .input-validation-error {
    border-color: #E0562F !important;
    box-shadow: 0 0 0 4px rgba(224,86,47,.14) !important;
}

/* Floating label (reuses .ds-float mechanism from ui-vibrant.css) */
.ds-form-stadium .ds-float > label {
    background: #fff; color: #97A0B0; font-family: var(--ds-font);
}
.ds-form-stadium .ds-float > .form-control:focus + label,
.ds-form-stadium .ds-float > .form-control:not(:placeholder-shown) + label,
.ds-form-stadium .ds-float > .form-input:focus + label,
.ds-form-stadium .ds-float > .form-input:not(:placeholder-shown) + label {
    color: var(--dsf-navy);
}

/* Sport/event select chevron */
.ds-form-stadium .select-wrapper { position: relative; }
.ds-form-stadium .select-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #97A0B0; pointer-events: none; }
.ds-form-stadium .form-select { appearance: none; -webkit-appearance: none; }

/* Bootstrap's native HTML5 validation feedback (.needs-validation/.was-validated/:invalid/
   .invalid-feedback) is kept as the validation MECHANISM on a few pages (their own JS toggles
   .was-validated on submit) even though bootstrap.min.css no longer provides the show/hide CSS —
   replicate just that one behavior here so those pages keep working. */
.ds-form-stadium .invalid-feedback { display: none; width: 100%; margin-top: .25rem; font-size: .82rem; color: #E0562F; }
.ds-form-stadium .was-validated .form-control:invalid ~ .invalid-feedback,
.ds-form-stadium .was-validated .form-select:invalid ~ .invalid-feedback,
.ds-form-stadium .form-control.is-invalid ~ .invalid-feedback,
.ds-form-stadium .form-select.is-invalid ~ .invalid-feedback {
    display: block;
}
.ds-form-stadium .form-label { margin-bottom: .5rem; display: inline-block; }
.ds-form-stadium .form-text { margin-top: .25rem; font-size: .82rem; color: #8B93A3; }

/* Inline alert banners (success/danger) used for TempData/validation messages. */
.ds-form-stadium .alert { border-radius: var(--dsf-radius, 18px); padding: 12px 16px; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.ds-form-stadium .alert-success { background: rgba(52,199,89,.08); color: #1E9E4A; border: 1px solid rgba(52,199,89,.35); }
.ds-form-stadium .alert-danger { background: #FFF5F2; color: #A23A1D; border: 1px solid #FBD5C8; }
.ds-form-stadium .alert-warning { background: #FFF8E6; color: #92700A; border: 1px solid #F5D98A; }

/* ============================ 4. SELECT / TOMSELECT ======================== */
/* .single and .multi both need this — tom-select.css's own ".full .ts-control { background:
   #fff }" reset (lower specificity) otherwise wins for a multi-select control, since nothing
   here matched ".ts-wrapper.multi" before a multi-select <select> existed on any page. */
.ds-form-stadium .ts-wrapper.single .ts-control,
.ds-form-stadium .ts-wrapper.multi .ts-control {
    min-height: 50px; border-radius: 14px; border: 1.5px solid var(--dsf-border);
    background: #fff; padding: 10px 16px; box-shadow: none; display: flex; align-items: center;
    font-size: .95rem; color: var(--dsf-navy);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ds-form-stadium .ts-wrapper.single.focus .ts-control,
.ds-form-stadium .ts-wrapper.multi.focus .ts-control {
    border-color: var(--dsf-lime); box-shadow: 0 0 0 4px rgba(198,241,53,.28);
}
/* Selected-item chips inside a multi-select control (tom-select.css defaults these to a flat
   grey #f2f2f2 — retinted to the brand palette here). */
.ds-form-stadium .ts-wrapper.multi .ts-control > div {
    border-radius: 8px; padding: 3px 8px; background: var(--dsf-navy); color: #fff; border: 0;
}
.ds-form-stadium .ts-wrapper.multi .ts-control > div.active {
    background: var(--dsf-navy-2); color: #fff; border: 0;
}
.ds-form-stadium .ts-dropdown {
    border-radius: 14px; border: 1px solid var(--dsf-border); box-shadow: var(--dsf-shadow-lg);
    margin-top: 6px; overflow: hidden; font-family: var(--ds-font);
}
.ds-form-stadium .ts-dropdown .ts-dropdown-content { padding: 6px; }
.ds-form-stadium .ts-dropdown [data-selectable] { border-radius: 10px; padding: 10px 12px; font-size: .92rem; }
.ds-form-stadium .ts-dropdown .option.active,
.ds-form-stadium .ts-dropdown [data-selectable].active {
    background: var(--dsf-navy); color: #fff;
}
.ds-form-stadium .ts-dropdown .no-results { padding: 14px; color: #97A0B0; font-size: .88rem; }
/* Descendant (not child) selector deliberately, same as the font-family rule above —
   tom-select.css's own reset targets ".ts-control > input" with a direct-child combinator,
   which silently fails to match whenever the input isn't a direct child (observed with the
   bundled 2.3.1 build), leaving the browser's native bordered/backgrounded text input visible
   next to the selected-item pill instead of blending into the control. !important to win
   regardless of load order against that same base stylesheet. */
.ds-form-stadium .ts-wrapper .ts-control input {
    font-family: var(--ds-font);
    border: 0 none !important; background: none !important; box-shadow: none !important;
    outline: none !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
}

/* ============================ 5. BUTTONS ==================================== */
/* !important: the page's own overlay <style> block sets .btn-submit's
   background-image/border/color with !important — must out-rank it here. */
.ds-form-stadium .btn-submit,
.ds-form-stadium .btn-stadium {
    background: var(--dsf-lime) !important; background-image: none !important;
    color: var(--dsf-lime-ink) !important; border: none !important;
    font-family: var(--dsf-font); font-weight: 800; font-size: 1rem;
    border-radius: var(--ds-radius-pill, 999px) !important; padding: 15px 30px;
    box-shadow: 0 10px 24px rgba(198,241,53,.35);
    transition: transform .2s var(--ds-ease-out, ease), box-shadow .2s ease, filter .2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.ds-form-stadium .btn-submit:hover:not(:disabled),
.ds-form-stadium .btn-stadium:hover:not(:disabled) {
    transform: translateY(-2px); box-shadow: 0 16px 32px rgba(198,241,53,.42); filter: brightness(1.03); color: var(--dsf-lime-ink) !important;
}
.ds-form-stadium .submit-divider {
    background: linear-gradient(90deg, transparent, var(--dsf-lime), transparent) !important;
}
.ds-form-stadium .submit-title { font-family: var(--dsf-font); font-weight: 800; color: var(--dsf-navy); }
.ds-form-stadium .btn-submit:active:not(:disabled) { transform: translateY(0); }
.ds-form-stadium .btn-submit:disabled,
.ds-form-stadium .btn-submit.is-loading {
    opacity: .75; cursor: progress; transform: none;
}
.ds-form-stadium .btn-submit:focus-visible,
.ds-form-stadium .btn-stadium:focus-visible {
    outline: none; box-shadow: 0 0 0 4px rgba(10,14,26,.25);
}
.ds-form-stadium .btn-stadium.btn-sm { padding: 8px 16px; font-size: .85rem; }

.ds-form-stadium .btn-add-player {
    background: #fff; color: var(--dsf-navy); border: 1.5px dashed #C9CEDD;
    font-family: var(--dsf-font); font-weight: 700; border-radius: 14px; padding: 13px 22px;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.ds-form-stadium .btn-add-player:hover { border-color: var(--dsf-navy); background: #FAFBFF; transform: translateY(-1px); }
.ds-form-stadium .btn-remove-player {
    background: rgba(224,86,47,.08); color: #E0562F; border: none; border-radius: 999px;
    font-weight: 700; padding: 7px 14px; font-size: .82rem;
}
.ds-form-stadium .btn-remove-player:hover { background: rgba(224,86,47,.16); }

/* ============================ 6. CHECKBOXES & RADIO CARDS =================== */
.ds-checkbox { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: .92rem; color: var(--dsf-navy, #0a0e1a); }
.ds-checkbox input[type="checkbox"] {
    position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer;
}
.ds-checkbox .ds-checkbox-box {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 2px solid #C9CEDD;
    background: #fff; display: grid; place-items: center; transition: all .16s var(--ds-ease-out, ease); position: relative;
}
.ds-checkbox .ds-checkbox-box svg {
    /* The checkmark polyline (points 4,12 10,18 20,6) is ~24 units long, longer
       than the old dasharray/dashoffset of 20 — that mismatch left a small
       fragment of the stroke visible even when unchecked. 30 comfortably
       exceeds the path length so the "hidden" state is actually fully hidden. */
    width: 13px; height: 13px; stroke: var(--dsf-lime-ink, #0a0e1a); stroke-width: 3.5; fill: none;
    stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .2s ease .02s;
}
.ds-checkbox input[type="checkbox"]:checked ~ .ds-checkbox-box {
    background: var(--stadium-lime, #c6f135); border-color: var(--stadium-lime, #c6f135);
}
.ds-checkbox input[type="checkbox"]:checked ~ .ds-checkbox-box svg { stroke-dashoffset: 0; }
.ds-checkbox input[type="checkbox"]:focus-visible ~ .ds-checkbox-box { box-shadow: 0 0 0 4px rgba(198,241,53,.3); }

.ds-radio-card { display: block; cursor: pointer; }
.ds-radio-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-radio-card .ds-radio-card-body {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px;
    border: 1.5px solid var(--dsf-border, #E7E9F2); background: #fff;
    transition: all .16s var(--ds-ease-out, ease);
}
.ds-radio-card .ds-radio-card-check {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9CEDD; flex: 0 0 20px;
    display: grid; place-items: center; transition: all .16s ease;
}
.ds-radio-card .ds-radio-card-check::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dsf-lime-ink, #0a0e1a);
    transform: scale(0); transition: transform .16s var(--ds-ease-out, ease);
}
.ds-radio-card input[type="radio"]:checked ~ .ds-radio-card-body {
    border-color: var(--stadium-lime, #c6f135); background: rgba(198,241,53,.08);
    box-shadow: 0 4px 14px rgba(198,241,53,.18);
}
.ds-radio-card input[type="radio"]:checked ~ .ds-radio-card-body .ds-radio-card-check {
    border-color: var(--stadium-lime, #c6f135); background: var(--stadium-lime, #c6f135);
}
.ds-radio-card input[type="radio"]:checked ~ .ds-radio-card-body .ds-radio-card-check::after { transform: scale(1); }
.ds-radio-card input[type="radio"]:focus-visible ~ .ds-radio-card-body { box-shadow: 0 0 0 4px rgba(198,241,53,.3); }
.ds-radio-card-title { font-family: var(--dsf-font, inherit); font-weight: 700; color: var(--dsf-navy, #0a0e1a); }
.ds-radio-card-desc { font-size: .82rem; color: #8B93A3; }

/* ============================ 7. DROPZONE (file upload) ===================== */
.ds-form-stadium .file-upload-wrapper.ds-dropzone {
    position: relative; border: 1.5px dashed #C9CEDD; border-radius: var(--dsf-radius);
    background: #FAFBFF; padding: 18px; transition: all .18s var(--ds-ease, ease); overflow: hidden;
}
.ds-form-stadium .ds-dropzone.is-dragover { border-color: var(--dsf-lime); background: rgba(198,241,53,.10); transform: scale(1.01); }
.ds-form-stadium .ds-dropzone .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.ds-form-stadium .ds-dropzone .file-upload-button {
    display: flex; align-items: center; gap: 12px; color: var(--dsf-navy); font-weight: 600; font-size: .9rem;
    background: transparent; border: none; padding: 0; pointer-events: none;
}
.ds-form-stadium .ds-dropzone .file-upload-button i { font-size: 22px; color: var(--dsf-navy-2); }
.ds-form-stadium .ds-dropzone .file-upload-button i.bi-cloud-upload {
    width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center;
    box-shadow: var(--dsf-shadow); flex-shrink: 0;
}
.ds-form-stadium .ds-dropzone.file-selected { border-style: solid; border-color: #34C759; background: rgba(52,199,89,.06); }
.ds-form-stadium .ds-dropzone.file-selected .file-upload-button i { color: #1E9E4A; }
.ds-form-stadium .ds-dropzone.upload-error { border-color: #E0562F; background: rgba(224,86,47,.06); }
.ds-form-stadium .ds-dropzone-hint { font-size: .76rem; color: #6B7484; margin-top: 6px; text-align: center; pointer-events: none; }
.ds-form-stadium .ds-dropzone.file-selected .ds-dropzone-hint,
.ds-form-stadium .ds-dropzone.is-dragover .ds-dropzone-hint { display: none; }

.ds-dropzone-preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 10px; background: #fff; border-radius: 12px; box-shadow: var(--dsf-shadow); position: relative; z-index: 3; }
.ds-dropzone-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #EEF0F6; }
.ds-dropzone-filename { font-size: .82rem; font-weight: 600; color: var(--dsf-navy, #0a0e1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ds-dropzone-remove { margin-left: auto; background: #F1F3F9; border: none; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; color: #6B7280; cursor: pointer; position: relative; z-index: 4; }
.ds-dropzone-remove:hover { background: #E7E9F2; color: #E0562F; }

.ds-dropzone-progress { height: 5px; border-radius: 99px; background: #E7E9F2; margin-top: 10px; overflow: hidden; position: relative; z-index: 3; }
.ds-dropzone-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--stadium-lime, #c6f135), #9fd11c); transition: width .25s ease; }

/* ============================ 8. TEXTAREA ==================================== */
.ds-form-stadium .ds-textarea-wrap { position: relative; }
.ds-form-stadium textarea.ds-textarea {
    min-height: 110px; resize: none; overflow: hidden; line-height: 1.55;
}
.ds-form-stadium .ds-char-counter {
    position: absolute; right: 12px; bottom: 10px; font-size: .72rem; font-weight: 700;
    color: #97A0B0; background: rgba(255,255,255,.9); padding: 2px 6px; border-radius: 6px;
}
.ds-form-stadium .ds-char-counter.is-near-limit { color: #E0562F; }

/* ============================ 9. STEPPER ===================================== */
.ds-form-stadium .progress-indicator { background: var(--dsf-navy); padding: clamp(20px, 3vw, 32px); }
.ds-form-stadium .progress-steps::before { background: rgba(255,255,255,.14); }
.ds-form-stadium .progress-step { background: transparent; }
.ds-form-stadium .progress-step .step-number {
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); border: 2px solid rgba(255,255,255,.14);
    font-family: var(--dsf-font); transition: all .25s var(--ds-ease-out, ease);
}
.ds-form-stadium .progress-step.active .step-number {
    background: var(--dsf-lime); color: var(--dsf-lime-ink); border-color: var(--dsf-lime);
    box-shadow: 0 0 0 6px rgba(198,241,53,.18);
}
.ds-form-stadium .progress-step.completed .step-number {
    background: rgba(198,241,53,.16); color: var(--dsf-lime); border-color: var(--dsf-lime);
}
.ds-form-stadium .progress-step .step-label { color: rgba(255,255,255,.55); font-family: var(--dsf-font); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.ds-form-stadium .progress-step.active .step-label,
.ds-form-stadium .progress-step.completed .step-label { color: #fff; }

/* ============================ 9b. VERTICAL SIDE-TABS ========================= */
/* A settings-page-style layout: a vertical list of section tabs on the left,
   one content panel on the right. Reuses the .zt-tab-pane/.active show-hide
   mechanism (tailwind-src.css) and ZtTab's click handling (zt-ui.js) — this
   only adds the sidebar's own visual treatment. Section content still carries
   its own .section-header (icon/title/description) inside each pane; the
   sidebar buttons are shorter nav labels, same "short label in the nav, full
   header in the content" split already used for the dashboard's tabs. */
.ds-form-stadium .ds-vtabs-shell { display: flex; align-items: flex-start; gap: 28px; }
.ds-form-stadium .ds-vtabs {
    display: flex; flex-direction: column; gap: 6px;
    flex: 0 0 220px; position: sticky; top: 24px;
}
.ds-form-stadium .ds-vtab {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 14px; border-radius: 14px; border: 1.5px solid transparent;
    background: transparent; cursor: pointer; text-align: start;
    transition: background-color .18s ease, border-color .18s ease;
    appearance: none; font: inherit;
}
.ds-form-stadium .ds-vtab:hover:not(.active) { background: #F6F7FB; }
.ds-form-stadium .ds-vtab.active {
    background: linear-gradient(135deg, var(--dsf-navy-2) 0%, var(--dsf-navy) 100%);
    box-shadow: 0 8px 20px rgba(10,14,26,.18);
}
.ds-form-stadium .ds-vtab-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 11px; font-size: 1.05rem;
    background: #F1F3F9; color: var(--dsf-navy-2);
    transition: background-color .18s ease, color .18s ease;
}
.ds-form-stadium .ds-vtab.active .ds-vtab-icon { background: rgba(255,255,255,.14); color: var(--dsf-lime); }
.ds-form-stadium .ds-vtab-label { min-width: 0; }
.ds-form-stadium .ds-vtab-title {
    display: block; font-family: var(--dsf-font); font-weight: 800; font-size: .9rem; color: var(--dsf-navy);
}
.ds-form-stadium .ds-vtab.active .ds-vtab-title { color: #fff; }
.ds-form-stadium .ds-vtab-sub { display: block; font-size: .74rem; color: #8B93A3; margin-top: 1px; }
.ds-form-stadium .ds-vtab.active .ds-vtab-sub { color: rgba(255,255,255,.65); }
.ds-form-stadium .ds-vtab-check {
    margin-inline-start: auto; flex-shrink: 0; color: #34C759; font-size: 1.05rem; opacity: 0; transition: opacity .18s ease;
}
.ds-form-stadium .ds-vtab.is-complete .ds-vtab-check { opacity: 1; }
.ds-form-stadium .ds-vtab.active .ds-vtab-check { color: var(--dsf-lime); }
.ds-form-stadium .ds-vtabs-content { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767.98px) {
    .ds-form-stadium .ds-vtabs-shell { flex-direction: column; }
    .ds-form-stadium .ds-vtabs {
        flex-direction: row; position: static; width: 100%; flex: none;
        overflow-x: auto; padding-bottom: 4px; gap: 8px;
    }
    .ds-form-stadium .ds-vtab { flex: 0 0 auto; flex-direction: column; text-align: center; padding: 10px 16px; gap: 6px; }
    .ds-form-stadium .ds-vtab-sub { display: none; }
    .ds-form-stadium .ds-vtab-check { display: none; }
}

/* ============================ 10. FLATPICKR (scoped retheme) ================= */
.ds-form-stadium .flatpickr-day.selected,
.ds-form-stadium .flatpickr-day.selected:hover {
    background: var(--stadium-lime, #c6f135); border-color: var(--stadium-lime, #c6f135); color: var(--stadium-navy, #0a0e1a);
}
.ds-form-stadium .flatpickr-day.today { border-color: var(--stadium-navy, #0a0e1a); }
.ds-form-stadium .flatpickr-months .flatpickr-current-month input.cur-year,
.ds-form-stadium .flatpickr-months .flatpickr-monthDropdown-months { font-family: var(--dsf-font, inherit); }

/* ============================ 11. RESPONSIVE / STICKY MOBILE ACTIONS ========= */
@media (max-width: 767.98px) {
    .ds-form-stadium .form-section { padding: 22px 18px; }
    .ds-form-stadium .section-header { gap: 12px; }
    .ds-form-stadium .submit-section-container {
        position: sticky; bottom: 0; left: 0; right: 0; z-index: 20;
        background: #fff; border-top: 1px solid var(--dsf-border);
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(10,14,26,.08);
    }
    .ds-form-stadium .submit-section-container .submit-divider { display: none; }
    .ds-form-stadium .submit-header { display: none; }
    .ds-form-stadium .btn-submit { width: 100%; }
    .ds-form-stadium .submit-footer { text-align: center; margin-top: 6px; }
}

/* ============================ 12. DARK THEME =================================
   This whole "Stadium Energy" layer was authored purely against a white/light
   background and never got a dark counterpart when the rest of the site moved
   to the Night Fixture light/dark system (theme-toggle.js toggles `.dark` on
   <html>) — so in dark mode every surface here (card, inputs, dropzone,
   checkboxes, radio cards, alerts) stayed flat white/light-gray while the page
   chrome around it went dark navy. Retint every one of those surfaces to the
   same theme-aware zt-* tokens (tailwind-src.css) the rest of the site uses,
   so text keeps proper contrast against its own background in both themes.
   30+ views share this file (registration, verification, admin, support,
   draw/schedule forms, ...), so fixing it here fixes all of them at once.
   ============================================================================ */
html.dark .ds-form-stadium {
    background:
        radial-gradient(900px 420px at 88% -8%, rgba(198,241,53,.06), transparent 60%),
        radial-gradient(700px 460px at 6% 8%, rgba(99,102,241,.10), transparent 60%),
        linear-gradient(180deg, rgb(var(--zt-surface-2)) 0%, rgb(var(--zt-surface)) 60%);
}
html.dark .ds-form-stadium .form-container,
html.dark .ds-form-stadium .registration-container .form-container {
    background: rgb(var(--zt-surface));
    border-color: rgb(var(--zt-edge));
}
html.dark .ds-form-stadium .form-section { border-color: rgb(var(--zt-edge)); }
html.dark .ds-form-stadium .form-section:nth-of-type(even) {
    background: linear-gradient(180deg, rgba(99,102,241,.07) 0%, transparent 100%);
}

/* Section header */
html.dark .ds-form-stadium .section-icon { background: rgb(var(--zt-surface-3)); }
html.dark .ds-form-stadium .section-title { color: rgb(var(--zt-fg)); }
html.dark .ds-form-stadium .section-description { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .event-details-card {
    background: linear-gradient(180deg, rgb(var(--zt-surface-2)) 0%, rgb(var(--zt-surface)) 100%);
    border-color: rgb(var(--zt-edge));
}
html.dark .ds-form-stadium .event-details-header { color: rgb(var(--zt-fg)); }
html.dark .ds-form-stadium .detail-value { color: rgb(var(--zt-fg)); }

/* Fields */
html.dark .ds-form-stadium .field-label { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .field-icon { color: var(--dsf-lime); opacity: .9; }
html.dark .ds-form-stadium .optional-indicator { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .field-hint { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .error-summary:not(:empty) {
    border-color: rgba(224,86,47,.35); border-left-color: #E0562F;
    background: rgba(224,86,47,.12); color: #ff9d80;
}

html.dark .ds-form-stadium .form-input,
html.dark .ds-form-stadium .form-control,
html.dark .ds-form-stadium .form-select {
    background: rgb(var(--zt-surface-2));
    border-color: rgb(var(--zt-edge));
    color: rgb(var(--zt-fg));
}
html.dark .ds-form-stadium .form-input:hover:not(:focus):not(:disabled),
html.dark .ds-form-stadium .form-control:hover:not(:focus):not(:disabled),
html.dark .ds-form-stadium .form-select:hover:not(:focus):not(:disabled) {
    border-color: rgb(var(--zt-surface-3));
}
html.dark .ds-form-stadium .form-input.is-invalid,
html.dark .ds-form-stadium .form-control.is-invalid,
html.dark .ds-form-stadium .form-select.is-invalid,
html.dark .ds-form-stadium .form-input.ds-invalid,
html.dark .ds-form-stadium .input-validation-error {
    border-color: #ff8a63 !important;
    box-shadow: 0 0 0 4px rgba(224,86,47,.22) !important;
}
html.dark .ds-form-stadium .ds-float > label { background: rgb(var(--zt-surface-2)); color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .ds-float > .form-control:focus + label,
html.dark .ds-form-stadium .ds-float > .form-control:not(:placeholder-shown) + label,
html.dark .ds-form-stadium .ds-float > .form-input:focus + label,
html.dark .ds-form-stadium .ds-float > .form-input:not(:placeholder-shown) + label {
    color: rgb(var(--zt-fg));
}
html.dark .ds-form-stadium .select-arrow { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .invalid-feedback { color: #ff9d80; }
html.dark .ds-form-stadium .form-text { color: rgb(var(--zt-fg-muted)); }

/* Alerts */
html.dark .ds-form-stadium .alert-success { background: rgba(52,199,89,.12); color: #6EE7A0; border-color: rgba(52,199,89,.35); }
html.dark .ds-form-stadium .alert-danger { background: rgba(224,86,47,.12); color: #ff9d80; border-color: rgba(224,86,47,.35); }
html.dark .ds-form-stadium .alert-warning { background: rgba(245,217,138,.14); color: #F5D98A; border-color: rgba(245,217,138,.35); }

/* Select / TomSelect */
html.dark .ds-form-stadium .ts-wrapper.single .ts-control,
html.dark .ds-form-stadium .ts-wrapper.multi .ts-control {
    background: rgb(var(--zt-surface-2)); border-color: rgb(var(--zt-edge)); color: rgb(var(--zt-fg));
}
html.dark .ds-form-stadium .ts-wrapper.multi .ts-control > div {
    background: rgb(var(--zt-surface-3)); color: rgb(var(--zt-fg));
}
html.dark .ds-form-stadium .ts-wrapper.multi .ts-control > div.active {
    background: var(--dsf-lime); color: var(--dsf-lime-ink);
}
html.dark .ds-form-stadium .ts-dropdown { background: rgb(var(--zt-surface)); border-color: rgb(var(--zt-edge)); }
/* The dropdown's dark background is set above, but its option rows inherit the base
   (light-mode) dark-gray text meant for a white dropdown — near-invisible against this
   background. Only non-active rows need it; .option.active/[data-selectable].active already
   force white text on a navy highlight regardless of theme (see base rules above). */
html.dark .ds-form-stadium .ts-dropdown [data-selectable] { color: rgb(var(--zt-fg)); }
html.dark .ds-form-stadium .ts-dropdown .no-results { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .ts-wrapper .ts-control input { color: rgb(var(--zt-fg)); }

/* Buttons (btn-submit/btn-stadium already theme-neutral via --dsf-lime) */
html.dark .ds-form-stadium .btn-add-player {
    background: rgb(var(--zt-surface-2)); color: rgb(var(--zt-fg)); border-color: rgb(var(--zt-edge));
}
html.dark .ds-form-stadium .btn-add-player:hover { background: rgb(var(--zt-surface-3)); border-color: var(--dsf-lime); }

/* Checkboxes & radio cards */
html.dark .ds-checkbox { color: rgb(var(--zt-fg)); }
html.dark .ds-checkbox .ds-checkbox-box { background: rgb(var(--zt-surface-2)); border-color: rgb(var(--zt-edge)); }
html.dark .ds-radio-card .ds-radio-card-body { background: rgb(var(--zt-surface-2)); border-color: rgb(var(--zt-edge)); }
html.dark .ds-radio-card .ds-radio-card-check { border-color: rgb(var(--zt-edge)); }
html.dark .ds-radio-card-title { color: rgb(var(--zt-fg)); }
html.dark .ds-radio-card-desc { color: rgb(var(--zt-fg-muted)); }

/* Dropzone (file upload) */
html.dark .ds-form-stadium .file-upload-wrapper.ds-dropzone {
    background: rgb(var(--zt-surface-2)); border-color: rgb(var(--zt-edge));
}
html.dark .ds-form-stadium .ds-dropzone.is-dragover { background: rgba(198,241,53,.08); }
html.dark .ds-form-stadium .ds-dropzone .file-upload-button { color: rgb(var(--zt-fg)); }
html.dark .ds-form-stadium .ds-dropzone .file-upload-button i { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .ds-dropzone .file-upload-button i.bi-cloud-upload { background: rgb(var(--zt-surface-3)); }
html.dark .ds-form-stadium .ds-dropzone.file-selected { background: rgba(52,199,89,.08); }
html.dark .ds-form-stadium .ds-dropzone-hint { color: rgb(var(--zt-fg-muted)); }
html.dark .ds-dropzone-preview { background: rgb(var(--zt-surface-2)); }
html.dark .ds-dropzone-thumb { background: rgb(var(--zt-surface-3)); }
html.dark .ds-dropzone-filename { color: rgb(var(--zt-fg)); }
html.dark .ds-dropzone-remove { background: rgb(var(--zt-surface-3)); color: rgb(var(--zt-fg-muted)); }
html.dark .ds-dropzone-remove:hover { background: rgba(224,86,47,.22); color: #ff9d80; }
html.dark .ds-dropzone-progress { background: rgb(var(--zt-surface-3)); }

/* Textarea counter */
html.dark .ds-form-stadium .ds-char-counter { background: rgb(var(--zt-surface) / .9); color: rgb(var(--zt-fg-muted)); }

/* Vertical side-tabs (.active keeps the fixed-dark navy/lime treatment in both
   themes, same rationale as the hero banner — only the inactive/hover states
   and icon chip need a dark-surface counterpart). */
html.dark .ds-form-stadium .ds-vtab:hover:not(.active) { background: rgb(var(--zt-surface-2)); }
html.dark .ds-form-stadium .ds-vtab-icon { background: rgb(var(--zt-surface-3)); color: rgb(var(--zt-fg-muted)); }
html.dark .ds-form-stadium .ds-vtab-title { color: rgb(var(--zt-fg)); }
html.dark .ds-form-stadium .ds-vtab-sub { color: rgb(var(--zt-fg-muted)); }

/* Flatpickr */
html.dark .ds-form-stadium .flatpickr-day.today { border-color: rgb(var(--zt-fg-muted)); }

/* Sticky mobile footer */
@media (max-width: 767.98px) {
    html.dark .ds-form-stadium .submit-section-container {
        background: rgb(var(--zt-surface)); border-top-color: rgb(var(--zt-edge));
    }
}

/* RTL override. */
html[dir="rtl"] .ds-dropzone-remove { margin-left: 0; margin-right: auto; }