/**
 * shared.css
 * Design tokens + stile "di output" dei blocchi (.eb-heading, .eb-text, ...).
 * Caricato sia da editor.html (per la preview nella canvas) sia da render.html
 * (per l'output finale), cosi' un blocco appare identico in entrambi i posti.
 */

:root {
  --eb-accent: #6c5ce7;
  --eb-accent-dark: #5849c2;
  --eb-accent-light: #edebfc;
  --eb-bg: #f4f5f8;
  --eb-surface: #ffffff;
  --eb-border: #e3e5ec;
  --eb-text: #1f2130;
  --eb-text-muted: #6b7280;
  --eb-text-faint: #9ca0ac;
  --eb-radius-sm: 6px;
  --eb-radius: 10px;
  --eb-radius-lg: 16px;
  --eb-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --eb-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .08);
  --eb-shadow-lg: 0 20px 40px rgba(16, 24, 40, .16);
  --eb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--eb-font);
  color: var(--eb-text);
  background: var(--eb-bg);
}

/* ------------------------------------------------------------------ */
/* Output dei blocchi (identico in editor e frontend)                  */
/* ------------------------------------------------------------------ */

.eb-page {
  max-width: 960px;
  margin: 0 auto;
  background: var(--eb-surface);
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Query di contenitore, non di viewport: cosi' lo stesso reflow scatta sia
     quando e' il canvas dell'editor ad essere ristretto (anteprima mobile)
     sia quando e' il browser reale ad essere stretto (frontend pubblico). */
  container-type: inline-size;
  container-name: eb-responsive;
}

.eb-heading {
  margin: 0;
  font-family: var(--eb-font);
}

.eb-text {
  margin: 0;
  font-family: var(--eb-font);
  white-space: pre-wrap;
}

.eb-image-wrap { width: 100%; }
.eb-image { display: block; max-width: 100%; height: auto; }

.eb-button-wrap { width: 100%; }
.eb-button {
  display: inline-block;
  text-decoration: none;
  font-family: var(--eb-font);
  line-height: 1.2;
  transition: opacity .15s ease, transform .15s ease;
}
.eb-button:hover { opacity: .88; transform: translateY(-1px); }

.eb-spacer { width: 100%; }

.eb-section { width: 100%; }
.eb-columns {
  width: 100%;
  display: grid;
  gap: 20px;
  /* Il numero di colonne arriva da JS come custom property (vedi
     blocks-schema.js, def "section"): cosi' la container query qui sotto
     puo' sovrascriverlo con la normale cascata, senza !important (nessuno
     dei due e' uno stile inline). */
  grid-template-columns: repeat(var(--eb-columns-count, 1), 1fr);
}
.eb-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eb-divider-wrap { width: 100%; display: flex; justify-content: center; }
.eb-divider { border: none; margin: 0; }

.eb-quote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--eb-accent);
  font-family: var(--eb-font);
}
.eb-quote-mark {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
}
.eb-quote-text { margin: 6px 0; line-height: 1.55; font-style: italic; }
.eb-quote-author { font-size: 13px; font-weight: 700; font-style: normal; }

.eb-list {
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--eb-font);
}
.eb-list-item { line-height: 1.5; }
.eb-list-bullet { list-style: none; }
.eb-list-bullet .eb-list-item { position: relative; padding-left: 22px; }
.eb-list-bullet .eb-list-item::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eb-list-marker, var(--eb-accent));
}
.eb-list-number { list-style: none; counter-reset: eb-list-counter; }
.eb-list-number .eb-list-item { position: relative; padding-left: 26px; }
.eb-list-number .eb-list-item::before {
  counter-increment: eb-list-counter;
  content: counter(eb-list-counter) '.';
  position: absolute; left: 0; top: 0;
  color: var(--eb-list-marker, var(--eb-accent));
  font-weight: 700;
}
.eb-list-check { list-style: none; }
.eb-list-check .eb-list-item { position: relative; padding-left: 26px; }
.eb-list-check .eb-list-item::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--eb-list-marker, var(--eb-accent));
  font-weight: 800;
}

.eb-iconbox { display: flex; flex-direction: column; gap: 10px; font-family: var(--eb-font); }
.eb-iconbox-center { align-items: center; text-align: center; }
.eb-iconbox-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
}
.eb-iconbox-title { margin: 0; font-size: 17px; font-weight: 700; }
.eb-iconbox-text { margin: 0; font-size: 14px; line-height: 1.6; }

.eb-video-wrap {
  position: relative;
  width: 100%;
  background: #11121a;
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.eb-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eb-video-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #9ca0ac; font-size: 13px; padding: 40px; text-align: center;
}
.eb-video-play {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}

/* Avviso */
.eb-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--eb-font);
}
.eb-alert-icon {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.eb-alert-text { margin: 0; line-height: 1.55; padding-top: 2px; }
.eb-alert-info { background: #eef1ff; border-color: #d7defe; color: #33408a; }
.eb-alert-info .eb-alert-icon { background: #6c5ce7; color: #fff; }
.eb-alert-success { background: #e6faf3; border-color: #c3f1e0; color: #147a54; }
.eb-alert-success .eb-alert-icon { background: #00b894; color: #fff; }
.eb-alert-warning { background: #fff8e6; border-color: #ffedb8; color: #8a6300; }
.eb-alert-warning .eb-alert-icon { background: #f0b429; color: #fff; }
.eb-alert-error { background: #fdedf0; border-color: #fac9d4; color: #9c1c3a; }
.eb-alert-error .eb-alert-icon { background: #e0245e; color: #fff; }

/* Contatore */
.eb-counter { display: flex; flex-direction: column; gap: 4px; font-family: var(--eb-font); }
.eb-counter-center { align-items: center; text-align: center; }
.eb-counter-number { font-size: 40px; font-weight: 800; line-height: 1.1; }
.eb-counter-label { font-size: 14px; font-weight: 600; }

/* Icone social */
.eb-social { display: flex; flex-wrap: wrap; gap: 12px; }
.eb-social-icon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; text-decoration: none; font-size: 18px;
  transition: transform .15s ease, opacity .15s ease;
}
.eb-social-icon:hover { transform: translateY(-2px); opacity: .9; }

/* Tabella prezzi */
.eb-pricing {
  --eb-pricing-accent: #6c5ce7;
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  padding: 32px 26px;
  border-radius: 16px;
  border: 1px solid var(--eb-border);
  background: var(--eb-surface);
  font-family: var(--eb-font);
}
.eb-pricing-highlighted {
  border-color: var(--eb-pricing-accent);
  box-shadow: 0 12px 32px rgba(108,92,231,.18);
  transform: translateY(-4px);
}
.eb-pricing-badge {
  position: absolute; top: -13px;
  background: var(--eb-pricing-accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.eb-pricing-title { font-size: 18px; font-weight: 700; color: #191a23; }
.eb-pricing-price-row { display: flex; align-items: baseline; gap: 4px; }
.eb-pricing-price { font-size: 44px; font-weight: 800; color: var(--eb-pricing-accent); }
.eb-pricing-period { font-size: 14px; color: var(--eb-text-faint); }
.eb-pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.eb-pricing-features li {
  font-size: 14px; color: #454653; padding-left: 26px; position: relative; text-align: left;
}
.eb-pricing-features li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--eb-pricing-accent); font-weight: 800;
}
.eb-pricing-button {
  display: block; width: 100%; text-align: center; text-decoration: none;
  padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 14px;
  background: var(--eb-pricing-accent); color: #fff;
  transition: opacity .15s ease;
}
.eb-pricing-button:hover { opacity: .88; }

/* Accordion / FAQ */
.eb-accordion { display: flex; flex-direction: column; gap: 10px; font-family: var(--eb-font); }
.eb-accordion-item { border: 1px solid var(--eb-border); border-radius: 10px; overflow: hidden; }
.eb-accordion-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; cursor: pointer; user-select: none;
}
.eb-accordion-title { font-weight: 700; font-size: 15px; }
.eb-accordion-toggle { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .2s ease; }
.eb-accordion-toggle svg { width: 100%; height: 100%; }
.eb-accordion-item.is-open .eb-accordion-toggle { transform: rotate(180deg); }
.eb-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.eb-accordion-text { margin: 0; padding: 0 18px 16px; line-height: 1.6; font-size: 14px; }

/* Modulo di contatto */
.eb-form { display: flex; flex-direction: column; gap: 16px; font-family: var(--eb-font); }
.eb-form-group { display: flex; flex-direction: column; gap: 6px; }
.eb-form-label { font-size: 13px; font-weight: 700; }
.eb-form-input {
  font-family: var(--eb-font); font-size: 14px;
  border: 1px solid var(--eb-border); border-radius: 8px;
  padding: 11px 13px; background: #fff; color: #1f2130;
  resize: vertical;
  /* input/textarea non seguono in modo affidabile lo stretch del flex
     padre su mobile (soprattutto le textarea con resize): larghezza
     esplicita per evitare overflow orizzontale della pagina. */
  width: 100%;
  max-width: 100%;
}
.eb-form-input:focus { outline: none; border-color: var(--eb-accent); box-shadow: 0 0 0 3px var(--eb-accent-light); }
.eb-form-submit {
  align-self: flex-start;
  border: none; cursor: pointer;
  color: #fff; font-family: var(--eb-font); font-weight: 700; font-size: 14px;
  padding: 12px 26px; border-radius: 8px;
  transition: opacity .15s ease;
}
.eb-form-submit:hover { opacity: .9; }

/* ------------------------------------------------------------------ */
/* Responsive: query di CONTENITORE (vedi .eb-page sopra), non di       */
/* viewport. Stesse regole per l'anteprima "Mobile" nel builder e per   */
/* il frontend pubblico su schermo stretto.                             */
/* ------------------------------------------------------------------ */

@container eb-responsive (max-width: 600px) {
  .eb-columns { grid-template-columns: 1fr; }
  .eb-page { gap: 14px; }
  .eb-column { gap: 14px; }
  .eb-hidden-on-mobile { display: none !important; }
}

@container eb-responsive (min-width: 600.02px) {
  .eb-hidden-on-desktop { display: none !important; }
}