/*
 * e-leads Rustbehandling — Frontend CSS
 * Hero UI-inspireret styling på eksisterende HTML-struktur
 * Berører KUN klasser der faktisk bruges i frontend.php templaten
 */

/* ══ CSS TOKENS ═════════════════════════════════════════════════════════════ */
:root {
    --ef-primary:       #3452FF;
    --ef-primary-fg:    #ffffff;
    --ef-primary-dark:  #3452FF;
    --ef-primary-light: rgba(52,82,255,.08);
    --ef-primary-rgb:   52,82,255;
    --ef-success:       #10b981;
    --ef-danger:        #ef4444;
    --ef-bg:            #ffffff;
    --ef-surface:       #f4f4f5;
    --ef-input-bg:      #f4f4f5;
    --ef-border:        #e4e4e7;
    --ef-text:          #18181b;
    --ef-text-2:        #71717a;
    --ef-text-3:        #a1a1aa;
    --ef-radius:        12px;
    --ef-radius-lg:     18px;
    --ef-shadow:        0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
    --ef-shadow-md:     0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
    --ef-focus-ring:    0 0 0 3px rgba(var(--ef-primary-rgb),.18);
    --ef-t:             .15s ease;
}

/* ══ WRAPPER ════════════════════════════════════════════════════════════════ */
.elct-booking-form { font-family:'Gabarito', system-ui, sans-serif; border:0 !important; box-shadow:none !important; }
.elct-wrap {
    max-width: 100%;
    margin: 0 auto;
    color: var(--ef-text);
    border:0 !important;
    box-shadow:none !important;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.5;
}

/* ══ STEPPER ════════════════════════════════════════════════════════════════ */
.elct-progress { display:flex; align-items:flex-start; margin-bottom:24px; }
.elct-progress-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; text-align:center; }
.elct-progress-item::after { content:''; position:absolute; top:15px; left:calc(50% + 18px); right:calc(-50% + 18px); height:2px; background:var(--ef-border); z-index:0; transition:background var(--ef-t); }
.elct-progress-item:last-child::after { display:none; }
.elct-progress-item.is-done::after { background:var(--ef-primary); }
.elct-progress-dot { width:30px; height:30px; border-radius:50%; background:#f1f5f9; border:2px solid var(--ef-border); color:var(--ef-text-2); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:all var(--ef-t); flex-shrink:0; }
.elct-progress-item.is-active .elct-progress-dot { background:var(--ef-primary); border-color:var(--ef-primary); color:#fff; box-shadow:0 0 0 4px rgba(var(--ef-primary-rgb),.15); }
.elct-progress-item.is-done .elct-progress-dot { background:var(--ef-primary); border-color:var(--ef-primary); color:#fff; }
.elct-progress-item.is-done .elct-progress-num { display:none; }
.elct-progress-item.is-done .elct-progress-check { display:flex; }
.elct-progress-check { display:none; }
.elct-progress-label { font-size:11px; color:var(--ef-text-2); font-weight:500; line-height:1.2; max-width:80px; transition:color var(--ef-t); }
.elct-progress-item.is-active .elct-progress-label { color:var(--ef-primary); font-weight:700; }
.elct-progress-item.is-done .elct-progress-label { color:var(--ef-text-2); }
@media(max-width:480px){ .elct-progress-label { display:none; } }

/* ══ STEP CARD ══════════════════════════════════════════════════════════════ */
.elct-step-card {
    background:var(--ef-bg);
    border:0;
    border-radius:var(--ef-radius-lg);
    padding:28px 28px 24px;
    box-shadow:none;
    display:none;
}
.elct-step-card.is-active { display:block; }
.elct-booking-form.elct-hide-stepper .elct-progress,
.elct-booking-form.elct-no-steps .elct-progress { display:none; }
.elct-booking-form.elct-no-steps .elct-step-card { display:block; padding:22px 0; border-radius:0; margin-bottom:4px; }
.elct-booking-form.elct-no-steps .elct-step-card + .elct-step-card { border-top:1px solid rgba(148,163,184,.16); }
.elct-booking-form.elct-no-steps .elct-step-nav:not(.elct-step-nav--submit) { display:none; }
.elct-booking-form.elct-no-steps #elct-step5-back { display:none; }
.elct-booking-form.elct-no-steps .elct-step-nav--submit { display:block; margin-top:18px; }
.elct-step-title { font-size:18px; font-weight:700; margin:0 0 18px; letter-spacing:-.025em; line-height:1.2; }

/* ══ DISCLAIMER ═════════════════════════════════════════════════════════════ */
.elct-disclaimer {
    background:var(--ef-primary-light);
    border-left:3px solid var(--ef-primary);
    border-radius:0 var(--ef-radius) var(--ef-radius) 0;
    padding:10px 14px;
    font-size:13px;
    color:var(--ef-primary-dark);
    margin-bottom:18px;
}

/* ══ LABELS & INPUTS (e-leads klasser) ══════════════════════════════════════ */
.elct-field { margin-bottom:14px; }
.elct-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.elct-field-row--thirds { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media(max-width:760px){ .elct-field-row--thirds { grid-template-columns:1fr; } }
@media(max-width:520px){ .elct-field-row { grid-template-columns:1fr; } }

/* Label */
.e-leads-label {
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--ef-text);
    margin-bottom:5px;
    letter-spacing:-.01em;
}
.e-leads-required { color:var(--ef-danger); font-size:11px; margin-left:2px; }

/* Input, select, textarea — Hero UI stil */
.e-leads-input,
input.e-leads-input,
select.e-leads-input,
textarea.e-leads-input {
    width:100%;
    padding:10px 14px;
    font-size:15px;
    font-family:inherit;
    background:var(--ef-input-bg);
    border:1.5px solid var(--ef-border);
    border-radius:var(--ef-radius);
    color:var(--ef-text);
    transition:border-color var(--ef-t), box-shadow var(--ef-t), background var(--ef-t);
    appearance:none;
    -webkit-appearance:none;
    outline:none;
    box-sizing:border-box;
    line-height:1.5;
}
input.e-leads-input,
select.e-leads-input {
    height:46px;
    min-height:46px;
}
textarea.e-leads-input {
    min-height:88px;
    height:auto;
}
.e-leads-input:focus,
input.e-leads-input:focus,
select.e-leads-input:focus,
textarea.e-leads-input:focus {
    border-color:var(--ef-primary);
    background:var(--ef-bg);
    box-shadow:var(--ef-focus-ring);
}
.e-leads-input::placeholder { color:var(--ef-text-3); }
.e-leads-input.is-invalid { border-color:var(--ef-danger); }
textarea.e-leads-input { resize:vertical; }

/* Select arrow */
select.e-leads-input {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px;
    cursor:pointer;
}

/* Error messages */
.e-leads-field-error {
    color:var(--ef-danger);
    font-size:12px;
    font-weight:500;
    margin-top:4px;
}

/* ══ NUMMERPLADEFELD ════════════════════════════════════════════════════════ */
.elct-plate-row { display:flex; gap:10px; align-items:flex-end; }
.elct-plate-input-wrap {
    flex:1;
    display:flex;
    align-items:stretch;
    min-height:46px;
    background:var(--ef-input-bg);
    border:1.5px solid var(--ef-border);
    border-radius:var(--ef-radius);
    overflow:hidden;
    transition:border-color var(--ef-t), box-shadow var(--ef-t), background var(--ef-t);
}
.elct-plate-input-wrap:focus-within {
    border-color:var(--ef-primary);
    box-shadow:var(--ef-focus-ring);
    background:var(--ef-bg);
}
.elct-plate-dk {
    width:56px;
    padding:0 14px;
    margin:-1.5px 0 -1.5px -1.5px;
    font-size:12px;
    font-weight:900;
    color:#fff;
    background:#003580;
    display:flex;
    align-items:center;
    justify-content:center;
    letter-spacing:.04em;
    flex-shrink:0;
    align-self:stretch;
    min-height:49px;
    box-sizing:border-box;
}
.elct-plate-input {
    flex:1;
    min-height:46px !important;
    height:46px !important;
    padding:10px 12px !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    font-size:16px !important;
    font-weight:700 !important;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.elct-plate-input:focus { outline:none; box-shadow:none !important; border:none !important; }
@media(max-width:520px){
    .elct-plate-row { flex-direction:column; align-items:stretch; }
    .elct-plate-row .elct-btn { width:100%; }
}


/* Demo hint */
.elct-demo-hint {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; color:var(--ef-text-2); margin-top:8px;
    padding:4px 10px; background:#f1f5f9; border-radius:6px; border:1px solid var(--ef-border);
}
.elct-demo-hint code { background:#e2e8f0; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; color:var(--ef-primary-dark); }

/* Car info + alert */
.elct-car-info { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--ef-radius); padding:12px 14px; margin-top:12px; }
.elct-car-info-row { display:flex; justify-content:space-between; font-size:13px; padding:2px 0; }
.elct-car-info-label { color:var(--ef-text-2); }
.elct-car-info-value { font-weight:600; color:#065f46; }
.elct-alert { border-radius:var(--ef-radius); padding:10px 14px; font-size:13px; margin-top:10px; }
.elct-alert--warning { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }

/* ══ STEP NAV BUTTONS ═══════════════════════════════════════════════════════ */
.elct-step-nav { display:flex; align-items:center; justify-content:space-between; margin-top:22px; gap:10px; }
.elct-step-nav--submit { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; }
.elct-step-nav--submit .e-leads-submit { justify-self:stretch; }
@media(max-width:640px){ .elct-step-nav--submit { grid-template-columns:1fr; } }
.elct-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:46px; height:46px; box-sizing:border-box;
    padding:0 20px; font-size:14px; font-weight:600; font-family:inherit;
    border-radius:var(--ef-radius); border:1.5px solid transparent;
    cursor:pointer; transition:all var(--ef-t); line-height:1; white-space:nowrap;
    text-decoration:none;
}
.elct-btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.elct-btn--primary {
    background:var(--ef-primary); color:#fff; border-color:var(--ef-primary);
    box-shadow:0 1px 3px rgba(var(--ef-primary-rgb),.3);
}
.elct-btn--primary:hover { background:var(--ef-primary-dark); border-color:var(--ef-primary-dark); box-shadow:0 3px 8px rgba(var(--ef-primary-rgb),.35); transform:translateY(-1px); }
.elct-btn--primary:active { transform:none; box-shadow:none; }
.elct-btn--ghost {
    background:var(--ef-surface);
    color:var(--ef-text);
    border-color:var(--ef-border);
    box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.elct-btn--ghost:hover {
    color:var(--ef-text);
    background:#e9e9ec;
    border-color:#d4d4d8;
    box-shadow:0 3px 8px rgba(15,23,42,.08);
    transform:translateY(-1px);
}
.elct-btn--ghost:active { transform:none; box-shadow:none; }

/* Submit button (e-leads class) */
.e-leads-submit {
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; max-width:100%; min-height:46px; height:46px; box-sizing:border-box;
    padding:0 28px; font-size:15px; font-weight:700; font-family:inherit;
    background:var(--ef-primary); color:#fff; border:none;
    border-radius:var(--ef-radius); cursor:pointer;
    box-shadow:0 2px 8px rgba(var(--ef-primary-rgb),.35);
    transition:all var(--ef-t);
}
.e-leads-submit:hover { background:var(--ef-primary-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(var(--ef-primary-rgb),.4); }
.e-leads-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ══ BEHANDLINGSKORT — mere eksklusivt 1-kolonne layout ═══════════════════ */
.elct-treatment-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }

.elct-treatment-card {
    position:relative;
    border:1px solid var(--ef-border);
    border-radius:14px;
    padding:13px 16px;
    background:var(--ef-bg);
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
    user-select:none;
    overflow:hidden;
}
.elct-treatment-card:hover {
    transform:translateY(-1px);
    border-color:rgba(var(--ef-primary-rgb),.35);
    box-shadow:0 8px 18px rgba(15,23,42,.07);
}
.elct-treatment-card.is-selected {
    border-color:var(--ef-primary);
    background:linear-gradient(180deg, rgba(var(--ef-primary-rgb),.06), rgba(var(--ef-primary-rgb),.02));
    box-shadow:0 0 0 2px rgba(var(--ef-primary-rgb),.10), 0 8px 18px rgba(15,23,42,.07);
}
.elct-treatment-card.is-selected::before {
    content:'';
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:var(--ef-primary);
}
.elct-treatment-card.is-selected::after {
    content:'✓';
    position:absolute;
    top:12px;
    right:12px;
    width:20px;
    height:20px;
    border-radius:999px;
    background:var(--ef-primary);
    color:#fff;
    font-size:12px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

.elct-treatment-card-body {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:16px;
    align-items:center;
    padding-right:28px;
}
.elct-treatment-card-main {
    min-width:0;
    display:grid;
    gap:4px;
}
.elct-treatment-card-name {
    font-size:17px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.025em;
    color:var(--ef-text);
}
.elct-treatment-card-desc {
    font-size:13px;
    line-height:1.4;
    color:var(--ef-text-2);
    max-width:62ch;
}
.elct-treatment-card-meta {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 10px;
    min-height:20px;
}
.elct-orig-price {
    font-size:13px;
    color:var(--ef-text-3);
    text-decoration:line-through;
}
.elct-treatment-card-env {
    font-size:11px;
    font-weight:600;
    color:var(--ef-text-3);
    white-space:nowrap;
}
.elct-treatment-card-side {
    min-width:132px;
    padding-left:14px;
    border-left:1px solid rgba(148,163,184,.22);
    display:grid;
    justify-items:end;
    align-content:center;
    gap:2px;
}
.elct-treatment-card-price-label {
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ef-text-3);
}
.elct-treatment-card-price {
    font-size:22px;
    line-height:1;
    font-weight:900;
    color:var(--ef-primary-dark);
    white-space:nowrap;
}
.elct-treatment-card-price-meta {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px 10px;
    min-height:20px;
    margin-top:2px;
}

/* Rabat-badge — renere pill */
.elct-discount-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fff5cf;
    color:#9a5a00;
    border:1px solid #f3d36b;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    padding:6px 10px;
    margin-left:0;
}

@media(max-width:820px){
    .elct-treatment-card {
        padding:13px 14px;
    }
    .elct-treatment-card-body {
        grid-template-columns:minmax(0,1fr);
        gap:8px;
        padding-right:24px;
    }
    .elct-treatment-card-side {
        min-width:0;
        padding-left:0;
        padding-top:8px;
        border-left:none;
        border-top:1px solid rgba(148,163,184,.18);
        justify-items:start;
        gap:6px;
    }
    .elct-treatment-card-price-meta {
        justify-content:flex-start;
    }
    .elct-treatment-card-price {
        font-size:20px;
    }
}

@media(max-width:520px){
    .elct-treatment-card-name {
        font-size:17px;
    }
    .elct-treatment-card-desc {
        font-size:13px;
    }
    .elct-discount-badge {
        font-size:11px;
        padding:5px 8px;
    }
    .elct-treatment-card-price {
        font-size:20px;
    }
}

/* ══ TILKØB ═════════════════════════════════════════════════════════════════ */
.elct-addons-list { display:flex; flex-direction:column; gap:8px; }
.e-leads-choice.elct-addon-row,
label.elct-addon-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1.5px solid var(--ef-border);
    border-radius:var(--ef-radius);
    background:var(--ef-bg);
    cursor:pointer;
    transition:all var(--ef-t);
    user-select:none;
    margin:0;
}
.elct-addon-row:hover { border-color:rgba(var(--ef-primary-rgb),.4); background:#fafafe; }
.elct-addon-row:has(.elct-addon-chk:checked),
.elct-addon-row.is-checked { border-color:var(--ef-primary); background:var(--ef-primary-light); }
.elct-addon-chk { width:17px; height:17px; accent-color:var(--ef-primary); cursor:pointer; flex-shrink:0; }
.elct-addon-info { flex:1; min-width:0; }
.elct-addon-name { font-size:14px; font-weight:600; display:block; }
.elct-addon-desc { font-size:12px; color:var(--ef-text-2); display:block; margin-top:2px; }
.elct-addon-price { font-size:14px; font-weight:700; flex-shrink:0; white-space:nowrap; }

/* ══ PRISSUMMARY ════════════════════════════════════════════════════════════ */
.elct-price-summary {
    background:var(--ef-surface);
    border:1px solid var(--ef-border);
    border-radius:var(--ef-radius);
    padding:14px 16px;
    margin-top:16px;
}
.elct-price-summary-row { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:var(--ef-text-2); }
.elct-price-summary-row span:last-child { font-weight:600; color:var(--ef-text); }
.elct-price-summary-row--total { font-size:15px; font-weight:700; color:var(--ef-text); border-top:1px solid var(--ef-border); margin-top:8px; padding-top:10px; }
.elct-price-summary-row--total span:last-child { color:var(--ef-primary-dark); font-size:16px; }

.elct-empty-hint,
.elct-summary-placeholder {
    margin:0;
    font-size:13px;
    color:var(--ef-text-2);
}

/* ══ DATEPICKER ══════════════════════════════════════════════════════════ */
/* PAVA bruger nu samme jQuery UI datepicker som DriveHub public forms.
   Kalenderens visuelle stil kommer fra DriveHubs public-forms.css. */

/* ══ GDPR ═══════════════════════════════════════════════════════════════════ */
.e-leads-gdpr { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:14px; }
.e-leads-gdpr input[type="checkbox"] { width:17px; height:17px; accent-color:var(--ef-primary); margin-top:2px; flex-shrink:0; cursor:pointer; }
.e-leads-gdpr-text { font-size:13px; color:var(--ef-text-2); line-height:1.5; }
.e-leads-gdpr-text a { color:var(--ef-primary); }

/* ══ OPSUMMERING / SUMMARY ══════════════════════════════════════════════════ */
.elct-booking-summary {
    background:var(--ef-surface);
    border:1px solid var(--ef-border);
    border-radius:var(--ef-radius);
    padding:14px 16px;
    margin:16px 0;
}
.elct-booking-summary h3 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ef-text-3); margin:0 0 10px; }
.elct-summary-table { width:100%; border-collapse:collapse; font-size:13px; }
.elct-summary-table th { text-align:left; color:var(--ef-text-2); font-weight:500; padding:3px 12px 3px 0; width:40%; }
.elct-summary-table td { color:var(--ef-text); font-weight:600; padding:3px 0; }

/* ══ SUCCESS MODAL ══════════════════════════════════════════════════════════ */
.e-leads-modal { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; }
.e-leads-modal.is-open { display:flex; }
.e-leads-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.e-leads-modal-card { position:relative; background:var(--ef-bg); border-radius:var(--ef-radius-lg); padding:32px 28px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.2); text-align:center; z-index:1; }
.e-leads-modal-close { position:absolute; top:12px; right:12px; width:28px; height:28px; background:#f1f5f9; border:none; border-radius:50%; cursor:pointer; font-size:18px; color:var(--ef-text-2); display:flex; align-items:center; justify-content:center; line-height:1; }
.e-leads-modal-close:hover { background:#e2e8f0; }
.e-leads-modal-title { font-size:20px; font-weight:700; margin:0 0 8px; }
.e-leads-modal-msg { font-size:14px; color:var(--ef-text-2); }


/* Obligatoriske profiltillæg */
.elct-addon-row.is-required {
    border-style: dashed;
    border-color: rgba(var(--ef-primary-rgb), .45);
    background: var(--ef-primary-light);
    cursor: default;
}
.elct-addon-row.is-required:hover { border-color: rgba(var(--ef-primary-rgb), .45); background: var(--ef-primary-light); }
.elct-addon-row.is-required input[disabled] { opacity: 1; }
.elct-addon-row.is-required small { font-weight: 700; color: var(--ef-primary); }


/* ══ PRISFORESPØRGSEL / MANUEL BIL ═════════════════════════════════════════ */
.elct-manual-car {
    margin:16px 0;
    padding:18px;
    border:1px solid var(--ef-border);
    border-radius:var(--ef-radius-lg);
    background:var(--ef-surface);
}
.elct-manual-car .elct-alert { margin:0 0 16px; display:flex; flex-direction:column; gap:2px; }
.elct-alert--info { background:var(--ef-primary-light); border:1px solid rgba(var(--ef-primary-rgb),.22); color:var(--ef-primary-dark); }
.elct-optional { font-weight:400; color:var(--ef-text-2); font-size:12px; }
.elct-manual-note { margin:-2px 0 14px; color:var(--ef-text-2); font-size:12px; }
.elct-treatment-card-request-label { display:block; max-width:125px; color:var(--ef-primary-dark); font-size:13px; font-weight:750; line-height:1.25; text-align:right; }
.elct-price-request-mode [data-step-dot="4"],
.elct-price-request-mode [data-step="4"] { display:none !important; }
.elct-price-request-mode #elct-price-summary { display:none !important; }
.elct-price-request-mode .elct-booking-summary h3::after {
    content:' · pris beregnes manuelt';
    color:var(--ef-text-2);
    font-size:12px;
    font-weight:500;
}
@media(max-width:520px) {
    .elct-manual-car { padding:14px; }
    .elct-treatment-card-request-label { max-width:none; text-align:left; margin-top:4px; }
}


/* ══ FULLSCREEN FLOW (valgfrit design) ═════════════════════════════════════ */
.elct-flow-header { display:none; }

.elct-booking-form.elct-design-fullscreen {
    position:relative;
    left:50%;
    width:100vw;
    max-width:100vw;
    min-height:100vh;
    min-height:100svh;
    margin-left:-50vw;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 12% 12%, rgba(var(--ef-primary-rgb),.13), transparent 34%),
        radial-gradient(circle at 88% 86%, rgba(73,190,255,.12), transparent 31%),
        linear-gradient(145deg,#f8f9ff 0%,#f4f6fb 48%,#f7fbff 100%);
}
.elct-booking-form.elct-design-fullscreen::before,
.elct-booking-form.elct-design-fullscreen::after {
    content:'';
    position:absolute;
    z-index:-1;
    border-radius:999px;
    filter:blur(1px);
    pointer-events:none;
}
.elct-booking-form.elct-design-fullscreen::before {
    width:380px;
    height:380px;
    top:-230px;
    right:-110px;
    border:1px solid rgba(var(--ef-primary-rgb),.12);
    box-shadow:0 0 0 70px rgba(var(--ef-primary-rgb),.025),0 0 0 140px rgba(var(--ef-primary-rgb),.018);
}
.elct-booking-form.elct-design-fullscreen::after {
    width:270px;
    height:270px;
    bottom:-190px;
    left:-90px;
    border:1px solid rgba(29,78,216,.10);
    box-shadow:0 0 0 55px rgba(29,78,216,.022),0 0 0 110px rgba(29,78,216,.015);
}
.elct-design-fullscreen .elct-wrap {
    width:min(1180px,calc(100% - 48px));
    min-height:100vh;
    min-height:100svh;
    margin:0 auto;
    padding:clamp(24px,3.5vw,52px) 0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
}
.elct-design-fullscreen .elct-flow-header {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
    margin:0 auto 22px;
    width:min(940px,100%);
    color:var(--ef-text);
}
.elct-flow-header__eyebrow {
    color:var(--ef-primary);
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.elct-flow-header__title {
    color:var(--ef-text-2);
    font-size:13px;
    font-weight:650;
    text-align:right;
}
.elct-design-fullscreen .elct-progress {
    width:min(760px,100%);
    margin:0 auto clamp(22px,3vw,38px);
    padding:0 4px;
}
.elct-design-fullscreen .elct-progress-item::after {
    top:5px;
    left:calc(50% + 10px);
    right:calc(-50% + 10px);
    height:3px;
    border-radius:999px;
    background:rgba(100,116,139,.15);
}
.elct-design-fullscreen .elct-progress-dot {
    width:12px;
    height:12px;
    border:0;
    background:#d8dce8;
    box-shadow:none;
    color:transparent;
}
.elct-design-fullscreen .elct-progress-num,
.elct-design-fullscreen .elct-progress-check { display:none !important; }
.elct-design-fullscreen .elct-progress-item.is-active .elct-progress-dot {
    background:var(--ef-primary);
    box-shadow:0 0 0 6px rgba(var(--ef-primary-rgb),.12);
}
.elct-design-fullscreen .elct-progress-item.is-done .elct-progress-dot,
.elct-design-fullscreen .elct-progress-item.is-done::after { background:var(--ef-primary); }
.elct-design-fullscreen .elct-progress-label {
    max-width:none;
    margin-top:7px;
    font-size:11px;
    font-weight:650;
    color:#8991a3;
}
.elct-design-fullscreen .elct-progress-item.is-active .elct-progress-label { color:var(--ef-text); }
.elct-design-fullscreen .elct-step-card {
    width:min(940px,100%);
    margin:auto;
    padding:clamp(28px,5vw,64px);
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.92);
    border-radius:clamp(22px,3vw,32px);
    background:rgba(255,255,255,.88);
    box-shadow:0 28px 80px rgba(38,51,93,.12),0 4px 18px rgba(38,51,93,.05);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.elct-design-fullscreen .elct-step-card.is-active {
    animation:elctFullscreenIn .38s cubic-bezier(.22,.82,.35,1) both;
}
@keyframes elctFullscreenIn {
    from { opacity:0; transform:translateY(18px) scale(.992); }
    to { opacity:1; transform:none; }
}
.elct-design-fullscreen .elct-step-title {
    max-width:820px;
    margin:0 0 clamp(24px,3.5vw,38px);
    font-size:clamp(31px,4.2vw,52px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.045em;
    outline:none;
}
.elct-design-fullscreen .elct-disclaimer {
    margin:-14px 0 28px;
    padding:12px 15px;
    border:1px solid rgba(var(--ef-primary-rgb),.13);
    border-left:3px solid var(--ef-primary);
    background:rgba(var(--ef-primary-rgb),.055);
}
.elct-design-fullscreen .elct-field { margin-bottom:18px; }
.elct-design-fullscreen .elct-field-row { gap:18px; }
.elct-design-fullscreen .e-leads-label {
    margin-bottom:8px;
    font-size:13px;
    font-weight:750;
    letter-spacing:.005em;
}
.elct-design-fullscreen .e-leads-input,
.elct-design-fullscreen input.e-leads-input,
.elct-design-fullscreen select.e-leads-input,
.elct-design-fullscreen textarea.e-leads-input {
    padding:13px 16px;
    border:1px solid #dfe3ec;
    border-radius:14px;
    background:rgba(248,249,252,.92);
    font-size:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.elct-design-fullscreen input.e-leads-input,
.elct-design-fullscreen select.e-leads-input { min-height:54px; height:54px; }
.elct-design-fullscreen textarea.e-leads-input { min-height:112px; }
.elct-design-fullscreen .elct-plate-row { gap:12px; }
.elct-design-fullscreen .elct-plate-input-wrap {
    min-height:58px;
    border:1px solid #dfe3ec;
    border-radius:15px;
    background:rgba(248,249,252,.92);
}
.elct-design-fullscreen .elct-plate-dk { width:64px; min-height:60px; font-size:13px; }
.elct-design-fullscreen .elct-plate-input {
    min-height:56px !important;
    height:56px !important;
    padding:12px 16px !important;
    font-size:20px !important;
    letter-spacing:.11em;
}
.elct-design-fullscreen .elct-btn,
.elct-design-fullscreen .e-leads-submit {
    min-height:54px;
    height:54px;
    padding:0 25px;
    border-radius:14px;
    font-size:15px;
    font-weight:750;
}
.elct-design-fullscreen .elct-btn--primary,
.elct-design-fullscreen .e-leads-submit {
    box-shadow:0 10px 24px rgba(var(--ef-primary-rgb),.24);
}
.elct-design-fullscreen .elct-btn--ghost {
    border-color:#e1e4eb;
    background:rgba(246,247,250,.9);
}
.elct-design-fullscreen .elct-step-nav {
    margin-top:clamp(26px,4vw,44px);
    padding-top:22px;
    border-top:1px solid rgba(148,163,184,.15);
}
.elct-design-fullscreen [data-step="1"] .elct-step-nav { justify-content:flex-end; }
.elct-design-fullscreen .elct-car-info,
.elct-design-fullscreen .elct-alert,
.elct-design-fullscreen .elct-manual-car,
.elct-design-fullscreen .elct-price-summary,
.elct-design-fullscreen .elct-booking-summary {
    border-radius:16px;
}
.elct-design-fullscreen .elct-car-info {
    padding:15px 18px;
    margin-top:18px;
    background:#f0fbf5;
    border-color:#c8eed8;
}
.elct-design-fullscreen .elct-car-info-row { padding:4px 0; font-size:14px; }
.elct-design-fullscreen .elct-alert { display:flex; flex-direction:column; gap:3px; padding:14px 16px; }
.elct-design-fullscreen .elct-manual-car {
    margin:20px 0 4px;
    padding:clamp(18px,3vw,28px);
    border-color:#e1e5ed;
    background:rgba(247,248,251,.88);
}
.elct-design-fullscreen .elct-treatment-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.elct-design-fullscreen .elct-treatment-card {
    min-height:150px;
    padding:18px;
    border:1px solid #e0e4ec;
    border-radius:17px;
    background:rgba(250,251,253,.86);
    box-shadow:none;
}
.elct-design-fullscreen .elct-treatment-card:hover {
    border-color:rgba(var(--ef-primary-rgb),.42);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(25,37,78,.08);
}
.elct-design-fullscreen .elct-treatment-card.is-selected {
    border-color:var(--ef-primary);
    background:rgba(var(--ef-primary-rgb),.045);
    box-shadow:0 0 0 3px rgba(var(--ef-primary-rgb),.09),0 14px 34px rgba(25,37,78,.08);
}
.elct-design-fullscreen .elct-treatment-card-body { height:100%; grid-template-columns:1fr; align-content:space-between; }
.elct-design-fullscreen .elct-treatment-card-side {
    min-width:0;
    padding:12px 0 0;
    border:0;
    border-top:1px solid rgba(148,163,184,.18);
    justify-items:start;
}
.elct-design-fullscreen .elct-treatment-card-price-meta { justify-content:flex-start; }
.elct-design-fullscreen .elct-treatment-card-request-label { max-width:none; text-align:left; }
.elct-design-fullscreen .elct-addons-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.elct-design-fullscreen .elct-addon-row { min-height:70px; box-sizing:border-box; }
.elct-design-fullscreen .elct-price-summary,
.elct-design-fullscreen .elct-booking-summary {
    padding:20px 22px;
    background:rgba(247,248,251,.9);
    border-color:#e2e5ec;
}
.elct-design-fullscreen .elct-summary-table th,
.elct-design-fullscreen .elct-summary-table td { padding-top:6px; padding-bottom:6px; }
.elct-design-fullscreen .e-leads-gdpr { margin:20px 0; }

@media(max-width:820px) {
    .elct-design-fullscreen .elct-wrap { width:min(100% - 28px,760px); padding:18px 0 24px; }
    .elct-design-fullscreen .elct-flow-header { margin-bottom:18px; }
    .elct-design-fullscreen .elct-step-card { padding:28px 22px; border-radius:22px; }
    .elct-design-fullscreen .elct-step-title { font-size:clamp(29px,8vw,42px); }
    .elct-design-fullscreen .elct-treatment-list,
    .elct-design-fullscreen .elct-addons-list { grid-template-columns:1fr; }
    .elct-design-fullscreen .elct-treatment-card { min-height:0; }
}
@media(max-width:520px) {
    .elct-booking-form.elct-design-fullscreen { min-height:100svh; }
    .elct-design-fullscreen .elct-wrap { width:calc(100% - 20px); padding:14px 0 18px; }
    .elct-design-fullscreen .elct-flow-header { align-items:flex-start; margin-bottom:15px; }
    .elct-flow-header__title { max-width:55%; font-size:11px; }
    .elct-design-fullscreen .elct-progress { margin-bottom:18px; }
    .elct-design-fullscreen .elct-progress-label { display:none; }
    .elct-design-fullscreen .elct-step-card { margin:28px auto 0; padding:24px 18px 20px; border-radius:20px; }
    .elct-design-fullscreen .elct-step-title { margin-bottom:24px; font-size:31px; }
    .elct-design-fullscreen .elct-plate-row { flex-direction:column; }
    .elct-design-fullscreen .elct-step-nav { display:grid; grid-template-columns:1fr; }
    .elct-design-fullscreen .elct-step-nav .elct-btn,
    .elct-design-fullscreen .elct-step-nav .e-leads-submit { width:100%; }
    .elct-design-fullscreen .elct-step-nav .elct-btn--ghost { order:2; }
    .elct-design-fullscreen .elct-step-nav--submit { display:grid; }
}
@media(prefers-reduced-motion:reduce) {
    .elct-design-fullscreen .elct-step-card.is-active { animation:none; }
    .elct-design-fullscreen *,
    .elct-design-fullscreen *::before,
    .elct-design-fullscreen *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* ══ SALIENT / WPBAKERY MOBILE VIEWPORT FIX ════════════════════════════════
 * Classic PAVA forms may be placed inside Salient/WPBakery columns with their
 * own mobile gutters. Break the booking shell out to the viewport on phones,
 * while keeping a deliberate 14px content inset for touch targets/readability.
 */
.elct-booking-form,
.elct-booking-form > .elct-wrap,
.elct-booking-form .elct-step-card {
    box-sizing:border-box;
}
.elct-booking-form {
    width:100%;
    max-width:none;
}
.elct-booking-form > .elct-wrap {
    width:100%;
    max-width:none;
}

/* Ensure the shared DriveHub datepicker skin is also robust on very narrow
 * viewports. The visual rules themselves still come from public-forms.css. */
body.e-leads-has-public-form.elct-has-booking-form #ui-datepicker-div {
    z-index:2147483647 !important;
}

@media(max-width:680px) {
    .elct-booking-form.elct-design-classic {
        position:relative;
        left:50%;
        width:100vw !important;
        max-width:100vw !important;
        margin-left:-50vw !important;
        margin-right:-50vw !important;
        padding-left:env(safe-area-inset-left);
        padding-right:env(safe-area-inset-right);
    }
    .elct-booking-form.elct-design-classic > .elct-wrap {
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0;
        padding-right:0;
    }
    .elct-booking-form.elct-design-classic .elct-step-card,
    .elct-booking-form.elct-design-classic.elct-no-steps .elct-step-card {
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
        padding-left:14px;
        padding-right:14px;
    }
    .elct-booking-form.elct-design-classic .elct-progress {
        width:100%;
        padding-left:10px;
        padding-right:10px;
        box-sizing:border-box;
    }
}

@media(max-width:480px) {
    body.e-leads-has-public-form.elct-has-booking-form #ui-datepicker-div {
        width:calc(100vw - 20px) !important;
        min-width:0 !important;
        max-width:calc(100vw - 20px) !important;
        box-sizing:border-box;
    }
}