/* SmartingLab — Stile pubblico principale */

:root {
    --sml-blue:   #0d6efd;
    --sml-yellow: #ffc107;
    --sml-dark:   #1a1a2e;
    --sml-light:  #f8f9ff;
    --radius:     .75rem;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #fff;
    color: #222;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #0d6efd 0%, #0a4dcb 100%);
    color: #fff;
    padding: 5rem 0 4rem;
}
.hero-section .lead { opacity: .9; }

/* ── Schede servizio ─────────────────────────────────────── */
.service-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    transition: transform .2s, box-shadow .2s;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(13,110,253,.15);
}
.service-card .icon-wrap {
    width: 56px; height: 56px;
    background: #e8f0fe;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--sml-blue);
}

/* ── Booking steps ───────────────────────────────────────── */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding: .25rem 0;
}
.step-indicator .step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.step-indicator .step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    background: #dee2e6; color: #6c757d;
    border: 2px solid #dee2e6;
}
.step-indicator .step.active .step-num {
    background: var(--sml-blue); color: #fff; border-color: var(--sml-blue);
}
.step-indicator .step.done .step-num {
    background: #198754; color: #fff; border-color: #198754;
}
.step-indicator .step-label {
    font-size: .8rem; color: #6c757d; display: none;
}
@media (min-width:576px) { .step-indicator .step-label { display: inline; } }
.step-indicator .step-sep {
    width: 32px; height: 2px;
    background: #dee2e6;
    flex-shrink: 0;
}
.step-indicator .step.done + .step-sep { background: #198754; }
.step-indicator .step.active + .step-sep { background: var(--sml-blue); }

/* ── Slot calendario ─────────────────────────────────────── */
.slot-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-btn {
    padding: .4rem .9rem;
    border: 1.5px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    font-size: .9rem;
    transition: all .15s;
    white-space: nowrap;
}
.slot-btn:hover   { border-color: var(--sml-blue); color: var(--sml-blue); background: #e8f0fe; }
.slot-btn.active  { border-color: var(--sml-blue); background: var(--sml-blue); color: #fff; }
.slot-btn.full    { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ── Riepilogo prezzo sticky ────────────────────────────── */
.price-summary-box {
    background: var(--sml-light);
    border: 1px solid #d0d7de;
    border-radius: var(--radius);
    padding: 1.25rem;
    position: sticky;
    top: 80px;
}
.price-summary-box .price-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sml-blue);
}

/* ── Zone badge ─────────────────────────────────────────── */
.zone-badge-A { background: #d1fae5; color: #065f46; }
.zone-badge-B { background: #fef9c3; color: #78350f; }
.zone-badge-C { background: #fee2e2; color: #7f1d1d; }
.zone-badge-excluded { background: #f3f4f6; color: #6b7280; }

/* ── FAQ accordion ──────────────────────────────────────── */
.faq-section .accordion-button:not(.collapsed) {
    background-color: #e8f0fe;
    color: var(--sml-blue);
}

/* ── Pricing table ──────────────────────────────────────── */
.pricing-card {
    border: 2px solid #e5e7eb;
    border-radius: var(--radius);
    transition: border-color .2s;
}
.pricing-card:hover { border-color: var(--sml-blue); }
.pricing-card .price-num {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--sml-blue);
}

/* ── Stato prenotazione ─────────────────────────────────── */
.status-timeline { list-style: none; padding: 0; margin: 0; }
.status-timeline li {
    padding: .6rem 0 .6rem 2rem;
    border-left: 2px solid #dee2e6;
    position: relative;
    font-size: .9rem;
}
.status-timeline li::before {
    content: '';
    position: absolute;
    left: -6px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #dee2e6;
    border: 2px solid #fff;
}
.status-timeline li.current { border-left-color: var(--sml-blue); font-weight: 600; }
.status-timeline li.current::before { background: var(--sml-blue); }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 575px) {
    .hero-section { padding: 3rem 0 2rem; }
    .price-summary-box { position: static; }
}