/* ==========================================================================
   Clinica Informatica · adattamento del design system al markup di Elementor
   Scritto a mano. Il design system (clin.css) è il CSS del sito statico, generato.
   Regole a specificità bassa dove possibile: quello che si imposta nel pannello di Elementor vince.
   ========================================================================== */

/* ---------- 1. contenitori ---------- */
/* i pannelli "incassati" hanno i margini laterali: con width 100% di Elementor uscirebbero dallo schermo */
.e-con:is(.panel, .site-footer) { width: auto; max-width: none; }
.e-con.container { width: 100%; }
/* le file di bottoni: i bottoni prendono la loro larghezza, non quella della fila */
.e-con.actions > .elementor-widget { width: auto; }
.e-con:is(.head__side, .page-hero__aside) > .elementor-widget { width: auto; }
/* nell'apertura delle pagine interne valutazione, "aperto ora" ed etichette sono elementi della griglia, non righe di testo */
.e-con.page-hero__aside > .elementor-widget { display: flex; }
/* GSAP anima le trasformazioni: la transizione di Elementor sui contenitori le rallenterebbe */
.motion .e-con:is(.reveal, .stagger > *, .parallax-media, .hero-in) { transition: none; }
/* la fisarmonica "scaglionata": compaiono le domande, non il loro contenitore */
.motion .stagger > .e-n-accordion { opacity: 1; }
.motion .stagger > .e-n-accordion > details { opacity: 0; }

/* header del Theme Builder: la barra è fissa, il contenitore non occupa spazio */
.e-con.testata, .e-con.barra-mobile { padding: 0; min-height: 0; height: 0; }

/* ---------- 2. titoli ---------- */
/* Le classi del sito (h2, head__title, hero__title...) sono sul contenitore del widget Titolo:
   il contenitore prende la tipografia di base dei titoli del sito, il titolo interno la eredita. */
:where(.elementor-widget-heading):has(> :is(h1, h2, h3)) { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.elementor-widget-heading > .elementor-heading-title { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-wrap: inherit; }

/* ---------- 3. testi ---------- */
/* il puntino verde "in linea" del kicker, se l'Editor di testo toglie lo span vuoto */
.hero__kicker > p { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__kicker > p:not(:has(.dot))::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--success); animation: live 2s var(--ease) infinite; }
/* la bolla arancio con la chiave inglese che gira, dentro i titoli (il widget Titolo non conserva gli SVG) */
.bubble:not(:has(svg))::before { content: ''; width: 0.58em; height: 0.58em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a3.5 3.5 0 0 0 4.2 4.2L21 13l-2 2-2.3-2.3-8.2 8.2a1.5 1.5 0 0 1-2.1-2.1l8.2-8.2L12.3 8.3l2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a3.5 3.5 0 0 0 4.2 4.2L21 13l-2 2-2.3-2.3-8.2 8.2a1.5 1.5 0 0 1-2.1-2.1l8.2-8.2L12.3 8.3l2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bubble[data-spin]:not(:has(svg))::before { animation: bubble-spin 6s linear infinite; }
/* ---------- 4. immagini ---------- */
.elementor-widget-image.pic img { display: block; width: 100%; }
/* la didascalia delle foto (nel sito statico <figcaption>: Elementor non ha quel tag per i contenitori) */
.figure .e-con.didascalia { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: row; gap: 0.4rem; flex-wrap: wrap; width: auto; }
.figure .e-con.didascalia > .elementor-widget { width: auto; }

/* ---------- 5. domande frequenti (Fisarmonica annidata di Elementor) ---------- */
/* Le misure passano dalle variabili della Fisarmonica: il pannello di Elementor, se usato, le cambia ancora. */
.elementor-widget-n-accordion.faq {
  --n-accordion-padding: 1.1rem 1.1rem 1.1rem 1.25rem; --n-accordion-border-width: 0px; --n-accordion-border-radius: var(--r-card);
  --n-accordion-title-font-size: 1.15rem; --n-accordion-title-icon-order: 1; --n-accordion-icon-gap: 1rem;
  --n-accordion-title-normal-color: var(--ink); --n-accordion-title-hover-color: var(--ink); --n-accordion-title-active-color: var(--ink);
  counter-reset: faq;
}
.elementor-widget-n-accordion.faq .e-n-accordion { display: grid; gap: 0.5rem; }
.elementor-widget-n-accordion.faq .e-n-accordion-item { background: var(--paper); border-radius: var(--r-card); transition: background-color 0.35s var(--ease); counter-increment: faq; }
.elementor-widget-n-accordion.faq .e-n-accordion-item-title { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; min-height: 64px; }
.elementor-widget-n-accordion.faq .e-n-accordion-item-title::before { content: counter(faq, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; font-weight: 500; color: var(--text-3); }
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-header { display: block; }
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-text { font: inherit; font-size: 1.15rem; }
/* il più nel cerchio: l'icona di Elementor si nasconde, il segno lo disegna il CSS (ruota di 45° quando è aperta) */
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; transition: transform 0.45s var(--ease), background-color 0.35s var(--ease); }
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon > span { display: none !important; }
.elementor-widget-n-accordion.faq .e-n-accordion-item-title-icon::before { content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.elementor-widget-n-accordion.faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon { transform: rotate(45deg); background: var(--accent); }
.elementor-widget-n-accordion.faq .e-n-accordion-item > .e-con.faq__a { padding: 0 1.25rem 1.35rem calc(1.25rem + 2.2rem); color: var(--text-2); max-width: 70ch; }
.elementor-widget-n-accordion.faq .faq__a p + p { margin-top: 0.75rem; }
@media (max-width: 600px) {
  .elementor-widget-n-accordion.faq .e-n-accordion-item > .e-con.faq__a { padding-left: 1.25rem; }
  .elementor-widget-n-accordion.faq .e-n-accordion-item-title { grid-template-columns: minmax(0, 1fr) auto; }
  .elementor-widget-n-accordion.faq .e-n-accordion-item-title::before { display: none; }
}

/* ---------- 6. footer ---------- */
.footer .elementor-icon-list-items { display: grid; gap: 0.35rem; }
/* come i <li> del sito: riga alta quanto il testo del sito (1rem × 1,6), link più piccolo in linea */
.footer .elementor-icon-list-item { display: block; font-size: 1rem; line-height: 1.6; }
.footer .elementor-icon-list-item > a { display: inline; font-size: 0.9375rem; }
.footer .elementor-icon-list-text { color: inherit; padding: 0; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.footer__legal .linklike { font-size: 0.8125rem; color: var(--on-ink-2); }
/* pagine senza il riquadro finale (impostazioni pagina > Clinica Informatica) */
.senza-cta .site-footer { margin-top: var(--frame); }
.senza-cta .site-footer > .cta { display: none; }
.senza-cta .site-footer .footer { border-radius: var(--r-panel); }
.senza-cta .site-footer .footer__top { border-top: 0; }
/* barra mobile nascosta dalla pagina */
.no-mobile-bar .mobile-bar { display: none; }

/* ---------- 7. modulo di richiesta (Form di Elementor Pro) ---------- */
/* Come nel sito statico: gruppi numerati, etichetta con "facoltativo" a destra, campo, testo d'aiuto sotto il campo.
   L'etichetta di Elementor contiene nome, "facoltativo" e aiuto: con display: contents i tre pezzi si dispongono
   intorno al campo (l'etichetta resta un'etichetta per i lettori di schermo e per il clic). */
.elementor-widget-form.modulo-clinica { display: block; }
/* spazi fra i campi: impostazioni "Spazio fra colonne / righe" del Form (1,1rem), scritte dal convertitore */
.modulo-clinica .elementor-field-group { flex-wrap: wrap; align-items: baseline; column-gap: 1rem; }
/* campo con etichetta: griglia come il .field del sito (etichetta | facoltativo, campo, aiuto); nelle file a due
   colonne i campi si allungano insieme, come nel sito statico */
.modulo-clinica .elementor-field-group:has(> .elementor-field-label):not(.elementor-field-type-acceptance, .elementor-field-type-radio) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.45rem; align-content: stretch; }
.modulo-clinica .elementor-field-group:has(> .elementor-field-label) > :is(input, select, textarea, .elementor-select-wrapper, .elementor-message) { grid-column: 1 / -1; margin-top: 0 !important; align-self: stretch; height: auto; }
.modulo-clinica .elementor-field-group:has(> .elementor-field-label) .field__hint { grid-column: 1 / -1; margin-top: 0 !important; }
.modulo-clinica .elementor-field-group:has(> .elementor-field-label) .field__opt { grid-column: 2; }
/* titoletti dei gruppi (1 Chi sei, 2 Il dispositivo...): 2,25rem dal gruppo prima, 0,25rem dal primo campo */
.modulo-clinica .elementor-form-fields-wrapper > .elementor-field-group.elementor-field-type-html:has(.form__legend) { margin-top: 1.15rem; margin-bottom: 0.25rem; }
.modulo-clinica .elementor-form-fields-wrapper > .elementor-field-group.elementor-field-type-html:has(.form__legend):first-child { margin-top: 0; }
.modulo-clinica .elementor-field-type-html:first-child { margin-top: 0; }
.modulo-clinica .form__legend { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.6; margin: 0; }
.modulo-clinica .form__legend b { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: inline-grid; place-items: center; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; }
.modulo-clinica .elementor-field-label { display: contents; font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.modulo-clinica .elementor-field-label > span:first-child { font-size: 0.9375rem; font-weight: 500; line-height: 1.6; }
.modulo-clinica .elementor-field-label abbr { color: var(--accent-deep); text-decoration: none; }
.modulo-clinica .elementor-field-label .field__opt { margin-left: auto; font-weight: 400; color: var(--text-3); font-size: 0.8125rem; line-height: 1.6; }
.modulo-clinica .elementor-field-group > :is(input, select, textarea, .elementor-select-wrapper) { order: 2; flex-basis: 100%; margin-top: 0.45rem; }
.modulo-clinica .elementor-field-label .field__hint { order: 3; flex-basis: 100%; font-weight: 400; font-size: 0.8125rem; line-height: 1.6; color: var(--text-3); margin-top: 0.45rem; }
.modulo-clinica .elementor-field-group :is(input.elementor-field-textual, select, textarea, .elementor-upload-field) { width: 100%; min-height: 52px; padding: 0.8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background-color: var(--cream); color: var(--ink); font-size: 1rem; font-family: var(--font-body); line-height: 1.6; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.modulo-clinica .elementor-field-group textarea.elementor-field { min-height: 140px; resize: vertical; line-height: 1.5; }
.modulo-clinica .elementor-field-group :is(input, textarea)::placeholder { color: #8e8b84; }
.modulo-clinica .elementor-field-group :is(input.elementor-field-textual, select, textarea):hover { border-color: rgba(27, 27, 31, 0.35); }
.modulo-clinica .elementor-field-group :is(input.elementor-field-textual, select, textarea):focus { outline: none; border-color: var(--ink); background-color: var(--paper); box-shadow: 0 0 0 4px var(--accent-soft); }
.modulo-clinica .elementor-select-wrapper .select-caret-down-wrapper { display: none; }
.modulo-clinica .elementor-select-wrapper { width: 100%; display: grid; }
.modulo-clinica .elementor-select-wrapper select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px; padding-right: 2.75rem; }
.modulo-clinica .elementor-field-group input.elementor-upload-field { padding: 0.65rem; min-height: auto; }
.modulo-clinica .elementor-upload-field::file-selector-button { margin-right: 1rem; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); padding: 0.55rem 1rem; font-weight: 500; cursor: pointer; }
/* scelte a pillola (preferenza di contatto) */
.modulo-clinica .elementor-field-type-radio .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-basis: 100%; }
.modulo-clinica .elementor-field-type-radio .elementor-field-option { position: relative; margin: 0; padding: 0; }
.modulo-clinica .elementor-field-type-radio .elementor-field-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.modulo-clinica .elementor-field-type-radio .elementor-field-option label { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 0.9375rem; font-weight: 500; line-height: 1.6; transition: all var(--dur-fast) var(--ease); cursor: pointer; }
.modulo-clinica .elementor-field-type-radio .elementor-field-option input:checked + label { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.modulo-clinica .elementor-field-type-radio .elementor-field-option input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* consenso privacy */
.modulo-clinica .elementor-field-type-acceptance .elementor-field-subgroup { flex-basis: 100%; }
.modulo-clinica .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.6; }
.modulo-clinica .elementor-field-type-acceptance input { width: 22px; height: 22px; min-height: 0; accent-color: var(--ink); margin: 0.1rem 0 0; flex: none; }
.modulo-clinica .elementor-field-type-acceptance a { color: var(--ink); }
.modulo-clinica .elementor-field-type-acceptance abbr { color: var(--accent-deep); text-decoration: none; }
/* riga finale: la nota a sinistra, il bottone a destra, un filetto sopra entrambi */
.modulo-clinica .elementor-field-group:is(.elementor-field-group-nota, .e-form__buttons) { margin-top: 1.15rem; padding-top: 1.5rem; align-items: center; background: linear-gradient(var(--line), var(--line)) no-repeat; background-size: calc(100% - 0.55rem) 1px; }
.modulo-clinica .elementor-field-group-nota { background-position: 0.55rem 0; }
.modulo-clinica .e-form__buttons { background-position: 0 0; justify-content: flex-end; }
/* sul telefono la nota e il bottone vanno a capo (come nel sito): un solo filetto, sopra la nota; bottone a sinistra */
@media (max-width: 767px) {
  .modulo-clinica .elementor-field-group-nota { background-size: calc(100% - 1.1rem) 1px; }
  .modulo-clinica .elementor-field-group.e-form__buttons { margin-top: -0.1rem; padding-top: 0; background: none; justify-content: flex-start; }
}
.modulo-clinica p.form__note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-2); margin: 0; }
.modulo-clinica p.form__note::before { content: ''; width: 1.15em; height: 1.15em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.modulo-clinica .e-form__buttons .elementor-button { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.45rem 0.45rem 0.45rem 1.6rem; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1; width: auto; flex-basis: auto; }
.modulo-clinica .e-form__buttons .elementor-button:hover { background: #ff9d47; color: var(--accent-ink); }
.modulo-clinica .e-form__buttons .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 0.75rem; }
.modulo-clinica .e-form__buttons .elementor-button-content-wrapper::after { content: ''; width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8f2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.modulo-clinica .elementor-message { font-size: 0.9375rem; font-weight: 500; margin-top: 1rem; }
.modulo-clinica .elementor-message.elementor-message-danger { background: var(--rose); color: var(--rose-ink); border-radius: var(--r-sm); padding: 0.9rem 1.1rem; }
.modulo-clinica .elementor-error :is(input, select, textarea) { border-color: var(--error); box-shadow: 0 0 0 3px rgba(217, 61, 43, 0.12); }
.modulo-clinica .elementor-field-group .elementor-message.elementor-help-inline { order: 4; flex-basis: 100%; color: var(--error); font-size: 0.875rem; font-weight: 500; margin-top: 0.45rem; }

/* ---------- 8. editor di Elementor ---------- */
/* nell'anteprima dell'editor le animazioni sono spente: tutto è visibile e fermo */
.clin-anteprima .site-header { position: absolute; }