/**
 * SupremoForm — Component CSS
 *
 * Pure CSS — no build step required, no @import tailwindcss dependency.
 * Uses CSS custom properties with fallbacks for portability.
 * Tailwind utility classes in the PHP views provide the layout grid;
 * this file handles everything else (inputs, states, dropdown, spinner).
 *
 * Table of contents:
 *   1. Custom properties
 *   2. Form wrapper
 *   3. Labels
 *   4. Inputs, textarea, select
 *   5. Error / success states
 *   6. Phone prefix widget
 *   7. Checkbox custom
 *   8. Submit button (portable fallback)
 *   9. Loading spinner
 *  10. Global error banner
 *  11. Success panel
 *  12. Reduced-motion overrides
 *  13. Grid layout, radio, help text (moved from inline <style> in form.php)
 */

/* ==========================================================================
   1. Custom properties
   ========================================================================== */

/* Fase 10.6 (CLS): min-height sovrascrivibile via custom property per riservare spazio al form
   prima che il JS inizializzi — previene layout shift nei Core Web Vitals. */
.supremo-form-wrap {
  --gf-form-min-height: 200px;
}

.supremo-form-wrap {
  --gf-primary:     var(--primary, #00B8F1);
  --gf-primary-90:  color-mix(in srgb, var(--gf-primary) 90%, black);
  --gf-dark:        var(--black-blue, #08385A);
  --gf-radius:      0.5rem;
  --gf-radius-sm:   0.25rem;
  /* WCAG 1.4.11: i confini dei controlli devono arrivare a 3:1 sul fondo.
     #d1d5db era a 1,47:1; #8c8f94 (lo stesso del core di WordPress) è a 3,24:1. */
  --gf-border:      var(--supremo-form-border, #8c8f94);
  --gf-border-focus:var(--gf-primary);
  /* Primario "forte": per il testo in colore primario e per gli sfondi primari
     che portano testo bianco. Il primario di marca (#00B8F1 di default) con il
     bianco sta a 2,30:1; scurito al 55% arriva a 6,5:1. Un tema può fissarlo
     con --supremo-form-primary-strong. */
  --gf-primary-strong: var(--supremo-form-primary-strong, color-mix(in srgb, var(--gf-primary) 55%, black));
  /* Indicatore di fuoco: separato dal primario, così resta visibile qualunque
     colore abbia il tema (WCAG 2.4.7, 1.4.11). */
  --gf-focus:       var(--supremo-form-focus, var(--gf-dark));
  --gf-bg:          #ffffff;
  --gf-text:        #111827;
  --gf-placeholder: #6b7280; /* WCAG 1.4.3: #9ca3af falliva (~2.85:1) → #6b7280 ≈4.63:1 su bianco */
  --gf-error:       #ef4444; /* bordi e icone */
  /* Testo degli errori: #ef4444 sta a 3,76:1 sul bianco, sotto il 4,5:1
     richiesto per testo di 13-15px (WCAG 1.4.3). #b91c1c sta a 6,47:1. */
  --gf-error-text:  var(--supremo-form-error-text, #b91c1c);
  --gf-success-bg:  #f0fdf4;
  --gf-success-fg:  #15803d;
  --gf-label:       #374151;
  --gf-shadow:      0 0 0 3px color-mix(in srgb, var(--gf-primary) 20%, transparent);
  --gf-transition:  180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Form wrapper
   ========================================================================== */

.supremo-form-wrap {
  position: relative;
  /* Fase 10.6 (CLS): contain:layout isola il reflow interno; min-height riserva spazio
     prima del paint iniziale. Entrambi riducono il Cumulative Layout Shift (CLS). */
  contain: layout style;
  min-height: var(--gf-form-min-height);
}

.supremo-form {
  position: relative;
}

.supremo-form--hidden {
  display: none;
}

/* Form header (title + description) — fallback when Tailwind is not compiled */
.supremo-form-header {
  margin-bottom: 2rem;
  text-align: center;
}

.supremo-form-header h2,
.supremo-form-header h3,
.supremo-form-header h4 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--gf-dark);
  margin-bottom: 0.75rem;
}

.supremo-form-header p {
  font-size: 1rem;
  color: #4b5563;
  max-width: 42ch;
  margin: 0 auto;
}

/* Submit button wrapper — fallback when Tailwind is not compiled */
.supremo-form__submit-wrap {
  margin-top: 2rem;
}

/* Conditional logic — hidden field (Fase 1) */
.supremo-form__field--hidden {
  display: none !important;
}

/* ==========================================================================
   3. Labels
   ========================================================================== */

.supremo-form__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gf-label);
  line-height: 1.4;
}

.supremo-form__required {
  color: var(--gf-error-text);
  margin-left: 0.15em;
}

.supremo-form__required-note {
  font-size: 0.75rem;
  color: #6b7280;
}

/* ==========================================================================
   4. Inputs, textarea, select
   ========================================================================== */

.supremo-form__input,
.supremo-form__textarea,
.supremo-form__select {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--gf-bg);
  border: 1.5px solid var(--gf-border);
  border-radius: var(--gf-radius);
  font-size: 0.9375rem;
  color: var(--gf-text);
  line-height: 1.5;
  outline: none;
  transition: border-color var(--gf-transition), box-shadow var(--gf-transition);
  -webkit-appearance: none;
  appearance: none;
}

.supremo-form__input::placeholder,
.supremo-form__textarea::placeholder {
  color: var(--gf-placeholder);
}

.supremo-form__input:focus,
.supremo-form__textarea:focus,
.supremo-form__select:focus {
  border-color: var(--gf-border-focus);
  box-shadow: var(--gf-shadow);
}

/* Il solo cambio di colore del bordo (2,30:1 con il primario di default) non
   basta a riconoscere il campo attivo: serve un contorno a contrasto pieno. */
.supremo-form__input:focus-visible,
.supremo-form__textarea:focus-visible,
.supremo-form__select:focus-visible {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

.supremo-form__textarea {
  resize: vertical;
  min-height: 130px;
}

/* Select wrapper (for custom chevron) */
.supremo-form__select-wrap {
  position: relative;
}

.supremo-form__select {
  padding-right: 2.5rem;
  cursor: pointer;
}

.supremo-form__select-chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

/* Phone input: takes remaining space next to prefix button */
.supremo-form__input--phone {
  flex: 1 1 0%;
  border-radius: 0 var(--gf-radius) var(--gf-radius) 0;
  border-left: none;
}

.supremo-form__input--phone:focus {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   5. Error / success states
   ========================================================================== */

.supremo-form__error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--gf-error-text);
  line-height: 1.4;
  min-height: 1.2em; /* Reserve space to prevent layout shift */
}

/* A10 — Non-color error indicator: prefix icon so errors aren't signaled by color alone */
.supremo-form__field--error .supremo-form__error:not(:empty)::before {
  content: '✖\00a0';
  font-weight: 700;
  font-style: normal;
}

.supremo-form__field--error .supremo-form__input,
.supremo-form__field--error .supremo-form__textarea,
.supremo-form__field--error .supremo-form__select {
  border-color: var(--gf-error);
}

.supremo-form__field--error .supremo-form__input:focus,
.supremo-form__field--error .supremo-form__textarea:focus,
.supremo-form__field--error .supremo-form__select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gf-error) 20%, transparent);
}

.supremo-form__field--error .supremo-form__prefix-btn {
  border-color: var(--gf-error);
}

/* ==========================================================================
   6. Phone prefix widget
   ========================================================================== */

.supremo-form__phone-wrap {
  display: flex;
  align-items: stretch;
}

.supremo-form__prefix-wrap {
  position: relative;
  flex-shrink: 0;
}

.supremo-form__prefix-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: #f9fafb;
  border: 1.5px solid var(--gf-border);
  border-right: none;
  border-radius: var(--gf-radius) 0 0 var(--gf-radius);
  font-size: 0.9375rem; /* Match input font-size */
  line-height: 1.5;     /* Match input line-height */
  color: var(--gf-text);
  cursor: pointer;
  transition: background var(--gf-transition), border-color var(--gf-transition);
  white-space: nowrap;
  min-width: 84px;
  box-sizing: border-box;
}

.supremo-form__prefix-btn:hover {
  background: #f3f4f6;
}

.supremo-form__prefix-btn:focus-visible {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
  z-index: 1;
}

.supremo-form__prefix-btn[aria-expanded="true"] {
  background: #f3f4f6;
  border-color: var(--gf-border-focus);
  box-shadow: var(--gf-shadow);
  z-index: 2;
}

.supremo-form__prefix-chevron {
  margin-left: auto;
  color: #6b7280;
  transition: transform var(--gf-transition);
}

.supremo-form__prefix-btn[aria-expanded="true"] .supremo-form__prefix-chevron {
  transform: rotate(180deg);
}

/* Dropdown list */
.supremo-form__prefix-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  width: 260px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--gf-border);
  border-radius: var(--gf-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--gf-transition), transform var(--gf-transition);
  pointer-events: none;
}

.supremo-form__prefix-list:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.supremo-form__prefix-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--gf-text);
  cursor: pointer;
  transition: background 120ms;
}

.supremo-form__prefix-list li:hover {
  background: #f3f4f6;
}

.supremo-form__prefix-list li:focus {
  background: #f3f4f6;
  outline: 2px solid var(--gf-primary);
  outline-offset: -2px;
}

.supremo-form__prefix-list li[aria-selected="true"] {
  background: color-mix(in srgb, var(--gf-primary) 12%, transparent);
  color: var(--gf-dark);
  font-weight: 600;
}

.supremo-form__prefix-item-flag {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.supremo-form__prefix-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supremo-form__prefix-item-dial {
  color: #6b7280;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

/* Scrollbar styling for prefix list (webkit) */
.supremo-form__prefix-list::-webkit-scrollbar {
  width: 4px;
}
.supremo-form__prefix-list::-webkit-scrollbar-track {
  background: transparent;
}
.supremo-form__prefix-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

/* ==========================================================================
   7. Checkbox custom
   ========================================================================== */

.supremo-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gf-label);
  line-height: 1.5;
}

/* Hide native checkbox visually but keep it accessible */
.supremo-form__checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%); /* clip: rect() è deprecato */
  white-space: nowrap;
}

.supremo-form__checkbox-custom {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--gf-bg);
  border: 1.5px solid var(--gf-border);
  border-radius: 4px;
  transition: background var(--gf-transition), border-color var(--gf-transition), box-shadow var(--gf-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.supremo-form__checkbox:checked + .supremo-form__checkbox-custom {
  background: var(--gf-primary-strong);
  border-color: var(--gf-primary-strong);
}

.supremo-form__checkbox:checked + .supremo-form__checkbox-custom::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.supremo-form__checkbox:focus-visible + .supremo-form__checkbox-custom {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
  box-shadow: var(--gf-shadow);
}

.supremo-form__field--error .supremo-form__checkbox-custom {
  border-color: var(--gf-error);
}

.supremo-form__checkbox-text a {
  color: var(--gf-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   8. Submit button (portable fallback)
   ========================================================================== */

.supremo-form__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--gf-primary-strong);
  color: #ffffff;
  border: none;
  border-radius: var(--gf-radius);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background var(--gf-transition), transform 120ms, box-shadow var(--gf-transition);
}

.supremo-form__btn--primary:hover {
  background: color-mix(in srgb, var(--gf-primary-strong) 85%, black);
}

.supremo-form__btn--primary:active {
  transform: scale(0.97);
}

.supremo-form__btn--primary:focus-visible {
  outline: 2px solid var(--gf-focus);
  outline-offset: 3px;
  box-shadow: var(--gf-shadow);
}

/* Applies to both supremo_cta()-generated button AND fallback */
.supremo-form__btn[data-loading="true"] {
  opacity: 0.72;
  pointer-events: none;
  cursor: not-allowed;
}

/* supremo_cta()-generated button: ensure spinner is hidden by default */
.supremo-form__btn .supremo-form__spinner {
  display: none;
}
.supremo-form__btn[data-loading="true"] .supremo-form__spinner {
  display: inline-flex;
}

/* ==========================================================================
   9. Loading spinner
   ========================================================================== */

.supremo-form__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.supremo-form__spinner.hidden {
  display: none;
}

.supremo-form__spinner svg {
  animation: supremo-spin 0.7s linear infinite;
  display: block;
}

@keyframes supremo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   10. Global error banner
   ========================================================================== */

.supremo-form__global-error {
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--gf-radius);
  color: #991b1b;
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.supremo-form__global-error.hidden {
  display: none;
}

/* ==========================================================================
   11. Success panel
   ========================================================================== */

.supremo-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--gf-success-bg);
  border-radius: var(--gf-radius);
  border: 1.5px solid #bbf7d0;
  gap: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.supremo-form-success.hidden {
  display: none;
}

.supremo-form-success--visible {
  opacity: 1;
  transform: translateY(0);
}

.supremo-form-success__icon svg {
  stroke: var(--gf-success-fg);
}

.supremo-form-success__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gf-dark);
  line-height: 1.3;
}

.supremo-form-success__message {
  margin: 0;
  font-size: 1rem;
  color: #374151;
  line-height: 1.6;
  max-width: 42ch;
}

/* ==========================================================================
   13. Grid layout, radio, help text
   (Moved from inline <style> in form.php — emitted once via enqueued CSS)
   ========================================================================== */

.supremo-form__fields-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.supremo-form__field {
  grid-column: span 6;
  scroll-margin-top: var(--header-height, 5rem);
}

.supremo-form__section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gf-dark);
  margin: 0.5rem 0 -0.25rem;
}

.supremo-form__section-paragraph {
  color: #6b7280;
  margin: 0.25rem 0 -0.25rem;
}

.supremo-form__help {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.3rem;
}

.supremo-form__radio-group,
.supremo-form__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.375rem;
}

.supremo-form__radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  color: #374151;
}

/* Hide native radio visually but keep it accessible */
.supremo-form__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  clip-path: inset(50%); /* clip: rect() è deprecato */
}

.supremo-form__radio-custom {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--gf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 180ms, background 180ms;
}

.supremo-form__radio:checked + .supremo-form__radio-custom {
  border-color: var(--gf-primary-strong);
  background: var(--gf-primary-strong);
}

.supremo-form__radio:checked + .supremo-form__radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.supremo-form__radio:focus-visible + .supremo-form__radio-custom {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .supremo-form__field.md\:col-span-3 { grid-column: span 3; }
  .supremo-form__field.md\:col-span-2 { grid-column: span 2; }
}

/* ==========================================================================
   12. Reduced-motion overrides
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .supremo-form__input,
  .supremo-form__textarea,
  .supremo-form__select,
  .supremo-form__prefix-btn,
  .supremo-form__prefix-list,
  .supremo-form__checkbox-custom,
  .supremo-form__radio-custom,
  .supremo-form__btn--primary,
  .supremo-form-success {
    transition: none;
  }

  .supremo-form__spinner svg {
    animation: none;
    opacity: 0.5;
  }
}

/* ==========================================================================
   14. Multi-step Form (Fase 2)
   ========================================================================== */

/* Screen-reader only utility */
.supremo-form__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Progress bar ────────────────────────────────────────────────────────────── */

.supremo-form__progress {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  counter-reset: step;
}

.supremo-form__progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  position: relative;
  font-size: .8125rem;
  color: var(--gf-placeholder);
  text-align: center;
}

/* Connector line between steps */
.supremo-form__progress-step + .supremo-form__progress-step::before {
  content: '';
  position: absolute;
  top: .875rem;        /* vertically centered on the circle */
  right: calc(50% + .875rem);
  left: calc(-50% + .875rem);
  height: 2px;
  background: var(--gf-border);
  transition: background var(--gf-transition);
}

.supremo-form__progress-step.is-completed + .supremo-form__progress-step::before,
.supremo-form__progress-step.is-active + .supremo-form__progress-step::before {
  background: var(--gf-primary);
}

.supremo-form__progress-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--gf-border);
  background: var(--gf-bg);
  font-size: .8rem;
  font-weight: 600;
  color: var(--gf-placeholder);
  transition: border-color var(--gf-transition), background var(--gf-transition), color var(--gf-transition);
  position: relative;
  z-index: 1;
}

.supremo-form__progress-step.is-active .supremo-form__progress-step__num {
  border-color: var(--gf-primary-strong);
  background: var(--gf-primary-strong);
  color: #fff;
}

.supremo-form__progress-step.is-completed .supremo-form__progress-step__num {
  border-color: var(--gf-primary-strong);
  background: var(--gf-primary-strong);
  color: #fff;
}

.supremo-form__progress-step__title {
  display: none;
}

@media (min-width: 480px) {
  .supremo-form__progress-step__title {
    display: block;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.supremo-form__progress-step.is-active .supremo-form__progress-step__title {
  color: var(--gf-dark);
  font-weight: 600;
}

/* Step fieldsets ─────────────────────────────────────────────────────────── */

.supremo-form__step {
  border: none;
  margin: 0;
  padding: 0;
}

.supremo-form__step-legend {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gf-dark);
  margin-bottom: 1.25rem;
  padding: 0;
  width: 100%;
}

/* Step navigation ──────────────────────────────────────────────────────────── */

.supremo-form__step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.supremo-form__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--gf-radius);
  border: 2px solid var(--gf-border);
  background: transparent;
  color: var(--gf-dark);
  cursor: pointer;
  transition: border-color var(--gf-transition), color var(--gf-transition);
}

.supremo-form__btn--secondary:hover {
  border-color: var(--gf-primary-strong);
  color: var(--gf-primary-strong);
}

.supremo-form__btn--secondary:focus-visible {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

/* Review step ──────────────────────────────────────────────────────────────── */

.supremo-form__review-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.supremo-form__review-section {
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-radius);
  overflow: hidden;
}

.supremo-form__review-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #f9fafb;
  border-bottom: 1px solid var(--gf-border);
  gap: 1rem;
}

.supremo-form__review-section-title {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gf-dark);
}

.supremo-form__review-edit-btn {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gf-primary-strong);
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--gf-radius-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
}

.supremo-form__review-edit-btn:hover {
  background: color-mix(in srgb, var(--gf-primary) 10%, transparent);
}

.supremo-form__review-edit-btn:focus-visible {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

.supremo-form__review-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: .75rem 0;
}

.supremo-form__review-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: .5rem 1rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  align-items: baseline;
}

.supremo-form__review-row:last-child {
  border-bottom: none;
}

.supremo-form__review-term {
  font-size: .875rem;
  color: var(--gf-placeholder);
  font-weight: 500;
}

.supremo-form__review-value {
  font-size: .9375rem;
  color: var(--gf-text);
  word-break: break-word;
}

/* Reduced-motion for multi-step */
@media (prefers-reduced-motion: reduce) {
  .supremo-form__progress-step__num,
  .supremo-form__progress-step + .supremo-form__progress-step::before {
    transition: none;
  }
}

/* ============================================================================
   Fase 6 — File upload, Signature, Draft
   ============================================================================ */

/* ── File upload ── */
.supremo-form__field--file .supremo-form__file-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.supremo-form__file-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: var(--supremo-white, #fff);
  border: 1.5px solid var(--supremo-input-border, var(--gf-border));
  border-radius: var(--supremo-radius, 6px);
  font-size: .875rem;
  font-weight: 600;
  color: var(--supremo-primary, #08385A);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.supremo-form__file-btn:hover {
  border-color: var(--supremo-primary, #08385A);
  background: #f0f4f8;
}

.supremo-form__file-name {
  font-size: .82rem;
  color: #6b7280;
  word-break: break-all;
}

.supremo-form__file-note {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: #4b5563; /* #9ca3af era a 2,54:1 */
}

/* L'input file copre il pulsante: è lui a ricevere clic e fuoco, e il fuoco
   deve vedersi sul pulsante che l'utente percepisce (WCAG 2.4.7). */
.supremo-form__file-wrap {
  position: relative;
}

.supremo-form__file-wrap .supremo-form__file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  clip: auto;
  clip-path: none;
  overflow: visible;
}

.supremo-form__file-wrap:focus-within .supremo-form__file-btn {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

/* ── Signature pad ── */
.supremo-form__field--signature .supremo-form__signature-wrap {
  border-radius: var(--supremo-radius, 6px);
  overflow: hidden;
}

.supremo-form__signature-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
  background: #fff;
  border: 1.5px solid var(--supremo-input-border, var(--gf-border));
  border-radius: var(--supremo-radius, 6px);
}

.supremo-form__signature-canvas:focus-within,
.supremo-form__signature-canvas:active {
  border-color: var(--supremo-primary, #08385A);
  outline: none;
}

.supremo-form__signature-actions {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}

.supremo-signature-btn--confirmed {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

/* ── Revisione delle risposte del quiz (1.11.0) ── */
.supremo-quiz__review {
  margin: .75rem 0 0;
  padding-left: 1.25rem;
  text-align: left;
}
.supremo-quiz__review-item + .supremo-quiz__review-item { margin-top: .75rem; }
.supremo-quiz__review-item p { margin: .15rem 0; }
.supremo-quiz__review-q { font-weight: 600; }
.supremo-quiz__verdict--ok { color: #166534; }
.supremo-quiz__verdict--ko { color: #991b1b; }

/* ── Conferma dell'email (1.10.0) ── */
.supremo-form__verify-notice {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--supremo-radius, 6px);
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #166534;
}
.supremo-form__verify-notice--ko {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

/* ── Matrix ── */
/* A 320px la tabella scorre nel suo contenitore, non tutta la pagina (SF-A11Y-27). */
.supremo-form__matrix-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* ── Draft banner ── */
.supremo-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--supremo-radius, 6px);
  margin-bottom: 1rem;
  font-size: .875rem;
  color: #1e40af;
}

.supremo-draft-banner__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #1e40af; /* 8,7:1 sul fondo del banner; prima #60a5fa, 2,3:1 (SF-A11Y-26) */
  line-height: 1;
  padding: 0 .25rem;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.supremo-draft-notice {
  padding: .5rem 1rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--supremo-radius, 6px);
  font-size: .82rem;
  color: #15803d;
  margin-top: .5rem;
}

.supremo-form__draft-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.supremo-form__btn--link {
  background: none;
  border: none;
  padding: 0;
  font-size: .82rem;
  color: var(--supremo-primary, #08385A);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   FASE 7 — UX/UI upgrade
   ========================================================================== */

/* ── 7.2 Error summary box (WCAG GDS pattern) ─────────────────────────────── */

.supremo-form__error-summary {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--gf-error);
  background: color-mix(in srgb, var(--gf-error) 6%, #fff);
  border-radius: var(--gf-radius);
}

.supremo-form__error-summary[hidden] {
  display: none;
}

/* I temi danno agli h2 un carattere da titolo e interlinee molto ampie, e ai link
   una dimensione propria: dentro un avviso di errore il risultato è un titolo più
   piccolo delle voci che dovrebbe introdurre. Qui carattere, corpo e interlinea
   sono dichiarati per esteso, con la specificità necessaria a prevalere. */

.supremo-form__error-summary .supremo-form__error-summary__title {
  margin: 0 0 .25rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #991b1b;
}

.supremo-form__error-summary .supremo-form__error-summary__intro {
  margin: 0 0 .625rem;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
  color: #4b5563;
}

/* L'introduzione è facoltativa: se non è stata configurata non deve lasciare
   uno spazio vuoto fra il titolo e l'elenco. */
.supremo-form__error-summary .supremo-form__error-summary__intro:empty {
  display: none;
}

/* Il carattere va ridichiarato lungo tutta la catena, non solo sulle voci: i temi
   colpiscono spesso `ul` e `li` del contenuto, e in quel caso `inherit` sul link
   propagherebbe fedelmente il carattere sbagliato ereditato dall'elenco. */
.supremo-form-wrap .supremo-form__error-summary,
.supremo-form-wrap .supremo-form__error-summary .supremo-form__error-summary__list,
.supremo-form-wrap .supremo-form__error-summary .supremo-form__error-summary__list li {
  font-family: inherit;
}

.supremo-form__error-summary .supremo-form__error-summary__list {
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc outside;
}

.supremo-form__error-summary .supremo-form__error-summary__list li {
  display: list-item;
  list-style: disc outside;
  margin: 0 0 .3125rem;
  padding: 0;
  color: var(--gf-error-text);
}

.supremo-form__error-summary .supremo-form__error-summary__list li:last-child {
  margin-bottom: 0;
}

/* I temi vestono i link con selettori propri, spesso più specifici di questo.
   Il carattere è l'unica proprietà per cui serve `!important`: senza, le voci
   dell'elenco resterebbero scritte col carattere dei link del tema mentre
   titolo, etichette e campi usano quello del form, e l'avviso apparirebbe
   composto da due tipografie diverse. */
.supremo-form-wrap .supremo-form__error-summary .supremo-form__error-summary__link,
.supremo-form__error-summary .supremo-form__error-summary__list a {
  display: inline;
  font-family: inherit !important;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--gf-error-text);
  /* Sottolineatura sottile: nove voci sottolineate a piena forza diventano una
     massa rossa in cui non si distingue più il testo. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--gf-error-text) 45%, transparent);
  text-underline-offset: 3px;
}

.supremo-form-wrap .supremo-form__error-summary .supremo-form__error-summary__link:hover,
.supremo-form-wrap .supremo-form__error-summary .supremo-form__error-summary__link:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Il nome del campo distingue fra loro voci altrimenti identiche. */
.supremo-form__error-summary .supremo-form__error-summary__field {
  font-weight: 600;
}

.supremo-form__error-summary .supremo-form__error-summary__field::after {
  content: ': ';
}

/* ── 7.2 Floating labels ──────────────────────────────────────────────────── */

/* 1.8.0 (SF-A11Y-19): etichetta flottante solo per i campi con un input o una
   textarea diretti. Prima colpiva anche legend e titoli dei gruppi (radio,
   rating, NPS, matrice, firma, file) e le select, che finivano sopra il
   contenuto. */
.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea) {
  position: relative;
  padding-top: 1rem;
}

.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__label {
  position: absolute;
  top: 1.65rem;
  left: .875rem;
  margin-bottom: 0;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--gf-placeholder);
  pointer-events: none;
  transition: top 160ms ease, font-size 160ms ease, color 160ms ease, font-weight 160ms ease;
  z-index: 1;
}

.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea):focus-within > .supremo-form__label,
.supremo-form-wrap--floating-labels .supremo-form__field.is-filled:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__label,
.supremo-form-wrap--floating-labels .supremo-form__field.is-focused:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__label {
  top: .2rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gf-primary-strong);
}

.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__input,
.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__textarea {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

/* placeholder transparent when floating labels active — label IS the placeholder */
.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__input::placeholder,
.supremo-form-wrap--floating-labels .supremo-form__field:has(> .supremo-form__input, > .supremo-form__textarea) > .supremo-form__textarea::placeholder {
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .supremo-form-wrap--floating-labels .supremo-form__label {
    transition: none;
  }
}

/* ── 7.2 Success animation (SVG stroke) ───────────────────────────────────── */

.supremo-form-success__icon svg circle {
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
}

.supremo-form-success--visible .supremo-form-success__icon svg circle {
  animation: gf-draw-circle 400ms ease forwards;
}

.supremo-form-success__icon svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}

.supremo-form-success--visible .supremo-form-success__icon svg path {
  animation: gf-draw-check 280ms ease 380ms forwards;
}

@keyframes gf-draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes gf-draw-check {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .supremo-form-success--visible .supremo-form-success__icon svg circle,
  .supremo-form-success--visible .supremo-form-success__icon svg path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ── 7.2 Autosave status indicator ───────────────────────────────────────── */

.supremo-form__autosave-status {
  font-size: .75rem;
  color: var(--gf-success-fg);
  margin-bottom: .5rem;
  opacity: 0;
  transition: opacity 300ms ease;
  min-height: 1em;
}

.supremo-form__autosave-status.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .supremo-form__autosave-status { transition: none; }
}

/* ==========================================================================
   1.7.0 — Rating, NPS, firma (WCAG 2.4.7, 1.4.11, 2.1.1)
   Fino alla 1.6.7 rating e NPS non avevano alcuno stile: i radio erano
   nascosti e le label vuote, quindi a schermo non c'era niente da cliccare
   né un fuoco da vedere.
   ========================================================================== */

/* ── Rating ── */
.supremo-form__rating-fieldset,
.supremo-form__nps-fieldset,
.supremo-form__signature-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.supremo-form__rating-group {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.supremo-form__rating-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gf-radius-sm);
  color: #6b7280; /* stella vuota: 4,83:1 sul bianco */
  cursor: pointer;
  transition: color var(--gf-transition), transform 120ms;
}

.supremo-form__rating-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
}

/* Piene fino al valore scelto: la label del radio selezionato e tutte quelle
   che lo precedono. */
.supremo-form__rating-group input:checked + .supremo-form__rating-label,
.supremo-form__rating-group .supremo-form__rating-label:has(~ input:checked) {
  color: var(--supremo-form-rating-color, #b45309); /* ambra scuro, 5,0:1 */
}

.supremo-form__rating-group input:checked + .supremo-form__rating-label .supremo-form__rating-icon,
.supremo-form__rating-group .supremo-form__rating-label:has(~ input:checked) .supremo-form__rating-icon {
  fill: currentColor;
}

/* Anteprima al passaggio del mouse: fino alla stella sotto il puntatore. */
@media (hover: hover) {
  .supremo-form__rating-group:hover .supremo-form__rating-label {
    color: #6b7280;
  }
  .supremo-form__rating-group:hover .supremo-form__rating-label .supremo-form__rating-icon {
    fill: none;
  }
  .supremo-form__rating-group .supremo-form__rating-label:hover,
  .supremo-form__rating-group .supremo-form__rating-label:has(~ .supremo-form__rating-label:hover) {
    color: var(--supremo-form-rating-color, #b45309);
  }
  .supremo-form__rating-group .supremo-form__rating-label:hover .supremo-form__rating-icon,
  .supremo-form__rating-group .supremo-form__rating-label:has(~ .supremo-form__rating-label:hover) .supremo-form__rating-icon {
    fill: currentColor;
  }
}

.supremo-form__rating-group input:focus-visible + .supremo-form__rating-label {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

.supremo-form__field--error .supremo-form__rating-label {
  color: var(--gf-error-text);
}

/* ── NPS ── */
.supremo-form__nps-scale {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.supremo-form__nps-label {
  position: relative;
  cursor: pointer;
}

.supremo-form__nps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 .25rem;
  border: 1.5px solid var(--gf-border);
  border-radius: var(--gf-radius-sm);
  background: var(--gf-bg);
  color: var(--gf-text);
  font-weight: 600;
  transition: background var(--gf-transition), border-color var(--gf-transition), color var(--gf-transition);
}

.supremo-form__nps-label:hover .supremo-form__nps-num {
  border-color: var(--gf-primary-strong);
}

.supremo-form__nps-label input:checked + .supremo-form__nps-num {
  background: var(--gf-primary-strong);
  border-color: var(--gf-primary-strong);
  color: #fff;
}

.supremo-form__nps-label input:focus-visible + .supremo-form__nps-num {
  outline: 2px solid var(--gf-focus);
  outline-offset: 2px;
}

.supremo-form__field--error .supremo-form__nps-num {
  border-color: var(--gf-error);
}

.supremo-form__nps-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .375rem;
  font-size: .8125rem;
  color: #4b5563;
}

/* ── Firma: alternativa digitata ── */
.supremo-form__signature-typed {
  margin-top: .75rem;
}

.supremo-form__signature-typed .supremo-form__label {
  font-weight: 500;
}

/* ── Quiz: timer con estensione (WCAG 2.2.1) ── */
.supremo-quiz__timer-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: 1rem;
}

.supremo-quiz__timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gf-dark);
}

.supremo-quiz__timer--urgent {
  color: var(--gf-error-text);
}

.supremo-quiz__extend {
  padding: .5rem 1rem;
  font-size: .9375rem;
}

.supremo-quiz__timer-warning {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
  color: var(--gf-error-text);
}

/* ── Modo conversazionale (1.8.0, SF-A11Y-17, 18) ── */
.supremo-conv__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}

.supremo-conv__hint {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: #4b5563;
}