/* =====================================================================
   minicorsionline.it — stile dell'applicazione
   Bootstrap 5.3 fa il lavoro pesante. Qui c'è solo l'identità.
   ===================================================================== */

:root {
  --mco-ink:      #14202f;   /* blu notte: testo e footer          */
  --mco-ink-soft: #33465e;
  --mco-primary:  #1f5f9e;   /* blu di lavoro: azioni principali   */
  --mco-primary-d:#174a7c;
  --mco-accent:   #f0a500;   /* ocra: la firma, usata con parsimonia */
  --mco-surface:  #f4f6f9;
  --mco-line:     #e3e8ee;

  --bs-primary:       #1f5f9e;
  --bs-primary-rgb:   31, 95, 158;
  --bs-body-color:    #223349;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-color:  var(--mco-line);
}

body { background: #fff; }

h1, h2, h3, h4, .h1, .h2, .h3 { color: var(--mco-ink); letter-spacing: -.015em; }
h1, .h1 { font-weight: 700; }

.text-ink       { color: var(--mco-ink) !important; }
.bg-ink         { background: var(--mco-ink) !important; }
.bg-surface     { background: var(--mco-surface) !important; }
.border-line    { border-color: var(--mco-line) !important; }

/* ------------------------------------------------------------ pulsanti */
.btn-primary {
  --bs-btn-bg: var(--mco-primary);
  --bs-btn-border-color: var(--mco-primary);
  --bs-btn-hover-bg: var(--mco-primary-d);
  --bs-btn-hover-border-color: var(--mco-primary-d);
  --bs-btn-active-bg: var(--mco-primary-d);
}
.btn-accent {
  --bs-btn-color: #14202f;
  --bs-btn-bg: var(--mco-accent);
  --bs-btn-border-color: var(--mco-accent);
  --bs-btn-hover-color: #14202f;
  --bs-btn-hover-bg: #d99400;
  --bs-btn-hover-border-color: #d99400;
  font-weight: 600;
}
.btn { border-radius: .5rem; }

/* --------------------------------------------------------------- marchio */
.brand-mark {
  display: inline-block;
  width: .55rem; height: .55rem;
  margin-right: .5rem;
  border-radius: 2px;
  background: var(--mco-accent);
  transform: rotate(45deg);
  vertical-align: middle;
}
.brand-mark-light { background: var(--mco-accent); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--mco-primary); color: #fff;
  font-size: .8rem; font-weight: 600;
}

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: #fff; padding: .5rem .75rem; border-radius: .375rem;
}

/* -------------------------------------------------------------- ricerca */
.search-icon {
  position: absolute; left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: #98a5b3; pointer-events: none;
}
.search-results {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--mco-line);
  border-radius: .5rem;
  max-height: 22rem; overflow-y: auto;
}
.search-results a {
  display: block; padding: .6rem .9rem;
  text-decoration: none; color: var(--mco-ink);
  border-bottom: 1px solid var(--mco-line);
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover, .search-results a:focus { background: var(--mco-surface); }

/* ---------------------------------------------------------------- hero */
.hero {
  background: linear-gradient(180deg, #f7f9fc 0%, #fff 100%);
  border-bottom: 1px solid var(--mco-line);
}

/* La firma del sito: il tempo che serve, dichiarato in faccia. */
.time-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(240,165,0,.14);
  color: #8a5f00;
  font-size: .8rem; font-weight: 600;
  border: 1px solid rgba(240,165,0,.35);
}

/* -------------------------------------------------------------- schede */
.course-card {
  border: 1px solid var(--mco-line);
  border-radius: .75rem;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
  overflow: hidden;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .6rem 1.4rem rgba(20,32,47,.09);
}
.course-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: var(--mco-surface);
}
.course-cover-empty {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1f5f9e 0%, #14202f 100%);
  color: rgba(255,255,255,.35);
  font-size: 2.4rem;
}

/* ------------------------------------------------------------- prezzi */
.plan-card {
  border: 1px solid var(--mco-line);
  border-radius: .9rem;
  height: 100%;
}
.plan-card.featured {
  border-color: var(--mco-primary);
  border-width: 2px;
  box-shadow: 0 .8rem 2rem rgba(31,95,158,.12);
}
.plan-price { font-size: 2.4rem; font-weight: 700; color: var(--mco-ink); line-height: 1; }

/* ------------------------------------------------------------- player */
.player-sidebar {
  background: var(--mco-surface);
  border-right: 1px solid var(--mco-line);
}
@media (min-width: 992px) {
  .player-sidebar {
    position: sticky; top: 0;
    height: 100vh; overflow-y: auto;
  }
}
.lesson-link {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .75rem;
  border-radius: .45rem;
  text-decoration: none;
  color: var(--mco-ink-soft);
  font-size: .9rem;
}
.lesson-link:hover { background: rgba(31,95,158,.07); color: var(--mco-ink); }
.lesson-link.active { background: #fff; color: var(--mco-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--mco-accent); }
.lesson-link .bi { flex-shrink: 0; margin-top: .12rem; }
.lesson-done { color: #1a7f4b; }

.lesson-body { font-size: 1.05rem; line-height: 1.75; }
.lesson-body h3 { margin-top: 1.75rem; font-size: 1.15rem; }
.lesson-body code {
  background: var(--mco-surface);
  padding: .1rem .35rem; border-radius: .25rem; color: #b02a37;
}
.lesson-body .lead { border-left: 3px solid var(--mco-accent); padding-left: 1rem; }

/* --------------------------------------------------------------- quiz */
.quiz-option {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--mco-line);
  border-radius: .5rem;
  padding: .7rem .9rem;
  margin-bottom: .5rem;
  background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--mco-primary); background: #f8fbfe; }
.quiz-option.correct { border-color: #198754; background: #e8f5ee; }
.quiz-option.wrong   { border-color: #dc3545; background: #fdecee; }
.quiz-option:disabled { cursor: default; opacity: 1; }

/* ------------------------------------------------------------- blocco */
.locked-overlay {
  border: 1px dashed var(--mco-line);
  border-radius: .75rem;
  background: var(--mco-surface);
}

/* --------------------------------------------------------------- admin */
.admin-sidebar {
  background: var(--mco-ink);
  min-height: 100vh;
}
.admin-sidebar a {
  display: flex; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.72);
  padding: .55rem .9rem;
  border-radius: .45rem;
  text-decoration: none;
  font-size: .93rem;
}
.admin-sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-sidebar a.active { background: var(--mco-primary); color: #fff; }

.kpi-card { border: 1px solid var(--mco-line); border-radius: .75rem; }
.kpi-value { font-size: 1.65rem; font-weight: 700; color: var(--mco-ink); line-height: 1.1; }
.kpi-label { font-size: .8rem; color: #6c7a89; text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------------------------------------------- vari */
footer a { color: rgba(255,255,255,.7); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer ul li { margin-bottom: .35rem; }

.progress { background: var(--mco-line); }
.progress-bar { background: var(--mco-primary); }

.form-control:focus, .form-select:focus, .btn:focus-visible {
  border-color: var(--mco-primary);
  box-shadow: 0 0 0 .2rem rgba(31,95,158,.2);
}

@media (prefers-reduced-motion: reduce) {
  .course-card { transition: none; }
  .course-card:hover { transform: none; }
}

/* =====================================================================
   Gamification: livelli, badge, classifica
   ===================================================================== */

.level-orb {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.badge-card {
  border: 1px solid var(--mco-line);
  border-radius: .75rem;
  padding: 1.1rem;
  text-align: center;
  height: 100%;
  background: #fff;
}
.badge-card > .bi { font-size: 1.9rem; }

.badge-card.earned {
  border-width: 2px;
  box-shadow: 0 .3rem .9rem rgba(20,32,47,.06);
}

.badge-card.locked {
  background: var(--mco-surface);
  border-style: dashed;
}
.badge-card.locked > .bi { color: #b6c0cb; }
.badge-card.locked .fw-semibold { color: #7c8894; }
.badge-card.locked.secret { border-color: var(--mco-accent); }
.badge-card.locked.secret > .bi { color: var(--mco-accent); opacity: .6; }

/* --------------------------------------------------------- classifica */
.rank-pos {
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--mco-surface);
  font-size: .8rem; font-weight: 700;
  color: #7c8894;
}
.rank-podium { color: #fff; }
.rank-1 { background: #f0a500; }
.rank-2 { background: #9aa7b4; }
.rank-3 { background: #b87333; }

/* -------------------------------- notifica dei punti guadagnati */
.point-pop {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  background: var(--mco-ink);
  color: #fff;
  border-radius: 999px;
  padding: .6rem 1.2rem;
  font-weight: 600;
  box-shadow: 0 .6rem 1.6rem rgba(20,32,47,.25);
  animation: pointRise .5s ease-out;
}
.point-pop .bi { color: var(--mco-accent); }

@keyframes pointRise {
  from { opacity: 0; transform: translate(-50%, 1rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Il modale del salto di livello / badge nuovo */
.reward-modal .modal-content {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
}
.reward-hero {
  background: linear-gradient(160deg, var(--mco-primary) 0%, var(--mco-ink) 100%);
  color: #fff;
  padding: 2.2rem 1.5rem;
  text-align: center;
}
.reward-hero .bi {
  font-size: 3.2rem;
  color: var(--mco-accent);
}

@media (prefers-reduced-motion: reduce) {
  .point-pop { animation: none; }
}

/* =====================================================================
   Attestato di completamento
   ===================================================================== */
.cert-frame {
  border: 2px solid var(--mco-ink);
  border-radius: .5rem;
  padding: .5rem;
  background: #fff;
}
.cert-inner {
  border: 1px solid var(--mco-accent);
  border-radius: .3rem;
  padding: 3rem 2rem;
  text-align: center;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(240,165,0,.07), transparent 70%),
    #fff;
}
.cert-mark { margin-bottom: 1.2rem; }
.cert-mark .brand-mark { width: 1rem; height: 1rem; margin: 0; }

.cert-label {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: #8794a3;
  margin-bottom: 1.2rem;
}
.cert-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--mco-ink);
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--mco-line);
  display: inline-block;
  padding-bottom: .4rem;
}
.cert-text { color: #6c7a89; margin-bottom: .5rem; font-size: .95rem; }
.cert-course {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--mco-primary);
  margin-bottom: 1.6rem;
}
.cert-meta {
  display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
  font-size: .82rem; color: #6c7a89;
  margin-bottom: 1.6rem;
}
.cert-issuer {
  font-weight: 600;
  color: var(--mco-ink);
  margin-bottom: 0;
}
.cert-verify {
  font-size: .7rem; color: #98a5b3;
  margin: 1.4rem 0 0;
}
.cert-disclaimer { display: block; margin-top: .4rem; font-style: italic; }

/* =====================================================================
   Testimonianze e prove sociali (landing)
   ===================================================================== */
.testi-card {
  background: #fff;
  border: 1px solid var(--mco-line);
  border-radius: .9rem;
  padding: 1.5rem;
  height: 100%;
}
.testi-quote {
  color: var(--mco-ink);
  font-size: .96rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.testi-quote::before {
  content: "\201C";
  font-size: 2.4rem;
  line-height: 0;
  color: var(--mco-accent);
  vertical-align: -.35em;
  margin-right: .15rem;
}
.testi-avatar {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--mco-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem;
  flex-shrink: 0;
}

.proof-stat {
  text-align: center;
  padding: 1rem;
}
.proof-stat-value {
  font-size: 2rem; font-weight: 700;
  color: var(--mco-ink); line-height: 1;
}
.proof-stat-label {
  font-size: .78rem; color: #7c8894;
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: .3rem;
}

/* La tabella di confronto */
.compare-table td, .compare-table th { vertical-align: middle; }
.compare-table .col-us {
  background: rgba(31,95,158,.05);
  border-left: 2px solid var(--mco-primary);
  border-right: 2px solid var(--mco-primary);
}
.compare-table thead .col-us { border-top: 2px solid var(--mco-primary); }
.compare-table tbody tr:last-child .col-us { border-bottom: 2px solid var(--mco-primary); }

/* CTA fissa su mobile: la landing è lunga, il pulsante deve restare a portata */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1040;
  background: #fff;
  border-top: 1px solid var(--mco-line);
  padding: .7rem 1rem;
  box-shadow: 0 -.4rem 1.2rem rgba(20,32,47,.08);
  display: none;
}
@media (max-width: 991.98px) {
  .sticky-cta { display: block; }
  body.landing { padding-bottom: 4.5rem; }
}

.guarantee-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px dashed var(--mco-primary);
  border-radius: .6rem;
  padding: .6rem 1rem;
  color: var(--mco-primary);
  font-weight: 600;
  font-size: .9rem;
  background: rgba(31,95,158,.04);
}