/* KS Home Manager — schermata immersiva (Step 2) — v0.3.2 */

/* ── Overlay full-screen ────────────────────────── */
.kshm-immersive {
    position: fixed;
    inset: 0;
    height: 100vh; /* esplicito: rende il height "definite" per la risoluzione % nei figli */
    z-index: 1000000;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background: #0d1a2e;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;
    isolation: isolate;
}

/* Quando l'overlay ha l'attributo [hidden] (= prima che l'utente cerchi l'indirizzo)
   impostiamo display:none con !important così il CSS display:flex non lo rende mai visibile.
   Il JS rimuove [hidden] PRIMA di aggiungere .kshm-visible, quindi l'animazione opacity funziona
   correttamente (display:flex → reflow → opacity 0→1). */
.kshm-immersive[hidden] {
    display: none !important;
}

.kshm-immersive.kshm-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Lock completo dello scroll di pagina mentre l'overlay è aperto.
   Va bloccato ANCHE l'elemento <html>: molti temi usano <html> (non <body>)
   come contenitore di scroll, quindi bloccare solo body lascia una scrollbar
   "a vuoto" del browser e fa sì che la rotella scrolli la pagina invece del
   pannello di destra. */
html.kshm-open-html,
body.kshm-open {
    overflow: hidden !important;
    height: 100%;
    overscroll-behavior: none;
}

/* ── Mappa (60%) ────────────────────────────────── */
.kshm-map-area {
    position: relative;
    flex: 0 0 60%;
    overflow: hidden;
    background: #0d1a2e;
}

.kshm-streetview-container,
.kshm-satellite-container {
    width: 100%;
    height: 100%;
}

/* ── Spinner Street View ────────────────────────── */
.kshm-sv-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d1a2e;
    z-index: 5;
}

@keyframes kshm-spin {
    to { transform: rotate(360deg); }
}

.kshm-sv-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.70);
    border-radius: 50%;
    animation: kshm-spin 0.8s linear infinite;
}

/* ── Fallback Street View ───────────────────────── */
.kshm-sv-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d1a2e;
    color: rgba(255,255,255,0.45);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.kshm-sv-fallback-inner { text-align: center; }

.kshm-sv-fallback-icon {
    font-size: 52px;
    display: block;
    margin-bottom: 14px;
    filter: grayscale(1) opacity(0.35);
}

/* ── Badge approssimativo ───────────────────────── */
.kshm-sv-badge {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.78);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}

/* ── Controlli mappa ────────────────────────────── */
.kshm-map-controls {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 10;
}

.kshm-map-btn {
    pointer-events: auto;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #1A2A4F;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease, transform 130ms ease;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.kshm-map-btn:hover { background: #fff; transform: translateY(-1px); }

/* ── Zoom ───────────────────────────────────────── */
.kshm-sv-zoom {
    position: absolute;
    bottom: 24px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}
/* 2026-07-30 — L'attributo [hidden] deve vincere sul display:flex sopra, altrimenti
   il controllo zoom (disattivato di default via SV_CONTROLS.zoom=false) resta visibile
   e inutile. Stesso motivo per gli altri layer che si alternano via attr('hidden'). (Claude/dev) */
.kshm-sv-zoom[hidden],
.kshm-streetview-container[hidden],
.kshm-satellite-container[hidden],
.kshm-sv-loading[hidden],
.kshm-sv-fallback[hidden],
.kshm-toggle-btn[hidden] { display: none !important; }

.kshm-sv-zoom-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 7px;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #1A2A4F;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
    transition: background 140ms ease;
}

.kshm-sv-zoom-btn:hover { background: #fff; }

/* ══════════════════════════════════════════════════
   PANNELLO (40%) — scroll pattern da keyspace-immobili.css
   ══════════════════════════════════════════════════ */

.kshm-panel {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* per l'overlay .kshm-role-gate */
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #1A2A4F;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── "Passo 0": domanda compratore/venditore (overlay del SOLO Blocco A) ──
   Titolo via, stima e dati di zona restano visibili; il gate copre solo il
   blocco domanda finché non si sceglie il ruolo. */
.kshm-block-a { position: relative; }

.kshm-role-gate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    background: #f2f5f9;              /* copre il Blocco A dietro (bg del panel-scroll) */
    transition: opacity 340ms ease;
}

.kshm-role-gate.kshm-role-hidden {
    opacity: 0;
    pointer-events: none;
}

.kshm-role-gate-inner {
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.kshm-role-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0063FA;
}

.kshm-role-question {
    margin: 0 0 22px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #162660;
}

.kshm-role-choices {
    display: flex;
    gap: 14px;
}

.kshm-role-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 14px;
    background: #ffffff;
    border: 2px solid #dbe7f5;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(26, 42, 79, 0.05);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.kshm-role-btn:hover,
.kshm-role-btn:focus-visible {
    border-color: #0063FA;
    background: #f5f9ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 99, 250, 0.18);
    outline: none;
}

.kshm-role-btn:active { transform: translateY(-1px); }

.kshm-role-icon {
    font-size: 40px;
    line-height: 1;
}

.kshm-role-label {
    font-size: 17px;
    font-weight: 800;
    color: #162660;
}

.kshm-role-sub {
    font-size: 12.5px;
    color: #5a7290;
}

/* Handle: fisso in cima, non scrolla */
.kshm-panel-handle { display: none; }

/* Wrapper scrollabile: unico figlio che occupa lo spazio rimanente */
.kshm-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f2f5f9;
    padding: 5%;
    -webkit-overflow-scrolling: touch;
    /* Impedisce al pannello di "bubblare" lo scroll alla pagina sottostante */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #DAEAF5 transparent;
}

.kshm-panel-scroll::-webkit-scrollbar       { width: 5px; }
.kshm-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.kshm-panel-scroll::-webkit-scrollbar-thumb { background: #DAEAF5; border-radius: 3px; }

/* ── Hero ───────────────────────────────────────── */
.kshm-panel-hero {
    padding: 24px 24px 14px;
}

.kshm-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 7px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #0063FA;
    background: #EAF1FF;
    border-radius: 999px;
}

.kshm-panel-eyebrow::before {
    content: '📍';
    font-size: 11px;
}

.kshm-panel-title {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 800;
    color: #162660;
    line-height: 1.22;
    letter-spacing: -0.025em;
    word-break: break-word;
}

/* ── Blocchi ────────────────────────────────────── */
.kshm-block {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(218,234,245,0.65);
}

.kshm-block:last-child { border-bottom: none; }

.kshm-block-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #8fa5b8;
    margin-bottom: 10px;
}

/* ── Stima ──────────────────────────────────────── */
.kshm-estimate-range {
    font-size: 26px;
    font-weight: 700;
    color: #1A2A4F;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 14px;
    min-height: 32px;
}

.kshm-est-sep { color: #c0cdd8; }

.kshm-precision-bar-bg {
    height: 8px;
    border-radius: 4px;
    background: #DAEAF5;
    overflow: hidden;
    margin-bottom: 8px;
}

.kshm-precision-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #162660, #0063FA);
    transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kshm-precision-text {
    font-size: 13px;
    color: #5a7290;
    line-height: 1.4;
}

.kshm-precision-text strong { color: #162660; font-size: 14px; }

.kshm-precision-cta {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #0063FA;
    font-weight: 500;
    cursor: pointer;
}

/* ── OMI ────────────────────────────────────────── */
.kshm-omi-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.kshm-omi-range {
    font-size: 22px;
    font-weight: 700;
    color: #1A2A4F;
}

.kshm-omi-unit { font-size: 14px; color: #8fa5b8; font-weight: 500; }

.kshm-omi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.kshm-omi-trend.positive { background: #dcfce7; color: #16a34a; }
.kshm-omi-trend.negative { background: #fee2e2; color: #dc2626; }

.kshm-omi-sub { font-size: 12px; color: #8fa5b8; margin-top: 4px; }

/* ── Comune ─────────────────────────────────────── */
.kshm-comune-stats { display: flex; flex-direction: column; gap: 8px; }

.kshm-comune-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.kshm-comune-stat-label { color: #5a7290; }
.kshm-comune-stat-value { font-weight: 600; color: #1A2A4F; }

/* ── Scores ─────────────────────────────────────── */
.kshm-scores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kshm-score-card {
    background: #e9ebed;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kshm-score-icon   { font-size: 18px; line-height: 1; }
.kshm-score-label  { font-size: 11px; color: #5a7290; font-weight: 500; }
.kshm-score-value  { font-size: 20px; font-weight: 700; color: #1A2A4F; line-height: 1; }
.kshm-score-value span { font-size: 12px; font-weight: 400; color: #8fa5b8; }
.kshm-score-desc   { font-size: 11px; color: #8fa5b8; }

/* ── Distanze ───────────────────────────────────── */
.kshm-distances-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kshm-dist-item { display: flex; align-items: center; gap: 10px; }

.kshm-dist-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #DAEAF5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.kshm-dist-name { flex: 1; color: #3a5070; font-size: 13px; }
.kshm-dist-time { font-weight: 600; white-space: nowrap; font-size: 13px; }
.kshm-dist-loading { color: #8fa5b8; font-size: 14px; list-style: none; }

/* ── CTA (mantenuto per utilizzi futuri) ────────── */
.kshm-panel-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #162660 0%, #0063FA 100%);
    background-size: 200% 200%;
    background-position: left center;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-position 300ms ease, transform 140ms ease, box-shadow 300ms ease;
}

.kshm-panel-cta-btn:hover {
    background-position: right center;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,99,250,0.28);
}

.kshm-panel-cta-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: #8fa5b8;
    text-align: center;
    line-height: 1.4;
}

/* ── Nota sotto la stima ────────────────────────── */
.kshm-estimate-note {
    margin: 4px 0 0;
    font-size: 11px;
    color: #8fa5b8;
    line-height: 1.4;
}

/* ── Loader pulsante ────────────────────────────── */
@keyframes kshm-pulse {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 1; }
}

.kshm-loader {
    display: inline-block;
    animation: kshm-pulse 1.2s ease-in-out infinite;
    letter-spacing: 0.1em;
    color: #8fa5b8;
}

/* ═══════════════════════════════════════════════════
   DESKTOP COMPACTION  (> 768px)
   Il pannello destro ha spazio limitato: ridurre i KPI
   per fare posto ai campi di compilazione (Step 3).
   ═══════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* Blocchi più stretti */
    .kshm-block { padding: 14px 20px; }
    .kshm-panel-hero { padding: 0px 0px 15px; }
    .kshm-block-title { margin-bottom: 8px; }

    /* OMI + Comune: affiancati */
    .kshm-zone-row {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid rgba(218,234,245,0.65);
    }
    .kshm-zone-row > .kshm-block {
        flex: 1;
        border-bottom: none;
    }
    .kshm-zone-row > .kshm-omi-block {
        border-right: 1px solid rgba(218,234,245,0.65);
    }

    /* Senza comune: OMI a larghezza piena */
    .kshm-zone-row > .kshm-omi-block:last-child {
        border-right: none;
    }

    .kshm-omi-range { font-size: 18px; }
    .kshm-omi-unit  { font-size: 12px; }

    .kshm-comune-stats { gap: 5px; }
    .kshm-comune-stat  { font-size: 13px; }

    /* Scores: 4 colonne invece di 2x2 */
    .kshm-scores-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .kshm-score-card  { padding: 9px 10px; gap: 2px; }
    .kshm-score-icon  { font-size: 15px; }
    .kshm-score-label { font-size: 10px; }
    .kshm-score-value { font-size: 17px; }
    .kshm-score-desc  { font-size: 10px; }

    /* Distanze: 2 colonne */
    .kshm-distances-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .kshm-dist-name { font-size: 12px; }
    .kshm-dist-time { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE  (≤ 768px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .kshm-immersive { flex-direction: column; }

    .kshm-map-area {
        flex: 0 0 auto;
        min-height: 0;
        height: 34%; /* 2026-07-09 — allineata all'altezza mappa dello Step 1 */
        width: 100%;
    }

    /* Pannello: bottom sheet — 2026-07-09: overlap di 50px sul fondo mappa
       (copre il logo Google, più pulito) e recupera spazio verticale. */
    .kshm-panel {
        flex: 1;
        min-height: 0;
        height: auto;
        margin-top: -50px;
        position: relative;
        /* 2026-07-13 — z-index 7 (era 3): il pannello (bottom-sheet) deve stare
           SOPRA anche l'anteprima gate (.kshm-gate-preview, z-index 6), non solo
           sopra lo Street View. La map-area ha z-index:auto e non crea stacking
           context, quindi l'anteprima z6 competeva a livello root e "mangiava" la
           riga dati del pannello nell'overlap di -50px. 7 resta sotto i controlli
           mappa (z-index 10). */
        z-index: 7;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 28px rgba(26,42,79,0.16);
    }

    .kshm-panel-handle {
        display: flex;
        justify-content: center;
        padding: 12px 0 6px;
        cursor: grab;
        flex-shrink: 0;
        user-select: none;
        -webkit-user-select: none;
    }

    .kshm-handle-bar {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #c8d8e8;
    }

    .kshm-immersive.kshm-panel-expanded .kshm-map-area { height: 22%; }

    /* 2026-07-29 — Step NOME (5) + GATE (6) su mobile (.kshm-gp-open = anteprima
       dashboard attiva): su schermi piccoli (es. iPhone SE) il 34% di map-area non
       basta a vedere l'anteprima. Qui nascondiamo il riepilogo del pannello
       (hero comune/indirizzo + stima progressiva: già mostrati NELL'anteprima) per
       liberare spazio, alziamo l'anteprima e il bottom-sheet scende, restando col
       gate/form visibile. Se l'utente trascina su il pannello (.kshm-panel-expanded)
       vince la regola sopra (22%). (Claude/dev) */
    .kshm-immersive.kshm-gp-open .kshm-panel-hero,
    .kshm-immersive.kshm-gp-open .ks-stima-block { display: none; }
    .kshm-immersive.kshm-gp-open:not(.kshm-panel-expanded) .kshm-map-area { height: 52%; }
    .kshm-immersive.kshm-gp-open .kshm-panel { margin-top: -24px; }

    /* 2026-07-29 v2 — MOBILE: mostra TUTTA la dashboard SCALATA (proporzioni intatte),
       non solo la cima. La finestra .kshm-gp-tilt diventa un viewport TRASPARENTE
       (niente frame/sfumatura) e kshm-immersive.js scala il board a larghezza di
       design (960px) per farlo stare tutto, centrato. Nascondo lead/benefit/dots
       per dare più spazio al "quadro". Il board scalato porta shadow/radius propri. */
    .kshm-immersive.kshm-gp-open .kshm-gp-lead,
    .kshm-immersive.kshm-gp-open .kshm-gp-benefit,
    .kshm-immersive.kshm-gp-open .kshm-gp-dots { display: none; }
    .kshm-immersive.kshm-gp-open .kshm-gp-tilt {
        border-radius: 18px;
        /* Il frame (non trasformato) porta ombra/bordo card; il board scalato lo riempie. */
        box-shadow: 0 18px 45px -18px rgba(22, 38, 96, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.5);
    }
    /* Sfumatura sul fondo TAGLIATO (più alta su mobile): il board riempie la
       larghezza, l'eccesso in basso si dissolve in modo pulito. */
    .kshm-immersive.kshm-gp-open .kshm-gp-tilt::after { content: ""; height: 130px; }
    .kshm-immersive.kshm-gp-open .kshm-gp-board {
        width: 960px;
        max-width: none;
        box-shadow: none;
    }

    .kshm-map-controls { top: 10px; left: 10px; right: 10px; }
    .kshm-map-btn { font-size: 12px; padding: 6px 12px; }
    .kshm-sv-zoom { bottom: 12px; left: 10px; }

    .kshm-panel-hero { padding: 6px 20px 0; }
    .kshm-panel-title { font-size: 17px; }
    .kshm-estimate-range { font-size: 20px; }
    .kshm-block { padding: 14px 20px; }
    .kshm-scores-grid { gap: 8px; }
    .kshm-score-value { font-size: 18px; }

    /* Domanda compratore/venditore su mobile: più compatta */
    .kshm-role-gate { padding: 18px; }
    .kshm-role-question { font-size: 20px; margin-bottom: 18px; }
    .kshm-role-choices { gap: 10px; }
    .kshm-role-btn { padding: 18px 8px; gap: 6px; }
    .kshm-role-icon { font-size: 32px; }
    .kshm-role-label { font-size: 15px; }
    .kshm-role-sub { font-size: 11.5px; }
}

@media (max-width: 380px) {
    .kshm-estimate-range { font-size: 17px; }
    .kshm-panel-title { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   2026-07-12 — Anteprima dashboard al gate (overlay colonna sinistra) — v2
   Board con COMPONENTI REALI: hero Street View + stima reale + i nodi zona
   (OMI/Vivibilità/Vicinanze) CLONATI dal pannello destro (reali, NON sfocati).
   Bloccati solo "Affina stima"/"Scheda pubblica". Gradiente Navy→Electric.
   ═══════════════════════════════════════════════════════════ */
.kshm-gate-preview {
    position: absolute;
    inset: 0;
    z-index: 6;                  /* sopra streetview/spinner(5), sotto i controlli(10) */
    display: flex;
    align-items: stretch;        /* 2026-07-29 — l'inner riempie l'altezza (peek) */
    justify-content: center;
    padding: 16px;
    /* Sfumatura pastello navy + azzurro (non il gradiente CTA pieno): board che fluttua */
    background: linear-gradient(150deg, #DCE6F8 0%, #AEC1E9 34%, #6B80BC 70%, #263A72 100%);
    overflow: hidden;
}
.kshm-gate-preview[hidden] { display: none !important; }

.kshm-gp-inner {
    width: 100%;
    /* 2026-07-29 — Larghezza PIENA del design v6 (era 640px → strozzava l'hero e
       mandava la card "Valore stimato" sotto l'indirizzo invece che a fianco).
       Ora il board occupa tutta la larghezza disponibile, cap alla wrap del design. */
    max-width: 1180px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;         /* lead/unlock/benefit centrati; la finestra board è width:100% */
    justify-content: flex-start; /* 2026-07-29 — peek ancorato in alto */
    gap: 10px;
    opacity: 0;
    transition: opacity 500ms ease;
}
.kshm-gp-inner.is-visible { opacity: 1; }

.kshm-gp-lead {
    margin: 0 0 12px;
    text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* 2026-07-13 — Anteprima PIATTA e pulita (rimossa l'inclinazione 3D che su
   mobile/piccolo sembrava rotta e su desktop non era perfetta). .kshm-gp-tilt e
   .kshm-gp-float restano come wrapper SENZA transform (markup invariato); la
   board è una card dashboard netta. Ingresso: semplice fade + risalita. */
/* 2026-07-29 — PEEK: .kshm-gp-tilt è la FINESTRA che ritaglia la cima della
   dashboard (design v6). La board dentro è a dimensione piena e leggibile,
   ancorata in alto; ciò che eccede è clippato e sfumato dal ::after. */
.kshm-gp-tilt {
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow:
        0 22px 55px -20px rgba(22, 38, 96, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.55);
}
/* Sfumatura sul fondo: la cima si "dissolve" → suggerisce che c'è dell'altro. */
.kshm-gp-tilt::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 96px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to bottom,
        rgba(247, 246, 242, 0) 0%,
        rgba(247, 246, 242, 0.85) 70%,
        rgba(247, 246, 242, 1) 100%);
}
.kshm-gp-reveal .kshm-gp-tilt {
    animation: kshmGpReveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kshm-gp-float { display: contents; }  /* wrapper trasparente */
.kshm-gp-board {
    width: 100%;
    max-width: 100%;
    display: block;
    /* Ancorata in alto nella finestra: si vede la cima (hero + inizio stima). */
}
.kshm-gp-hero[hidden] { display: none !important; }  /* nessuno spazio vuoto se manca la foto reale */

/* Card "chrome" del board (hero/stima/locked). I nodi zona clonati portano il
   proprio stile da kshm-immersive.css (già caricata). */
.kshm-gp-scard {
    background: #fff;
    border-radius: 12px;
    padding: 11px 14px;
    box-shadow: 0 6px 22px rgba(9, 20, 40, 0.22);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kshm-gp-seyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #84A8D5; }

/* Hero: foto reale (Street View) + indirizzo + chip + valore stimato */
.kshm-gp-hero {
    position: relative;
    height: 152px;
    border-radius: 14px;
    overflow: hidden;
    background: #0d1a2e center/cover no-repeat;
    box-shadow: 0 12px 28px rgba(9, 20, 40, 0.32);
}
.kshm-gp-hero--nofoto { background: linear-gradient(135deg, #1A2A4F, #0063FA); }
.kshm-gp-hero-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,20,40,0.90) 0%, rgba(9,20,40,0.28) 55%, rgba(9,20,40,0.05) 100%); }
.kshm-gp-hero-txt { position: absolute; left: 16px; right: 190px; bottom: 14px; }
.kshm-gp-hero-eyebrow { margin: 0 0 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.kshm-gp-hero-addr { margin: 0 0 8px; font-size: 16px; font-weight: 800; line-height: 1.2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.kshm-gp-hero-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kshm-gp-chip { font-size: 10px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.30); padding: 2px 9px; border-radius: 20px; }
.kshm-gp-hero-val { position: absolute; right: 14px; bottom: 14px; background: #fff; border-radius: 12px; padding: 9px 13px; box-shadow: 0 8px 20px rgba(9,20,40,0.28); text-align: right; }
.kshm-gp-hero-val-lbl { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #84A8D5; margin-bottom: 2px; }
.kshm-gp-hero-val-num { font-size: 17px; font-weight: 800; color: #162660; letter-spacing: -0.02em; white-space: nowrap; }

/* Titoli di sezione (come nella dashboard reale) */
.kshm-gp-sectitle { margin: 5px 2px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #6a7d99; }

/* Righe a 3 colonne ("La tua stima" / "Il mercato e la zona") */
.kshm-gp-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: stretch; }
.kshm-gp-row3 > * { min-width: 0; }

/* Card stima → precisione grande + barra */
.kshm-gp-scard-stima { background: linear-gradient(145deg, #fff 60%, #F2F6FB 100%); box-shadow: 0 8px 22px rgba(9,20,40,0.16); justify-content: center; }
.kshm-gp-prec-big { font-size: 26px; font-weight: 800; color: #162660; line-height: 1; letter-spacing: -0.02em; }
.kshm-gp-precbar { height: 6px; background: #DAEAF5; border-radius: 4px; overflow: hidden; margin-top: 7px; }
.kshm-gp-precfill { height: 100%; width: 52%; background: linear-gradient(90deg, #0063FA, #162660); border-radius: 4px; }

/* Card bloccate (richiedono l'account) */
.kshm-gp-locked { align-items: center; text-align: center; justify-content: center; gap: 4px; background: #f6f8fc; }
.kshm-gp-locked .kshm-gp-seyebrow { color: #6a7d99; }
.kshm-gp-lock-ico { font-size: 17px; line-height: 1; }
.kshm-gp-locked-sub { font-size: 10px; color: #8a99b0; line-height: 1.25; }

/* ── Componenti zona REALI clonati, in riga a 3 colonne (compattati) ── */
.kshm-gp-real {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 10px 11px !important;
    box-shadow: 0 6px 20px rgba(9, 20, 40, 0.14) !important;
    margin: 0 !important;
    overflow: hidden !important;        /* clip: niente testo che esce dalla card */
    min-width: 0 !important;
}
.kshm-gp-real * { min-width: 0 !important; max-width: 100% !important; }
.kshm-gp-real .kshm-block-title { font-size: 9px !important; }
.kshm-gp-real .kshm-omi-value, .kshm-gp-real .kshm-omi-range { font-size: 15px !important; }
.kshm-gp-real .kshm-scores-grid { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
.kshm-gp-real .kshm-distances-list { font-size: 9px !important; }
.kshm-gp-real .kshm-distances-list li { gap: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.kshm-gp-real .kshm-distances-list li:nth-child(n+4) { display: none; }
.kshm-gp-real .kshm-omi-sub, .kshm-gp-real .kshm-score-desc,
.kshm-gp-real .kshm-dist-time, .kshm-gp-real .kshm-distances-list li > :last-child { display: none !important; } /* meno denso: via i tempi/sub */

/* Badge di sblocco (centrato sotto il board, fuori dalla scala → sempre leggibile) */
.kshm-gp-unlock {
    align-self: center;
    margin-top: 8px;
    background: #fff; color: #1A2A4F;
    padding: 7px 15px; border-radius: 20px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(9, 20, 40, 0.32);
}

/* ── Reveal PIATTO: semplice risalita + fade + leggero rack-focus. ── */
@keyframes kshmGpReveal {
    0%   { transform: translateY(26px); filter: blur(6px); opacity: 0; }
    100% { transform: translateY(0);    filter: blur(0);   opacity: 1; }
}

/* ── Carosello vantaggi: unico elemento sotto la board, reso evidente con un
   badge-icona + testo in grassetto (icona e testo ruotano insieme). ── */
.kshm-gp-benefit {
    display: flex; align-items: center; gap: 13px;
    margin: 18px auto 0; max-width: 460px; min-height: 74px;
    padding: 13px 22px 13px 13px;
    background: rgba(255, 255, 255, 0.17);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(9, 20, 40, 0.18);
    transition: opacity 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kshm-gp-benefit.is-swapping { opacity: 0; transform: translateY(9px); }
.kshm-gp-benefit-ico {
    flex: 0 0 auto; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    background: #fff; border-radius: 13px;
    box-shadow: 0 6px 16px rgba(9, 20, 40, 0.22);
}
.kshm-gp-benefit-txt { text-align: left; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #fff; }

/* ── Pallini ── */
.kshm-gp-dots { display: flex; gap: 9px; justify-content: center; margin-top: 13px; }
.kshm-gp-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.4); transition: background 200ms, transform 200ms; }
.kshm-gp-dot.is-active { background: #fff; transform: scale(1.3); }

/* ── prefers-reduced-motion: niente animazione d'ingresso — board ferma. ── */
@media (prefers-reduced-motion: reduce) {
    .kshm-gp-reveal .kshm-gp-tilt { animation: none; }
    .kshm-gp-inner { transition: none; }
}

/* ── Mobile: la map-area è una striscia (34vh). La board è piatta e riempie la
   larghezza; è più alta della striscia → viene clippata da .kshm-gate-preview
   (overflow:hidden, ora senza tilt/preserve-3d che le facevano "sfuggire" il
   clip), mostrando l'hero (foto + valore) e l'inizio della stima come peek. ── */
@media (max-width: 768px) {
    .kshm-gate-preview { padding: 10px 12px; align-items: flex-start; }
    .kshm-gp-inner { max-width: 100%; }
    .kshm-gp-lead { display: none; }
    /* 2026-07-13 — Su mobile la board MANTIENE il layout desktop (680px, tutte le
       sezioni leggibili come struttura) e viene RIMPICCIOLITA via JS (fitMobile)
       per stare TUTTA nella striscia → vista globale della dashboard reale (via +
       prime righe di dati), non un peek. Testo piccolo: è un'anteprima. */
    .kshm-gp-board { width: 760px; max-width: none; transform-origin: top center; }
    .kshm-gp-benefit { margin-top: 10px; min-height: 60px; padding: 10px 15px 10px 10px; gap: 10px; }
    .kshm-gp-benefit-ico { width: 40px; height: 40px; font-size: 20px; border-radius: 11px; }
    .kshm-gp-benefit-txt { font-size: 13.5px; }
    .kshm-gp-dots { margin-top: 9px; }
}