/* ==============================================================
           RESET & BASE
           ============================================================== */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            /* Brand palette */
            --orange:       #ff7f27;
            --orange-dark:  #e06012;
            --orange-bg:    #fff4ec;
            --orange-ring:  rgba(255, 127, 39, 0.18);

            /* Neutral scale */
            --cream:    #faf8f5;
            --white:    #ffffff;
            --gray-50:  #f7f6f4;
            --gray-100: #efefef;
            --gray-200: #dedede;
            --gray-400: #a0a0a0;
            --gray-600: #5e5e5e;
            --gray-800: #303030;
            --black:    #1a1a1a;

            /* Semantic */
            --success:      #1a7a42;
            --success-bg:   #e6f6ee;
            --success-ring: rgba(26, 122, 66, 0.15);
            --error:        #c0392b;
            --error-bg:     #fdecea;

            /* Info (blue) — used in success screen season blocks */
            --info:         #1e40af;
            --info-bg:      #eff6ff;
            --info-border:  #3b82f6;

            /* Warn (amber) — used in success screen season blocks */
            --warn:         #92400e;
            --warn-bg:      #fef3c7;
            --warn-border:  #f59e0b;

            /* Typography */
            --font-display: 'Barlow Condensed', sans-serif;
            --font-body:    'Barlow', sans-serif;

            /* Radii & shadows */
            --r-lg: 18px;
            --r-md: 12px;
            --r-sm:  8px;
            --shadow-card: 0 6px 36px rgba(0, 0, 0, 0.08);
            --shadow-btn:  0 4px 18px rgba(255, 127, 39, 0.34);
        }

        html { font-size: 16px; }

        body {
            font-family: var(--font-body);
            background: var(--cream);
            color: var(--black);
            line-height: 1.6;
            padding: 28px 16px 64px;
            -webkit-font-smoothing: antialiased;
        }

        /* ==============================================================
           LAYOUT CONTAINER
           ============================================================== */
        .form-container {
            max-width: 640px;
            margin: 0 auto;
        }

        /* ==============================================================
           PAGE HEADER
           ============================================================== */
        .form-header {
            text-align: center;
            margin-bottom: 28px;
        }
        .form-header h1 {
            font-family: var(--font-display);
            font-size: 34px;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: var(--black);
            line-height: 1.1;
            margin-bottom: 8px;
        }
        .form-header h1 .accent { color: var(--orange); }
        .form-header .subtitle {
            font-size: 15px;
            color: var(--gray-600);
            max-width: 440px;
            margin: 0 auto;
            line-height: 1.5;
        }
        .form-header .subtitle .en {
            display: block;
            font-size: 14px;
            color: var(--gray-600);
            margin-top: 4px;
        }

        /* ==============================================================
           STEPPER
           ============================================================== */
        .stepper {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            margin-bottom: 24px;
            padding: 0 8px;
        }

        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
        }

        /* Connector line between steps */
        .step-item:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 17px;
            left:  calc(50% + 19px);
            right: calc(-50% + 19px);
            height: 2px;
            background: var(--gray-200);
            transition: background 0.4s ease;
        }
        .step-item.completed:not(:last-child)::after {
            background: var(--orange);
        }

        /* Step circle */
        .step-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 15px;
            background: var(--gray-100);
            color: var(--gray-400);
            border: 2px solid var(--gray-200);
            position: relative;
            z-index: 1;
            transition: background 0.3s ease, border-color 0.3s ease,
                        color 0.3s ease, box-shadow 0.3s ease;
            flex-shrink: 0;
        }
        .step-item.active .step-circle {
            background: var(--orange);
            color: var(--white);
            border-color: var(--orange);
            box-shadow: 0 0 0 5px var(--orange-ring);
        }
        .step-item.completed .step-circle {
            background: var(--orange);
            color: var(--white);
            border-color: var(--orange);
            font-size: 0; /* hide the number */
        }
        /* Checkmark symbol for completed steps */
        .step-item.completed .step-circle::before {
            content: '✓';
            font-size: 16px;
        }

        /* Step label */
        .step-label {
            margin-top: 7px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--gray-400);
            text-align: center;
            line-height: 1.3;
            transition: color 0.3s ease;
        }
        .step-item.active .step-label,
        .step-item.completed .step-label {
            color: var(--orange);
        }

        /* ==============================================================
           STEP CARDS
           ============================================================== */
        .step-card {
            background: var(--white);
            border-radius: var(--r-lg);
            padding: 36px;
            box-shadow: var(--shadow-card);
            display: none;
        }
        .step-card.active {
            display: block;
            animation: fadeUp 0.3s ease;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0);    }
        }

        .card-title {
            font-family: var(--font-display);
            font-size: 26px;
            font-weight: 700;
            color: var(--black);
            letter-spacing: 0.01em;
            margin-bottom: 4px;
        }
        .card-desc {
            font-size: 14px;
            color: var(--gray-600);
            margin-bottom: 28px;
            line-height: 1.5;
        }
        .card-desc .en {
            display: block;
            font-size: 13.5px;
            color: var(--gray-600);
            margin-top: 4px;
        }

        /* ==============================================================
           FORM FIELDS
           ============================================================== */
        .field {
            margin-bottom: 20px;
        }
        .field label {
            display: block;
            font-weight: 600;
            font-size: 14px;
            color: var(--gray-800);
            margin-bottom: 7px;
            line-height: 1.4;
        }
        /* English part of bilingual labels */
        .field label .en {
            font-weight: 400;
            color: var(--gray-600);
            font-size: 13px;
        }
        /* Optional indicator */
        .field label .opt {
            font-weight: 400;
            color: var(--gray-400);
            font-size: 12px;
        }

        .field input[type="text"],
        .field input[type="email"],
        .field input[type="tel"],
        .field input[type="number"],
        .field input[type="date"],
        .field select,
        .field textarea {
            width: 100%;
            padding: 13px 16px;
            border: 2px solid var(--gray-200);
            border-radius: var(--r-sm);
            font-family: var(--font-body);
            font-size: 15px;
            color: var(--black);
            background: var(--white);
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            -webkit-appearance: none;
            appearance: none;
        }
        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px var(--orange-ring);
        }
        /* Valid / invalid visual states */
        .field input.is-valid,
        .field select.is-valid {
            border-color: var(--success);
        }
        .field input.is-invalid,
        .field select.is-invalid {
            border-color: var(--error);
            background: var(--error-bg);
        }

        /* Custom dropdown arrow */
        .field select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' stroke='%23a0a0a0' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px;
            cursor: pointer;
        }

        .field textarea {
            resize: vertical;
            min-height: 90px;
        }

        /* Inline field-level error message */
        .field-error {
            display: none;
            margin-top: 6px;
            font-size: 13px;
            color: var(--error);
            font-weight: 500;
            line-height: 1.4;
        }
        .field-error.visible {
            display: block;
        }

        /* Two-column layout for paired fields */
        .field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        /* ==============================================================
           INFO BOX
           ============================================================== */
        .info-box {
            background: var(--orange-bg);
            border-left: 4px solid var(--orange);
            border-radius: var(--r-sm);
            padding: 14px 16px;
            margin-bottom: 24px;
            font-size: 14px;
            color: var(--gray-800);
            line-height: 1.55;
        }
        .info-box .en {
            display: block;
            margin-top: 6px;
            font-style: italic;
            font-size: 13px;
            color: var(--gray-600);
        }

        /* ==============================================================
           PARTICIPANT CARDS
           ============================================================== */
        .participant-card {
            border: 2px solid var(--gray-200);
            border-radius: var(--r-md);
            margin-bottom: 16px;
            overflow: hidden;
            transition: border-color 0.2s ease;
        }
        /* First participant gets the orange treatment */
        .participant-card[data-first="true"] {
            border-color: var(--orange);
        }

        .participant-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 18px;
            background: var(--gray-50);
            border-bottom: 2px solid var(--gray-100);
        }
        .participant-card[data-first="true"] .participant-header {
            background: var(--orange-bg);
            border-bottom-color: rgba(255, 127, 39, 0.15);
        }

        .participant-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 17px;
            letter-spacing: 0.01em;
            color: var(--black);
        }
        .participant-card[data-first="true"] .participant-title {
            color: var(--orange-dark);
        }

        /* Remove participant button */
        .btn-remove-p {
            background: none;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            color: var(--gray-400);
            font-size: 20px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease, background 0.2s ease;
        }
        .btn-remove-p:hover {
            color: var(--error);
            background: var(--error-bg);
        }

        .participant-body { padding: 20px 18px 16px; }

        /* Pre-fill button — participant 1 only */
        .btn-prefill {
            width: 100%;
            padding: 11px 16px;
            background: var(--orange-bg);
            border: 2px dashed var(--orange);
            border-radius: var(--r-sm);
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 14px;
            color: var(--orange-dark);
            cursor: pointer;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.2s ease, border-color 0.2s ease;
        }
        .btn-prefill:hover {
            background: #ffdec8;
            border-color: var(--orange-dark);
        }

        /* Phone copy wrapper — participants 2+ */
        .phone-copy-wrap { position: relative; }
        .phone-copy-wrap input { padding-right: 100px; }

        .btn-copy-phone {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--gray-100);
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-600);
            cursor: pointer;
            padding: 5px 9px;
            white-space: nowrap;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .btn-copy-phone:hover {
            background: var(--gray-200);
            color: var(--black);
        }

        /* Add participant CTA */
        .btn-add-participant {
            width: 100%;
            padding: 15px;
            background: none;
            border: 2px dashed var(--gray-200);
            border-radius: var(--r-md);
            font-family: var(--font-body);
            font-size: 15px;
            font-weight: 500;
            color: var(--gray-600);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
            margin-top: 4px;
        }
        .btn-add-participant:hover {
            border-color: var(--orange);
            color: var(--orange);
            background: var(--orange-bg);
        }
        .btn-add-participant .icon-plus {
            font-size: 22px;
            font-weight: 400;
            line-height: 1;
        }

        /* ==============================================================
           STEP NAVIGATION BUTTONS
           ============================================================== */
        .step-nav {
            display: flex;
            gap: 12px;
            margin-top: 32px;
            align-items: center;
        }

        .btn-back {
            flex-shrink: 0;
            padding: 14px 20px;
            background: none;
            border: 2px solid var(--gray-200);
            border-radius: var(--r-sm);
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-600);
            cursor: pointer;
            white-space: nowrap;
            transition: border-color 0.2s ease, color 0.2s ease;
        }
        .btn-back:hover {
            border-color: var(--gray-400);
            color: var(--black);
        }

        .btn-next {
            flex: 1;
            padding: 15px 24px;
            background: var(--orange);
            border: none;
            border-radius: var(--r-sm);
            font-family: var(--font-display);
            font-size: 19px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--white);
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease;
            box-shadow: var(--shadow-btn);
        }
        .btn-next:hover { background: var(--orange-dark); }
        .btn-next:active { transform: scale(0.98); }
        .btn-next:disabled {
            background: var(--gray-200);
            color: var(--gray-400);
            cursor: not-allowed;
            box-shadow: none;
        }

        /* ==============================================================
           SUMMARY BLOCK (STEP 4)
           ============================================================== */
        .summary-block {
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--r-md);
            padding: 16px 18px;
            margin-bottom: 16px;
        }
        .summary-block h3 {
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.10em;
            color: var(--orange-dark);
            margin-bottom: 12px;
            border-bottom: 2px solid var(--orange-bg);
            padding-bottom: 6px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 16px;
            padding: 5px 0;
            border-bottom: 1px solid var(--gray-100);
            font-size: 14px;
        }
        .summary-row:last-child { border-bottom: none; }
        .summary-row .s-label { color: var(--gray-600); flex-shrink: 0; }
        .summary-row .s-value {
            font-weight: 600;
            color: var(--black);
            text-align: right;
        }

        /* ==============================================================
           CGU NOTICE
           ============================================================== */
        .cgu-notice {
            margin-top: 14px;
            font-size: 12px;
            color: var(--gray-400);
            line-height: 1.6;
            text-align: center;
        }
        .cgu-notice a {
            color: var(--gray-600);
            text-decoration: underline;
        }
        .cgu-notice .cgu-en {
            display: block;
            margin-top: 4px;
            font-size: 13px;
            color: var(--gray-600);
        }

        /* ==============================================================
           SEND PROGRESS BAR
           ============================================================== */
        .send-progress {
            display: none;
            margin-top: 16px;
            height: 4px;
            background: var(--gray-100);
            border-radius: 4px;
            overflow: hidden;
        }
        .send-progress.visible { display: block; }
        .send-progress-bar {
            height: 100%;
            width: 0;
            background: var(--orange);
            border-radius: 4px;
            transition: width 6s ease-in-out;
        }

        /* ==============================================================
           SUCCESS SCREEN
           All rules are scoped to #step-success to avoid collisions
           with the stepper's own .card-title, .section-title, etc.
           ============================================================== */

        /* The step-card base gives white background + padding.
           Override it here so the success screen uses a cream background
           with individual white sub-cards, matching the standalone design. */
        #step-success.step-card {
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            padding: 0;
        }

        /* ── Header ── */
        #step-success .sc-header {
            text-align: center;
            margin-bottom: 24px;
            padding-top: 8px;
        }
        #step-success .sc-badge {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: var(--success-bg);
            border: 3px solid var(--success);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px;
            font-size: 34px;
            color: var(--success);
            box-shadow: 0 0 0 8px var(--success-ring);
        }
        #step-success .sc-title {
            font-family: var(--font-display);
            font-size: 34px;
            font-weight: 700;
            color: var(--black);
            line-height: 1.1;
            letter-spacing: 0.01em;
            margin-bottom: 6px;
        }
        #step-success .sc-title .accent { color: var(--orange); }
        #step-success .sc-subtitle {
            font-size: 13.5px;
            color: var(--gray-400);
            font-style: italic;
        }

        /* ── Sub-cards ── */
        #step-success .sc-card {
            background: var(--white);
            border-radius: var(--r-lg);
            box-shadow: var(--shadow-card);
            padding: 26px 28px;
            margin-bottom: 14px;
        }

        /* ── Language badge ── */
        #step-success .sc-lang-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-display);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--orange);
            background: var(--orange-bg);
            border: 1.5px solid var(--orange);
            border-radius: 99px;
            padding: 4px 12px;
            margin-bottom: 14px;
        }

        /* ── Section title & intro ── */
        #step-success .sc-section-title {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            color: var(--black);
            letter-spacing: 0.01em;
            margin-bottom: 4px;
        }
        #step-success .sc-section-intro {
            font-size: 14px;
            color: var(--gray-600);
            margin-bottom: 16px;
            line-height: 1.5;
        }

        /* ── Season blocks ── */
        #step-success .sc-season {
            border-radius: var(--r-md);
            padding: 14px 16px;
            margin-bottom: 10px;
        }
        #step-success .sc-season:last-of-type { margin-bottom: 0; }
        #step-success .sc-season.offseason {
            background: var(--info-bg);
            border-left: 4px solid var(--info-border);
        }
        #step-success .sc-season.summer {
            background: var(--warn-bg);
            border-left: 4px solid var(--warn-border);
        }
        #step-success .sc-season-label {
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        #step-success .sc-season.offseason .sc-season-label { color: var(--info); }
        #step-success .sc-season.summer    .sc-season-label { color: var(--warn); }
        #step-success .sc-season p {
            font-size: 14.5px;
            color: var(--gray-800);
            margin-bottom: 6px;
            line-height: 1.55;
        }
        #step-success .sc-season p:last-child { margin-bottom: 0; }
        #step-success .sc-season strong { color: var(--black); font-weight: 600; }
        #step-success .sc-season em     { color: var(--gray-600); }

        /* ── Alert banner ── */
        #step-success .sc-alert {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: var(--orange-bg);
            border-left: 4px solid var(--orange);
            border-radius: var(--r-sm);
            padding: 12px 14px;
            margin-top: 14px;
            font-size: 13.5px;
            color: var(--gray-800);
            line-height: 1.5;
        }
        #step-success .sc-alert-icon { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
        #step-success .sc-alert strong { color: var(--black); font-weight: 600; }

        /* ── Contacts ── */
        #step-success .sc-contacts-title {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            color: var(--black);
            margin-bottom: 16px;
        }
        #step-success .sc-contacts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        #step-success .sc-contact-card {
            background: var(--gray-50);
            border: 1.5px solid var(--gray-100);
            border-radius: var(--r-md);
            padding: 14px 16px;
        }
        #step-success .sc-contact-name {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            color: var(--black);
            margin-bottom: 6px;
        }
        #step-success .sc-contact-local a {
            display: block;
            font-size: 17px;
            font-weight: 600;
            color: var(--orange);
            text-decoration: none;
        }
        #step-success .sc-contact-intl a {
            display: block;
            font-size: 13px;
            color: var(--gray-600);
            text-decoration: none;
            margin-top: 2px;
        }
        #step-success .sc-contact-local a:hover,
        #step-success .sc-contact-intl a:hover { text-decoration: underline; }

        /* ── Address + map ── */
        #step-success .sc-address-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 14px;
        }
        #step-success .sc-address-pin { font-size: 20px; line-height: 1; margin-top: 2px; }
        #step-success .sc-address-brand {
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            color: var(--black);
            display: block;
            margin-bottom: 3px;
        }
        #step-success .sc-address-street {
            font-size: 14.5px;
            color: var(--gray-800);
        }
        #step-success .sc-address-street a {
            color: var(--orange);
            text-decoration: none;
        }
        #step-success .sc-address-street a:hover { text-decoration: underline; }
        #step-success .sc-map-wrap {
            border-radius: var(--r-md);
            overflow: hidden;
            border: 1.5px solid var(--gray-200);
            height: 220px;
        }
        #step-success .sc-map-wrap iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }
        #step-success .sc-website-link {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            font-size: 14px;
            color: var(--gray-600);
        }
        #step-success .sc-website-link a {
            color: var(--orange);
            font-weight: 600;
            text-decoration: none;
        }
        #step-success .sc-website-link a:hover { text-decoration: underline; }

        /* ── Back-to-site button ── */
        #step-success .sc-back-btn {
            display: block;
            text-align: center;
            margin-top: 20px;
            padding: 15px 28px;
            background: var(--orange);
            color: var(--white);
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: var(--r-md);
            box-shadow: var(--shadow-btn);
            transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
        }
        #step-success .sc-back-btn:hover {
            background: var(--orange-dark);
            box-shadow: 0 6px 24px rgba(255, 127, 39, 0.45);
            transform: translateY(-1px);
        }
        #step-success .sc-back-btn:active { transform: translateY(0); }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            #step-success .sc-card { padding: 18px 16px; }
            #step-success .sc-contacts-grid { grid-template-columns: 1fr; }
            #step-success .sc-title { font-size: 28px; }
        }

        /* ==============================================================
           RESPONSIVE — mobile-first adjustments
           ============================================================== */
        @media (max-width: 520px) {
            body { padding: 16px 12px 48px; }
            .step-card { padding: 24px 18px; }
            .form-header h1 { font-size: 28px; }
            /* Hide text labels in stepper on small screens */
            .step-label { display: none; }
            /* Stack paired fields vertically on small screens */
            .field-row { grid-template-columns: 1fr; gap: 0; }
            .btn-back { padding: 14px 14px; font-size: 13px; }
        }

        /* ==============================================================
           CUSTOM DATE PICKER
           ============================================================== */
        .date-picker-wrapper {
            position: relative;
        }
        .date-display-btn {
            width: 100%;
            padding: 13px 16px;
            border: 2px solid var(--gray-200);
            border-radius: var(--r-sm);
            font-family: var(--font-body);
            font-size: 15px;
            color: var(--black);
            background: var(--white);
            text-align: left;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .date-display-btn:focus,
        .date-display-btn.open {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px var(--orange-ring);
            outline: none;
        }
        .date-display-btn.is-valid { border-color: var(--success); }
        .date-display-btn.is-invalid {
            border-color: var(--error);
            background: var(--error-bg);
        }
        .date-display-btn .cal-icon {
            font-size: 16px;
            flex-shrink: 0;
            opacity: 0.5;
        }
        .date-display-btn .date-text {
            flex: 1;
        }
        .date-display-btn .date-text.placeholder {
            color: var(--gray-400);
        }
        .date-display-btn .clear-date {
            font-size: 18px;
            color: var(--gray-400);
            line-height: 1;
            padding: 0 2px;
            display: none;
            cursor: pointer;
        }
        .date-display-btn .clear-date:hover { color: var(--error); }
        .date-display-btn.has-value .clear-date { display: block; }

        /* Calendar popover */
        .cal-popover {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background: var(--white);
            border: 2px solid var(--gray-200);
            border-radius: var(--r-md);
            box-shadow: 0 8px 32px rgba(0,0,0,0.14);
            z-index: 100;
            overflow: hidden;
            animation: calFadeIn 0.15s ease;
        }
        .cal-popover.open { display: block; }
        @keyframes calFadeIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .cal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 10px;
            background: var(--orange);
            color: var(--white);
        }
        .cal-nav-btn {
            background: none;
            border: none;
            color: var(--white);
            font-size: 20px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease;
        }
        .cal-nav-btn:hover { background: rgba(255,255,255,0.2); }
        .cal-month-label {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 17px;
            letter-spacing: 0.02em;
            text-transform: capitalize;
        }

        .cal-grid {
            padding: 8px 10px 12px;
        }
        .cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            margin-bottom: 4px;
        }
        .cal-wd {
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--gray-400);
            padding: 4px 0;
        }
        .cal-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }
        .cal-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 500;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
            position: relative;
            user-select: none;
        }
        .cal-day:hover:not(.disabled):not(.selected):not(.empty) {
            background: var(--orange-bg);
            color: var(--orange-dark);
        }
        .cal-day.empty { cursor: default; }
        .cal-day.disabled {
            color: var(--gray-200);
            cursor: not-allowed;
        }
        .cal-day.today {
            font-weight: 700;
            color: var(--orange);
        }
        .cal-day.today::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--orange);
        }
        .cal-day.today.disabled::after { background: var(--gray-200); }
        .cal-day.selected {
            background: var(--orange) !important;
            color: var(--white) !important;
            font-weight: 700;
        }
        /* Preferred date indicator */
        .cal-day.preferred {
            background: var(--orange-bg);
            color: var(--orange-dark);
            font-weight: 700;
        }
        .cal-day.preferred::before {
            content: '★';
            position: absolute;
            top: -1px;
            right: -1px;
            font-size: 8px;
            color: var(--orange);
        }
        /* In-range highlight between start and end */
        .cal-day.in-range {
            background: var(--orange-bg);
            border-radius: 0;
        }
        .cal-day.range-start {
            background: var(--orange);
            color: var(--white);
            border-radius: 50% 0 0 50%;
        }
        .cal-day.range-end {
            background: var(--orange);
            color: var(--white);
            border-radius: 0 50% 50% 0;
        }
        .cal-day.range-start.range-end {
            border-radius: 50%;
        }

        /* ==============================================================
           STEPPER — completed circles are clickable
           ============================================================== */
        .step-item.completed .step-circle {
            cursor: pointer;
        }
        .step-item.completed .step-circle:hover {
            box-shadow: 0 0 0 5px var(--orange-ring);
        }

        
        /* ==============================================================
           PHONE — custom country selector with flag images
           ============================================================== */
        .phone-field-wrapper {
            position: relative;
        }

        .phone-country-group {
            display: flex;
            align-items: stretch;
            width: 100%;
            border: 2px solid var(--gray-200);
            border-radius: var(--r-sm);
            background: var(--white);
            overflow: visible;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .phone-country-group:focus-within {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px var(--orange-ring);
        }

        /* Hidden native select (keeps form value, accessible) */
        .phone-country-select {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }

        /* Custom trigger button */
        .phone-flag-trigger {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 110px;
            min-width: 110px;
            max-width: 110px;
            padding: 0 10px 0 10px;
            border: none;
            border-right: 1px solid var(--gray-200);
            border-radius: var(--r-sm) 0 0 var(--r-sm);
            background: var(--gray-50);
            cursor: pointer;
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 600;
            color: var(--black);
            white-space: nowrap;
            position: relative;
            outline: none;
            transition: background 0.15s ease;
        }
        .phone-flag-trigger:hover { background: var(--gray-100); }
        .phone-flag-trigger:focus { background: var(--gray-100); }

        .phone-flag-trigger .flag-img {
            width: 20px;
            height: 14px;
            border-radius: 2px;
            object-fit: cover;
            flex-shrink: 0;
            display: block;
        }
        .phone-flag-trigger .dial-code {
            flex: 1;
            font-size: 13px;
        }
        .phone-flag-trigger .chevron {
            font-size: 9px;
            color: var(--gray-400);
            flex-shrink: 0;
        }

        /* Dropdown panel */
        .phone-flag-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            min-width: 200px;
            background: var(--white);
            border: 2px solid var(--gray-200);
            border-radius: var(--r-sm);
            box-shadow: 0 8px 28px rgba(0,0,0,0.14);
            z-index: 300;
            overflow: hidden;
            animation: calFadeIn 0.15s ease;
        }
        .phone-flag-dropdown.open { display: block; }

        .phone-flag-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 14px;
            cursor: pointer;
            font-size: 14px;
            color: var(--black);
            transition: background 0.1s ease;
            border-bottom: 1px solid var(--gray-100);
        }
        .phone-flag-option:last-child { border-bottom: none; }
        .phone-flag-option:hover { background: var(--orange-bg); }
        .phone-flag-option.selected {
            background: var(--orange-bg);
            font-weight: 600;
            color: var(--orange-dark);
        }
        .phone-flag-option .flag-img {
            width: 22px;
            height: 15px;
            border-radius: 2px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .phone-flag-option .country-name {
            flex: 1;
            color: var(--gray-600);
            font-size: 13px;
        }
        .phone-flag-option .dial-badge {
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-400);
        }

        .phone-number-input {
            flex: 1;
            min-width: 0;
            border: none !important;
            border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
            box-shadow: none !important;
            padding: 13px 16px !important;
            background: transparent !important;
        }

        .phone-number-input:focus {
            outline: none;
        }

        .phone-country-group.is-invalid {
            border-color: var(--error);
            background: var(--error-bg);
        }

        .phone-country-group.is-valid {
            border-color: var(--success);
        }

        .phone-copy-wrap {
            position: relative;
        }

        .phone-copy-wrap .phone-country-group {
            padding-right: 0;
        }
        .phone-copy-wrap .phone-number-input {
            padding-right: 96px !important;
        }

        .btn-copy-phone {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
        }

        @media (max-width: 520px) {
            .phone-flag-trigger {
                width: 90px;
                min-width: 90px;
                max-width: 90px;
                padding: 0 8px;
            }
            .phone-flag-trigger .dial-code { font-size: 12px; }

            .phone-number-input {
                font-size: 14px !important;
                padding: 12px 12px !important;
            }
        }


        /* ==============================================================
           EMAIL — autocomplete dropdown
           ============================================================== */
        .email-wrapper {
            position: relative;
        }
        .email-suggestions {
            display: none;
            position: absolute;
            top: calc(100% + 2px);
            left: 0;
            right: 0;
            background: var(--white);
            border: 2px solid var(--orange);
            border-radius: var(--r-sm);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
            z-index: 200;
            overflow: hidden;
        }
        .email-suggestions.open { display: block; }
        .email-suggestion-item {
            padding: 10px 14px;
            font-size: 14px;
            color: var(--black);
            cursor: pointer;
            border-bottom: 1px solid var(--gray-100);
            transition: background 0.1s ease;
        }
        .email-suggestion-item:last-child { border-bottom: none; }
        .email-suggestion-item:hover {
            background: var(--orange-bg);
            color: var(--orange-dark);
        }
        .email-suggestion-item .domain-part { color: var(--orange); font-weight: 600; }

        /* ==============================================================
           FLIGHT TYPE — info box shown after selection
           ============================================================== */
        .vol-info-box {
            background: var(--orange-bg);
            border-left: 3px solid var(--orange);
            border-radius: var(--r-sm);
            padding: 11px 14px;
            margin-top: 8px;
            font-size: 13px;
            color: var(--gray-800);
            line-height: 1.7;
            display: none;
            animation: fadeUp 0.2s ease;
        }
        .vol-info-box.visible { display: block; }
        .vol-info-box .vi-meta {
            display: block;
            margin-top: 7px;
            font-size: 12px;
            color: var(--gray-600);
        }
        .vol-info-box .vi-meta u {
            font-weight: 600;
            color: var(--gray-800);
            text-underline-offset: 2px;
        }

        /* ==============================================================
           SUMMARY BANNER — "Vous y êtes presque !"
           ============================================================== */
        .summary-banner {
            text-align: center;
            padding: 8px 0 20px;
        }
        .summary-banner h3 {
            font-family: var(--font-display);
            font-size: 30px;
            font-weight: 700;
            color: var(--orange);
            letter-spacing: 0.01em;
            margin-bottom: 4px;
        }
        .summary-banner p {
            font-size: 14px;
            color: var(--gray-600);
            line-height: 1.5;
        }

        /* ==============================================================
           CALENDAR — hint bar for preferred-date calendar
           ============================================================== */
        .cal-range-hint {
            background: var(--orange-bg);
            border-bottom: 1px solid rgba(255,127,39,0.2);
            padding: 7px 12px;
            font-size: 12px;
            color: var(--orange-dark);
            text-align: center;
            font-weight: 500;
        }
        /* Disabled days in preferred-date calendar look clearly unavailable */
        .cal-day.out-of-range {
            color: var(--gray-200);
            cursor: not-allowed;
            background: none !important;
        }

        /* ==============================================================
           WEIGHT WARNING BOX
           ============================================================== */
        .weight-warning {
            background: #fff8e6;
            border-left: 4px solid #f0a500;
            border-radius: var(--r-sm);
            padding: 12px 14px;
            margin-top: 8px;
            font-size: 13px;
            color: var(--gray-800);
            line-height: 1.55;
            display: none;
        }
        .weight-warning.visible { display: block; }
        .weight-warning .ww-icon { font-size: 16px; margin-right: 4px; }
        .weight-warning .ww-en {
            display: block;
            margin-top: 4px;
            color: var(--gray-600);
            font-size: 13px;
        }
        /* Weight limit info box (always visible) */
        .weight-info-box {
            background: #fff8e6;
            border-left: 4px solid #f0a500;
            border-radius: var(--r-sm);
            padding: 13px 15px;
            margin-bottom: 16px;
            font-size: 13.5px;
            color: var(--gray-800);
            line-height: 1.55;
        }
        .weight-info-box .en {
            display: block;
            margin-top: 5px;
            font-size: 13px;
            color: var(--gray-600);
        }
        /* ==============================================================
           LAST-MINUTE MODAL (< 48h preferred date)
           ============================================================== */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .modal-overlay.visible { display: flex; }

        .modal-box {
            background: var(--white);
            border-radius: var(--r-lg);
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
            max-width: 500px;
            width: 100%;
            padding: 32px 28px 24px;
            position: relative;
        }
        .modal-icon {
            font-size: 36px;
            text-align: center;
            margin-bottom: 12px;
        }
        .modal-title {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            color: var(--black);
            text-align: center;
            margin-bottom: 16px;
            line-height: 1.2;
        }
        .modal-title .accent { color: var(--orange); }
        .modal-body {
            font-size: 14.5px;
            color: var(--gray-800);
            line-height: 1.65;
            margin-bottom: 20px;
        }
        .modal-body .modal-en {
            display: block;
            margin-top: 12px;
            font-size: 13.5px;
            color: var(--gray-600);
            border-top: 1px solid var(--gray-100);
            padding-top: 10px;
        }
        .modal-sms {
            background: var(--orange-bg);
            border: 1px solid var(--orange-ring);
            border-radius: var(--r-md);
            padding: 14px 16px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--gray-800);
        }
        .modal-sms strong { color: var(--orange-dark); }
        .modal-sms .modal-en {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            color: var(--gray-600);
        }
        .modal-btn-ok {
            display: block;
            width: 100%;
            padding: 14px;
            background: var(--orange);
            color: var(--white);
            border: none;
            border-radius: var(--r-md);
            font-family: var(--font-display);
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 0.03em;
            cursor: pointer;
            box-shadow: var(--shadow-btn);
            transition: background 0.2s;
        }
        .modal-btn-ok:hover { background: var(--orange-dark); }

        /* ==============================================================
           PHONE FLAG — "Other" custom dial code input
           ============================================================== */
        /* Editable dial-code span used when "Autre / Other" is selected */
        .dial-code.is-custom {
            min-width: 42px;
            border-bottom: 1.5px dashed var(--orange);
            color: var(--orange-dark);
            outline: none;
            cursor: text;
            padding-right: 2px;
        }
        .dial-code.is-custom:empty::before {
            content: '+??';
            color: var(--gray-400);
        }

        /* ==============================================================
           WEIGHT — near-limit advisory banner (95–100 kg)
           ============================================================== */
        .weight-warning.near-limit {
            background: #fff8e6;
            border-left-color: #f0a500;
            color: var(--gray-800);
        }

        /* ==============================================================
           OPTIONAL PARTICIPANT PHONE
           Dashed reveal pattern, matching .btn-prefill exactly.
           The revealed field reuses .phone-country-group as-is.
           ============================================================== */
        .p-optional-phone-wrapper {
            margin-top: 14px;
            margin-bottom: 4px;
        }

        /* Trigger button — neutral gray so it doesn't compete visually with
           .btn-prefill ("Utiliser les infos de contact"), which should remain
           the primary orange action. Echoes .btn-add-participant's restraint. */
        .btn-add-phone {
            width: 100%;
            padding: 11px 16px;
            background: var(--gray-50);
            border: 2px dashed var(--gray-200);
            border-radius: var(--r-sm);
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 13.5px;
            color: var(--gray-600);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
            text-align: center;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .btn-add-phone:hover {
            background: var(--gray-100);
            border-color: var(--gray-400);
            color: var(--black);
        }
        .btn-add-phone .opt {
            font-weight: 400;
            color: var(--gray-400);
            font-size: 12px;
        }

        /* Revealed field block */
        .p-optional-phone-field {
            margin-top: 4px;
            padding: 14px 14px 12px;
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--r-sm);
            animation: fadeUp 0.2s ease;
        }
        .p-optional-phone-field label {
            display: block;
            font-weight: 600;
            font-size: 13.5px;
            color: var(--gray-800);
            margin-bottom: 7px;
            line-height: 1.4;
        }
        .p-optional-phone-field label .en {
            font-weight: 400;
            color: var(--gray-600);
            font-size: 12px;
        }
        .p-optional-phone-field label .opt {
            display: block;
            font-weight: 400;
            color: var(--gray-400);
            font-size: 11px;
            margin-top: 2px;
        }

        /* "Remove" link — quieter than the add button, text-link style */
        .btn-remove-phone {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 10px;
            background: none;
            border: none;
            padding: 4px 2px;
            font-family: var(--font-body);
            font-size: 12.5px;
            font-weight: 600;
            color: var(--gray-400);
            cursor: pointer;
            transition: color 0.15s ease;
        }
        .btn-remove-phone:hover { color: var(--error); }

        /* ==============================================================
           LAST-MINUTE SMS BANNER (success screen)
           Visually echoes .modal-box / .modal-sms so it reads as the same
           "urgent" language already established by the date-picker modal.
           ============================================================== */
        .lm-banner {
            background: var(--orange-bg);
            border: 2px solid var(--orange);
            border-radius: var(--r-lg);
            padding: 24px 22px 18px;
            margin-bottom: 22px;
            text-align: center;
            box-shadow: 0 6px 28px var(--orange-ring);
        }
        .lm-banner .lm-icon {
            font-size: 32px;
            margin-bottom: 8px;
            line-height: 1;
        }
        .lm-banner .lm-title {
            font-family: var(--font-display);
            font-size: 23px;
            font-weight: 700;
            color: var(--orange-dark);
            letter-spacing: 0.01em;
            margin-bottom: 10px;
        }
        .lm-banner .lm-body {
            font-size: 14px;
            color: var(--gray-800);
            line-height: 1.6;
            margin-bottom: 18px;
        }
        .lm-banner .lm-cta {
            display: block;
            max-width: 340px;
            margin: 0 auto 14px;
            padding: 14px;
            background: var(--orange);
            color: var(--white);
            border: none;
            border-radius: var(--r-md);
            font-family: var(--font-display);
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-decoration: none;
            cursor: pointer;
            box-shadow: var(--shadow-btn);
            transition: background 0.2s ease;
        }
        .lm-banner .lm-cta:hover { background: var(--orange-dark); }

        .lm-banner .lm-sms-preview {
            background: var(--white);
            border: 1px solid var(--orange-ring);
            border-radius: var(--r-md);
            padding: 13px 15px;
            margin-bottom: 14px;
            font-size: 13px;
            color: var(--gray-800);
            text-align: left;
            line-height: 1.55;
            font-style: italic;
        }
        .lm-banner .lm-sms-preview .lm-sms-label {
            display: block;
            margin-bottom: 5px;
            font-style: normal;
            font-weight: 700;
            color: var(--orange-dark);
            font-size: 10px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .lm-banner .lm-toggle-hint {
            font-size: 12px;
            color: var(--gray-600);
            margin-bottom: 8px;
        }
        .lm-banner .lm-toggle-btn {
            background: var(--white);
            border: 1.5px solid var(--orange);
            border-radius: var(--r-sm);
            padding: 8px 18px;
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.03em;
            color: var(--orange-dark);
            cursor: pointer;
            margin-bottom: 10px;
            transition: background 0.15s ease;
        }
        .lm-banner .lm-toggle-btn:hover { background: var(--orange-bg); }

        .lm-banner .lm-phone-note {
            font-size: 11px;
            color: var(--gray-600);
            margin-top: 4px;
        }