/**
 * Backlot Child Theme — Components
 * Derivato da: docs/design-system.md v1.1.0 + Brief B2
 *
 * Convenzione classi: prefix `.bkl-*` (es. .bkl-btn, .bkl-card).
 * Convenzione varianti BEM-like: .bkl-btn--primary, .bkl-card--ticket.
 * Convenzione stati: .is-active, .is-completed, .is-locked, .is-disabled.
 *
 * I token brand-evocativi (--backlot-ink, --backlot-cream, --backlot-gold-dark,
 * --backlot-green-forest, --backlot-red-terra) sono alias dei token semantici
 * definiti in tokens.css §12. Usali quando rendono il CSS più leggibile.
 *
 * Sezioni:
 *   01. HEADING & DISPLAY TYPOGRAPHY
 *   02. INLINE TYPOGRAPHY
 *   03. LINKS
 *   04. BUTTONS
 *   05. BADGES
 *   06. CARDS (base + gold-frame + ticket)
 *   07. BLOCKQUOTE varianti + CALLOUT
 *   08. TABLES
 *   09. CODE & PRE (refinement)
 *   10. LISTS
 *   11. DIVIDERS (hr default + gem)
 *   12. FORMS (refinement + checkbox/radio custom)
 *   13. ALERTS
 *   14. LOCK STATE
 *   15. UTILITY CLASSES
 */

/* ============================================================
   01. HEADING & DISPLAY TYPOGRAPHY
   Override delle regole base (base.css) con scala display-grade
   e font Geist per i titoli.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.bkl-heading {
  font-family: var(--backlot-font-display);
  color: var(--backlot-text);
  margin-top: var(--backlot-space-10);
  margin-bottom: var(--backlot-space-4);
  line-height: var(--backlot-lh-heading);
}

/* Primo heading di una sezione: niente margin-top extra (lo dà il container) */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child,
.bkl-heading:first-child {
  margin-top: 0;
}

h1 {
  font-size: var(--backlot-fs-display-xl);
  font-weight: var(--backlot-fw-bold);
  line-height: var(--backlot-lh-display);
  letter-spacing: var(--backlot-ls-tight);
}

h2 {
  font-size: var(--backlot-fs-display-lg);
  font-weight: var(--backlot-fw-semibold);
  line-height: var(--backlot-lh-display);
  letter-spacing: var(--backlot-ls-tight);
}

h3 {
  font-size: var(--backlot-fs-display-md);
  font-weight: var(--backlot-fw-medium);
}

h4 {
  font-size: var(--backlot-fs-h4);
  font-weight: var(--backlot-fw-medium);
}

h5 {
  font-size: var(--backlot-fs-h5);
  font-weight: var(--backlot-fw-medium);
}

h6 {
  font-size: var(--backlot-fs-body);
  font-weight: var(--backlot-fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--backlot-ls-eyebrow);
  color: var(--backlot-text-secondary);
}

/* Eyebrow uppercase label (es. codice lezione "CD01") */
.bkl-eyebrow {
  display: inline-block;
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-eyebrow);
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
  text-transform: uppercase;
  letter-spacing: var(--backlot-ls-eyebrow);
  margin-bottom: var(--backlot-space-2);
}

/* Body text default — explicit p/li color per vincere su TutorLMS che
   imposta `p { color: var(--tutor-body-color) }` con il suo dark-grey
   default. Il remap di --tutor-body-color in tokens.css §11 risolve già
   alla radice; questa regola è belt-and-braces per qualsiasi altro
   plugin che imposti p color esplicitamente. */
p,
.entry-content p,
.entry-content li,
li {
  color: var(--backlot-text);
}

/* ============================================================
   02. INLINE TYPOGRAPHY
   ============================================================ */
strong, b {
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
}

em, i {
  font-style: italic;
}

/* Italic dentro blockquote: usa Cormorant (gestito in §07) */

mark {
  background: rgba(201, 168, 76, 0.20);
  color: var(--backlot-text);
  padding: 0.05em 0.25em;
  border-radius: var(--backlot-radius-hairline);
}

abbr[title] {
  text-decoration: underline dotted var(--backlot-gold);
  text-underline-offset: 3px;
  cursor: help;
}

kbd {
  display: inline-block;
  padding: 0.15em 0.55em;
  font-family: var(--backlot-font-mono);
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--backlot-text);
  background: var(--backlot-surface-2);
  border: 1px solid var(--backlot-border);
  border-bottom-width: 2px;
  border-bottom-color: var(--backlot-border-gold);
  border-radius: var(--backlot-radius-sm);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  vertical-align: 0.05em;
}

sup, sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* ============================================================
   03. LINKS
   Refinement della base (base.css ha già link gold).
   ============================================================ */
a {
  color: var(--backlot-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
  border-bottom: none;     /* override base.css che usa border-bottom */
  transition: color var(--backlot-transition-fast),
              text-decoration-color var(--backlot-transition-fast),
              text-decoration-thickness var(--backlot-transition-fast);
}

a:hover {
  color: var(--backlot-gold-soft);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--backlot-gold-soft);
}

a:visited {
  color: var(--backlot-gold);   /* no purple WordPress default */
}

a:focus-visible {
  outline: 2px solid var(--backlot-gold);
  outline-offset: 3px;
  border-radius: var(--backlot-radius-sm);
  text-decoration: none;
}

/* Link "tonal" senza underline (per CTA testuali tipo "Vedi tutto →") */
.bkl-link-tonal {
  text-decoration: none;
  font-weight: var(--backlot-fw-medium);
}
.bkl-link-tonal:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ============================================================
   04. BUTTONS
   ============================================================ */
.bkl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--backlot-space-2);
  padding: var(--backlot-space-3) var(--backlot-space-5);
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-body);
  font-weight: var(--backlot-fw-medium);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--backlot-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--backlot-radius-pill);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--backlot-transition-base),
    color var(--backlot-transition-base),
    border-color var(--backlot-transition-base),
    box-shadow var(--backlot-transition-base),
    transform var(--backlot-transition-fast);
}

.bkl-btn:hover { text-decoration: none; }

.bkl-btn:focus-visible {
  outline: none;
  box-shadow: var(--backlot-shadow-focus-ring);
}

.bkl-btn:active {
  transform: translateY(1px);
}

.bkl-btn:disabled,
.bkl-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Primary: gradient gold (CTA principale) --- */
.bkl-btn--primary {
  color: var(--backlot-text-on-gold);
  background: var(--backlot-gradient-gold);
  border-color: transparent;
  box-shadow: var(--backlot-shadow-card);
  font-weight: var(--backlot-fw-semibold);
}
.bkl-btn--primary:hover {
  color: var(--backlot-text-on-gold);
  background: var(--backlot-gradient-gold-soft);
  box-shadow: var(--backlot-shadow-card-hover);
  transform: translateY(-1px);
}
.bkl-btn--primary:active {
  background: linear-gradient(135deg, var(--backlot-gold-deep) 0%, #6F5A22 100%);
  transform: translateY(1px);
  box-shadow: none;
}

/* --- Secondary: outline gold --- */
.bkl-btn--secondary {
  color: var(--backlot-gold);
  background: transparent;
  border-color: var(--backlot-gold);
}
.bkl-btn--secondary:hover {
  color: var(--backlot-gold-soft);
  background: rgba(201, 168, 76, 0.08);
  border-color: var(--backlot-gold-soft);
}
.bkl-btn--secondary:active {
  background: rgba(201, 168, 76, 0.15);
}

/* --- Ghost: testo con hover sottile --- */
.bkl-btn--ghost {
  color: var(--backlot-text);
  background: transparent;
  border-color: transparent;
}
.bkl-btn--ghost:hover {
  color: var(--backlot-gold);
  background: var(--backlot-surface-1);
}

/* --- Danger: rosso terra (azioni distruttive: cancella account, rimuovi) --- */
.bkl-btn--danger {
  color: var(--backlot-cream);
  background: var(--backlot-red-terra);
  border-color: var(--backlot-red-terra);
}
.bkl-btn--danger:hover {
  background: #6E2222;
  border-color: #6E2222;
}

/* --- Sizes --- */
.bkl-btn--sm {
  padding: var(--backlot-space-2) var(--backlot-space-4);
  font-size: var(--backlot-fs-body-sm);
}

.bkl-btn--lg {
  padding: var(--backlot-space-4) var(--backlot-space-7);
  font-size: var(--backlot-fs-body-lg);
}

.bkl-btn--block {
  width: 100%;
}

/* Icon-only button (square, per icone tipo close, copy) */
.bkl-btn--icon {
  padding: var(--backlot-space-3);
  width: 2.5em;
  height: 2.5em;
  border-radius: var(--backlot-radius-circle);
}

/* ============================================================
   05. BADGES
   ============================================================ */
.bkl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--backlot-space-1);
  padding: 0.35em 0.85em;
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-micro);
  font-weight: var(--backlot-fw-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--backlot-radius-pill);
  white-space: nowrap;
  vertical-align: middle;
}

.bkl-badge--pass {
  color: var(--backlot-cream);
  background: var(--backlot-green-forest);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.bkl-badge--premium {
  color: var(--backlot-cream);
  background: var(--backlot-red-terra);
  border: 1px solid rgba(220, 38, 38, 0.35);
}

.bkl-badge--new {
  color: var(--backlot-ink);
  background: var(--backlot-gradient-gold);
  border: 1px solid var(--backlot-gold-deep);
}

.bkl-badge--locked {
  color: var(--backlot-text-muted);
  background: var(--backlot-surface-2);
  border: 1px solid var(--backlot-border);
}
.bkl-badge--locked::before {
  content: "🔒";
  font-size: 0.9em;
  filter: grayscale(0.4);
}

.bkl-badge--completed {
  color: var(--backlot-success);
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.bkl-badge--completed::before {
  content: "✓";
  font-weight: var(--backlot-fw-bold);
  font-size: 1em;
}

.bkl-badge--inprogress {
  color: var(--backlot-warning);
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ============================================================
   06. CARDS
   ============================================================ */
.bkl-card {
  position: relative;
  background: var(--backlot-surface-1);
  border: 1px solid var(--backlot-border);
  border-radius: var(--backlot-radius-lg);
  padding: var(--backlot-space-6);
  transition:
    border-color var(--backlot-transition-base),
    transform var(--backlot-transition-base),
    box-shadow var(--backlot-transition-base);
}

.bkl-card--hoverable:hover {
  border-color: var(--backlot-border-gold);
  transform: translateY(-2px);
  box-shadow: var(--backlot-shadow-card);
}

.bkl-card__header {
  margin: calc(var(--backlot-space-6) * -1) calc(var(--backlot-space-6) * -1) var(--backlot-space-5);
  padding: var(--backlot-space-5) var(--backlot-space-6);
  border-bottom: 1px solid var(--backlot-border);
}

.bkl-card__body {
  /* lo spacing è già dato da padding del .bkl-card */
}

.bkl-card__footer {
  margin: var(--backlot-space-5) calc(var(--backlot-space-6) * -1) calc(var(--backlot-space-6) * -1);
  padding: var(--backlot-space-5) var(--backlot-space-6);
  border-top: 1px solid var(--backlot-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--backlot-space-3);
}

/* --- Variant: cornice oro (double border art-deco) ---
   Tecnica: border esterno gold-soft + box-shadow inset che simula
   un secondo bordo color background (effetto "stacco"). */
.bkl-card--gold-frame {
  border: 1px solid var(--backlot-gold-soft);
  box-shadow:
    inset 0 0 0 4px var(--backlot-ink),
    inset 0 0 0 5px rgba(201, 168, 76, 0.4),
    var(--backlot-shadow-premium-glow);
  padding: calc(var(--backlot-space-6) + 5px);   /* compensa lo spazio del double-border */
}

.bkl-card--gold-frame:hover {
  border-color: var(--backlot-gold);
  box-shadow:
    inset 0 0 0 4px var(--backlot-ink),
    inset 0 0 0 5px var(--backlot-gold-soft),
    var(--backlot-shadow-premium-glow-hover);
}

/* --- Variant: ticket access card (ICONICO) ---
   Card chiara con perforazione laterale tipo biglietto cinema.
   La perforazione è ottenuta con due radial-gradient (left + right)
   che disegnano un cerchio trasparente al centro verticale.
   Per modificare:
     - Diametro notch: cambia il valore "12px" e "13px" (interno e esterno)
     - Posizione verticale: cambia "50%" in "circle at 0 50%"
     - Aggiungere più notch verticali: usare background-size 100% 24px e
       background-repeat repeat-y per pattern ripetuto. */
.bkl-card--ticket {
  --notch-size: 14px;
  --notch-bg: var(--backlot-bg);                  /* colore sfondo "intorno" al notch */

  position: relative;
  color: var(--backlot-ink);
  background:
    radial-gradient(circle at 0 50%, var(--notch-bg) calc(var(--notch-size) - 1px), transparent var(--notch-size)) left center / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, var(--notch-bg) calc(var(--notch-size) - 1px), transparent var(--notch-size)) right center / 51% 100% no-repeat,
    var(--backlot-cream);
  border-radius: var(--backlot-radius-lg);
  padding: var(--backlot-space-7) var(--backlot-space-8);
  min-height: 180px;
  box-shadow:
    var(--backlot-shadow-elevation),
    inset 0 0 0 1px rgba(155, 122, 46, 0.2);
  font-family: var(--backlot-font-display);
}

.bkl-card--ticket .bkl-eyebrow {
  color: var(--backlot-gold-deep);
}

/* Linea tratteggiata verticale di "strappo" (opzionale, decora) */
.bkl-card--ticket::after {
  content: "";
  position: absolute;
  top: var(--backlot-space-5);
  bottom: var(--backlot-space-5);
  right: 30%;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--backlot-gold-deep) 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
  opacity: 0.45;
}

/* ============================================================
   07. BLOCKQUOTE varianti + CALLOUT
   La base è già definita in base.css. Qui aggiungiamo:
   - Refinement (allineamento token, strong dentro blockquote)
   - .bkl-callout (variante "forte" per avvisi importanti)
   ============================================================ */
blockquote {
  margin: var(--backlot-space-8) 0;
  padding: var(--backlot-space-5) var(--backlot-space-7);
  background: var(--backlot-surface-1);
  border-left: 3px solid var(--backlot-gold);
  border-radius: 0 var(--backlot-radius-md) var(--backlot-radius-md) 0;
  font-family: var(--backlot-font-serif);
  font-style: italic;
  font-weight: var(--backlot-fw-regular);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: var(--backlot-lh-tight);
  color: var(--backlot-text);
}

blockquote p:last-child { margin-bottom: 0; }

/* "Il punto.", "La regola." — apertura forte dentro citation */
blockquote strong,
blockquote b {
  display: inline-block;
  margin-right: 0.4em;
  font-family: var(--backlot-font-display);
  font-style: normal;
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
  letter-spacing: 0;
}

blockquote em {
  /* em DENTRO blockquote eredita Cormorant italic dalla quote stessa */
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--backlot-space-3);
  font-family: var(--backlot-font-display);
  font-style: normal;
  font-size: var(--backlot-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--backlot-ls-eyebrow);
  color: var(--backlot-text-muted);
}

/* --- Callout: variante più forte per avvisi importanti --- */
.bkl-callout {
  display: flex;
  gap: var(--backlot-space-4);
  align-items: flex-start;
  margin: var(--backlot-space-6) 0;
  padding: var(--backlot-space-5) var(--backlot-space-6);
  background: var(--backlot-surface-2);
  border-left: 5px solid var(--backlot-gold);
  border-radius: 0 var(--backlot-radius-md) var(--backlot-radius-md) 0;
  font-family: var(--backlot-font-sans);
  font-style: normal;
  font-size: var(--backlot-fs-body);
  line-height: var(--backlot-lh-body);
  color: var(--backlot-text);
}

.bkl-callout__icon {
  flex-shrink: 0;
  font-size: 1.5em;
  line-height: 1;
  color: var(--backlot-gold);
}

.bkl-callout__content {
  flex: 1;
}

.bkl-callout__title {
  margin: 0 0 var(--backlot-space-2) 0;
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-h5);
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
}

/* ============================================================
   08. TABLES
   ============================================================ */
.bkl-table-wrap,
.entry-content > table {
  /* wrapper per overflow-x su mobile */
  overflow-x: auto;
  margin: var(--backlot-space-5) 0;
  border-radius: var(--backlot-radius-md);
  scrollbar-color: var(--backlot-gold-deep) transparent;
  scrollbar-width: thin;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--backlot-surface-1);
  border-radius: var(--backlot-radius-md);
  overflow: hidden;       /* per rispettare radius sui th */
  font-family: var(--backlot-font-sans);
  font-size: var(--backlot-fs-body-sm);
}

thead {
  background: var(--backlot-surface-2);
}

thead th {
  padding: var(--backlot-space-3) var(--backlot-space-4);
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-eyebrow);
  font-weight: var(--backlot-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--backlot-gold);
  text-align: left;
  border-bottom: 2px solid var(--backlot-gold);
}

tbody tr {
  border-bottom: 1px solid var(--backlot-border);
  transition: background-color var(--backlot-transition-fast);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--backlot-surface-2);
}

tbody td {
  padding: var(--backlot-space-3) var(--backlot-space-4);
  color: var(--backlot-text);
  vertical-align: top;
  line-height: var(--backlot-lh-body);
}

/* tfoot: subtotal/footer riga */
tfoot td {
  padding: var(--backlot-space-3) var(--backlot-space-4);
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
  background: var(--backlot-surface-2);
  border-top: 2px solid var(--backlot-border-gold);
}

/* Caption: titolo tabella */
caption {
  caption-side: top;
  padding: var(--backlot-space-3);
  font-family: var(--backlot-font-display);
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
  text-align: left;
}

/* ============================================================
   09. CODE & PRE — refinement
   La base.css ha già code/pre con stile decente. Qui rifiniamo
   come da brief: pre con bg --backlot-ink (più dark), code inline
   con bg surface-2.
   ============================================================ */
code, kbd, samp {
  font-family: var(--backlot-font-mono);
  font-size: 0.92em;
}

/* Code INLINE (dentro paragrafi) */
:not(pre) > code {
  background: var(--backlot-surface-2);
  color: var(--backlot-gold-soft);
  padding: 0.15em 0.45em;
  border-radius: var(--backlot-radius-sm);
  border: 1px solid var(--backlot-surface-3);
  font-size: 0.9em;
}

/* Code BLOCK (dentro <pre>) */
pre {
  position: relative;     /* per future "copy" button */
  margin: var(--backlot-space-5) 0;
  padding: var(--backlot-space-5) var(--backlot-space-6);
  background: var(--backlot-ink);
  color: var(--backlot-text);
  border: 1px solid var(--backlot-surface-2);
  border-left: 3px solid var(--backlot-gold);
  border-radius: var(--backlot-radius-md);
  overflow-x: auto;
  font-family: var(--backlot-font-mono);
  font-size: var(--backlot-fs-body-sm);
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(242, 232, 218, 0.04);
  scrollbar-color: var(--backlot-gold-deep) transparent;
  scrollbar-width: thin;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;       /* preserva indentazione, scroll orizzontale se serve */
}

/* Mobile: wrap invece di scroll (UX migliore su touch) */
@media (max-width: 768px) {
  pre code {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* ============================================================
   10. LISTS
   ============================================================ */
ul, ol {
  margin: 0 0 var(--backlot-space-4) 0;
  padding-left: var(--backlot-space-6);
}

li {
  margin-bottom: var(--backlot-space-2);
  line-height: var(--backlot-lh-body);
}

ul > li::marker {
  color: var(--backlot-gold);
}

ol > li::marker {
  color: var(--backlot-gold);
  font-family: var(--backlot-font-display);
  font-weight: var(--backlot-fw-medium);
}

/* Nested lists: bullet più sobrio */
ul ul > li::marker,
ul ol > li::marker {
  color: var(--backlot-gold-deep);
  font-size: 0.9em;
}

/* --- Variant: lista con check oro --- */
.bkl-list--check {
  list-style: none;
  padding-left: 0;
}
.bkl-list--check > li {
  position: relative;
  padding-left: 1.75em;
}
.bkl-list--check > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--backlot-gold);
  font-weight: var(--backlot-fw-bold);
  font-family: var(--backlot-font-display);
}

/* --- Variant: lista con em dash --- */
.bkl-list--dash {
  list-style: none;
  padding-left: 0;
}
.bkl-list--dash > li {
  position: relative;
  padding-left: 1.5em;
}
.bkl-list--dash > li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--backlot-gold);
}

/* ============================================================
   11. DIVIDERS
   ============================================================ */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--backlot-gold-soft) 50%,
    transparent 100%
  );
  margin: var(--backlot-space-8) 0;
  opacity: 0.55;
}

/* --- Gem divider art-deco (linea + gemma centrale) ---
   SVG inline tramite background-image (data URI). Il marker centrale
   è un diamante con gradient gold. Per modificarlo, regenerare il
   data URI con Figma export o tool online. */
.bkl-divider--gem {
  display: flex;
  align-items: center;
  gap: var(--backlot-space-3);
  margin: var(--backlot-space-12) 0;
}
.bkl-divider--gem::before,
.bkl-divider--gem::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--backlot-gold-soft) 100%
  );
  opacity: 0.45;
}
.bkl-divider--gem::after {
  background: linear-gradient(
    90deg,
    var(--backlot-gold-soft) 0%,
    transparent 100%
  );
}
.bkl-divider--gem .bkl-divider__gem,
.bkl-divider--gem > svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--backlot-gold-soft);
  filter: drop-shadow(0 0 6px rgba(245, 198, 107, 0.55));
}

/* Se l'utente non passa SVG, fallback con unicode diamond */
.bkl-divider--gem:not(:has(svg, .bkl-divider__gem))::before {
  flex: 1;
}
.bkl-divider--gem:not(:has(svg, .bkl-divider__gem)) {
  text-align: center;
}

/* --- Compact divider --- */
.bkl-divider--small {
  width: 60px;
  margin: var(--backlot-space-5) auto;
  height: 1px;
  border: none;
  background: var(--backlot-gold-soft);
  opacity: 0.4;
}

/* ============================================================
   12. FORMS — refinement + custom checkbox/radio
   La base.css ha forme basic. Qui rifiniamo + custom inputs.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--backlot-surface-1);
  color: var(--backlot-text);
  border: 1px solid var(--backlot-border);
  border-radius: var(--backlot-radius-md);
  padding: var(--backlot-space-3) var(--backlot-space-4);
  font-family: inherit;
  font-size: var(--backlot-fs-body);
  line-height: var(--backlot-lh-tight);
  transition:
    border-color var(--backlot-transition-base),
    box-shadow var(--backlot-transition-base);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--backlot-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--backlot-lh-body);
}

label {
  display: block;
  margin-bottom: var(--backlot-space-2);
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-body-sm);
  font-weight: var(--backlot-fw-medium);
  color: var(--backlot-text);
}

::placeholder {
  color: var(--backlot-text-muted);
  opacity: 0.7;
}

/* Form group spacing */
.bkl-field {
  margin-bottom: var(--backlot-space-4);
}

.bkl-field__hint {
  display: block;
  margin-top: var(--backlot-space-1);
  font-size: var(--backlot-fs-xs);
  color: var(--backlot-text-muted);
}

.bkl-field__error {
  display: block;
  margin-top: var(--backlot-space-1);
  font-size: var(--backlot-fs-xs);
  color: var(--backlot-error);
}

/* --- Custom checkbox --- */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--backlot-surface-1);
  border: 1.5px solid var(--backlot-border-gold);
  vertical-align: middle;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition:
    background-color var(--backlot-transition-fast),
    border-color var(--backlot-transition-fast);
}

input[type="checkbox"] {
  border-radius: var(--backlot-radius-sm);
}

input[type="radio"] {
  border-radius: var(--backlot-radius-circle);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--backlot-gold);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--backlot-shadow-focus-ring);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--backlot-gradient-gold);
  border-color: var(--backlot-gold);
}

/* Tick svg per checkbox checked */
input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--backlot-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Dot per radio checked */
input[type="radio"]:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--backlot-ink);
}

/* Label affiancata a checkbox/radio */
.bkl-check {
  display: inline-flex;
  align-items: center;
  gap: var(--backlot-space-3);
  cursor: pointer;
  font-size: var(--backlot-fs-body);
  color: var(--backlot-text);
}

/* ============================================================
   13. ALERTS
   ============================================================ */
.bkl-alert {
  display: flex;
  gap: var(--backlot-space-3);
  align-items: flex-start;
  margin: var(--backlot-space-3) 0;
  padding: var(--backlot-space-4);
  border-left: 3px solid var(--backlot-gold);
  border-radius: 0 var(--backlot-radius-md) var(--backlot-radius-md) 0;
  background: rgba(201, 168, 76, 0.08);
  color: var(--backlot-text);
}

.bkl-alert__icon {
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  color: var(--backlot-gold);
  font-size: 1em;
  line-height: 1.5;
  text-align: center;
}

.bkl-alert__content {
  flex: 1;
}

.bkl-alert__title {
  margin: 0 0 var(--backlot-space-1) 0;
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-body);
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-gold);
}

.bkl-alert__text {
  font-size: var(--backlot-fs-body-sm);
  line-height: var(--backlot-lh-body);
}

.bkl-alert__text :last-child {
  margin-bottom: 0;
}

/* Variants */
.bkl-alert--info {
  border-left-color: var(--backlot-gold);
  background: rgba(201, 168, 76, 0.08);
}
.bkl-alert--info .bkl-alert__icon,
.bkl-alert--info .bkl-alert__title {
  color: var(--backlot-gold);
}

.bkl-alert--success {
  border-left-color: var(--backlot-success);
  background: rgba(34, 197, 94, 0.08);
}
.bkl-alert--success .bkl-alert__icon,
.bkl-alert--success .bkl-alert__title {
  color: var(--backlot-success);
}

.bkl-alert--warning {
  border-left-color: var(--backlot-warning);
  background: rgba(245, 158, 11, 0.08);
}
.bkl-alert--warning .bkl-alert__icon,
.bkl-alert--warning .bkl-alert__title {
  color: var(--backlot-warning);
}

.bkl-alert--danger {
  border-left-color: var(--backlot-error);
  background: rgba(220, 38, 38, 0.08);
}
.bkl-alert--danger .bkl-alert__icon,
.bkl-alert--danger .bkl-alert__title {
  color: var(--backlot-error);
}

/* ============================================================
   14. LOCK STATE (Premium gating preview)
   La logica PHP "quando applicare" arriva in D1/D2.
   Qui solo lo stile.
   ============================================================ */
.bkl-locked {
  position: relative;
  isolation: isolate;
}

.bkl-locked > * {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.bkl-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backlot-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 1;
}

.bkl-locked::after {
  content: "🔒  Sblocca con Premium";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--backlot-space-2);
  padding: var(--backlot-space-3) var(--backlot-space-6);
  font-family: var(--backlot-font-display);
  font-size: var(--backlot-fs-body);
  font-weight: var(--backlot-fw-semibold);
  color: var(--backlot-text-on-gold);
  background: var(--backlot-gradient-gold);
  border-radius: var(--backlot-radius-pill);
  box-shadow: var(--backlot-shadow-card);
  white-space: nowrap;
  pointer-events: auto;
}

/* Variante con CTA come bottone vero (preferibile per a11y).
   Markup atteso:
     <div class="bkl-locked bkl-locked--with-cta">
       <div class="bkl-locked__content">...</div>
       <a class="bkl-locked__cta bkl-btn bkl-btn--primary">Sblocca Premium — €40</a>
     </div>
*/
.bkl-locked--with-cta::before,
.bkl-locked--with-cta::after { content: none; }

.bkl-locked--with-cta {
  position: relative;
}

.bkl-locked--with-cta > .bkl-locked__content {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
}

.bkl-locked--with-cta > .bkl-locked__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--backlot-space-4);
  background: var(--backlot-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  text-align: center;
  padding: var(--backlot-space-6);
}

.bkl-locked--with-cta .bkl-locked__icon {
  font-size: 2em;
  color: var(--backlot-gold);
  filter: drop-shadow(0 0 10px rgba(245, 198, 107, 0.55));
}

/* ============================================================
   15. UTILITY CLASSES (minime)
   ============================================================ */
.bkl-text-gold       { color: var(--backlot-gold); }
.bkl-text-muted      { color: var(--backlot-text-muted); }
.bkl-text-cream      { color: var(--backlot-cream); }
.bkl-text-center     { text-align: center; }
.bkl-text-right      { text-align: right; }

.bkl-mt-0            { margin-top: 0; }
.bkl-mb-0            { margin-bottom: 0; }
.bkl-my-0            { margin-top: 0; margin-bottom: 0; }

.bkl-no-print {
  /* nascondere in stampa */
}
@media print {
  .bkl-no-print { display: none; }
}

/* Visually hidden — accessibility (presente al DOM, invisibile a vista,
   ma esposto a screen-reader e copy/paste). */
.bkl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flex utility minimo (per row di buttons) */
.bkl-flex          { display: flex; }
.bkl-flex-center   { display: flex; align-items: center; justify-content: center; }
.bkl-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.bkl-gap-2         { gap: var(--backlot-space-2); }
.bkl-gap-3         { gap: var(--backlot-space-3); }
.bkl-gap-4         { gap: var(--backlot-space-4); }

/* ============================================================
   ============================================================
   POLISH MAX (Brief B3-POLISH-MAX) — decorazioni signature
   estratte 1:1 dalla landing Shopify (vedi docs/shopify-decorations.md).
   ============================================================
   ============================================================ */

/* ============================================================
   16. CORNER BRACKETS (decorazione NUOVA Backlot)
   Quattro "L" oro agli angoli. Container deve avere position: relative.

   Markup atteso (per coprire tutti e 4 gli angoli):
     <div class="bkl-card bkl-corner-brackets">
       <span class="bkl-corner-brackets__bl"></span>
       <span class="bkl-corner-brackets__br"></span>
       ...content...
     </div>
   I due ::pseudo coprono top-left + top-right; gli span coprono bottom.
   ============================================================ */
.bkl-corner-brackets {
  position: relative;
}

.bkl-corner-brackets::before,
.bkl-corner-brackets::after,
.bkl-corner-brackets__bl,
.bkl-corner-brackets__br {
  content: "";
  position: absolute;
  width: var(--backlot-corner-size);
  height: var(--backlot-corner-size);
  pointer-events: none;
  transition: opacity var(--backlot-transition-smooth),
              border-color var(--backlot-transition-smooth);
}

.bkl-corner-brackets::before {
  top: var(--backlot-corner-offset);
  left: var(--backlot-corner-offset);
  border-top:  var(--backlot-corner-thickness) solid var(--backlot-corner-color);
  border-left: var(--backlot-corner-thickness) solid var(--backlot-corner-color);
}

.bkl-corner-brackets::after {
  top: var(--backlot-corner-offset);
  right: var(--backlot-corner-offset);
  border-top:   var(--backlot-corner-thickness) solid var(--backlot-corner-color);
  border-right: var(--backlot-corner-thickness) solid var(--backlot-corner-color);
}

.bkl-corner-brackets__bl {
  bottom: var(--backlot-corner-offset);
  left:   var(--backlot-corner-offset);
  border-bottom: var(--backlot-corner-thickness) solid var(--backlot-corner-color);
  border-left:   var(--backlot-corner-thickness) solid var(--backlot-corner-color);
}

.bkl-corner-brackets__br {
  bottom: var(--backlot-corner-offset);
  right:  var(--backlot-corner-offset);
  border-bottom: var(--backlot-corner-thickness) solid var(--backlot-corner-color);
  border-right:  var(--backlot-corner-thickness) solid var(--backlot-corner-color);
}

/* Hover/active: gold pieno */
.bkl-corner-brackets:hover::before,
.bkl-corner-brackets:hover::after,
.bkl-corner-brackets:hover .bkl-corner-brackets__bl,
.bkl-corner-brackets:hover .bkl-corner-brackets__br,
.bkl-corner-brackets.is-active::before,
.bkl-corner-brackets.is-active::after,
.bkl-corner-brackets.is-active .bkl-corner-brackets__bl,
.bkl-corner-brackets.is-active .bkl-corner-brackets__br {
  border-color: var(--backlot-corner-color-hover);
}

/* ============================================================
   17. CARD --premium (signature 4-layer shadow Shopify)
   Replica esatta del .pack--pro: shadow stack 1+4+1px con spacer
   scuro che simula doppia cornice oro.
   ============================================================ */
.bkl-card--premium {
  position: relative;
  background: var(--backlot-surface-1);
  border: none;     /* shadow stack disegna i bordi */
  border-radius: var(--backlot-radius-card);
  padding: var(--backlot-space-7);
  color: var(--backlot-text);
  box-shadow: var(--backlot-shadow-premium-stack);
  transition: box-shadow var(--backlot-transition-decorative),
              transform var(--backlot-transition-smooth);
}

.bkl-card--premium:hover {
  box-shadow: var(--backlot-shadow-premium-stack-hover);
  transform: translateY(-2px);
}

/* ============================================================
   18. FRAME (cornice doppia border-image gold metallic)
   Replica del pattern .btn Shopify: border-image gradient.
   Per box (non solo bottoni): hero card, callout premium, header.
   ============================================================ */
.bkl-frame {
  background:
    linear-gradient(var(--backlot-surface-1), var(--backlot-surface-1)) padding-box,
    var(--backlot-gradient-gold-metallic) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--backlot-radius-card);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  padding: var(--backlot-space-7);
  color: var(--backlot-text);
}

/* ============================================================
   19. META — label editoriali (etichetta + separator + valore)
   Uso: "DOMANDA · 1/5", "TENTATIVI · 1", "DURATA · 5 MIN"
   ============================================================ */
.bkl-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--backlot-space-2);
  font-family: var(--backlot-font-mono);
  font-weight: var(--backlot-fw-semibold);
  font-size: var(--backlot-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--backlot-ls-eyebrow-wide);
  color: var(--backlot-text-muted);
  vertical-align: middle;
}

.bkl-meta + .bkl-meta {
  margin-left: var(--backlot-space-4);
}

.bkl-meta__label {
  color: var(--backlot-gold-soft);
}

.bkl-meta__separator {
  color: var(--backlot-gold);
  font-size: 1.1em;
  line-height: 0;
  opacity: 0.7;
}

.bkl-meta__value {
  color: var(--backlot-text);
  letter-spacing: 0.08em;        /* meno serrato del label per leggibilità */
}

/* ============================================================
   20. ORNAMENTS (micro-decorazioni inline)
   ============================================================ */
.bkl-ornament {
  display: inline-block;
  vertical-align: middle;
  color: var(--backlot-gold);
  filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.4));
}

.bkl-ornament--dot::before { content: "·"; font-size: 1.4em; line-height: 0; }
.bkl-ornament--diamond::before { content: "◆"; font-size: 0.85em; }
.bkl-ornament--diamond-outline::before { content: "◇"; font-size: 0.85em; }
.bkl-ornament--star::before { content: "✦"; font-size: 0.9em; }
.bkl-ornament--line {
  width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--backlot-gold), transparent);
  margin: 0 var(--backlot-space-2);
  filter: none;
}

/* ============================================================
   21. GEM DIVIDER VERO (sostituisce placeholder B2)
   Markup raccomandato (SVG inline 32x32 con 4 facet + shine).
   Vedi docs/shopify-decorations.md §E per il blocco completo.
   ============================================================ */
.bkl-divider--gem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--backlot-space-5);
  padding: var(--backlot-space-12) var(--backlot-space-6);
  margin: 0;
  opacity: 0.9;
}

.bkl-divider--gem::before,
.bkl-divider--gem::after {
  content: "";
  flex: 1 1 auto;
  max-width: 240px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.40) 50%,
    transparent 100%
  );
  opacity: 1;
}

.bkl-divider--gem .bkl-divider__gem,
.bkl-divider--gem > svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.45));
  color: var(--backlot-gold-soft);
}

.bkl-divider--gem-sm .bkl-divider__gem,
.bkl-divider--gem-sm > svg { width: 20px; height: 20px; }
.bkl-divider--gem-lg .bkl-divider__gem,
.bkl-divider--gem-lg > svg { width: 48px; height: 48px; }

/* Animazione facet/shine — opt-in con .bkl-divider--gem--animated */
.bkl-divider--gem--animated .bkl-gem__facet {
  transform-origin: center;
  transform-box: fill-box;
  animation: bkl-gem-facet 3.6s ease-in-out infinite;
}
.bkl-divider--gem--animated .bkl-gem__facet--2 { animation-delay: 0.6s; }
.bkl-divider--gem--animated .bkl-gem__facet--3 { animation-delay: 1.2s; }
.bkl-divider--gem--animated .bkl-gem__facet--4 { animation-delay: 1.8s; }

.bkl-divider--gem--animated .bkl-gem__shine {
  transform-origin: center;
  transform-box: fill-box;
  animation: bkl-gem-shine 2.8s ease-in-out infinite;
}

@keyframes bkl-gem-facet {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes bkl-gem-shine {
  0%, 100% { opacity: 0.2; transform: scale(0.9); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .bkl-divider--gem--animated .bkl-gem__facet,
  .bkl-divider--gem--animated .bkl-gem__shine {
    animation: none;
  }
}

/* ============================================================
   22. BLOCKQUOTE PREMIUM POLISH
   Eleva al livello Shopify: drop-shadow oro, inset gold sottile,
   border-left con gradient verticale, strong opener Geist 700+
   text-shadow gold.
   ============================================================ */
blockquote {
  border-left: 3px solid transparent;
  background:
    linear-gradient(to bottom,
      var(--backlot-gold-soft),
      var(--backlot-gold),
      var(--backlot-gold-deep)) left / 3px 100% no-repeat,
    var(--backlot-surface-1);
  box-shadow:
    var(--backlot-shadow-drop-gold-subtle),
    var(--backlot-shadow-inset-gold);
  font-weight: var(--backlot-fw-medium);   /* Cormorant 500, più editorial */
}

blockquote strong,
blockquote b {
  font-weight: var(--backlot-fw-bold);
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
}

/* ============================================================
   23. BUTTONS POLISH
   Refinement gradient + drop-shadow + active inset "pressed".
   ============================================================ */
.bkl-btn--primary {
  background: var(--backlot-gradient-gold-refined);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  box-shadow:
    var(--backlot-shadow-drop-gold-subtle),
    var(--backlot-shadow-inset-gold);
}

.bkl-btn--primary:hover {
  box-shadow:
    var(--backlot-shadow-drop-gold-strong),
    var(--backlot-shadow-inset-gold-strong);
}

.bkl-btn--primary:active {
  background: linear-gradient(135deg, var(--backlot-gold-deep) 0%, #6F5A22 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.bkl-btn--secondary:hover {
  background: var(--backlot-gradient-gold-radial-glow);
  border-color: var(--backlot-gold-soft);
}

/* ============================================================
   24. TYPOGRAPHY EDITORIAL FINE-TUNING
   Letter-spacing + line-height ai valori esatti Shopify.
   ============================================================ */
h1 {
  letter-spacing: var(--backlot-ls-display-tight);   /* -0.025em */
  line-height: 1.05;
}

h2 { letter-spacing: -0.01em; line-height: 1.15; }
h3 { letter-spacing: 0;        line-height: 1.3;  }

.bkl-eyebrow {
  font-family: var(--backlot-font-mono);
  font-weight: var(--backlot-fw-semibold);
  letter-spacing: var(--backlot-ls-eyebrow-wide);
}

.bkl-eyebrow--wide {
  letter-spacing: var(--backlot-ls-eyebrow-extra-wide);
  font-size: 10px;
  color: var(--backlot-text-muted);
}

/* Display gradient text — usa background-clip text */
.bkl-text-gradient-gold {
  background: var(--backlot-gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 30px rgba(245, 198, 107, 0.25);
}

/* ============================================================
   25. NOISE TEXTURE (opt-in body decoration)
   Toggle: aggiungi `bkl-grain-on` al <body> per attivare.
   ============================================================ */
body.bkl-grain-on::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.018;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}