/* Valutatore immobiliare — Vale Immobiliare, 01/10/2026.
   Usa i token del child theme dove esistono gia'; quelli propri stanno
   sul guscio .vv-guscio per non uscire dal componente. */

/* Impianto: colonna singola centrata, un passo alla volta, barra di avanzamento
   in alto. Stessi token del sito Vale Immobiliare (child theme, :root).
   Tema unico chiaro: il widget deve essere indistinguibile dal sito. */
.vv-guscio {

  --vale-blu:        #0e559e;
  --vale-blu-scuro:  #0a4179;
  --vale-rosa:       #db5679;
  --vale-testo:      #1f2a33;
  --vale-scuro:      #21242e;
  --vale-bordo:      #dce0e0;
  --vale-fondo:      #f6f7f8;
  --vale-carta:      #ffffff;
  --vale-tenue:      #6a7680;
  --vale-blu-velo:   #eef4fa;

  --vale-font-display:   "Lora", Georgia, "Times New Roman", serif;
  --vale-font-corpo:     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vale-font-occhiello: "Montserrat", -apple-system, sans-serif;

  --vale-raggio: 8px;
  --vale-ombra: 0 1px 2px rgba(31,42,51,.06), 0 8px 24px rgba(31,42,51,.07);
}

* { box-sizing: border-box; }


.vv-guscio { width: 100%; max-width: 740px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 56px; }

/* ---------- intestazione ---------- */
.vv-occhiello {
  font-family: var(--vale-font-occhiello);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vale-rosa); margin: 0 0 10px;
}
.vv-titolo {
  font-family: var(--vale-font-display); font-weight: 500;
  font-size: clamp(27px, 5.4vw, 40px); line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 12px; text-wrap: balance;
}
.vv-sottotitolo { margin: 0 0 26px; color: var(--vale-tenue); font-size: 15.5px; max-width: 54ch; text-wrap: pretty; }

/* ---------- avanzamento ---------- */
.vv-avanzamento { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.vv-barra { flex: 1; height: 4px; border-radius: 99px; background: var(--vale-bordo); overflow: hidden; }
.vv-barra > i { display: block; height: 100%; width: 25%; background: var(--vale-blu); border-radius: 99px; transition: width .32s cubic-bezier(.22,.9,.3,1); }
.vv-passo-n { font-family: var(--vale-font-occhiello); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vale-tenue); white-space: nowrap; }

/* ---------- scheda ---------- */
.vv-carta { background: var(--vale-carta); border: 1px solid var(--vale-bordo); border-radius: var(--vale-raggio); box-shadow: var(--vale-ombra); padding: 24px; }
@media (max-width: 480px) { .vv-carta { padding: 18px; } }

.vv-domanda { font-family: var(--vale-font-display); font-size: 21px; font-weight: 500; margin: 0 0 4px; text-wrap: balance; }
.vv-aiuto { color: var(--vale-tenue); font-size: 14px; margin: 0 0 18px; text-wrap: pretty; }

.vv-campo { margin-bottom: 20px; }
.vv-campo:last-child { margin-bottom: 0; }
.vv-etichetta {
  display: block; font-family: var(--vale-font-occhiello);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vale-testo); margin-bottom: 8px;
}

select, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea {
  width: 100%; font-family: var(--vale-font-corpo); font-size: 16px; color: var(--vale-testo);
  background: var(--vale-carta); border: 1px solid var(--vale-bordo); border-radius: var(--vale-raggio);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 92px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236a7680' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--vale-blu); box-shadow: 0 0 0 3px rgba(14,85,158,.14); }

/* ---------- scelte a riquadri ---------- */
.vv-scelte { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vv-scelte.vv-due { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.vv-scelta { position: relative; }
.vv-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vv-scelta span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px;
  padding: 10px 12px; border: 1px solid var(--vale-bordo); border-radius: var(--vale-raggio);
  font-size: 14.5px; cursor: pointer; background: var(--vale-carta);
  transition: border-color .15s, background .15s, color .15s;
}
.vv-scelta span small { display: block; font-size: 12px; color: var(--vale-tenue); margin-top: 2px; }
.vv-scelta input:checked + span { border-color: var(--vale-blu); background: var(--vale-blu-velo); color: var(--vale-blu-scuro); font-weight: 500; }
.vv-scelta input:checked + span small { color: var(--vale-blu); }
.vv-scelta input:focus-visible + span { outline: 2px solid var(--vale-blu); outline-offset: 2px; }
.vv-scelta span:hover { border-color: #b9c4cc; }

/* ---------- interruttori ---------- */
.vv-spunte { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.vv-spunta { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--vale-bordo); border-radius: var(--vale-raggio); cursor: pointer; font-size: 14.5px; background: var(--vale-carta); transition: border-color .15s, background .15s; }
.vv-spunta input { width: 17px; height: 17px; accent-color: var(--vale-blu); flex: none; margin: 0; }
.vv-spunta:has(input:checked) { border-color: var(--vale-blu); background: var(--vale-blu-velo); }

.vv-riga { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { .vv-riga { grid-template-columns: 1fr; } }

/* ---------- pulsanti ---------- */
.vv-azioni { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.vv-btn {
  font-family: var(--vale-font-corpo); font-size: 15px; font-weight: 500;
  border-radius: var(--vale-raggio); padding: 13px 26px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, transform .08s;
}
.vv-btn:active { transform: translateY(1px); }
.vv-btn-primario { background: var(--vale-blu); color: #fff; }
.vv-btn-primario:hover { background: var(--vale-blu-scuro); }
.vv-btn-primario:disabled { background: #b7c3cd; cursor: not-allowed; }
.vv-btn-fantasma { background: transparent; color: var(--vale-tenue); border-color: var(--vale-bordo); }
.vv-btn-fantasma:hover { border-color: #b9c4cc; color: var(--vale-testo); }
.vv-btn-largo { width: 100%; }
.vv-btn:focus-visible { outline: 2px solid var(--vale-blu); outline-offset: 2px; }

.vv-errore { color: #b3203c; font-size: 13.5px; margin-top: 8px; }

/* ---------- risultato ---------- */
.vv-stima { background: var(--vale-scuro); color: #fff; border-radius: var(--vale-raggio); padding: 28px 24px; text-align: center; }
.vv-stima .vv-occhiello { color: #f0a0b4; }
.vv-cifra { font-family: var(--vale-font-display); font-weight: 500; font-size: clamp(27px, 6.6vw, 40px); line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.vv-stima-nota { color: #b5bdc6; font-size: 13.5px; margin: 10px auto 0; max-width: 42ch; text-wrap: pretty; }
.vv-avviso { color: #cdd4db; font-size: 13px; line-height: 1.55; margin: 16px auto 0; max-width: 52ch; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); text-wrap: pretty; }
.vv-avviso strong { color: #fff; font-weight: 500; }

.vv-conti { margin-top: 14px; border: 1px solid var(--vale-bordo); border-radius: var(--vale-raggio); background: var(--vale-carta); }
.vv-conti > summary { cursor: pointer; padding: 13px 16px; font-size: 14px; color: var(--vale-tenue); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vv-conti > summary::-webkit-details-marker { display: none; }
.vv-conti > summary::after { content: "+"; font-size: 17px; color: var(--vale-tenue); }
.vv-conti[open] > summary::after { content: "–"; }
.vv-conti-corpo { padding: 0 16px 14px; }
.vv-voce { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--vale-bordo); font-size: 14px; }
.vv-voce span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vv-voce-forte { font-weight: 500; }

/* ---------- invito al contatto ---------- */
.vv-invito { margin-top: 16px; background: var(--vale-carta); border: 1px solid var(--vale-bordo); border-left: 3px solid var(--vale-rosa); border-radius: var(--vale-raggio); padding: 22px 24px; }
.vv-invito h3 { font-family: var(--vale-font-display); font-size: 20px; font-weight: 500; margin: 0 0 8px; text-wrap: balance; }
.vv-invito p { margin: 0 0 14px; font-size: 14.8px; color: var(--vale-testo); text-wrap: pretty; }
.vv-elenco { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.vv-elenco li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--vale-testo); }
.vv-elenco li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 6px; border-left: 2px solid var(--vale-blu); border-bottom: 2px solid var(--vale-blu); transform: rotate(-45deg); }

.vv-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--vale-tenue); line-height: 1.5; }
.vv-privacy input { width: 16px; height: 16px; accent-color: var(--vale-blu); flex: none; margin-top: 2px; }
.vv-privacy a { color: var(--vale-blu); }
.vv-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vv-fatto { text-align: center; padding: 34px 24px; }
.vv-fatto .vv-segno { width: 50px; height: 50px; border-radius: 50%; background: var(--vale-blu-velo); color: var(--vale-blu); display: grid; place-items: center; margin: 0 auto 16px; font-size: 24px; }

.vv-nota-finale { margin-top: 18px; font-size: 12.5px; color: var(--vale-tenue); line-height: 1.55; text-wrap: pretty; }
.vv-nota-finale strong { color: var(--vale-testo); font-weight: 500; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.vv-guscio { font-family: var(--vale-font-corpo); color: var(--vale-testo); line-height: 1.6; }

/* ==========================================================================
   RICHIESTA INFORMAZIONI SUL SINGOLO IMMOBILE                — 02/10/2026
   --------------------------------------------------------------------------
   Vive nella barra laterale della scheda immobile, che e' stretta: il guscio
   perde i margini pensati per la pagina intera e la scheda si appoggia alla
   colonna. Riusa tutti gli stili del valutatore, qui ci sono solo le
   differenze dovute allo spazio.
   ========================================================================== */

.vr-blocco { max-width: none; padding-inline: 0; padding-block: 0; margin-bottom: 24px; }
.vr-blocco .vv-carta { padding: 20px; }
.vr-blocco .vv-domanda { font-size: 19px; }
.vr-blocco .vv-campo { margin-bottom: 14px; }
.vr-blocco textarea { min-height: 76px; }
.vr-blocco .vv-fatto { padding: 20px 0 6px; }

/* ==========================================================================
   VALUTATORE IN FORMA RIDOTTA (barra laterale immobile)      — 02/10/2026
   --------------------------------------------------------------------------
   Tre domande invece di quattro passaggi. La forbice e' piu' larga di quella
   del valutatore intero (+/- 14% invece di 10%) perche' qui mancano piano,
   ascensore, pertinenze e classe energetica: dirla stretta sarebbe disonesto.
   ========================================================================== */

.vc-blocco { max-width: none; padding-inline: 0; padding-block: 0; margin-bottom: 24px; }
.vc-blocco .vv-carta { padding: 20px; }
.vc-blocco .vv-domanda { font-size: 19px; }
.vc-blocco .vv-campo { margin-bottom: 14px; }
.vc-blocco .vv-scelte.vv-due { grid-template-columns: 1fr 1fr; gap: 6px; }
.vc-blocco .vv-scelta span { min-height: 42px; font-size: 13.5px; padding: 8px 6px; }
.vc-stima { padding: 20px 16px; margin-bottom: 14px; }
.vc-stima .vv-cifra { font-size: clamp(21px, 4.4vw, 26px); }
.vc-stima .vv-avviso { font-size: 12px; margin-top: 12px; padding-top: 11px; max-width: none; }
.vc-invito { margin-bottom: 14px; }
.vc-cta { display: block; text-align: center; text-decoration: none; margin-bottom: 8px; }
.vc-cta:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Il blocco del referente nasce con position:sticky, quindi resta agganciato
   allo schermo mentre la colonna scorre. Finche' era l'unica cosa nella barra
   laterale non si notava; ora che sotto ci sono il modulo di richiesta e il
   valutatore, scorrendo ci passava sopra e i testi si sovrapponevano.
   Qui i tre blocchi tornano a impilarsi normalmente.    — 02/10/2026
   -------------------------------------------------------------------------- */
.oo-details-sidebar .oo-asp { position: static !important; }

/* Il !important serve davvero: la regola che rende sticky il blocco vive
   dentro una media query del tema, e senza non verrebbe scavalcata. */

/* ==========================================================================
   COERENZA DELLA BARRA LATERALE                              — 02/10/2026
   --------------------------------------------------------------------------
   Nella colonna convivono tre blocchi: il referente, che arriva dal plugin
   onOffice, e i due nostri. Misurati, erano due disegni diversi:
   il referente grigio, senza bordo, titolo Poppins 21,2px peso 400;
   i nostri bianchi, con bordo e ombra, titolo Lora 19px peso 500.
   Qui il blocco del plugin viene portato sugli stessi valori dei nostri, che
   sono poi quelli del resto del sito. I valori di ripiego servono perche' i
   token --vale-carta e simili sono dichiarati sul guscio del valutatore, e
   qui siamo fuori da quello.
   ========================================================================== */

.oo-details-sidebar .oo-asp {
	/* sfondo e padding hanno bisogno di !important: il tema li imposta da una
	   regola che vince per specificita'. Il resto passa senza. */
	background: #fff !important;
	border: 1px solid var(--vale-bordo, #dce0e0);
	border-radius: var(--vale-raggio, 8px);
	box-shadow: 0 1px 2px rgba(31, 42, 51, .06), 0 8px 24px rgba(31, 42, 51, .07);
	padding: 20px !important;
	margin-bottom: 24px;
}

.oo-details-sidebar .oo-asp h2 {
	font-family: "Lora", Georgia, serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	margin: 0 0 14px;
	color: var(--vale-testo, #1f2a33);
}

/* Le etichette dei campi del referente prendono lo stesso trattamento delle
   nostre: maiuscoletto spaziato invece di testo corrente. */
.oo-details-sidebar .oo-field-label {
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vale-testo, #1f2a33);
	margin: 13px 0 3px;
}

.oo-details-sidebar .oo-aspinfo p { margin: 0 0 2px; font-size: 14.5px; line-height: 1.5; }
.oo-details-sidebar .oo-aspinfo a { color: var(--vale-blu, #0e559e); word-break: break-word; }
.oo-details-sidebar .oo-aspinfo img { border-radius: var(--vale-raggio, 8px); margin-bottom: 12px; max-width: 100%; }
.oo-details-sidebar .oo-asp .oo-aspinfo-wrapper + .oo-aspinfo-wrapper { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vale-bordo, #dce0e0); }

/* --------------------------------------------------------------------------
   Riquadri di scelta tutti della stessa altezza.
   Nella griglia l'etichetta si allungava ma la casella colorata dentro no:
   "Abitabile" restava 42px mentre "Da ristrutturare", che va a capo, arrivava
   a 61. Ora la casella riempie l'etichetta e tutte partono dalla stessa
   altezza minima, a prescindere da quante righe occupa il testo.
   -------------------------------------------------------------------------- */
.vv-scelta { display: flex; }
.vv-scelta span { width: 100%; }
.vc-blocco .vv-scelta span { min-height: 54px; line-height: 1.3; }