/* GARAN (25/10/2026): etichetta UE della garanzia commerciale di durabilità (compatta + finestra con
   l'etichetta intera) e avviso armonizzato sulla garanzia legale. Scheda prodotto e checkout.
   HTML: includes/functions/garan.php (garan_html_*), comportamento: js/drako_garan.js.
   Le immagini sono i file ufficiali UE: qui si decidono solo posto e misura, mai colori o proporzioni.
   REGOLA DEL SITO: un pulsante non si sottolinea mai, nemmeno al passaggio del mouse. */

/* ---- etichetta compatta (pulsante con l'immagine) ---- */
.garan-scheda { margin: 12px 0 0; }
.garan-scheda--piccola { margin: 4px 0 0; }
.garan-compatta {
  display: inline-block; margin: 0; padding: 3px 0; border: 0; border-radius: 4px;
  background: transparent; line-height: 0; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.garan-compatta:hover, .garan-compatta:focus, .garan-compatta:active { text-decoration: none; background: transparent; }
.garan-compatta:focus-visible { outline: 2px solid var(--drako-focus-ring, #1c63ab); outline-offset: 2px; }
.garan-compatta img { display: block; height: 28px; width: auto; max-width: 100%; }
.garan-compatta--piccola img { height: 22px; }

/* ---- riga «I tuoi diritti di garanzia legale» ---- */
.garan-avviso { margin: 10px 0 0; }
.garan-avviso-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 0; border: 0;
  background: transparent; color: var(--drako-accent, #1c63ab); text-align: left; text-decoration: none;
  font: 500 13px/1.3 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.garan-avviso-btn::before {
  content: ""; flex: 0 0 16px; 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'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%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'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.garan-avviso-btn:hover, .garan-avviso-btn:focus, .garan-avviso-btn:active {
  text-decoration: none; background: transparent; color: var(--drako-accent-hover, #154f8a);
}
.garan-avviso-btn:focus-visible { outline: 2px solid var(--drako-focus-ring, #1c63ab); outline-offset: 2px; border-radius: 3px; }

/* ---- la finestra (<dialog>): etichetta intera o avviso ---- */
.garan-dlg {
  box-sizing: border-box; width: min(560px, calc(100vw - 16px)); max-width: none;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  margin: auto; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: #fff; color: #231f20; box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  font: 400 14px/1.5 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.garan-dlg::backdrop { background: rgba(13, 27, 42, .62); }
body.garan-aperta { overflow: hidden; }
.garan-dlg-corpo {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
}
.garan-dlg-testa {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 2px 16px; border-bottom: 1px solid #e5e7eb;
}
.garan-dlg .garan-dlg-titolo {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #231f20;
  letter-spacing: 0; text-transform: none;
  font: 600 15px/1.35 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.garan-dlg-chiudi {
  flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #444; text-decoration: none; cursor: pointer;
  font: 400 28px/1 Arial, sans-serif; -webkit-tap-highlight-color: transparent;
}
.garan-dlg-chiudi:hover, .garan-dlg-chiudi:focus, .garan-dlg-chiudi:active { background: #f0f1f3; color: #111; text-decoration: none; }
.garan-dlg-chiudi:focus-visible { outline: 2px solid #1c63ab; outline-offset: -2px; }
.garan-dlg-scorri {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px 16px; -webkit-overflow-scrolling: touch;
}
.garan-dlg-img { display: block; width: 100%; height: auto; margin: 0 auto; }
.garan-dlg-nota { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.garan-dlg-link { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.garan-dlg-link a { display: inline-block; padding: 6px 0; color: #1c63ab; text-decoration: underline; }
.garan-dlg-link a:hover { color: #154f8a; }

/* ---- tema scuro: la finestra prende la superficie del tema. Le regole globali del tema scuro
   schiariscono titoli, testi, pulsanti e collegamenti: su un fondo bianco sparirebbero. Le immagini
   ufficiali (etichetta e avviso) restano com'è, con il loro fondo bianco. ---- */
html[data-theme="dark"] .garan-dlg { background: var(--drako-bg-surface, #22262e) !important; color: var(--drako-text, #f0f2f5) !important; }
html[data-theme="dark"] .garan-dlg .garan-dlg-testa { border-bottom-color: var(--drako-border, #2a2f38) !important; }
html[data-theme="dark"] .garan-dlg .garan-dlg-titolo,
html[data-theme="dark"] .garan-dlg .garan-dlg-nota { color: var(--drako-text, #f0f2f5) !important; background: transparent !important; }
html[data-theme="dark"] .garan-dlg .garan-dlg-chiudi { color: var(--drako-text-secondary, #b0b8c4) !important; background: transparent !important; }
html[data-theme="dark"] .garan-dlg .garan-dlg-chiudi:hover,
html[data-theme="dark"] .garan-dlg .garan-dlg-chiudi:focus { color: var(--drako-text, #f0f2f5) !important; background: var(--drako-bg-hover, #323840) !important; }
html[data-theme="dark"] .garan-dlg .garan-dlg-link a { color: var(--drako-accent-hover, #5a9dc8) !important; }

/* ---- testo per i lettori di schermo (l'avviso è un'immagine di soli tracciati) ---- */
.garan-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- configuratori (.dcfg-on): la fascia informazioni è una cella della griglia con il riquadro
   «come lo costruiamo» alto il 100% della cella (drako_pc_configurator_embed.css); la riga dell'avviso,
   che segue, ci sbordava sotto e toccava il blocco delle opzioni. La fascia diventa una colonna e il
   riquadro prende lo spazio che resta, così la riga ha il suo posto. ---- */
.drako-pi-wrapper.dcfg-on > .drako-pi-info { display: flex; flex-direction: column; }
.drako-pi-wrapper.dcfg-on > .drako-pi-info > .drako-pi-buildinfo { flex: 1 1 auto; height: auto; min-height: 0; }
.drako-pi-wrapper.dcfg-on > .drako-pi-info > .garan-avviso { flex: 0 0 auto; }

/* ---- scheda prodotto sul telefono: la colonna sinistra è «display:contents» e i suoi pezzi si
   ordinano nella colonna unica (vedi il blocco «TELEFONO» di product_info.php): l'etichetta segue la foto ---- */
@media (max-width: 900px) {
  .drako-pi-wrapper:not(.dcfg-on) > .drako-pi-left > .garan-scheda { order: 2; margin: -6px 0 12px; }
}
@media (max-width: 480px) {
  .garan-compatta img { height: 24px; }
  .garan-compatta--piccola img { height: 20px; }
  .garan-dlg-scorri { padding: 10px 10px 14px; }
}