/* ============================================================
   Comparatore Mutui — stili del widget (plugin, autosufficiente)

   Due blocchi:
   1) SNAPSHOT DEI DESIGN TOKEN, scoped al mount (.cmp-mount).
      Il widget (js/comparatore.js) usa ~55 token via `var(--x)` inline,
      senza fallback: senza questi il widget si vede destilizzato in temi
      che non definiscono i token. Qui ne portiamo una copia coi valori
      del brand MutuoClick, così il plugin rende correttamente OVUNQUE.
      Gli alias semantici (--color-*) puntano agli anchor di palette
      (--blue-*/--gold-*): sovrascrivendo i due anchor di brand
      (--blue-800, --gold-500) — es. dal tab "Brand" del plugin, iniettati
      inline sul mount — si ricolora l'intero widget.
      Se il tema definisce gli stessi token su :root i valori coincidono
      (nessun cambiamento visibile); qui vincono solo entro il widget.
   2) REGOLE DEL WIDGET estratte da mutuoclick/css/layout.css
      (hardening responsive + variante dark). Il resto dello styling del
      widget è inline nel JS. La "cornice" di pagina (header/nav/footer)
      NON è qui: resta nel tema.
   ⚠ Font: il widget eredita il font della pagina ospite (nessun @import qui).
   ============================================================ */

/* -------------------------------------------------- 1) Token snapshot */
.cmp-mount {
  /* ---- Brand blue (Blu MutuoClick #12326e) — primary ---- */
  --blue-950: #061027;
  --blue-900: #0a1c44;
  --blue-800: #12326e; /* ◆ brand primary — override per ricolorare */
  --blue-700: #1d4488;
  --blue-600: #2a5bb0;
  --blue-500: #3c98e4;
  --blue-400: #6fb3ec;
  --blue-300: #a6d0f4;
  --blue-200: #c5d9eb;
  --blue-100: #e8f1fa;
  --blue-50:  #f2f7fc;

  /* ---- Brand gold (Oro MutuoClick #d5a719) — accent ---- */
  --gold-800: #75590a;
  --gold-700: #977207;
  --gold-600: #b48b0d;
  --gold-500: #d5a719; /* ◆ brand accent — override per ricolorare */
  --gold-400: #e2bc45;
  --gold-300: #ecd277;
  --gold-200: #f5e6ad;
  --gold-100: #fbf4d8;
  --gold-50:  #fdfaee;

  /* ---- Neutrals ---- */
  --gray-950: #0f0f11;
  --gray-900: #1a1a1a;
  --gray-800: #2f3035;
  --gray-700: #494b52;
  --gray-600: #65676f;
  --gray-500: #868992;
  --gray-400: #a9abb3;
  --gray-300: #c9cbd1;
  --gray-200: #e3e5e9;
  --gray-150: #ecedf1;
  --gray-100: #f4f5f7;
  --gray-50:  #fafbfc;
  --white:    #ffffff;
  --black:    #000000;

  /* ---- Semantic status base ---- */
  --green-600: #1f8a4d;
  --green-500: #27a35c;
  --green-100: #e4f5eb;
  --red-600:   #c5392f;
  --red-500:   #e2483d;
  --red-100:   #fcebe9;
  --amber-500: #d5a719;
  --amber-100: #fbf4d8;

  /* ---- Semantic aliases ---- */
  --color-primary:         var(--blue-800);
  --color-primary-hover:   #0e2858;
  --color-primary-active:  #0a1c44;
  --color-primary-soft:    var(--blue-100);
  --color-secondary:       var(--blue-500);
  --color-secondary-hover: #2f87d2;
  --color-accent:          var(--gold-500);
  --color-accent-hover:    var(--gold-600);
  --color-accent-soft:     var(--gold-100);

  --text-strong:    var(--gray-900);
  --text-body:      var(--gray-800);
  --text-muted:     var(--gray-600);
  --text-subtle:    var(--gray-500);
  --text-on-brand:  var(--white);
  --text-on-accent: var(--blue-900);
  --text-link:      var(--blue-600);

  --surface-page:        var(--gray-50);
  --surface-card:        var(--white);
  --surface-sunken:      var(--gray-100);
  --surface-brand:       var(--blue-800);
  --surface-brand-deep:  var(--blue-950);
  --surface-tint:        var(--blue-50);
  --surface-accent-tint: var(--gold-50);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--blue-800);
  --border-focus:   var(--blue-500);

  --color-success:      var(--green-500);
  --color-success-soft: var(--green-100);
  --color-danger:       var(--red-500);
  --color-danger-soft:  var(--red-100);
  --color-warning:      var(--amber-500);
  --color-warning-soft: var(--amber-100);
  --color-info:         var(--blue-500);
  --color-info-soft:    var(--blue-100);

  --focus-ring: 0 0 0 3px rgba(60, 152, 228, 0.45);

  /* ---- Typography ---- */
  --font-sans: 'Montserrat', 'Circular', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);
  --font-mono: 'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-3xs: 0.6875rem;
  --text-2xs: 0.75rem;
  --text-xs:  0.8125rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 2.875rem;
  --text-4xl: 3.75rem;
  --text-5xl: 4.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---- Spacing ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(0, 26, 68, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 26, 68, 0.07);
  --shadow-md: 0 8px 20px rgba(0, 26, 68, 0.09);
  --shadow-lg: 0 16px 40px rgba(0, 26, 68, 0.12);
  --shadow-xl: 0 28px 64px rgba(0, 26, 68, 0.16);
  --shadow-focus: var(--focus-ring);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --header-height: 76px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* -------------------------------------------------- 2) Regole del widget
   Estratte da mutuoclick/css/layout.css. La cornice di pagina
   (header/nav/footer/main) resta nel tema. */

.cmp-mount { width: 100%; }

/* Colonna verticale del flusso (stepper → wizard/confronto), resa dal widget */
.cmp-flow {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.cmp-noscript {
  max-width: 640px;
  margin: 24px auto;
  background: var(--color-warning-soft);
  color: var(--gold-800);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: var(--text-sm);
  text-align: center;
}

/* Navigazione wizard (mobile): sotto i 480px impila "Indietro" e primario */
@media (max-width: 480px) {
  .cmp-wizard-nav { flex-direction: column; align-items: stretch; }
  .cmp-wizard-nav .cp-btn { width: 100%; }
}

/* Hardening responsive: il widget usa stili inline (no media query),
   padding e griglie adattivi resi via classe qui. */
.cmp-card-pad { padding: 32px; }                 /* card wizard (step 0-2) */
.cmp-booking-pad { padding: 48px 36px; }         /* box step 5 (prenotazione) */
.cmp-field-row {                                  /* riga Cognome / Nome */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .cmp-field-row { grid-template-columns: 1fr; }
  .cmp-card-pad { padding: 22px 18px; }
  .cmp-booking-pad { padding: 30px 20px; }
}

/* Testi footer del comparatore (default = light). Resi via classe per la variante dark. */
.cmp-trust__item { color: var(--text-muted); }
.cmp-disclaimer { color: var(--text-subtle); }

/* Testi ricchi parametrizzabili (Markdown -> HTML iniettato dal plugin): ripristina
   la spaziatura tra i <p> (tokens.css azzera i margini dei paragrafi), così i testi
   multi-paragrafo scritti dai redattori in Admin restano leggibili. */
.cmp-rich > p { margin: 0 0 0.7em; }
.cmp-rich > p:last-child { margin-bottom: 0; }

/* Variante DARK (embed via shortcode class="dark"): adatta stepper e testi ai fondi scuri. */
.cmp-embed--dark .cp-stepper__label { color: rgba(255, 255, 255, 0.85); }
.cmp-embed--dark .cp-stepper__step--active .cp-stepper__label,
.cmp-embed--dark .cp-stepper__step--done .cp-stepper__label { color: #fff; }
.cmp-embed--dark .cp-stepper__dot {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.28);
}
.cmp-embed--dark .cp-stepper__step--active .cp-stepper__dot,
.cmp-embed--dark .cp-stepper__step--done .cp-stepper__dot {
  background: var(--color-accent);
  color: var(--text-on-accent);
  border-color: var(--color-accent);
}
.cmp-embed--dark .cp-stepper__line { background: rgba(255, 255, 255, 0.22); }
.cmp-embed--dark .cp-stepper__line--done { background: var(--color-accent); }
.cmp-embed--dark .cmp-trust__item { color: var(--blue-100); }
.cmp-embed--dark .cmp-disclaimer { color: var(--blue-200); }