/* =============================================================================
   VDU — Sticky Footer Therma v1 (agency) — lavalledegliulivi.com
   Blocco autonomo d'agenzia. Prefisso unico `.vdu-sticky-*` / `.vdu-assist*`,
   token scoped `--vdu-*`. Nessuna dipendenza dal tema (astra-child) ne dal
   page builder (Brizy).
   SOSTITUISCE la barra costruita dentro Brizy (`section.brz-section.sticky-footer`,
   resa fissa da una regola nel CSS aggiuntivo del Customizer): quella sezione viene
   NASCOSTA da qui. NON e stato toccato ne il contenuto Brizy ne il CSS aggiuntivo
   del Customizer: la barra vecchia resta nel contenuto della pagina, solo invisibile.
   Sorgente di verita = QUESTO FILE. Riferimento di layout: studiocaputovellotti.it.
   ============================================================================= */

/* ── Neutralizzazione della vecchia barra Brizy ────────────────────────────────
   Unica regola fuori dal prefisso `.vdu-*`. Nasconde SOLO le sezioni Brizy che
   portano la classe custom `sticky-footer` (la vecchia barra contatti), non altro. */
section.brz-section.sticky-footer { display: none !important; }

/* ── BARRA ─────────────────────────────────────────────────────────────────── */
.vdu-sticky-bar {
  --vdu-blu: #1B355A;   /* blu CTA d'agenzia          */
  --vdu-wa:  #25D366;   /* verde WhatsApp ufficiale   */
  --vdu-red: #FF0000;   /* rosso stato aperto         */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99990;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -6px 24px rgba(14, 34, 54, 0.06);
  padding: 12px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.vdu-sticky-bar *,
.vdu-sticky-bar *::before,
.vdu-sticky-bar *::after { box-sizing: border-box; }

.vdu-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  flex-wrap: nowrap;
}

/* Spazio in fondo al documento pari all'ingombro reale della barra
   (12+12 padding + 46 dell'elemento più alto = 70px) + margine di respiro. */
body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }

/* ── BOTTONI AZIONE (pill icona + label) ───────────────────────────────────── */
.vdu-sticky-bar a.vdu-btn,
.vdu-sticky-bar button.vdu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 11px 20px;
  border-radius: 999px;
  border: 2px solid var(--vdu-blu);
  background: var(--vdu-blu);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vdu-sticky-bar a.vdu-btn:visited { color: #fff; }
.vdu-sticky-bar .vdu-ico {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  display: block;
  fill: currentColor;
}
.vdu-sticky-bar .vdu-lbl { display: inline; }

/* hover = inversione (fondo bianco, bordo/testo/icona nel colore del bottone) */
@media (hover: hover) and (pointer: fine) {
  .vdu-sticky-bar a.vdu-btn:hover,
  .vdu-sticky-bar button.vdu-btn:hover {
    background: #fff;
    border-color: var(--vdu-blu);
    color: var(--vdu-blu);
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .25);
  }
  .vdu-sticky-bar a.vdu-btn--wa:hover {
    border-color: var(--vdu-wa);
    color: var(--vdu-wa);
  }
}
.vdu-sticky-bar a.vdu-btn:focus-visible,
.vdu-sticky-bar button:focus-visible {
  outline: 2px solid var(--vdu-blu);
  outline-offset: 3px;
}

/* WhatsApp — verde ufficiale */
.vdu-sticky-bar a.vdu-btn--wa {
  background: var(--vdu-wa);
  border-color: var(--vdu-wa);
  color: #fff;
}

/* ── BOTTONE THERMA (assistente) ───────────────────────────────────────────── */
/* INTERRUTTORE: nascosto finché lo snippet embed non aggiunge .vdu-chat-on su
   <html>. Embed OFF -> nessuna traccia del bottone in pagina. */
.vdu-sticky-bar .vdu-assist {
  display: none;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 999px;
  font: inherit;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.vdu-chat-on .vdu-sticky-bar .vdu-assist { display: inline-flex; }
.vdu-sticky-bar .vdu-assist:hover,
.vdu-sticky-bar .vdu-assist:focus,
.vdu-sticky-bar .vdu-assist:active {
  background: none !important;
  box-shadow: none !important;
}
.vdu-sticky-bar .vdu-assist-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  transition: background .15s ease;
}
.vdu-sticky-bar .vdu-assist-ava {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--vdu-blu);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
/* dischetto interno BIANCO in OGNI stato (chiuso, aperto, hover) */
.vdu-sticky-bar .vdu-assist-disc {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vdu-sticky-bar .vdu-assist-disc img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
  box-shadow: none;
  margin: 0;
}
.vdu-sticky-bar .vdu-assist-x { display: none; width: 18px; height: 18px; }
.vdu-sticky-bar .vdu-assist-label {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--vdu-blu);
  padding: 4px 8px;
  white-space: nowrap;
  transition: color .15s ease;
}

/* STATO APERTO: bordo e label rossi, immagine Therma nascosta, X rossa visibile. */
.vdu-sticky-bar .vdu-assist.is-open .vdu-assist-ava   { border-color: var(--vdu-red); }
.vdu-sticky-bar .vdu-assist.is-open .vdu-assist-label { color: var(--vdu-red); }
.vdu-sticky-bar .vdu-assist.is-open .vdu-assist-disc img { display: none; }
.vdu-sticky-bar .vdu-assist.is-open .vdu-assist-x        { display: block; }

@media (hover: hover) and (pointer: fine) {
  .vdu-sticky-bar .vdu-assist:hover .vdu-assist-pill  { background: var(--vdu-blu); }
  .vdu-sticky-bar .vdu-assist:hover .vdu-assist-ava   { background: var(--vdu-blu); border-color: var(--vdu-blu); }
  .vdu-sticky-bar .vdu-assist:hover .vdu-assist-label { color: #fff; }
  /* stato aperto in hover: riempimenti ROSSI, dischetto comunque BIANCO con X rossa */
  .vdu-sticky-bar .vdu-assist.is-open:hover .vdu-assist-pill  { background: var(--vdu-red); }
  .vdu-sticky-bar .vdu-assist.is-open:hover .vdu-assist-ava   { background: var(--vdu-red); border-color: var(--vdu-red); }
  .vdu-sticky-bar .vdu-assist.is-open:hover .vdu-assist-label { color: #fff; }
}

/* ── MOBILE ≤700px: SOLI cerchi 46×46 icon-only ────────────────────────────── */
@media (max-width: 700px) {
  .vdu-sticky-bar { padding: 10px 12px; }
  .vdu-sticky-inner { gap: 14px; }
  .vdu-sticky-bar a.vdu-btn,
  .vdu-sticky-bar button.vdu-btn {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
  }
  .vdu-sticky-bar .vdu-lbl { display: none; }
  .vdu-sticky-bar .vdu-ico { width: 20px; height: 20px; }
  .vdu-sticky-bar .vdu-assist-label { display: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 360px) {
  .vdu-sticky-inner { gap: 10px; }
}

/* ── STAMPA ────────────────────────────────────────────────────────────────── */
@media print {
  .vdu-sticky-bar { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ============================================================================
   v2 — 19.10.2026 (RUN-VDU-RIORDINO-2, rilievo 6 del collaudo di Enrico).
   Tutto quello che sta sopra e' la v1 IDENTICA (vdu-sticky.css resta sul disco
   ed e' il ritorno indietro: lo snippet 12 torna a caricarla).
   1. Icona WhatsApp piu' grande: 18 -> 24 px su desktop, 20 -> 27 px nel
      cerchio da 46 px del telefono.
   2. Bottoni della stessa larghezza finche' lo spazio lo consente: la classe
      .is-pari e la larghezza --vdu-btn-w le mette lo script dello snippet 12
      SOLO se la riga ci sta; sul telefono i bottoni sono gia' cerchi da 46 px,
      tutti uguali, e non si toccano (tocchi mai sotto 44 px).
   3. «chiedi a Lella»: bordo grigio leggero di 2 px attorno al controllo.
      L'altezza cresce di 4 px (46 -> 50): lo spazio in fondo al documento
      cresce di altrettanto, perche' la barra non copra il piede.
   Ordine dei bottoni, bolla, nuvoletta e apertura del bot: invariati.
   ============================================================================ */
.vdu-sticky-bar a.vdu-btn--wa .vdu-ico { width: 24px; height: 24px; }
.vdu-sticky-inner.is-pari a.vdu-btn,
.vdu-sticky-inner.is-pari button.vdu-btn { min-width: var(--vdu-btn-w, 0); }
.vdu-sticky-bar .vdu-assist-pill {
  border: 2px solid #5F6368; /* v3 (20.10.2026): grigio scuro, era #D3D7DC */
  padding: 0 8px 0 0;
  transition: background .15s ease, border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .vdu-sticky-bar .vdu-assist:hover .vdu-assist-pill { border-color: var(--vdu-blu); }
  .vdu-sticky-bar .vdu-assist.is-open:hover .vdu-assist-pill { border-color: var(--vdu-red); }
}
body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 700px) {
  .vdu-sticky-bar a.vdu-btn--wa .vdu-ico { width: 27px; height: 27px; }
  .vdu-sticky-bar .vdu-assist-pill { padding: 0; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media print {
  body { padding-bottom: 0 !important; }
}

/* ==========================================================================
   v3 — 20.10.2026 (RUN-VDU-RIORDINO-3) — UNA sola modifica rispetto alla v2:
   il bordo di 2 px di «chiedi a Lella» (.vdu-assist-pill) passa da #D3D7DC a
   grigio scuro #5F6368. Contrasto misurato sullo sfondo della barra
   (rgba(255,255,255,.78)), formula WCAG: 6,05:1 sopra una pagina bianca, 3,58:1
   nel caso peggiore (pagina nera dietro la barra) — sempre almeno 3:1. Hover e stato
   aperto invariati (blu e rosso). La v2 e la v1 restano intatte sul disco.
   ========================================================================== */

/* ==========================================================================
   v4 — 20.10.2026 (RUN-VDU-RIORDINO-4, collaudo di Enrico del 20.10). Tutto
   quello che sta sopra e' la v3 IDENTICA (vdu-sticky-v3.css resta sul disco ed
   e' il ritorno indietro: lo snippet 12 torna a caricarla). Tre cose:
   1. bordo di 2 px di «chiedi a Lella» = ESATTAMENTE il colore del bordo che
      «Chiama» ed «Email» hanno in hover, misurato sullo stile calcolato in
      hover il 20.10.2026 (Chromium e WebKit, 1440 px): rgb(27, 53, 90).
   2. STESSA ALTEZZA per i sei controlli, quella dei bottoni normali (Chiama,
      Email): 44 px su desktop, 46 px sul telefono (cerchi). Prima: WhatsApp 50
      (icona 24 + imbottitura 11+11 + bordo), Lella 50 (avatar 46 + bordo della
      pillola). Ora l'altezza e' fissata e le icone si adattano dentro: icona
      WhatsApp 24 px su desktop e 27 px sul telefono (minimo chiesto 22); avatar
      di Lella 38 px su desktop e 40 px sul telefono (minimo chiesto 32), con la
      foto a 34 px.
   3. avatar di Lella SENZA bordo blu attorno al cerchio e con fondo SEMPRE
      bianco, anche in hover, premuto e al tocco. Lo stato APERTO del bot resta
      segnalato in rosso (etichetta e X come prima; il bordo rosso che era
      sull'avatar passa al bordo della pillola, che sul telefono e' lo stesso
      anello).
   Ordine dei bottoni, larghezze uguali (script «vdu-sticky-pari»), bolla,
   nuvoletta (si posiziona dalla geometria reale della barra) e apertura del
   bot: invariati. Lo spazio in fondo al documento resta quello della v3.
   ========================================================================== */
.vdu-sticky-bar { --vdu-h: 44px; --vdu-lella-bordo: rgb(27, 53, 90); }
.vdu-sticky-bar a.vdu-btn,
.vdu-sticky-bar button.vdu-btn {
  height: var(--vdu-h);
  padding-top: 0;
  padding-bottom: 0;
}
.vdu-sticky-bar .vdu-assist-pill {
  box-sizing: border-box;
  height: var(--vdu-h);
  border: 2px solid var(--vdu-lella-bordo);
  padding: 0 8px 0 1px;
}
.vdu-sticky-bar .vdu-assist-ava,
.vdu-sticky-bar .vdu-assist:hover .vdu-assist-ava,
.vdu-sticky-bar .vdu-assist:focus .vdu-assist-ava,
.vdu-sticky-bar .vdu-assist:active .vdu-assist-ava,
.vdu-sticky-bar .vdu-assist.is-open .vdu-assist-ava {
  width: calc(var(--vdu-h) - 6px);
  height: calc(var(--vdu-h) - 6px);
  border: 0;
  background: #fff;
}
.vdu-sticky-bar .vdu-assist-disc { width: 34px; height: 34px; }
.vdu-sticky-bar .vdu-assist.is-open .vdu-assist-pill { border-color: var(--vdu-red); }
@media (hover: hover) and (pointer: fine) {
  .vdu-sticky-bar .vdu-assist:hover .vdu-assist-ava,
  .vdu-sticky-bar .vdu-assist.is-open:hover .vdu-assist-ava { background: #fff; border: 0; }
  .vdu-sticky-bar .vdu-assist:hover .vdu-assist-pill { border-color: var(--vdu-lella-bordo); }
  .vdu-sticky-bar .vdu-assist.is-open:hover .vdu-assist-pill { border-color: var(--vdu-red); }
}
@media (max-width: 700px) {
  .vdu-sticky-bar { --vdu-h: 46px; }
  .vdu-sticky-bar .vdu-assist-pill { width: var(--vdu-h); padding: 0; }
}