/* =============================================================================
   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; }
}