/* ============================================================
   iDoctors Express — Frontend Enhancements v2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --brand:    #f39c12;
    --brand-d:  #e07b00;
    --navy:     #0f172a;
    --surface:  #ffffff;
    --bg:       #f8faff;
    --border:   #e8edf5;
    --text:     #1a2540;
    --muted:    #64748b;
    --r:        14px;
    --tr:       all .25s cubic-bezier(.4,0,.2,1);
    --sh:       0 4px 20px rgba(15,23,42,.08);
    --sh-lg:    0 12px 40px rgba(15,23,42,.13);
    --font:     'Plus Jakarta Sans', sans-serif;
}
body { font-family: var(--font); }

/* ── Step animations ─────────────────────────────────────── */
@keyframes stepIn     { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
@keyframes stepInBack { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.idoc-hero {
    background: linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0f172a 100%);
    padding: 52px 20px 68px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.idoc-hero::before {
    content:'';
    position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(ellipse 700px 360px at 50% -80px,rgba(243,156,18,.2) 0%,transparent 70%),
        radial-gradient(ellipse 280px 280px at 88% 85%,rgba(243,156,18,.07) 0%,transparent 60%);
}
.idoc-hero::after {
    content:'';
    position:absolute;bottom:-1px;left:0;right:0;height:52px;
    background:var(--bg);
    clip-path:ellipse(56% 100% at 50% 100%);
}
.hero-inner { max-width:660px;margin:0 auto;position:relative;z-index:1; }

.hero-eyebrow {
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(243,156,18,.14);border:1px solid rgba(243,156,18,.28);
    border-radius:24px;padding:5px 16px;
    font-size:12px;font-weight:700;color:#fbbf24;
    letter-spacing:.6px;text-transform:uppercase;margin-bottom:18px;
}
.hero-title {
    font-size:clamp(26px,5vw,42px);font-weight:800;color:#fff;
    line-height:1.15;letter-spacing:-.7px;margin-bottom:12px;
}
.hero-title span {
    background:linear-gradient(90deg,#f39c12,#fbbf24);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-subtitle {
    font-size:15px;color:rgba(255,255,255,.55);
    margin-bottom:28px;line-height:1.65;
}
.hero-pills {
    display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-bottom:28px;
}
.hero-pill {
    display:inline-flex;align-items:center;gap:7px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
    border-radius:20px;padding:7px 15px;
    font-size:13px;font-weight:600;color:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);
}
.hero-pill i { color:#fbbf24;font-size:12px; }
.hero-cta {
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,#f39c12,#e07b00);
    color:white;font-family:var(--font);font-size:15px;font-weight:700;
    padding:13px 30px;border-radius:50px;border:none;cursor:pointer;
    box-shadow:0 4px 18px rgba(243,156,18,.42);transition:var(--tr);
    text-decoration:none;
}
.hero-cta:hover { transform:translateY(-2px);box-shadow:0 7px 28px rgba(243,156,18,.52); }
.hero-trust {
    display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:26px;
}
.trust-item { text-align:center; }
.trust-val  { font-size:21px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums; }
.trust-lbl  { font-size:11px;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px; }

@media(max-width:600px) {
    .idoc-hero { padding:38px 16px 56px; }
    .hero-trust { gap:18px; }
    .trust-val  { font-size:18px; }
}

/* ══════════════════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
#idoc-progress-wrap {
    position:sticky;top:0;z-index:200;
    background:var(--surface);border-bottom:1px solid var(--border);
    padding:9px 20px;box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.idoc-progress-inner {
    max-width:580px;margin:0 auto;
    display:flex;align-items:center;gap:11px;
}
.idoc-progress-label { font-size:12px;color:var(--muted);white-space:nowrap;min-width:0;flex:0 1 auto; }
.idoc-progress-bar-wrap { flex:1;height:5px;background:#e8edf5;border-radius:3px;overflow:hidden; }
.idoc-progress-bar {
    height:100%;background:linear-gradient(90deg,#f39c12,#fbbf24);
    border-radius:3px;transition:width .45s cubic-bezier(.4,0,.2,1);width:0%;
}
.idoc-progress-pct { font-size:12px;font-weight:700;color:var(--brand);white-space:nowrap; }

/* ══════════════════════════════════════════════════════════
   STEP INDICATOR — completed
   ══════════════════════════════════════════════════════════ */
.step.completed .step-number {
    background:#22c55e !important;
    box-shadow:0 0 0 3px rgba(34,197,94,.18) !important;
    transition:var(--tr);
}
.step.active .step-number {
    box-shadow:0 0 0 4px rgba(243,156,18,.2) !important;
}

/* ══════════════════════════════════════════════════════════
   PREZZO REAL-TIME
   ══════════════════════════════════════════════════════════ */
.repair-price-badge {
    display:inline-block;
    background:linear-gradient(135deg,#f39c12,#e07b00);
    color:white;font-size:12.5px;font-weight:700;
    padding:2px 9px;border-radius:20px;margin-top:5px;
    box-shadow:0 2px 7px rgba(243,156,18,.28);
}
#repair-price-banner {
    display:none;align-items:center;gap:9px;
    background:#f0fdf4;border:1.5px solid #86efac;
    border-radius:var(--r);padding:11px 15px;
    margin:10px 0;font-size:13.5px;font-weight:600;color:#166534;
}
#repair-price-banner.visible { display:flex;animation:bannerIn .22s ease both; }
@keyframes bannerIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
#repair-price-banner i { color:#22c55e;font-size:15px; }
#repair-price-banner strong { font-size:17px;color:#15803d; }

/* ══════════════════════════════════════════════════════════
   LOCATION SLOTS
   ══════════════════════════════════════════════════════════ */
.location-slots-badge {
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;font-weight:700;padding:4px 10px;
    border-radius:20px;margin-top:8px;
}
.location-slots-badge.available { background:#dcfce7;color:#166534; }
.location-slots-badge.limited   { background:#fff7ed;color:#c2410c; }
.location-slots-badge.full      { background:#fee2e2;color:#991b1b; }
.slot-dot {
    width:6px;height:6px;border-radius:50%;background:currentColor;
    animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

/* ══════════════════════════════════════════════════════════
   TIME SLOT HINTS
   ══════════════════════════════════════════════════════════ */
.slot-hint {
    display:block;font-size:10.5px;font-weight:600;
    color:var(--muted);margin-top:3px;opacity:.75;
}
.time-slot-item:hover .slot-hint { color:var(--brand);opacity:1; }

/* ══════════════════════════════════════════════════════════
   VALIDAZIONE FORM
   ══════════════════════════════════════════════════════════ */
.form-group input.valid {
    border-color:#22c55e !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;
}
.form-group input.invalid {
    border-color:#ef4444 !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.09) !important;
}

/* ══════════════════════════════════════════════════════════
   EXIT INTENT
   ══════════════════════════════════════════════════════════ */
#exit-overlay {
    display:none;position:fixed;inset:0;
    background:rgba(15,23,42,.6);backdrop-filter:blur(6px);
    z-index:9998;align-items:center;justify-content:center;padding:20px;
}
#exit-overlay.show { display:flex;animation:fadeIn .22s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.exit-box {
    background:white;border-radius:22px;padding:34px 28px;
    max-width:400px;width:100%;text-align:center;
    box-shadow:0 20px 72px rgba(0,0,0,.18);
    animation:slideUp .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.exit-emoji { font-size:44px;display:block;margin-bottom:14px; }
.exit-title { font-size:19px;font-weight:800;color:var(--text);margin-bottom:7px; }
.exit-sub   { font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:22px; }
.exit-btns  { display:flex;gap:9px;justify-content:center;flex-wrap:wrap; }
.exit-btn-chat {
    display:inline-flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,#f39c12,#e07b00);color:white;
    border:none;border-radius:50px;padding:11px 22px;
    font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;
    box-shadow:0 3px 14px rgba(243,156,18,.38);transition:var(--tr);
}
.exit-btn-chat:hover { transform:translateY(-1px); }
.exit-btn-stay {
    display:inline-flex;align-items:center;gap:6px;
    background:transparent;color:var(--muted);
    border:1.5px solid var(--border);border-radius:50px;
    padding:11px 18px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;
    transition:var(--tr);
}
.exit-btn-stay:hover { border-color:var(--brand);color:var(--brand); }

/* ══════════════════════════════════════════════════════════
   AI REPAIR ADVISOR
   ══════════════════════════════════════════════════════════ */
#ai-advisor-box {
    background:linear-gradient(135deg,#fafbff,#f0f4ff);
    border:1.5px solid #c7d7ff;border-radius:var(--r);
    padding:16px 18px;margin-bottom:18px;
    position:relative;overflow:hidden;
}
#ai-advisor-box::before {
    content:'';position:absolute;top:-24px;right:-24px;
    width:100px;height:100px;border-radius:50%;
    background:radial-gradient(circle,rgba(102,126,234,.1),transparent 70%);
    pointer-events:none;
}
.ai-adv-header { display:flex;align-items:center;gap:11px;margin-bottom:12px; }
.ai-adv-icon {
    width:36px;height:36px;flex-shrink:0;
    background:linear-gradient(135deg,#667eea,#764ba2);
    border-radius:9px;display:flex;align-items:center;justify-content:center;
    color:white;font-size:15px;box-shadow:0 3px 10px rgba(102,126,234,.3);
}
.ai-adv-title { font-size:13.5px;font-weight:800;color:var(--text); }
.ai-adv-sub   { font-size:11.5px;color:var(--muted);margin-top:1px; }
.ai-adv-row   { display:flex;gap:8px; }
.ai-adv-input {
    flex:1;padding:9px 13px;border:1.5px solid #c7d7ff;border-radius:9px;
    font-family:var(--font);font-size:13px;background:white;color:var(--text);
    outline:none;transition:var(--tr);
}
.ai-adv-input:focus { border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.11); }
.ai-adv-btn {
    display:inline-flex;align-items:center;gap:6px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:white;border:none;border-radius:9px;
    padding:9px 15px;font-family:var(--font);font-size:13px;font-weight:700;
    cursor:pointer;white-space:nowrap;
    box-shadow:0 3px 10px rgba(102,126,234,.28);transition:var(--tr);
}
.ai-adv-btn:hover:not(:disabled) { transform:translateY(-1px);box-shadow:0 5px 14px rgba(102,126,234,.38); }
.ai-adv-btn:disabled { opacity:.55;cursor:not-allowed;transform:none; }
.ai-adv-result {
    display:flex;align-items:flex-start;gap:9px;
    margin-top:11px;padding:11px 13px;border-radius:9px;font-size:13px;line-height:1.6;
}
.ai-adv-result.loading { background:#f0f4ff;color:#667eea; }
.ai-adv-result.done    { background:#f0fdf4;border:1px solid #86efac;color:#166534; }
.ai-adv-result.done i  { color:#22c55e;font-size:15px;flex-shrink:0;margin-top:1px; }
.ai-adv-result.error   { background:#fef2f2;color:#dc2626; }

/* ══════════════════════════════════════════════════════════
   AI SUMMARY (step-6)
   ══════════════════════════════════════════════════════════ */
.ai-summary-msg {
    display:flex;align-items:center;gap:11px;
    background:linear-gradient(135deg,#fdf4ff,#f0f4ff);
    border:1.5px solid #d8b4fe;border-radius:var(--r);
    padding:13px 17px;margin-bottom:14px;
    font-size:14px;font-weight:600;color:#581c87;line-height:1.5;
    animation:summaryIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes summaryIn { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:none} }
.ai-summary-msg.loading { opacity:.65; }
.ai-summary-msg > i {
    color:#9333ea;font-size:18px;flex-shrink:0;
    animation:sparkle 2.2s ease infinite;
}
@keyframes sparkle {
    0%,100%{transform:scale(1) rotate(0deg)}
    30%    {transform:scale(1.18) rotate(-12deg)}
    70%    {transform:scale(1.1)  rotate(10deg)}
}

/* ══════════════════════════════════════════════════════════
   SUMMARY CONTAINER
   ══════════════════════════════════════════════════════════ */
.summary-container {
    background:linear-gradient(135deg,#fafbff,#fff);
    border:1.5px solid var(--border);border-radius:var(--r);
    overflow:hidden;box-shadow:var(--sh);
}
.summary-item {
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 18px;border-bottom:1px solid #f1f5f9;font-size:14px;
}
.summary-item:last-child { border-bottom:none; }
.summary-item > div:first-child { color:var(--muted);font-weight:500; }
.summary-item > div:last-child  { font-weight:700;color:var(--text);text-align:right;max-width:58%; }
.total-price {
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px !important;
    background:linear-gradient(135deg,#fff8ee,#fff3e0) !important;
    border-top:2px solid #fde68a !important;
    font-size:15px !important;font-weight:800 !important;
}
.total-price span:last-child {
    font-size:21px;
    background:linear-gradient(135deg,#f39c12,#e07b00);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════════════════════════
   DEVICE CARDS — badge iPhone + hover
   ══════════════════════════════════════════════════════════ */
/* Badge iPhone — piccolo tag discreto */
.device-select-card#choose-iphone {
    position: relative;
}
.device-select-card { transition:var(--tr) !important; }
.device-select-card:hover { transform:translateY(-5px) scale(1.015) !important;box-shadow:0 14px 40px rgba(243,156,18,.18) !important; }

/* ══════════════════════════════════════════════════════════
   RECENSIONI — visibili solo step-0
   ══════════════════════════════════════════════════════════ */
#rv2-section {
    transition: opacity .3s ease, max-height .4s ease;
}

/* ══════════════════════════════════════════════════════════
   STICKY RECAP BAR
   ══════════════════════════════════════════════════════════ */
#sticky-recap {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
    background: var(--navy);
    padding: 8px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    animation: slideDown .3s ease;
}
@keyframes slideDown { from{transform:translateY(-100%)} to{transform:translateY(0)} }
.sr-inner  { max-width: 700px; margin: 0 auto; }
.sr-items  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px; padding: 4px 12px;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.88);
}
.sr-chip i { color: #fbbf24; font-size: 11px; }

/* Aggiusta progress bar quando sticky recap è visibile */
body:has(#sticky-recap[style*="block"]) #idoc-progress-wrap { top: 37px; }

/* ══════════════════════════════════════════════════════════
   REPAIR SEARCH
   ══════════════════════════════════════════════════════════ */
#repair-search-box { margin-bottom: 16px; }
.rs-wrap {
    display: flex; align-items: center; gap: 10px;
    background: white; border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 10px 16px;
    box-shadow: var(--sh); transition: var(--tr);
}
.rs-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(243,156,18,.12); }
.rs-icon { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.rs-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: var(--font); font-size: 14px; color: var(--text);
}
.rs-input::placeholder { color: #b0bec5; }

/* ══════════════════════════════════════════════════════════
   SUCCESS BANNER
   ══════════════════════════════════════════════════════════ */
#success-banner {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.75); backdrop-filter: blur(8px);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .4s ease;
    pointer-events: none;
}
#success-banner.visible { opacity: 1; pointer-events: auto; }
.sb-inner {
    background: white; border-radius: 24px;
    padding: 48px 40px; text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,.2);
    animation: successPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successPop { from{transform:scale(.7)} to{transform:scale(1)} }
.sb-icon  { font-size: 56px; display: block; margin-bottom: 16px; }
.sb-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.sb-sub   { font-size: 14px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   FIX: Elimina striscia bianca tra hero e contenuto
   ══════════════════════════════════════════════════════════ */
.idoc-hero {
    margin-bottom: -2px !important;
}
.idoc-hero::after {
    display: none !important;
}
.idoc-hero + .repair-booking,
.idoc-hero + #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}



/* ══════════════════════════════════════════════════════════
   EXTRA OPTIONS (pellicola + cavetto)
   ══════════════════════════════════════════════════════════ */
#extra-options-wrap {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1.5px dashed #e8edf5;
}
.extra-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.extra-title i { color: var(--brand); }

.extra-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}
.extra-card:hover {
    border-color: var(--brand);
    box-shadow: 0 3px 12px rgba(243,156,18,.1);
}
.extra-card.extra-selected {
    border-color: var(--brand);
    background: #fff8ee;
    box-shadow: 0 3px 12px rgba(243,156,18,.15);
}
.extra-card.extra-consigliato {
    border-color: #a78bfa;
    background: linear-gradient(135deg, #fdfcff, #f5f3ff);
}
.extra-card.extra-consigliato:hover,
.extra-card.extra-consigliato.extra-selected {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

.extra-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f4f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--muted);
    flex-shrink: 0;
    transition: all .2s;
}
.extra-selected .extra-icon {
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: white;
}
.extra-consigliato .extra-icon { background: #ede9fe; color: #7c3aed; }
.extra-consigliato.extra-selected .extra-icon { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: white; }

.extra-info { flex: 1; min-width: 0; }
.extra-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.extra-desc {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.extra-badge-cons {
    display: inline-block;
    background: linear-gradient(135deg,#8b5cf6,#6d28d9);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.extra-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--brand);
    white-space: nowrap;
    flex-shrink: 0;
}
.extra-price.extra-free {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.extra-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    flex-shrink: 0;
    transition: all .2s;
}
.extra-selected .extra-check {
    background: var(--brand);
    border-color: var(--brand);
    color: white;
}
.extra-consigliato.extra-selected .extra-check {
    background: #7c3aed;
    border-color: #7c3aed;
}