/* ==========================================================================
   Page — Fotovoltaico (/fotovoltaico/)
   Analisi AI del tetto + stima + richiesta ricontatto. Powered by GIS.
   Stile sito: rettangoli con ombre, titoli auto-sottolineati (.rei-underline
   animata da main.js), pulsanti fluo che pulsano.
   ========================================================================== */

.fv-page { background: linear-gradient(180deg, #ffffff 0%, #f4f8f6 30%, #e4f6f0 100%); }

/* ---------- HERO ---------- */
.fv-hero { padding: 56px 0 10px; }
.fv-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--rei-yellow, #D1E000); color: #333d00;
    font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 999px; margin-bottom: 14px;
}
.fv-title {
    font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 900;
    letter-spacing: -.02em; line-height: 1.12; margin: 0 0 14px;
    color: var(--rei-green-dark, #157155);
}
.fv-sub { font-size: 1.08rem; line-height: 1.58; max-width: 680px; margin: 0 0 18px; }

.fv-gis-badge {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--rei-green-dark, #157155);
    border-radius: 14px; padding: 10px 18px; margin-bottom: 8px;
    box-shadow: 0 10px 26px rgba(21, 113, 85, .3);
}
.fv-gis-badge__lbl { color: #d2f0e6; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fv-gis-badge img { height: 40px; width: auto; display: block; }

/* ---------- SEZIONI / CARD ---------- */
.fv-section { padding: 30px 0; }
.fv-h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; color: var(--rei-green-dark, #157155); margin: 0 0 22px; }
.fv-h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 900; color: var(--rei-green-dark, #157155); margin: 0 0 14px; }
.fv-card {
    background: #ffffff; border: 1px solid #eef5f1; border-radius: 22px;
    box-shadow: 0 14px 34px rgba(21, 113, 85, .2), 0 28px 70px rgba(21, 113, 85, .14); /* v1.9.1: ombra più marcata */
    padding: 28px; margin-bottom: 22px;
}

/* ---------- VANTAGGI ---------- */
.fv-vantaggi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fv-vant { margin-bottom: 0; padding: 22px 20px; transition: transform .25s ease, box-shadow .25s ease; }
.fv-vant:hover { transform: translateY(-5px); box-shadow: 0 22px 54px rgba(21, 113, 85, .28); }
.fv-vant__ico {
    width: 52px; height: 52px; border-radius: 14px; background: #e4f6f0;
    display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 12px;
}
.fv-vant h3 { margin: 0 0 7px; font-size: 1.05rem; font-weight: 800; color: var(--rei-green-dark, #157155); }
.fv-vant p { margin: 0; font-size: .9rem; line-height: 1.55; color: #5d6f68; }

/* ---------- PULSANTI ---------- */
.fv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: inherit; font-weight: 900; font-size: 1.02rem;
    border: 0; border-radius: 999px; padding: 16px 30px; cursor: pointer;
    text-decoration: none; transition: filter .2s ease;
}
.fv-btn--green { background: var(--rei-green, #20A47B); color: #ffffff; box-shadow: 0 10px 26px rgba(32, 164, 123, .4); }
.fv-btn--yellow { background: var(--rei-yellow, #D1E000); color: #2e3600; box-shadow: 0 10px 26px rgba(209, 224, 0, .55); }
.fv-btn:hover { filter: brightness(1.06); }
.fv-btn:disabled { opacity: .55; cursor: default; animation: none !important; }
.fv-btn--pulse { animation: fvBtnPulse 1.6s ease-in-out infinite; }
@keyframes fvBtnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* ---------- STEP INDICATOR ---------- */
.fv-steps { display: flex; flex-wrap: wrap; margin: 0 0 22px; }
.fv-step {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 18px 9px 12px; background: #fff; border: 2px solid #d2f0e6;
    border-radius: 999px; margin: 0 10px 8px 0;
    font-weight: 700; font-size: .9rem; color: #7a8a83;
    box-shadow: 0 6px 16px rgba(21, 113, 85, .05); transition: all .3s ease;
}
.fv-step b {
    width: 26px; height: 26px; border-radius: 50%; background: #d2f0e6;
    color: var(--rei-green-dark, #157155); display: grid; place-items: center; font-size: .85rem;
}
.fv-step.is-on { border-color: var(--rei-green, #20A47B); color: var(--rei-green-dark, #157155); box-shadow: 0 6px 18px rgba(32, 164, 123, .2); }
.fv-step.is-on b { background: var(--rei-green, #20A47B); color: #fff; }
.fv-step.is-done { border-color: var(--rei-green, #20A47B); color: var(--rei-green, #20A47B); }
.fv-step.is-done b { background: var(--rei-yellow, #D1E000); color: #333d00; }

/* ---------- STEP 1: INDIRIZZO ---------- */
.fv-addr__row { display: flex; gap: 12px; flex-wrap: wrap; }
.fv-addr__field { flex: 1 1 340px; position: relative; }
.fv-addr__pin { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; }
.fv-addr__input {
    width: 100%; box-sizing: border-box;
    padding: 16px 16px 16px 46px; font-family: inherit; font-size: 1rem;
    border: 2px solid #d2f0e6; border-radius: 14px; outline: none; transition: border-color .2s ease;
}
.fv-addr__input:focus { border-color: var(--rei-green, #20A47B); }
.fv-hint { font-size: .83rem; color: #6b7f77; margin: 10px 2px 0; }
.fv-error { background: #fdeaea; border: 1px solid #f0b8b8; color: #8a2424; border-radius: 10px; padding: 10px 14px; font-size: .9rem; font-weight: 600; margin: 12px 0 0; }
.fv-addr__results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid #d2f0e6; border-radius: 14px;
    box-shadow: 0 16px 40px rgba(21, 113, 85, .15); overflow: hidden;
}
.fv-addr__results button {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 13px 16px; font-family: inherit; font-size: .95rem; cursor: pointer; color: inherit;
}
.fv-addr__results button:hover { background: #f4f8f6; }

/* ---------- STEP 2: SATELLITE ---------- */
.fv-ai-status { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--rei-green-dark, #157155); margin: 0 0 14px; font-size: .98rem; }
.fv-ai-status__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rei-yellow, #D1E000); animation: fvDot 1s infinite; flex: 0 0 auto; }
.fv-ai-status.is-done .fv-ai-status__dot { animation: none; background: var(--rei-green, #20A47B); }
@keyframes fvDot { 50% { transform: scale(1.6); opacity: .5; } }

.fv-sat__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.fv-sat__viewport {
    position: relative; border-radius: 18px; overflow: hidden;
    min-height: 300px; background: #39493a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.fv-sat__viewport img { display: block; width: 100%; height: auto; }
#fv-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.fv-poly {
    fill: rgba(209, 224, 0, .24); stroke: var(--rei-yellow, #D1E000); stroke-width: 3.5;
    stroke-dasharray: 8 7; animation: fvDash 1.2s linear infinite;
    pointer-events: auto; cursor: move;
}
@keyframes fvDash { to { stroke-dashoffset: -30; } }
/* v1.9.0 — maniglie per adattare l'area del tetto */
.fv-handle {
    fill: #ffffff; stroke: var(--rei-yellow, #D1E000); stroke-width: 4;
    pointer-events: auto; cursor: grab;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.fv-handle:active { cursor: grabbing; fill: var(--rei-yellow, #D1E000); }
.fv-edit-hint {
    background: #fffbe6; border: 1px solid #f0e6a8; border-radius: 12px;
    padding: 10px 14px; font-size: .85rem; line-height: 1.5; color: #6d5f10;
    margin: 12px 0 0;
}
.fv-sat__tag {
    position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.65); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 5px 11px;
    border-radius: 8px; text-transform: uppercase;
}
.fv-sat__addr {
    position: absolute; bottom: 12px; left: 12px; right: 12px;
    background: rgba(255,255,255,.9); border-radius: 10px; padding: 8px 12px;
    font-size: .83rem; font-weight: 700; color: var(--rei-green-dark, #157155);
    display: flex; gap: 8px; align-items: center;
}
.fv-sat__scan {
    position: absolute; left: 0; right: 0; top: 0; height: 64px; opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(209,224,0,0), rgba(209,224,0,.55) 55%, var(--rei-yellow, #D1E000));
}
.fv-sat.is-scanning .fv-sat__scan { opacity: 1; animation: fvScan 1.6s linear infinite; }
@keyframes fvScan { from { transform: translateY(-70px); } to { transform: translateY(420px); } }

/* ---------- RISULTATI ---------- */
.fv-res { display: grid; gap: 12px; }
.fv-res__card {
    background: #f4f8f6; border: 2px solid #d2f0e6; border-radius: 16px;
    padding: 14px 16px; text-align: center; box-shadow: 0 10px 26px rgba(21, 113, 85, .14);
}
.fv-res__ico { font-size: 1.3rem; }
.fv-res__val { font-size: 1.5rem; font-weight: 900; color: var(--rei-green-dark, #157155); margin: 4px 0 2px; }
.fv-res__val small { font-size: .85rem; font-weight: 800; color: var(--rei-green, #20A47B); }
.fv-res__lbl { font-size: .78rem; font-weight: 700; color: #6b7f77; text-transform: uppercase; letter-spacing: .04em; }
.fv-res__note {
    background: #fffbe6; border: 1px solid #f0e6a8; border-radius: 12px;
    padding: 12px 15px; font-size: .85rem; line-height: 1.5; color: #6d5f10; margin: 2px 0 0;
}

/* ---------- TECNICO ---------- */
.fv-tech {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--rei-green-dark, #157155); color: #fff; border-radius: 22px;
    padding: 24px 26px; margin-bottom: 22px; box-shadow: 0 14px 40px rgba(21, 113, 85, .3);
}
.fv-tech__ico { font-size: 2rem; line-height: 1; background: rgba(255,255,255,.14); border-radius: 14px; padding: 12px; flex: 0 0 auto; }
.fv-tech__txt h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: #fff; }
.fv-tech__txt p { margin: 0; font-size: .93rem; line-height: 1.55; color: #e6f4ee; }
.fv-tech__gis { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; }
.fv-tech__gis span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a8dcc8; }
.fv-tech__gis img { height: 30px; width: auto; display: block; }

/* ---------- FORM ---------- */
.fv-form__sub { margin: 0 0 18px; font-size: .93rem; color: #5d6f68; }
.fv-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.fv-form__full { grid-column: 1 / -1; }
.fv-form__grid label {
    display: block; font-size: .8rem; font-weight: 800; color: var(--rei-green-dark, #157155);
    margin: 0 0 5px; text-transform: uppercase; letter-spacing: .04em;
}
.fv-form__grid input, .fv-form__grid select {
    width: 100%; box-sizing: border-box; padding: 13px 14px;
    font-family: inherit; font-size: .97rem; border: 2px solid #d2f0e6; border-radius: 12px;
    outline: none; background: #fff;
}
.fv-form__grid input:focus, .fv-form__grid select:focus { border-color: var(--rei-green, #20A47B); }
.fv-form__priv {
    display: flex; gap: 11px; align-items: flex-start;
    background: #f4f8f6; border: 1.5px solid #d2f0e6; border-radius: 12px;
    padding: 13px 14px; margin: 15px 0; font-size: .87rem; line-height: 1.5; cursor: pointer;
}
.fv-form__priv input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--rei-green, #20A47B); flex: 0 0 auto; }
.fv-form__priv a { color: var(--rei-green, #20A47B); font-weight: 700; }
.fv-form__send { width: 100%; font-size: 1.05rem; }
.fv-form__send:disabled { background: #e3e8e0; color: #9aa79f; box-shadow: none; }
.fv-form__ok {
    background: #d2f0e6; border-radius: 14px; padding: 18px; text-align: center;
    font-weight: 800; color: var(--rei-green-dark, #157155); margin-top: 6px;
}

/* ---------- MOBILE ---------- */
@media (max-width: 900px) {
    .fv-vantaggi__grid { grid-template-columns: 1fr 1fr; }
    .fv-sat__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fv-hero { padding: 38px 0 6px; }
    .fv-vantaggi__grid { grid-template-columns: 1fr; }
    .fv-form__grid { grid-template-columns: 1fr; }
    .fv-card { padding: 20px 16px; }
    .fv-tech { flex-direction: column; gap: 12px; }
    .fv-addr__row .fv-btn { width: 100%; }
    .fv-gis-badge img { height: 32px; }
}

/* ---------- ACCESSIBILITÀ ---------- */
@media (prefers-reduced-motion: reduce) {
    .fv-btn--pulse, .fv-poly, .fv-ai-status__dot, .fv-sat.is-scanning .fv-sat__scan { animation: none !important; }
}