/* ================================================
   Pickleball Lounge Milano — Modale Autovalutazione
   Estende landing.css/lezioni.css: usa gli stessi
   var(--rcm), var(--gold), var(--font-serif), var(--radius)
   già definiti lì. Nessuna nuova variabile globale.
   ================================================ */

/* ── Trigger + stato nel form ── */
.av-trigger-btn { margin-top: 4px; }

.av-status-card {
  border: 1px solid var(--lez-line);
  border-left: 4px solid var(--av-level-color, var(--rcm));
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--lez-tint);
}
.av-status-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.av-status-level {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  color: var(--lez-ink);
}
.av-status-level .badge-gold { margin-left: 8px; font-size: 10px; padding: 3px 10px; vertical-align: middle; }
.av-status-meta { font-size: 13px; color: var(--lez-muted); margin-top: 6px; }
.av-status-redo {
  background: none; border: none; padding: 0; margin-top: 10px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--rcm); text-decoration: underline; cursor: pointer;
}
.av-status-redo:hover { color: var(--gold); }

/* ── Overlay & modale ── */
.av-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(2, 10, 6, 0.6);
  align-items: center; justify-content: center;
  padding: 20px;
}
.av-overlay.av-visible { display: flex; }

.av-modal {
  position: relative;
  width: 100%; max-width: 620px; max-height: 90vh;
  background: var(--lez-surface);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  animation: avPop .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes avPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.av-close {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.06); border: none;
  font-size: 22px; line-height: 1; color: var(--lez-ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.av-close:hover { background: rgba(0,0,0,.12); }

.av-modal-inner { overflow-y: auto; padding: 30px 30px 26px; }
@media (max-width: 560px) { .av-modal-inner { padding: 26px 18px 20px; } }

.av-header { text-align: center; margin-bottom: 22px; }
.av-eyebrow {
  display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.av-title { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--lez-ink); }
.av-subtitle { font-size: 13.5px; color: var(--lez-muted); margin-top: 6px; }

/* ── Barra di avanzamento ── */
.av-progress-meta {
  display: flex; justify-content: space-between; margin-bottom: 8px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--lez-muted);
}
.av-progress-meta b { color: var(--rcm); }
.av-progress-track { height: 5px; background: var(--lez-line); border-radius: 3px; overflow: hidden; margin-bottom: 24px; }
.av-progress-bar { height: 100%; background: var(--gold); border-radius: 3px; transition: width .35s ease; }

/* ── Domanda ── */
.av-cat-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lez-tint); border: 1px solid var(--lez-line); border-radius: 20px;
  padding: 5px 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rcm); margin-bottom: 14px;
}
.av-question-text {
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(17px, 3vw, 20px);
  color: var(--lez-ink); line-height: 1.35; margin-bottom: 18px;
}

.av-options { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.av-option {
  display: flex; align-items: center; gap: 12px;
  background: var(--lez-surface); border: 1.5px solid var(--lez-line); border-radius: 10px;
  padding: 13px 16px; cursor: pointer; text-align: left; width: 100%;
  font-family: var(--font-sans); font-size: 14.5px; color: var(--lez-body);
  transition: border-color .15s, background .15s;
}
.av-option:hover { border-color: var(--gold); background: var(--lez-tint); }
.av-option.av-selected { border-color: var(--rcm); background: rgba(1,73,46,0.06); color: var(--lez-ink); font-weight: 600; }
.av-option-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lez-line);
  flex-shrink: 0; position: relative; transition: border-color .15s;
}
.av-option.av-selected .av-option-dot { border-color: var(--rcm); }
.av-option.av-selected .av-option-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--rcm);
}

.av-footer-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--lez-line);
}
.av-back-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--lez-muted);
}
.av-back-btn:hover:not(:disabled) { color: var(--rcm); }
.av-back-btn:disabled { opacity: .35; cursor: default; }
.av-dots { display: flex; gap: 4px; align-items: center; }
.av-dot { height: 5px; border-radius: 3px; background: var(--lez-line); transition: all .25s ease; }

.av-skip-row { text-align: center; margin-top: 16px; }
.av-skip-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--lez-muted); text-decoration: underline;
}
.av-skip-link:hover { color: var(--ruby); }

/* ── Risultato ── */
.av-result-banner {
  margin: -30px -30px 22px; padding: 28px 30px 24px; text-align: center; color: #fff;
}
@media (max-width: 560px) { .av-result-banner { margin: -26px -18px 20px; padding: 24px 18px 20px; } }
.av-result-eyebrow { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-bottom: 8px; }
.av-result-level { font-family: var(--font-serif); font-weight: 800; font-size: clamp(36px, 8vw, 50px); line-height: 1; margin-bottom: 8px; }
.av-result-badge {
  display: inline-block; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4);
  border-radius: 20px; padding: 4px 16px; font-family: var(--font-sans); font-size: 10.5px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}

.av-result-label { font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--lez-ink); margin-bottom: 8px; }
.av-result-desc { font-size: 14.5px; color: var(--lez-body); line-height: 1.7; margin-bottom: 20px; }

.av-score-row { display: flex; gap: 12px; margin-bottom: 20px; }
.av-score-box { flex: 1; background: var(--lez-tint); border: 1px solid var(--lez-line); border-radius: 10px; padding: 14px; text-align: center; }
.av-score-box .lbl { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lez-muted); margin-bottom: 6px; }
.av-score-box .val { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--lez-ink); }
.av-score-box .val.small { font-size: 13px; font-weight: 600; }

.av-tips { background: var(--lez-tint); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 16px 18px; margin-bottom: 22px; }
.av-tips-title { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rcm); margin-bottom: 10px; }
.av-tip-item { display: flex; gap: 9px; font-size: 13.5px; color: var(--lez-body); line-height: 1.5; margin-bottom: 7px; }
.av-tip-item:last-child { margin-bottom: 0; }
.av-tip-item span.arrow { color: var(--gold); flex-shrink: 0; }

.av-scale-title { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lez-muted); margin-bottom: 8px; }
.av-scale { display: flex; gap: 3px; margin-bottom: 26px; }
.av-scale-item { flex: 1; text-align: center; }
.av-scale-bar { height: 5px; border-radius: 2px; margin-bottom: 5px; background: var(--lez-line); }
.av-scale-lbl { font-family: var(--font-sans); font-size: 9px; font-weight: 600; color: var(--lez-muted); }
.av-scale-item.av-active .av-scale-lbl { font-weight: 800; color: var(--lez-ink); }

.av-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.av-result-actions .btn-gold, .av-result-actions .btn-outline-dark { flex: 1; justify-content: center; }