/* tutorial.css — theming Shepherd.js coi token --wardrobe-* (dark/gold).
   La classe .wardrobe-tour è applicata a .shepherd-element dall'engine. */

.shepherd-element.wardrobe-tour {
  background: var(--wardrobe-surface-2);
  border: 1px solid var(--wardrobe-border-strong);
  border-radius: var(--wardrobe-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: var(--wardrobe-ink);
  max-width: 340px;
}

.shepherd-element.wardrobe-tour .shepherd-content {
  border-radius: inherit;
}

.shepherd-element.wardrobe-tour .shepherd-header {
  background: transparent;
  padding: 1rem 1.1rem 0.35rem;
}

.shepherd-element.wardrobe-tour .shepherd-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wardrobe-ink);
}

.shepherd-element.wardrobe-tour .shepherd-text {
  padding: 0.35rem 1.1rem 0.7rem;
  color: var(--wardrobe-ink-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  /* Il body arriva raw dalla textarea admin: spazi e a capo vanno resi così
     come digitati (Shepherd inietta la stringa come HTML, che li collasserebbe). */
  white-space: pre-wrap;
}

.shepherd-element.wardrobe-tour .shepherd-footer {
  padding: 0.4rem 1.1rem 1rem;
  gap: 0.5rem;
}

/* Shepherd carica il suo CSS DOPO i nostri stili bottone, quindi la sua
   .shepherd-button (blu) vincerebbe per ordine. Riportiamo i ruoli
   .btn--gold/.btn--ghost con specificità maggiore, scoping sul popover del tour. */
.shepherd-element.wardrobe-tour .shepherd-button.btn--gold {
  color: hsl(var(--gold-ink));
  background: linear-gradient(180deg, hsl(var(--gold-soft)), hsl(var(--gold)));
  border-color: hsl(var(--gold));
}
.shepherd-element.wardrobe-tour .shepherd-button.btn--gold:hover {
  color: hsl(var(--gold-ink));
  background: linear-gradient(180deg, hsl(var(--gold)), hsl(var(--gold-deep)));
}
.shepherd-element.wardrobe-tour .shepherd-button.btn--ghost {
  background: transparent;
  color: var(--wardrobe-ink);
  border: 1px solid var(--wardrobe-border-strong);
}
.shepherd-element.wardrobe-tour .shepherd-button.btn--ghost:hover {
  color: var(--wardrobe-ink);
  border-color: var(--wardrobe-gold);
}

/* La freccia deve avere lo stesso fondo del popover */
.shepherd-element.wardrobe-tour .shepherd-arrow::before {
  background: var(--wardrobe-surface-2);
  border: 1px solid var(--wardrobe-border-strong);
}

.shepherd-element.wardrobe-tour .shepherd-cancel-icon {
  color: var(--wardrobe-ink-muted);
}
.shepherd-element.wardrobe-tour .shepherd-cancel-icon:hover {
  color: var(--wardrobe-gold);
}

/* Velo di sfondo un filo più scuro del default */
.shepherd-modal-overlay-container {
  opacity: 0.62;
}

/* Anello gold sull'elemento evidenziato (angoli appena arrotondati, accento netto) */
.shepherd-target.shepherd-enabled {
  outline: 2px solid var(--wardrobe-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .shepherd-element,
  .shepherd-modal-overlay-container {
    transition: none !important;
  }
}