/* ================================================================
   FEETFANSLY — SELLER APP CSS
   File: wwwroot/css/seller.css

   DESIGNER: questo file è IL TUO playground per l'area seller.
   Non toccare site.css / components.css / layout.css — quelli
   sono del sito pubblico. Qui sei libero/a.

   STRUTTURA:
   1. Variabili CSS (colori, spazi, font)
   2. Reset & base
   3. Sidebar
   4. Topbar
   5. Content area
   6. Cards & Widgets
   7. Form elements
   8. Progress wizard
   9. Upload zones
   10. Stats / Charts area
   11. Badges & Pills
   12. Responsive
   ================================================================ */

/* ── 1. VARIABILI ─────────────────────────────────────────────── */
:root {
  /* Brand */
/*  --sl-primary:        #8b5cf6;*/       /* viola principale */
  --sl-primary:        #7c3aed;       /* BUG-12 · swap: era #5A189A viola scuro */
  --sl-primary-light:  #a78bfa;
  --sl-primary-dark:   #6d28d9;
  --sl-accent:         #ec4899;       /* rosa accent */
  --sl-gradient:       linear-gradient(135deg, #8b5cf6 0%, #e91e63 100%);
  --sl-white:          #ffffff;

  /* Sidebar */
  --sl-sidebar-bg:     #ffffff;
  --sl-sidebar-width:  240px;
  --sl-sidebar-collapsed-width: 72px;
  --sl-sidebar-text:   #52525b;
  --sl-sidebar-active: #18181b;
  --sl-sidebar-hover:  rgba(90,24,154,.08);
  --sl-sidebar-border: #e4e4e7;

  /* Topbar */
  --sl-topbar-height:  60px;
  --sl-topbar-bg:      #ffffff;
  --sl-topbar-border:  #e4e4e7;

  /* Content */
  --sl-content-bg:     #f4f4f6;
  --sl-card-bg:        #ffffff;
  --sl-card-border:    #e4e4e7;
  --sl-card-radius:    14px;
  --sl-card-shadow:    0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);

  /* Typography */
  --sl-font:           'Poppins', sans-serif;
  /*--sl-font:           'Montserrat', sans-serif;*/
  --sl-text-primary:   #18181b;
  --sl-text-secondary: #71717a;
  --sl-text-muted:     #a1a1aa;

  /* Status */
  --sl-success:        #22c55e;
  --sl-warning:        #f59e0b;
  --sl-danger:         #ef4444;
  --sl-info:           #3b82f6;

  /* Misc */
  --sl-radius-sm:      8px;
  --sl-radius-md:      12px;
  --sl-radius-lg:      18px;
  --sl-radius-pill:    999px;
  --sl-transition:     0.2s ease;
}


/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sl-app {
  display: flex;
  min-height: 100vh;
  font-family: var(--sl-font);
  background: var(--sl-content-bg);
  color: var(--sl-text-primary);
}

/* ── 3. SIDEBAR ───────────────────────────────────────────────── */
.sl-sidebar {
  width: var(--sl-sidebar-width);
  height: 100vh;
  background: var(--sl-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  border-right: 1px solid var(--sl-sidebar-border);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--sl-transition), transform var(--sl-transition);
}

/* Logo */
.sl-sidebar__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--sl-sidebar-border);
}
.sl-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.sl-sidebar__logo img { width: 28px; height: 28px; flex-shrink: 0; }
.sl-sidebar__logo-text {
  display: flex;
  align-items: baseline;
  line-height: 1;
  overflow: hidden;
}
/* saint-george logo on white sidebar */
.sl-logo-f1, .sl-logo-f2 {
  font-family: 'Saint George', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--sl-primary);
}
.sl-logo-eet, .sl-logo-ansly {
  font-family: 'Saint George', sans-serif;
  font-weight: 400;
  font-size: 20px;
  background: var(--sl-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pulsante collapse — design Daniela: sfondo rosa brand, icona bianca */
.sl-collapse-btn {
  width: 28px; height: 28px;
  border-radius: 10px;
  border: none;
  background: #e91e63;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: background var(--sl-transition);
  flex-shrink: 0;
}
.sl-collapse-btn:hover {
  background: #c2185b;
}


/* LOGO INTESTAZIONE*/
/*=====================
INTESTAZONE Logo
============*/

    .saint-george {
      font-family: 'Saint George', sans-serif;
      font-weight: 400;
      font-size: 48px;
      font-style: normal;
    }
/*
    .auth-logo {
        font-family: "Monsieur La Doulaise", cursive;
        font-size: 2.8rem;
        font-weight: 700;
        background: linear-gradient(135deg,#8B2FC9,#E91E8C);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


*/

.auth-logo{
    display: flex;
    align-items: center;   /* allineamento verticale */
    justify-content: center; /* mantiene tutto centrato nella card */
    gap: 8px;              /* spazio tra logo e testo */
    font-family: "Saint George", cursive;
    font-size: 2.8rem;
    font-weight: 700;
    background: #fff;
    /*
    background: linear-gradient(135deg,#8B2FC9,#E91E8C);
    */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-img{
width: 84px !important;
height: 84px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.09);
box-shadow:0 2px 6px rgba(0,0,0,.15);
padding: 16px;
object-fit: contain;

}


/* Profile mini */
.sl-sidebar__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sl-sidebar-border);
}
.sl-sidebar__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sl-primary);
}
.sl-sidebar__username {
  font-size: 13px;
  font-weight: 600;
  color: #18181b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-sidebar__role {
  font-size: 11px;
  color: var(--sl-sidebar-text);
}

/* Nav */
.sl-sidebar__nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}
.sl-sidebar__section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sl-sidebar-text);
  padding: 8px 20px 4px;
  margin-top: 8px;
}
.sl-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  text-decoration: none;
  color: var(--sl-sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 0;
  transition: background var(--sl-transition), color var(--sl-transition);
  position: relative;
  cursor: pointer;
}
.sl-nav-item:hover {
  background: var(--sl-sidebar-hover);
  color: var(--sl-primary);
}
.sl-nav-item.active {
  color: var(--sl-primary);
  background: rgba(90,24,154,.08);
}
.sl-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--sl-gradient);
  border-radius: 0 3px 3px 0;
}
.sl-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sl-nav-badge {
  margin-left: auto;
  background: var(--sl-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--sl-radius-pill);
  min-width: 18px;
  text-align: center;
}

/* Bottom section */
.sl-sidebar__bottom {
  padding: 12px 0;
  border-top: 1px solid var(--sl-sidebar-border);
}

/* ── SIDEBAR COLLAPSED (desktop) ────────────────────────────── */
.sl-sidebar--collapsed {
  width: var(--sl-sidebar-collapsed-width);
}

/* Nasconde tutti gli elementi con classe sl-collapse-hide */
.sl-sidebar--collapsed .sl-collapse-hide {
  display: none !important;
}

/* Centra le icone quando collassata */
.sl-sidebar--collapsed .sl-nav-item {
  justify-content: center;
  padding: 10px;
  position: relative;
}

/* Tooltip al hover in modalità collassata */
.sl-sidebar--collapsed .sl-nav-item[data-label]:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(var(--sl-sidebar-collapsed-width) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #18181b;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 200;
  pointer-events: none;
}

.sl-sidebar--collapsed .sl-sidebar__profile {
  justify-content: center;
  padding: 12px 0;
}

.sl-sidebar--collapsed .sl-sidebar__logo-wrap {
  justify-content: center;
  padding: 16px 0 12px;
}

.sl-sidebar--collapsed .sl-sidebar__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sl-sidebar--collapsed .sl-nav-badge {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 9px;
  padding: 1px 4px;
}

/* Sposta topbar e main quando sidebar è collassata */
.sl-app--collapsed .sl-topbar {
  left: var(--sl-sidebar-collapsed-width);
}
.sl-app--collapsed .sl-main {
  margin-left: var(--sl-sidebar-collapsed-width);
}

/* ── 4. TOPBAR ────────────────────────────────────────────────── */
.sl-topbar {
  position: fixed;
  top: 0;
  left: var(--sl-sidebar-width);
  right: 0;
  height: var(--sl-topbar-height);
  background: var(--sl-topbar-bg);
  border-bottom: 1px solid var(--sl-topbar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 90;
  gap: 16px;
  transition: left var(--sl-transition);
}
.sl-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sl-topbar__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--sl-text-primary);
}
.sl-topbar__breadcrumb {
  font-size: 13px;
  color: var(--sl-text-muted);
}
.sl-topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-topbar__icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--sl-text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--sl-transition);
  position: relative;
}
.sl-topbar__icon-btn:hover { background: var(--sl-content-bg); }
.sl-topbar__notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--sl-accent);
  border-radius: 50%;
  border: 2px solid #fff;
}
.sl-topbar__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sl-primary);
  cursor: pointer;
}

/* Pulsante toggle topbar — sempre visibile, rosa ciclamino */
.sl-toggle-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: none;
  background: #e91e63;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--sl-transition);
}
.sl-toggle-btn:hover { background: #c2185b; }

/* Hamburger legacy — nascosto */
.sl-hamburger { display: none; }

/* ── 5. CONTENT AREA ──────────────────────────────────────────── */
.sl-main {
  margin-left: var(--sl-sidebar-width);
  margin-top: var(--sl-topbar-height);
  padding: 28px 28px;
  min-height: calc(100vh - var(--sl-topbar-height));
  flex: 1;
  overflow-x: hidden;
  min-width: 0;
  transition: margin-left var(--sl-transition);
}
.sl-page-header {
  margin-bottom: 24px;
}
.sl-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sl-text-primary);
  margin-bottom: 4px;
}
.sl-page-subtitle {
  font-size: 14px;
  color: var(--sl-text-secondary);
}

/* ── 6. CARDS & WIDGETS ───────────────────────────────────────── */
.sl-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-card-border);
  border-radius: var(--sl-card-radius);
  box-shadow: var(--sl-card-shadow);
  padding: 20px;
}
.sl-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sl-text-secondary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sl-card__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--sl-text-primary);
}
.sl-card__delta {
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.sl-card__delta--up   { color: var(--sl-success); }
.sl-card__delta--down { color: var(--sl-danger); }

/* Stat grid */
.sl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Profile completion banner */
.sl-completion-banner {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-card-border);
  border-radius: var(--sl-card-radius);
  box-shadow: var(--sl-card-shadow);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sl-completion-banner__text { flex: 1; min-width: 200px; }
.sl-completion-banner__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.sl-completion-banner__subtitle {
  font-size: 13px;
  color: var(--sl-text-secondary);
}
.sl-completion-banner__pct {
  font-size: 13px;
  font-weight: 700;
  background: var(--sl-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.sl-progress-bar {
  height: 8px;
  background: #e4e4e7;
  border-radius: var(--sl-radius-pill);
  overflow: hidden;
  width: 100%;
  margin-bottom: 4px;
}
.sl-progress-bar__fill {
  height: 100%;
  background: var(--sl-gradient);
  border-radius: var(--sl-radius-pill);
  transition: width 0.6s ease;
}
.sl-completion-banner__bar { flex: 2; min-width: 200px; }

/* ── 7. FORM ELEMENTS ─────────────────────────────────────────── */
.sl-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin-bottom: 6px;
}
.sl-form-label .required { color: var(--sl-accent); margin-left: 2px; }
.sl-form-hint {
  font-size: 11.5px;
  color: var(--sl-text-muted);
  margin-top: 4px;
}
.sl-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--sl-card-border);
  border-radius: var(--sl-radius-sm);
  font-family: var(--sl-font);
  font-size: 14px;
  color: var(--sl-text-primary);
  background: #fff;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
  outline: none;
}
.sl-input:focus {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.sl-input::placeholder { color: var(--sl-text-muted); }
.sl-input--error { border-color: var(--sl-danger) !important; }
.sl-input-group {
  display: flex;
  align-items: center;
}
.sl-input-group .sl-input-prefix,
.sl-input-group .sl-input-suffix {
  padding: 10px 12px;
  background: var(--sl-content-bg);
  border: 1.5px solid var(--sl-card-border);
  color: var(--sl-text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.sl-input-group .sl-input-prefix { border-right: none; border-radius: var(--sl-radius-sm) 0 0 var(--sl-radius-sm); }
.sl-input-group .sl-input-suffix { border-left: none; border-radius: 0 var(--sl-radius-sm) var(--sl-radius-sm) 0; }
.sl-input-group .sl-input { border-radius: 0; flex: 1; }

.sl-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--sl-card-border);
  border-radius: var(--sl-radius-sm);
  font-family: var(--sl-font);
  font-size: 14px;
  color: var(--sl-text-primary);
  background: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.sl-select:focus {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.sl-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--sl-card-border);
  border-radius: var(--sl-radius-sm);
  font-family: var(--sl-font);
  font-size: 14px;
  color: var(--sl-text-primary);
  background: #fff;
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-textarea:focus {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

/* ═══════════════════════════════════════════════════════════════
   FIX iOS AUTO-ZOOM SU INPUT
   Safari iOS zooma la viewport se il font dell'input è < 16px
   e non torna più indietro → pagina "allargata" fuori dai bordi.
   Soluzione: font-size 16px su mobile/tablet per tutti gli input.
   Il padding viene leggermente ridotto per compensare visivamente.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .sl-input,
  .sl-select,
  .sl-textarea,
  input[type="text"].sl-input,
  input[type="email"].sl-input,
  input[type="password"].sl-input,
  input[type="number"].sl-input,
  input[type="tel"].sl-input,
  input[type="url"].sl-input,
  input[type="search"].sl-input,
  input[type="date"].sl-input {
    font-size: 16px !important;
    padding: 9px 14px;
  }
  .sl-textarea {
    padding: 9px 14px;
  }
  .sl-input-group .sl-input-prefix,
  .sl-input-group .sl-input-suffix {
    font-size: 14px;
    padding: 9px 12px;
  }
}

/* Check card */
.sl-check-card {
  border: 1.5px solid var(--sl-card-border);
  border-radius: var(--sl-radius-sm);
  padding: 12px 14px;
  background: #fafafa;
  transition: border-color var(--sl-transition);
}
.sl-check-card:has(input:checked) {
  border-color: var(--sl-primary);
  background: rgba(139,92,246,.04);
}
.sl-check-card .form-check-input {
  accent: var(--sl-primary);
  accent-color: var(--sl-primary); }

.form-check-input:checked {
  background-color: var(--sl-primary);
  border-color: #0d6efd;
  /*box-shadow: 2px 2px 2px 2px rgba(139,92,246,.4);*/
}

/* Pill toggle group */
.sl-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sl-pill-group input[type=radio],
.sl-pill-group input[type=checkbox] {
  display: none;
}
.sl-pill-group label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1.5px solid var(--sl-card-border);
  border-radius: var(--sl-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--sl-text-secondary);
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
}
.sl-pill-group label:hover {
  border-color: var(--sl-primary-light);
  color: var(--sl-primary);
}
.sl-pill-group input:checked + label {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: #fff;
}

/* Skin swatch */
.sl-skin-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sl-skin-group input { display: none; }
.sl-skin-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all var(--sl-transition);
  position: relative;
}
.sl-skin-swatch:hover { transform: scale(1.15); }
.sl-skin-group input:checked + .sl-skin-swatch {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sl-primary);
}
.sl-skin-fair    { background: #fde8d8; }
.sl-skin-light   { background: #f5d5b5; }
.sl-skin-medium  { background: #d4956a; }
.sl-skin-tan     { background: #b07d4a; }
.sl-skin-dark    { background: #7a4e2d; }
.sl-skin-deep    { background: #3d1f0d; }

/* Slider */
.sl-slider-wrap {
  padding: 4px 0 8px;
}
.sl-slider {
  width: 100%;
  accent-color: var(--sl-primary);
  height: 6px;
  cursor: pointer;
}
.sl-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sl-text-muted);
  margin-top: 4px;
}
.sl-slider-value {
  display: inline-block;
  background: var(--sl-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--sl-radius-pill);
  margin-bottom: 6px;
}

/* Section divider */
.sl-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sl-text-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sl-card-border);
  margin-bottom: 16px;
  margin-top: 8px;
}

/* Info box */
.sl-info-box {
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: var(--sl-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--sl-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom:24px

}
.sl-info-box i { color: var(--sl-primary); margin-top: 1px; flex-shrink: 0; }

.sl-info {
  font-size:15px;
  font-weight:600;
  color:#fff;
  margin-bottom:20px
}
.sl-info-email {
font-size:15px;
font-weight:600;
color:#a78bfa;
margin-bottom:28px
}

.sl-info-footer
{
  font-size:13px;
  color:#fff;
  margin-bottom:28px
}

.step-ico {
  width:80px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(135deg, #8b5cf6, #e91e63);
  display:flex;
  align-items:center;
  justify-content:center;margin:0 auto 20px;
  font-size:32px;color:#fff;
  box-shadow:0 8px 30px rgba(139,92,246,.4);
}



/* ── 8. PROGRESS WIZARD ───────────────────────────────────────── */
.sl-wizard-progress {
  display: flex;
  align-items: flex-start;           /* FIX: era center → causava disallineamento linee */
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 4px 0;
  width: 100%;
  box-sizing: border-box;
}
.sl-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sl-wizard-step__circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--sl-card-border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--sl-text-muted);
  transition: all var(--sl-transition);
  position: relative;
  z-index: 1;
}
.sl-wizard-step.done .sl-wizard-step__circle {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: #fff;
}
.sl-wizard-step.active .sl-wizard-step__circle {
  background: var(--sl-gradient);
  border: none;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(139,92,246,.2);
}
.sl-wizard-step__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--sl-text-muted);
  white-space: nowrap;
}
.sl-wizard-step.done .sl-wizard-step__label,
.sl-wizard-step.active .sl-wizard-step__label {
  color: var(--sl-text-primary);
  font-weight: 600;
}
/* Le linee si STRINGONO sui telefoni per far stare tutto */
.sl-wizard-line {
  height: 2px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 40px;
  background: var(--sl-card-border);
  margin-top: 17px;                  /* FIX: (36-2)/2 — allinea la linea al centro del cerchio */
  transition: background var(--sl-transition);
}
.sl-wizard-line.done { background: var(--sl-primary); }

/* Step counter text */
.sl-wizard-counter {
  text-align: center;
  font-size: 12px;
  color: var(--sl-text-muted);
  margin-bottom: 20px;
  font-weight: 500;
}
.sl-wizard-counter strong {
  background: var(--sl-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wizard card */
.sl-wizard-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-card-border);
  border-radius: var(--sl-card-radius);
  box-shadow: var(--sl-card-shadow);
  padding: 28px 32px;
  width: 100%;               /* FIX: non supera mai il contenitore */
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;    /* FIX: padding non aggiunge larghezza */
}
.sl-wizard-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sl-text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-wizard-card__subtitle {
  font-size: 13px;
  color: var(--sl-text-secondary);
  margin-bottom: 24px;
}

/* ── 9. UPLOAD ZONES ──────────────────────────────────────────── */
.sl-upload-zone {
  border: 2px dashed var(--sl-card-border);
  border-radius: var(--sl-card-radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--sl-transition);
  background: #fafafa;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sl-upload-zone:hover {
  border-color: var(--sl-primary);
  background: rgba(139,92,246,.03);
}
.sl-upload-zone.has-preview {
  border-style: solid;
  border-color: var(--sl-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sl-upload-zone--large { min-height: 180px; }
.sl-upload-zone__icon  { font-size: 28px; color: var(--sl-text-muted); margin-bottom: 8px; }
.sl-upload-zone__text  { font-size: 13px; color: var(--sl-text-muted); }
.sl-upload-zone__sub   { font-size: 11px; color: var(--sl-text-muted); margin-top: 4px; }

/* Avatar upload circle */
.sl-avatar-upload {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px dashed var(--sl-card-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--sl-transition);
  background: #fafafa;
  position: relative;
  margin: 0 auto;
}
.sl-avatar-upload:hover { border-color: var(--sl-primary); }
.sl-avatar-upload img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
}
.sl-avatar-upload__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--sl-transition);
  color: #fff;
  font-size: 20px;
}
.sl-avatar-upload:hover .sl-avatar-upload__overlay { opacity: 1; }

/* Cover upload */
.sl-cover-upload {
  height: 140px;
  border-radius: var(--sl-card-radius);
  border: 2px dashed var(--sl-card-border);
  background: #fafafa;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all var(--sl-transition);
}
.sl-cover-upload:hover { border-color: var(--sl-primary); }
.sl-cover-upload img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
}

/* ── 10. STATS / EARNINGS ─────────────────────────────────────── */
.sl-earnings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--sl-card-border);
  border: 1px solid var(--sl-card-border);
  border-radius: var(--sl-card-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.sl-earnings-item {
  background: var(--sl-card-bg);
  padding: 16px 18px;
}
.sl-earnings-item__label {
  font-size: 11px;
  color: var(--sl-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.sl-earnings-item__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--sl-text-primary);
}

/* ── 11. BADGES & PILLS ───────────────────────────────────────── */
.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--sl-radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.sl-badge--pending  { background: #fef3c7; color: #92400e; }
.sl-badge--approved { background: #dcfce7; color: #166534; }
.sl-badge--rejected { background: #fee2e2; color: #991b1b; }
.sl-badge--info     { background: #dbeafe; color: #1e40af; }
.sl-badge--primary  { background: rgba(139,92,246,.12); color: var(--sl-primary); }

/* ── 12. BUTTONS ──────────────────────────────────────────────── */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--sl-radius-pill);
  font-family: var(--sl-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--sl-transition);
  text-decoration: none;
  white-space: nowrap;
}
.sl-btn--primary {
  background: var(--sl-gradient);
  color: #fff;
  box-shadow: 0 2px 12px rgba(139,92,246,.3);
}
.sl-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(139,92,246,.4);
  color: #fff;
}
.sl-btn--outline {
  background: transparent;
  color: var(--sl-text-secondary);
  border: 1.5px solid var(--sl-card-border);
}
.sl-btn--outline:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}
.sl-btn--ghost {
  background: transparent;
  color: var(--sl-text-secondary);
}
.sl-btn--ghost:hover {
  background: var(--sl-content-bg);
  color: var(--sl-text-primary);
}
.sl-btn--danger {
  background: var(--sl-danger);
  color: #fff;
}
.sl-btn--sm { padding: 6px 14px; font-size: 12px; }
.sl-btn--lg { padding: 13px 28px; font-size: 15px; }
.sl-btn--full { width: 100%; }
.sl-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* Nav actions row */
.sl-wizard-nav {
  display: flex;
  flex-wrap: wrap;                   /* FIX: permette al primary CTA di andare a capo quando non c'è spazio */
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--sl-card-border);
}
.sl-wizard-nav .sl-btn:last-child { flex: 1; }

/* FIX mobile stretto: primary CTA full-width su riga dedicata */
@media (max-width: 480px) {
  .sl-wizard-nav { gap: 8px; }
  .sl-wizard-nav .sl-btn:last-child {
    flex: 1 1 100%;
    order: 1;
  }
}

/* ── REGISTRAZIONE (pagine fuori dal layout seller) ───────────── */


.sl-auth-page {
  min-height: 100vh;


/*background: #9422f2;
background: radial-gradient(circle,rgba(148, 34, 242, 0.24) 0%, rgba(193, 22, 245, 0.13) 41%, rgba(241, 245, 241, 1) 70%, rgba(241, 245, 241, 1) 100%);
*/
background: #0B0B0B;
background: linear-gradient(180deg,rgba(11, 11, 11, 1) 0%, rgba(3, 2, 5, 0.93) 3%, rgba(43, 30, 75, 1) 50%, rgba(11, 11, 11, 1) 90%);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--sl-font);
  position: relative;
  overflow: hidden;
}
.sl-auth-page::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139,92,246,.15) 0%, transparent 70%);
  pointer-events: none;
}
.sl-auth-page::after {
  content: '';
  position: absolute;
  bottom: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(236,72,153,.1) 0%, transparent 70%);
  pointer-events: none;
}
.sl-auth-card {
  /*background: #18181b;*/
  background: rgba(135,135,180,.02);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 36px;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px); /* Blurs the content behind the box */
  /*box-shadow: 0 25px 60px rgba(0,0,0,.5);*/
  box-shadow: 0 25px 60px rgba(129,70,175,.5);
}
.sl-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  text-decoration: none;
}
.sl-auth-logo img { width: 32px; }
.sl-auth-logo-text {
  font-size: 18px;
  font-weight: 700;
  background: var(--sl-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sl-auth-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--sl-white);
  margin-bottom: 6px;
}
.sl-auth-subtitle {
  font-size: 14px;
  /*color:#f8f9fa;*/
  color: var(--sl-white);
  text-align: center;
  margin-bottom: 28px;
}
.sl-auth-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(0,0,0,.35);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--sl-radius-sm);
  color: #fff;
  font-family: var(--sl-font);
  font-size: 14px;
  outline: none;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-auth-input:focus {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,.15);
}
.sl-auth-input::placeholder {
color: /*#52525b;*/color:#bbbbbb;
}

.sl-auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  /*color: #52525b; per sfondo chiaro*/
  color: #a1a1aa;
  margin-bottom: 6px;
}
.sl-auth-divider {
  border: none;
  border-top: 0.5px solid rgba(255,255,255,.06);
  margin: 20px 0;
}
.sl-auth-footer {
  text-align: center;
  font-size: 13px;
  color: var(--sl-white);
  /*color: #71717a;*/
  margin-top: 20px;
}
.sl-auth-footer a { color: var(--sl-primary-light); text-decoration: none; }
.sl-auth-footer a:hover { text-decoration: underline; }

/* Role cards */
.sl-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.sl-role-card {
  border: 2px solid rgba(167,106,249,.08);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--sl-transition);
  background: rgba(255,255,255,.03);
  text-decoration: none;
}
.sl-role-card:hover,
.sl-role-card.selected {
  border-color: var(--sl-primary-light);
  background: rgba(139,92,246,.1);
}
.sl-role-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
  color: var(--sl-primary-light);
  transition: all var(--sl-transition);
}
.sl-role-card:hover .sl-role-card__icon,
.sl-role-card.selected .sl-role-card__icon {
  background: var(--sl-gradient);
  color: #fff;
}
.sl-role-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sl-white);
  /*color: #fff;*/
  margin-bottom: 4px;
}
.sl-role-card__sub {
  font-size: 11px;
  /*color: #71717a;*/
  color:#f8f9fa
}

/* Step indicator for auth */
.sl-auth-steps {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}
.sl-auth-step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: all var(--sl-transition);
  display: none;
}
.sl-auth-step-dot.active {
  background: var(--sl-primary);
  width: 20px;
  border-radius: 4px;
  display: none;
}
.sl-auth-step-dot.done { background: var(--sl-primary); }

/* ── 13. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .sl-sidebar {
    transform: translateX(-100%);
    width: var(--sl-sidebar-width) !important;
    transition: transform var(--sl-transition);
  }
  .sl-sidebar.open {
    transform: translateX(0);
    z-index: 1200; /* sopra bottom nav z-index:1100 */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .sl-main {
    margin-left: 0 !important;
    padding: 12px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;  /* FIX: era 80px — ora ~30px di respiro sopra la bottom nav */
    overflow-x: hidden;                                                        /* FIX: previene scroll orizzontale se qualche child sborda */
    max-width: 100vw;                                                          /* FIX: vincolo duro sulla viewport */
    transition: none;
  }
  .sl-topbar {
    left: 0 !important;
    transition: none;
  }
  .sl-hamburger {
    display: flex;
  }
  /* Nasconde collapse btn su mobile */
  .sl-collapse-btn {
    display: none;
  }
  .sl-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1150; /* sopra nav (1100), sotto sidebar (1200) */
  }
  .sl-sidebar-overlay.open { display: block; }
  .sl-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sl-wizard-card {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .sl-role-grid { grid-template-columns: 1fr 1fr; }
  .sl-auth-card { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .sl-stats-grid { grid-template-columns: 1fr 1fr; }
  .sl-role-grid  { grid-template-columns: 1fr 1fr; }
  /* Cerchi 28px + linee flessibili = tutto su schermo */
  .sl-wizard-step__circle { width: 28px; height: 28px; font-size: 11px; }
  .sl-wizard-step.active .sl-wizard-step__circle { box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
  .sl-wizard-line { margin-top: 13px; }   /* FIX: (28-2)/2 — allinea al cerchio ridotto su mobile stretto */
  .sl-wizard-step__label { display: none; }
  .sl-wizard-counter { font-size: 11px; margin-bottom: 14px; }
  .sl-main { padding: 8px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; overflow-x: hidden; }  /* FIX: era 80px */
  .sl-wizard-card { padding: 14px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   14. PAGE HEADER & BACK LINK
   ═══════════════════════════════════════════════════════════════ */
.sl-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sl-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sl-text-primary);
  margin: 0 0 4px;
}
.sl-page-subtitle {
  font-size: 14px;
  color: var(--sl-text-secondary);
  margin: 0;
}
/* ── Back link: bottone pillato con hover gradient ─────────── */
.sl-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 7px 12px;
  background: #fff;
  border: 1.5px solid var(--sl-card-border);
  border-radius: 99px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sl-text-secondary);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color .2s ease, background .2s ease,
              border-color .2s ease, transform .2s ease,
              box-shadow .2s ease;
  cursor: pointer;
  line-height: 1;
}
.sl-back-link i {
  font-size: 11px;
  transition: transform .2s ease;
}
.sl-back-link:hover {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, .32);
}
.sl-back-link:hover i { transform: translateX(-3px); }
.sl-back-link:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   15. EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.sl-empty-state {
  text-align: center;
  padding: 64px 24px;
}
.sl-empty-state__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(139,92,246,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--sl-primary);
  margin: 0 auto 20px;
}
.sl-empty-state__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin-bottom: 8px;
}
.sl-empty-state__text {
  font-size: 14px;
  color: var(--sl-text-secondary);
  max-width: 340px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   16. MODAL
   ═══════════════════════════════════════════════════════════════ */
.sl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sl-modal {
  background: var(--sl-surface);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--sl-border);
}
.sl-modal__icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}
.sl-modal__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin-bottom: 8px;
}
.sl-modal__text {
  font-size: 14px;
  color: var(--sl-text-secondary);
  margin-bottom: 24px;
}
.sl-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ── Danger button ── */
.sl-btn--danger {
  background: #ef4444;
  color: #fff;
  border: none;
}
.sl-btn--danger:hover { background: #dc2626; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   17. PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.sl-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.sl-pagination__btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--sl-text-secondary);
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  transition: all var(--sl-transition);
}
.sl-pagination__btn:hover,
.sl-pagination__btn.active {
  background: var(--sl-primary);
  color: #fff;
  border-color: var(--sl-primary);
}

/* ═══════════════════════════════════════════════════════════════
   18. DIARY — Post Card
   ═══════════════════════════════════════════════════════════════ */
.sl-post-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Thumbnail */
.sl-post-card__thumb {
  height: 180px;
  background: var(--sl-bg);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-post-card__thumb--empty {
  font-size: 2.5rem;
  color: var(--sl-text-muted);
}

/* Badges overlay */
.sl-post-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.sl-post-card__badge--pub {
  background: rgba(34,197,94,.85);
  color: #fff;
}
.sl-post-card__badge--sub {
  background: rgba(139,92,246,.85);
  color: #fff;
}
.sl-post-card__photo-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
}

/* Body */
.sl-post-card__body {
  padding: 16px;
  flex: 1;
}
.sl-post-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sl-post-card__date {
  font-size: 12px;
  color: var(--sl-text-muted);
  margin: 0 0 12px;
}
.sl-post-card__stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--sl-text-secondary);
}
.sl-post-card__stats i { color: var(--sl-primary); }

/* Actions */
.sl-post-card__actions {
  padding: 12px 16px;
  border-top: 1px solid var(--sl-border);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Textarea editor più alta ── */
.sl-textarea--editor {
  min-height: 200px;
  line-height: 1.7;
  font-family: inherit;
}

/* ── Toggle visibility ── */
.sl-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-toggle-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid var(--sl-border);
  cursor: pointer;
  transition: all var(--sl-transition);
}
.sl-toggle-option:hover { border-color: var(--sl-primary); }
.sl-toggle-option.active {
  border-color: var(--sl-primary);
  background: rgba(139,92,246,.07);
}
.sl-toggle-option__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(139,92,246,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--sl-primary);
  flex-shrink: 0;
}
.sl-toggle-option__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--sl-text-primary);
}
.sl-toggle-option__hint {
  font-size: 12px;
  color: var(--sl-text-secondary);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   19. CONTENT — Paid Content Card
   ═══════════════════════════════════════════════════════════════ */
.sl-content-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-content-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Thumbnail */
.sl-content-card__thumb {
  height: 180px;
  background: var(--sl-bg);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Access badge */
.sl-content-card__access-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  backdrop-filter: blur(4px);
}
.sl-badge--paid       { background: rgba(236,72,153,.85); color: #fff; }
.sl-badge--subscribers { background: rgba(139,92,246,.85); color: #fff; }
.sl-badge--both        { background: rgba(245,158,11,.85); color: #fff; }

/* Status badge */
.sl-content-card__status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
}

/* File count */
.sl-content-card__files {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.sl-content-card__files span {
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
}

/* Body */
.sl-content-card__body {
  padding: 14px;
  flex: 1;
}
.sl-content-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sl-text-primary);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sl-content-card__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sl-content-card__price {
  font-weight: 700;
  color: #22c55e;
  font-size: 15px;
}
.sl-content-card__date {
  font-size: 12px;
  color: var(--sl-text-muted);
}

/* Stats */
.sl-content-card__stats {
  display: flex;
  gap: 10px;
}
.sl-content-card__stat {
  background: var(--sl-bg);
  border-radius: 8px;
  padding: 8px 10px;
  flex: 1;
  text-align: center;
}
.sl-content-card__stat-value {
  font-weight: 700;
  font-size: 15px;
  color: var(--sl-text-primary);
}
.sl-content-card__stat-label {
  font-size: 10px;
  color: var(--sl-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Actions */
.sl-content-card__actions {
  padding: 10px 14px;
  border-top: 1px solid var(--sl-border);
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Access type selector ── */
.sl-access-type-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-access-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid var(--sl-border);
  cursor: pointer;
  transition: all var(--sl-transition);
}
.sl-access-card:hover { border-color: var(--sl-primary); }
.sl-access-card.active {
  border-color: var(--sl-primary);
  background: rgba(139,92,246,.07);
}
.sl-access-card__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(139,92,246,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--sl-primary);
  flex-shrink: 0;
  font-size: 14px;
}
.sl-access-card__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--sl-text-primary);
}
.sl-access-card__hint {
  font-size: 11px;
  color: var(--sl-text-secondary);
}

/* ── Upload zone XL ── */
.sl-upload-zone--xl {
  min-height: 240px;
}
.sl-upload-zone--dragover {
  border-color: var(--sl-primary);
  background: rgba(139,92,246,.08);
}
.sl-upload-zone--dragover .sl-upload-zone__icon {
  transform: scale(1.15);
}

/* ── Stats grid small variant ── */
.sl-stats-grid--sm {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .sl-stats-grid--sm { grid-template-columns: 1fr; }
  .sl-page-header { flex-direction: column; }
}
/* ═══ DASHBOARD TABLE ═══ */
.sl-table {
    border-collapse: collapse;
    font-size: .875rem;
}

    .sl-table th {
        padding: .5rem 1rem;
        font-size: .75rem;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .sl-table td {
        padding: .625rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,.04);
        vertical-align: middle;
    }

    .sl-table tbody tr:last-child td {
        border-bottom: none;
    }

    .sl-table tbody tr:hover {
        background: rgba(255,255,255,.03);
    }

.sl-thumb-xs {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
}

.sl-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #666;
    font-size: .75rem;
}

.sl-content-title {
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: block;
}

.sl-date-sm {
    font-size: .75rem;
    color: #888;
}

.sl-link-sm {
    font-size: .8rem;
    color: var(--sl-accent);
    text-decoration: none;
}

    .sl-link-sm:hover {
        text-decoration: underline;
    }

/* ═══ BADGE ═══ */
.sl-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
}

.sl-badge--published {
    background: rgba(34,197,94,.15);
    color: #22c55e;
}

.sl-badge--draft {
    background: rgba(255,255,255,.08);
    color: #aaa;
}

.sl-badge--unread {
    background: var(--sl-accent);
    color: #fff;
    font-size: .65rem;
}

/* ═══ SUBSCRIBER LIST ═══ */
.sl-subscriber-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sl-subscriber-row {
    display: flex;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

    .sl-subscriber-row:last-child {
        border-bottom: none;
    }

.sl-avatar-xs {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sl-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #666;
    font-size: .8rem;
}

/* ═══ NOTIFICATION LIST ═══ */
.sl-notif-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sl-notif-row {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

    .sl-notif-row:last-child {
        border-bottom: none;
    }

.sl-notif-row--unread .sl-notif-dot {
    background: var(--sl-accent);
}

.sl-notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #555;
    flex-shrink: 0;
    margin-top: .35rem;
}

/* ═══ WIZARD BANNER ═══ */
.sl-wizard-banner {
    background: rgba(139,92,246,.1);
    border: 1px solid rgba(139,92,246,.25);
    border-radius: var(--sl-card-radius);
    padding: 1rem 1.25rem;
}

.sl-wizard-progress-bar {
    background: rgba(255,255,255,.1);
}

    .sl-wizard-progress-bar .progress-bar {
        background: linear-gradient(90deg, #8b5cf6, #ec4899);
    }

/* ═══ STAT CARDS ═══════════════════════════════════════════ */
.sl-stat-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f5;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.sl-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139,92,246,.12);
}

/* Decorazione angolo in alto a destra */
.sl-stat-card::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: .06;
    background: currentColor;
}

.sl-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.sl-stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.1;
}

.sl-stat-label {
    font-size: .72rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: 'Poppins', sans-serif;
}

/* Alert: solo il badge, niente bordo rosso */
.sl-stat-card--alert {
    border: 1px solid #f0f0f5; /* stesso del normale — niente bordo rosso */
}
.sl-stat-card--alert .sl-stat-value {
    color: #ef4444;
}

/* ═══ STAT CARD ICON COLORS ═══ */.sl-stat-icon--earnings {
    background: rgba(34,197,94,.12);
    color: #22c55e;
}

.sl-stat-icon--subscribers {
    background: rgba(99,102,241,.12);
    color: #818cf8;
}

.sl-stat-icon--sales {
    background: rgba(245,158,11,.12);
    color: #f59e0b;
}

.sl-stat-icon--notif {
    background: rgba(239,68,68,.12);
    color: #f87171;
}

/* ═══ EMPTY STATE ═══ */
.sl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    font-size: .875rem;
}
/* ═══ LANGUAGE SWITCHER TOPBAR ═══ */
.sl-lang-btn {
    font-size: 1.1rem;
    line-height: 1;
    padding: .25rem .4rem;
}
    /* rimuove il caret di Bootstrap dal toggle */
    .sl-lang-btn::after {
        display: none;
    }

.sl-lang-menu {
    min-width: 140px;
    font-size: .875rem;
}

    .sl-lang-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .sl-lang-menu .dropdown-item.active {
            font-weight: 600;
        }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — solo su ≤991px, colore lavanda
   ═══════════════════════════════════════════════════════════════ */
/* NOTA: il padding-bottom di .sl-main è definito nel @media ≤991px della sezione layout (sopra) — 96px + safe-area. */

.sl-bottom-nav {
    display: none;
    position: fixed;
    bottom: 12px;
    left: 14px;
    right: 14px;
    z-index: 1100;
    background: rgba(90, 24, 154, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 32px rgba(90,24,154,.3), 0 2px 8px rgba(0,0,0,.18);
}

@media (max-width: 991px) {
    .sl-bottom-nav { display: flex; }
}

.sl-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    padding: 4px 2px 2px;
    transition: color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.sl-bottom-nav__item i { font-size: 16px; line-height: 1; display: block; }
.sl-bottom-nav__item span { line-height: 1; white-space: nowrap; }
.sl-bottom-nav__item.active { color: #fff; }
.sl-bottom-nav__item.active i { filter: drop-shadow(0 0 5px rgba(255,255,255,.55)); }
.sl-bottom-nav__item:active { transform: scale(.85); color: #fff; }

/* ── Pulsante centrale Pubblica ───────────────────────────── */
.sl-bottom-nav__upload {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 2px 2px 2px;
}
.sl-bottom-nav__upload-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(124,58,237,.5);
    font-size: .95rem;
    color: #fff;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.sl-bottom-nav__upload:active .sl-bottom-nav__upload-btn {
    transform: scale(1.06);
}
.sl-bottom-nav__upload > span:last-child {
    font-size: 9px;
    color: #d8b4fe;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════ */
.sl-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sl-tooltip-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(139,92,246,.15);
    color: var(--sl-primary);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    flex-shrink: 0;
    border: 1px solid rgba(139,92,246,.25);
}
.sl-tooltip-icon:hover + .sl-tooltip-box,
.sl-tooltip-icon:focus + .sl-tooltip-box { opacity: 1; visibility: visible; transform: translateY(0); }

.sl-tooltip-box {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a1a2e;
    color: #fff;
    font-size: 11px;
    font-family: 'Poppins', sans-serif;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 220px;
    white-space: normal;
    text-align: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.sl-tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
}

/* ═══════════════════════════════════════════════════════════════
   ICON BADGE (step 3/4)
   ═══════════════════════════════════════════════════════════════ */
.sl-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 25%;
    background: #f2f2f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--sl-primary);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD — motivational box step 1
   ═══════════════════════════════════════════════════════════════ */
.sl-motivational-box {
    background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(236,72,153,.08));
    border: 1px solid rgba(139,92,246,.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #4a1d96;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sl-motivational-box i { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; color: #8b5cf6; }

/* Prezzi consigliati step 6 */
.sl-price-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid rgba(139,92,246,.3);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-primary);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.sl-price-suggestion:hover,
.sl-price-suggestion:active { background: var(--sl-primary); color: #fff; border-color: var(--sl-primary); }

/* ═══════════════════════════════════════════════════════════════
   HIGHLIGHT BOX (ff-highlight-box) — step wizard motivational
   ═══════════════════════════════════════════════════════════════ */
.ff-step-container { margin: 20px 0; }
.ff-highlight-box {
    background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(236,72,153,.07));
    border: 1px solid rgba(139,92,246,.2);
    border-radius: 12px;
    padding: 14px 16px;
}
.ff-highlight-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ff-icon {
    font-size: 1.4rem;
    color: var(--sl-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.ff-main-text {
    font-size: 13px;
    font-weight: 600;
    color: #4a1d96;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
}
.ff-sub-text {
    font-size: 12px;
    color: #7c3aed;
    margin-top: 4px;
    font-family: 'Poppins', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   ACCORDION CARD (sl-card-acc) — step 3 sections
   ═══════════════════════════════════════════════════════════════ */
.sl-card-acc {
    border: 1.5px solid #ede9fe !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 8px;
}
/* CRITICO: Bootstrap .card-body aggiunge 1rem di padding che gonfia le card collassate */
.sl-card-acc .card-body {
    padding: 0 !important;
}
/* Sovrascrivo le variabili Bootstrap PRIMA che le applichi */
.sl-accordion {
    --bs-accordion-btn-padding-y: 10px;
    --bs-accordion-btn-padding-x: 14px;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: #1a1a2e;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-body-padding-y: 4px;
    --bs-accordion-body-padding-x: 14px;
}
.sl-accordion .accordion-item {
    border: none;
    background: transparent;
}
/* Bootstrap h2 aggiunge margin di default - annullato */
.sl-accordion .accordion-header {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.sl-accordion .accordion-button {
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: #1a1a2e;
    gap: 10px;
    border-radius: 14px !important;
    box-shadow: none !important;
    border-bottom: none !important;
    line-height: 1.2;
    padding: 10px 14px !important;   /* !important come ultima difesa */
}
.sl-accordion .accordion-button:not(.collapsed) {
    background: rgba(139,92,246,.04);
    color: var(--sl-primary);
}
.sl-accordion .accordion-button::after {
    filter: none;
    opacity: .5;
}
.sl-accordion .accordion-body {
    padding: 4px 16px 16px;
}

/* DIVIDER dentro accordion */
.sl-divider-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 12px 0 8px;
    font-family: 'Poppins', sans-serif;
}
.sl-divider-text svg { flex-shrink: 0; opacity: .7; }
.sl-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Seconda subtitle step 2 */
.sl-wizard-card__subtitle2 {
    font-size: 13px;
    color: #8b5cf6;
    font-family: 'Poppins', sans-serif;
    margin-top: -8px;
    margin-bottom: 16px;
    font-style: italic;
}

/* sl-divider-text FA icon color */
.sl-divider-text i { color: var(--sl-primary); font-size: 13px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   ACCORDION CUSTOM (cat-group) — Step 3 & Step 4 shared
   Stessa struttura, zero Bootstrap
   ═══════════════════════════════════════════════════════════════ */
.cat-accordion { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; width:100%; box-sizing:border-box; }

.cat-group { border-radius:14px; border:1.5px solid #ede9fe; background:#fff; width:100%; min-width:0; box-sizing:border-box; margin-bottom:8px; }
.cat-group.is-open { box-shadow:0 2px 12px rgba(0,0,0,.07); }

.cat-group-header {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; cursor:pointer;
    user-select:none; -webkit-tap-highlight-color:transparent;
    touch-action:manipulation; background:transparent;
    border:none; width:100%; min-width:0; text-align:left;
}
.cat-group-icon {
    width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; flex-shrink:0;
}
.cat-group-title {
    flex:1; font-weight:700; font-size:.88rem; color:#1a1a2e;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
    font-family:'Poppins',sans-serif;
}
.cat-chevron {
    flex-shrink:0; color:#9ca3af;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    font-size:.72rem; margin-left:4px;
}
.cat-group.is-open .cat-chevron { transform:rotate(180deg); }
.cat-body-clip {
    overflow:hidden; max-height:0;
    transition:max-height .35s cubic-bezier(.4,0,.2,1);
    width:100%; box-sizing:border-box;
}
/* Step 3 ha contenuto più lungo */
.cat-group.is-open .cat-body-clip { max-height:2000px; }
.cat-body-inner { padding:4px 14px 16px; width:100%; box-sizing:border-box; }
/* ═══════════════════════════════════════════════════════════════
   VIDEO UPLOAD — Progress bar overlay + badge video
   Aggiunto: 17 Aprile 2026
   ISTRUZIONI: appendere TUTTO questo blocco in coda a seller.css
   (non sostituire il file, solo aggiungi alla fine).
   ═══════════════════════════════════════════════════════════════ */

/* ── Badge "VIDEO" sulle card contenuto ────────────────────── */
.sl-content-card__thumb {
  position: relative;
}

.sl-content-card__thumb[data-has-video="true"]::after {
  content: "\f04b"; /* fontawesome play */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;  /* centra otticamente la freccia play */
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: transform .2s ease, background .2s ease;
}

.sl-content-card:hover .sl-content-card__thumb[data-has-video="true"]::after {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(124, 58, 237, .85);
}

/* ── Durata video (bottom-right della thumb) ─────────────── */
.sl-content-card__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 2;
}

/* ── Player video in Detail page — polish ───────────────── */
video[controls] {
  background: #000;
  border-radius: 12px;
  outline: none;
}

video[controls]::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, .6);
}

/* Poster visibile anche su iOS prima del play */
video[poster] {
  object-fit: cover;
}

/* ── Responsive: player più contenuto su mobile ──────────── */
@media (max-width: 768px) {
  video[controls] {
    max-height: 60vh !important;
    border-radius: 8px;
  }

  .sl-content-card__thumb[data-has-video="true"]::after {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
}

/* ── Overlay upload — z-index sopra tutto ─────────────────── */
#uploadOverlay {
  z-index: 10000 !important;
}

/* Disabilita scroll del body quando overlay attivo */
body.upload-active {
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────────
   BUG-19 · Wizard nav: 3 pulsanti stessa riga anche su mobile
   ────────────────────────────────────────────────────────────────
   Override del fix precedente (flex:1 1 100% sull'ultimo bottone)
   che mandava il primary CTA a capo full-width sotto 480px.
   Nuovo comportamento: tutti e 3 i pulsanti stretti ma in linea.
   Le regole restano in cascade: queste sovrascrivono perché sono
   piu' in basso nel file. Nessuna regola precedente modificata. */
@media (max-width: 480px) {
  .sl-wizard-nav {
    flex-wrap: nowrap;        /* annulla il wrap precedente */
    gap: 6px;
  }
  .sl-wizard-nav > .sl-btn,
  .sl-wizard-nav > a.sl-btn {
    padding: 8px 10px;
    font-size: 12px;
    flex: 1 1 0;              /* distribuisce lo spazio */
    min-width: 0;             /* permette shrink sotto min-content */
    white-space: nowrap;      /* testo su una riga */
  }
  .sl-wizard-nav > .sl-btn:last-child {
    flex: 1 1 0;              /* override del flex:1 1 100% + order:1 */
    order: 0;
  }
  /* Icone piu' compatte: riduci i margini Bootstrap me-1/ms-1 */
  .sl-wizard-nav > .sl-btn > i.me-1 { margin-right: 3px !important; }
  .sl-wizard-nav > .sl-btn > i.ms-1 { margin-left: 3px !important; }
}

/* Schermi molto stretti (<=360px, es. iPhone SE 1st gen, Galaxy Fold closed):
   nasconde le icone laterali del bottone Continua per evitare overflow.
   Testo + frecciaprincipale restano visibili. */
@media (max-width: 360px) {
  .sl-wizard-nav > .sl-btn {
    padding: 8px 8px;
    font-size: 11px;
  }
  .sl-wizard-nav > .sl-btn > i.fa-floppy-disk { display: none; }
}