/* =========================================================================
   MyArmonia — Foglio stile custom
   Caricato DOPO la CSS originale Zyro, quindi vince per specificità senza
   bisogno di !important (lo usiamo solo dove Zyro inline-style sovrascrive).
   Modifiche puramente visive: nessun cambiamento di layout o contenuto.
   ========================================================================= */

:root {
  --ma-brand:        #c78a8a;      /* rosa-cipria del brand */
  --ma-brand-dark:   #8e5757;
  --ma-page-bg:      #fbf3ee;      /* crema-rosa morbida per riempire i "vuoti" fra le sezioni */
  --ma-shadow:       0 18px 40px -12px rgba(86, 50, 50, 0.22),
                     0 8px 16px -8px  rgba(0, 0, 0, 0.10);
  --ma-shadow-soft:  0 6px 18px -8px  rgba(86, 50, 50, 0.14);
  --ma-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ------------------------------------------------------------------
   0) SFONDO PAGINA  —  riempie le striscie "bianche" fra le sezioni
   con un tono morbido del brand, per integrare visivamente i blocchi.
   Zyro non setta un bg sul body ma applica un bg al tag html via stile
   inline, quindi qui sovrascriviamo con !important.
   ------------------------------------------------------------------ */
html,
html.is-myarmonia,
body {
  background-color: var(--ma-page-bg) !important;
  background-image: none !important;
}


/* ------------------------------------------------------------------
   0b) PAGINA PRIVACY  —  niente hover 3D sui paragrafi di testo
   (è una pagina legale: la lettura deve essere statica)
   ------------------------------------------------------------------ */
body[data-page="privacy"] .text-box.layout-element__component--GridTextBox,
body[data-page="privacy"] .text-box.layout-element__component--GridTextBox:hover,
body[data-page="privacy"] a:has(.text-box.layout-element__component--GridTextBox),
body[data-page="privacy"] a:has(.text-box.layout-element__component--GridTextBox):hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}


/* ------------------------------------------------------------------
   0c) OVERLAY LABELS  —  scritte sovrapposte ad un'immagine-card
   (es. "Trattamenti iniettivi" sopra la foto della siringa).
   La classe .ma-overlay-label è messa via JS (form-card-fit.js) sui
   textbox che cadono CENTRATI sopra un'immagine, così possiamo
   spegnere l'effetto hover SOLO su queste senza toccare gli altri.
   ------------------------------------------------------------------ */
.text-box.layout-element__component--GridTextBox.ma-overlay-label,
.text-box.layout-element__component--GridTextBox.ma-overlay-label:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}


/* ------------------------------------------------------------------
   0d) BOX "POSSIBILITÀ INFINITE. INIZIA ORA."
   Lo spostiamo leggermente verso l'alto per dare più aria al CTA
   sottostante. La classe .ma-possibilita è messa via JS.
   IMPORTANTE: usiamo `top` (con position:relative) invece di `transform`,
   perché la nostra regola .transition--slide ha `transform: none !important`
   che farebbe conflitto. position+top non viene sovrascritta.
   ------------------------------------------------------------------ */
.text-box.layout-element__component--GridTextBox.ma-possibilita {
  position: relative;
  top: -22px;
}


/* ------------------------------------------------------------------
   0e) PILL CTA  —  "LA CHIRURGIA ESTETICA", "LA MEDICINA ESTETICA"
   Le pillole rosa nei blocchi-categoria della home erano troppo
   strette: aumentiamo larghezza minima e padding orizzontale.
   ESCLUDIAMO il pulsante del form (.form__button) per non gonfiarlo.
   `justify-self: center` + `margin: ... auto` mantengono la pill
   centrata anche quando la sua larghezza è maggiore della sua cella
   nel grid.
   ------------------------------------------------------------------ */
a.grid-button.grid-button--primary.layout-element__component:not(.form__button),
.grid-button.grid-button--primary.layout-element__component:not(.form__button) {
  min-width: 340px;
  padding-left: 36px !important;
  padding-right: 36px !important;
  justify-self: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}


/* ------------------------------------------------------------------
   1) CASELLE DI TESTO  —  bordi morbidi + hover fluido con ingrandimento
   ------------------------------------------------------------------ */
.text-box.layout-element__component--GridTextBox {
  border-radius: 16px;
  /* NB: niente padding qui — riduceva lo spazio nelle celle a larghezza
     fissa di Zyro e mandava a capo etichette corte come "CORPO". */
  /* il transform è centrato sul box: nessuna sovrapposizione con i vicini */
  transform-origin: center center;
  transition: transform     0.35s var(--ma-ease),
              box-shadow    0.35s var(--ma-ease),
              filter        0.35s ease;
  will-change: transform;
  backface-visibility: hidden;
  /* permette al box di "uscire" dalla griglia senza essere clippato */
  overflow: visible;
}

/* Hover: scala più contenuta (1.02) per non invadere il box accanto, e
   leggero rialzo + ombra rosa morbida. */
.text-box.layout-element__component--GridTextBox:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--ma-shadow);
  filter: brightness(1.02);
  z-index: 5;
  position: relative;
}

/* Se la casella è dentro un link cliccabile, l'animazione la fa il link */
a:hover .text-box.layout-element__component--GridTextBox,
a:focus-visible .text-box.layout-element__component--GridTextBox {
  transform: none;
  box-shadow: none;
}

a:has(.text-box.layout-element__component--GridTextBox) {
  display: inline-block;
  border-radius: 16px;
  transform-origin: center center;
  transition: transform 0.35s var(--ma-ease),
              box-shadow 0.35s var(--ma-ease);
  will-change: transform;
}
a:has(.text-box.layout-element__component--GridTextBox):hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--ma-shadow);
}

/* I textbox di indirizzi/footer (piccoli, 25px alti) restano statici:
   l'hover su una riga di indirizzo non deve "saltare" sopra a quella sotto. */
.text-box.layout-element__component--GridTextBox:has(a[href*="maps"]),
.text-box.layout-element__component--GridTextBox:has(a[href*="share.google"]) {
  padding: 0;
}
.text-box.layout-element__component--GridTextBox:has(a[href*="maps"]):hover,
.text-box.layout-element__component--GridTextBox:has(a[href*="share.google"]):hover {
  transform: none;
  box-shadow: none;
  filter: none;
}


/* ------------------------------------------------------------------
   ANIMAZIONI DI ENTRATA "SLIDE/FADE"  —  fix
   Zyro nasconde alcuni blocchi (opacity:0) finché il suo runtime JS li
   anima quando entrano in viewport. Avendo disattivato il runtime per
   togliere gli errori di idratazione, restavano invisibili (es. due
   indirizzi nel footer). Le forziamo visibili.
   ------------------------------------------------------------------ */
.transition,
.transition--slide,
.transition--fade,
[class*="transition--"] {
  opacity: 1 !important;
  transform: none !important;
}


/* ------------------------------------------------------------------
   IMMAGINI delle CARD (Trattamenti iniettivi / pelle / corpo, ecc.)
   Zyro ha due versioni di ogni immagine: '--desktop' e '--mobile'.
   Quando sono dentro un '.image-wrapper--layout', il CSS originale
   forza SEMPRE la versione mobile e nasconde la desktop, contando
   sul runtime JS per fare lo switch. Con il runtime spento, su
   desktop si vedeva la mobile (a 232 px) o nulla. Ripristiniamo
   con una media query.
   ------------------------------------------------------------------ */
@media (min-width: 920px) {
  .image-wrapper--layout .image-wrapper--desktop {
    display: block !important;
  }
  .image-wrapper--layout .image-wrapper--mobile {
    display: none !important;
  }
}


/* La precedente regola che dava `margin-top: 32px` al blocco-form è stata
   rimossa: creava una fascia bianca visibile fra le sezioni. La
   sovrapposizione che giustificava quel margine non si presenta più ora
   che `.transition--slide` ha opacity:1 e i blocchi mantengono la
   spaziatura originale di Zyro. */


/* ------------------------------------------------------------------
   COOKIE BANNER  —  rimosso completamente
   ------------------------------------------------------------------ */
.cookie-banner,
.cookie-banner__frame,
.cookie-banner__controls,
.cookie-banner__text,
[class*="cookie-banner"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ------------------------------------------------------------------
   2) MODULO CONTATTI / PREVENTIVO  —  solo grafica, niente testi né
      funzionalità toccate
   ------------------------------------------------------------------ */

/* contenitore form: spigoli morbidi + leggera ombra in focus-within */
.form.layout-element__component--GridForm,
.form.layout-element__component {
  border-radius: 22px;
  transition: box-shadow 0.35s var(--ma-ease);
  /* respiro orizzontale interno: la "N" di "Nome*" non tocca più il bordo */
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.form.layout-element__component--GridForm:focus-within {
  box-shadow: var(--ma-shadow-soft);
}

/* La "card crema" dietro al form è in realtà una <svg> .grid-shape.
   form-card-fit.js calcola dinamicamente il clip-path corretto per ogni
   pagina/viewport. Qui sotto solo un valore di fallback (~95 px) nel caso
   il JS non si carichi, così almeno il pulsante non resta dentro la card. */
.block-layout:has(.form.layout-element__component--GridForm)
  .layout-element:has(> .grid-shape.layout-element__component--GridShape) {
  clip-path: inset(0 0 95px 0 round 22px);
}

/* piccolo respiro tra il textarea e il pulsante */
.form.layout-element__component--GridForm .form__button.grid-button--primary {
  margin-top: 12px;
}

/* singoli campi del form */
.input__component,
.input__component--textarea,
.select-input__input,
.form__control input,
.form__control textarea,
.form__control select {
  border-radius: 14px !important;
  transition: border-color 0.25s ease,
              box-shadow   0.25s ease,
              background-color 0.25s ease;
}

/* focus state — un alone tenue del colore brand */
.input__component:focus,
.input__component--textarea:focus,
.select-input__input:focus,
.form__control input:focus,
.form__control textarea:focus,
.form__control select:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(199, 138, 138, 0.18) !important;
  border-color: var(--ma-brand) !important;
}

/* etichette: micro-respiro */
.input__label,
.input__label--light {
  letter-spacing: 0.01em;
}


/* ------------------------------------------------------------------
   3) BOTTONI  —  rotondi, con leggero rialzo all'hover
   ------------------------------------------------------------------ */
.grid-button,
.grid-button--primary {
  border-radius: 16px !important;
  transition: transform   0.25s var(--ma-ease),
              box-shadow  0.25s var(--ma-ease),
              filter      0.25s ease,
              background-color 0.25s ease;
  will-change: transform;
}

.grid-button:hover,
.grid-button--primary:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 14px 26px -10px rgba(86, 50, 50, 0.35);
  filter: brightness(1.06);
}

.grid-button:active,
.grid-button--primary:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 0.08s;
}


/* ------------------------------------------------------------------
   4) RIDUZIONE DEL MOTO PER L'ACCESSIBILITÀ
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .text-box.layout-element__component--GridTextBox,
  .text-box.layout-element__component--GridTextBox:hover,
  .grid-button:hover,
  .grid-button--primary:hover,
  a:has(.text-box.layout-element__component--GridTextBox):hover {
    transform: none;
    transition: none;
  }
}


/* ==================================================================
   5) ESPERIENZA DI NAVIGAZIONE  —  rifiniture UI/UX
   (nessun cambiamento di colori, immagini o contenuti)
   ================================================================== */

/* ---- 5a) Rendering del testo più nitido e pulito --------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- 5b) Scroll fluido in tutta la pagina --------------------- */
html {
  scroll-behavior: smooth;
  /* compensa l'header sticky quando si salta a un'ancora */
  scroll-padding-top: 120px;
}

/* ---- 5c) Selezione del testo nel tono del brand --------------- */
::selection {
  background: rgba(199, 138, 138, 0.28);
  color: #6d4c43;
}

/* ---- 5d) Scrollbar sottile e coordinata ---------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #d8aeae var(--ma-page-bg);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ma-page-bg); }
::-webkit-scrollbar-thumb {
  background: #dcb4b4;
  border-radius: 20px;
  border: 3px solid var(--ma-page-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ma-brand); }

/* ---- 5e) Focus accessibile (solo da tastiera) ---------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(199, 138, 138, 0.55) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}


/* ------------------------------------------------------------------
   6) HEADER STICKY  —  il menu resta sempre raggiungibile
   L'header ha già un <div class="background"> color crema opaco, quindi
   il contenuto NON traspare quando scrolliamo. Aggiungiamo solo un'ombra
   morbida (che compare dopo lo scroll) e una transizione fluida.
   ------------------------------------------------------------------ */
.block-header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.35s var(--ma-ease);
}
/* l'ombra appare solo quando la pagina è stata scrollata (classe da JS) */
body.ma-scrolled .block-header {
  box-shadow: 0 10px 30px -16px rgba(86, 50, 50, 0.35);
}
/* assicura che lo sfondo crema copra l'intera barra sticky */
.block-header .block-background,
.block-header .background {
  background-color: #fdfaf6 !important;
}


/* ------------------------------------------------------------------
   7) NAVIGAZIONE  —  underline animato + hover morbido sui link menu
   ------------------------------------------------------------------ */
.block-header__nav-links .item-content {
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}
/* la linea che cresce dal centro all'hover */
.block-header__nav-links .item-content::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -4px;
  height: 2px;
  background: var(--ma-brand);
  border-radius: 2px;
  transition: left 0.28s var(--ma-ease), right 0.28s var(--ma-ease);
}
.block-header__nav-links .item-content:hover::after,
.block-header__nav-links .item-content:focus-visible::after {
  left: 8%;
  right: 8%;
}
.block-header__nav-links .item-content:hover {
  opacity: 0.92;
}


/* ------------------------------------------------------------------
   8) PULSANTE "TORNA SU"  —  FAB discreto, appare dopo lo scroll
   Posizionato sopra il bottone WhatsApp (in basso a destra).
   ------------------------------------------------------------------ */
#ma-to-top {
  position: fixed;
  right: 22px;
  bottom: 96px;            /* sopra il FAB WhatsApp */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ma-brand-dark);
  box-shadow: 0 8px 22px -8px rgba(86, 50, 50, 0.45);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;       /* non cliccabile quando nascosto */
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.3s var(--ma-ease),
              transform 0.3s var(--ma-ease),
              background-color 0.25s ease;
  z-index: 60;
}
#ma-to-top svg { width: 22px; height: 22px; display: block; }
body.ma-scrolled #ma-to-top {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#ma-to-top:hover {
  background: var(--ma-brand);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
}
#ma-to-top:active { transform: translateY(0) scale(0.97); }

@media (max-width: 600px) {
  #ma-to-top { right: 16px; bottom: 84px; width: 42px; height: 42px; }
}


/* ------------------------------------------------------------------
   9) FADE-IN MORBIDO DELLE IMMAGINI quando finiscono di caricare
   (fallback: senza JS le immagini restano comunque visibili)
   ------------------------------------------------------------------ */
body.ma-js img.ma-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.ma-js img.ma-fade.ma-loaded {
  opacity: 1;
}


/* ------------------------------------------------------------------
   10) MOTO RIDOTTO  —  estende anche le nuove animazioni
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #ma-to-top,
  .block-header,
  .block-header__nav-links .item-content::after {
    transition: none !important;
  }
  body.ma-js img.ma-fade { opacity: 1 !important; }
}


/* ==================================================================
   11) RESTYLING GRAFICO  —  "moderno ed elegante", ben integrato
   Solo profondità, sfumature e morbidezza: colori/foto/testi invariati.
   Le classi .ma-pill e .ma-card-text sono assegnate via JS in base al
   colore di sfondo del box (vedi form-card-fit.js).
   ================================================================== */

/* ---- 11a) PILLOLE ROSA (titoli/sottotitoli) ------------------- */
/* Sfumatura morbida sul rosa del brand + ombra colorata + angoli dolci.
   Il colore base resta rgb(242,139,150): lo arricchiamo, non lo cambiamo. */
.text-box.layout-element__component--GridTextBox.ma-pill {
  background-image: linear-gradient(135deg,
                      rgb(246, 150, 161) 0%,
                      rgb(238, 126, 138) 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 28px -12px rgba(216, 110, 124, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---- 11b) RIQUADRI CREMA  —  effetto "vetro" leggero ---------- */
/* Sfondo crema semi-trasparente + sfocatura: moderno e leggero,
   resta perfettamente leggibile (testo marrone scuro su crema 88%). */
.text-box.layout-element__component--GridTextBox.ma-card-text {
  background-color: rgba(253, 250, 246, 0.88) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
  border-radius: 20px !important;
  box-shadow: 0 16px 40px -20px rgba(86, 50, 50, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ---- 11c) CARD IMMAGINI  —  profondità + zoom morbido --------- */
/* vale per le foto-card (corpo/seno/viso, trattamenti, ecc.),
   non per il logo header né per gli sfondi di sezione. */
.block:not(.block--header) .image-wrapper--layout {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(86, 50, 50, 0.42);
  transition: transform 0.45s var(--ma-ease),
              box-shadow 0.45s var(--ma-ease);
  will-change: transform;
}
.block:not(.block--header) .image-wrapper--layout:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 56px -22px rgba(86, 50, 50, 0.52);
}
/* lo zoom dell'immagine dentro la card */
.block:not(.block--header) .image-wrapper--layout img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.block:not(.block--header) .image-wrapper--layout:hover img {
  transform: scale(1.06);
}

/* ---- 11d) REVEAL ALLO SCROLL  —  dissolvenza delicata -------- */
/* Solo opacità (nessun transform): non altera mai il layout né le
   immagini di sfondo. La classe .ma-reveal è messa da JS solo sui
   blocchi sotto la piega; un timeout di sicurezza rivela comunque tutto. */
body.ma-js .block.ma-reveal {
  opacity: 0;
  transition: opacity 0.9s ease;
}
body.ma-js .block.ma-reveal.ma-reveal-in {
  opacity: 1;
}

/* ---- 11e) BOTTONI CTA  —  tocco premium ---------------------- */
.grid-button.grid-button--primary {
  background-image: linear-gradient(135deg,
                      rgb(238, 138, 149) 0%,
                      rgb(228, 116, 128) 100%);
  box-shadow: 0 10px 24px -12px rgba(216, 110, 124, 0.6);
}

/* ---- 11f) accessibilità: niente reveal/zoom se moto ridotto --- */
@media (prefers-reduced-motion: reduce) {
  body.ma-js .block.ma-reveal { opacity: 1 !important; }
  .block:not(.block--header) .image-wrapper--layout,
  .block:not(.block--header) .image-wrapper--layout img {
    transition: none !important;
    transform: none !important;
  }
}


/* ==================================================================
   12) ELEMENTI STATICI  —  niente effetto "bottone" al passaggio mouse
   Il FOOTER (logo, "MILANO BERGAMO ROMA OLBIA", indirizzi) e il box
   "Risposta entro 24h" non sono card cliccabili: devono restare fermi.
   ================================================================== */

/* footer: tutti i box di testo restano statici */
.block--footer .text-box.layout-element__component--GridTextBox,
.block--footer .text-box.layout-element__component--GridTextBox:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* footer: il logo NON è una card → niente ombra, zoom o angoli da card */
.block--footer .image-wrapper--layout,
.block--footer .image-wrapper--layout:hover {
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.block--footer .image-wrapper--layout img,
.block--footer .image-wrapper--layout:hover img {
  transform: none !important;
}

/* box marcati .ma-static (es. "Risposta entro 24h") restano fermi */
.text-box.layout-element__component--GridTextBox.ma-static,
.text-box.layout-element__component--GridTextBox.ma-static:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}