/* ==========================================================================
   Ghidul: reflectorul, bulele şi sărbătorirea.

   Un principiu peste tot aici: nimic din ce se mişcă nu trebuie să întârzie pe
   cineva care ştie deja ce are de făcut. Turul se închide cu Escape sau cu un
   click în afară, bulele de ajutor apar la cerere, iar animaţiile dispar
   complet dacă sistemul cere mai puţină mişcare.
   ========================================================================== */

/* ---- reflectorul ---- */
.ghid-strat { position: fixed; inset: 0; z-index: 1000; display: none; }
.ghid-strat.pe { display: block; }
/* Pagina nu se blochează la scroll: turul urmăreşte ţinta, iar cine vrea să se
   uite în altă parte în timp ce citeşte trebuie să poată. */

/* Gaura nu e o gaură, e un dreptunghi transparent cu o umbră uriaşă în jur —
   aşa se întunecă restul ecranului fără patru dreptunghiuri şi fără SVG. */
.ghid-gaura {
  position: absolute; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12, 22, 40, .68);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  outline: 3px solid var(--electric-red, #ed2944); outline-offset: 0;
}
.ghid-tinta { position: relative; z-index: 1001; }

.ghid-bula {
  position: fixed; z-index: 1002; background: #fff; border-radius: 14px;
  padding: 1rem 1.1rem 0.9rem; box-shadow: 0 18px 48px rgba(10, 20, 40, .35);
  transition: top .25s ease, left .25s ease;
}
.ghid-bula[hidden] { display: none; }
.ghid-bula:focus { outline: none; }
.ghid-numar { margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--electric-red, #ed2944); }
.ghid-bula h3 { margin: 0 0 .35rem; font-size: 1.08rem; color: var(--navy, #1f3a5f); }
.ghid-text { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.45; color: #33415c; }
.ghid-puncte { display: flex; gap: .3rem; margin-bottom: .6rem; }
.ghid-puncte span { width: 7px; height: 7px; border-radius: 50%; background: #d7dde6; }
.ghid-puncte span.trecut { background: #9fb3cd; }
.ghid-puncte span.pe { background: var(--electric-red, #ed2944); width: 20px; border-radius: 4px; }
.ghid-butoane { display: flex; align-items: center; gap: .4rem; }
.ghid-butoane .ghid-spatiu { flex: 1; }
.ghid-butoane button { margin: 0; }
.ghid-gata { font-size: .8rem !important; padding: .3rem .55rem !important; opacity: .75; }
.ghid-inainte { background: var(--navy, #1f3a5f); border-color: var(--navy, #1f3a5f); color: #fff; }

/* ---- butonul care porneşte turul ---- */
/* Pico dă `button[type=submit]{width:100%}` şi butoanelor fără tip; de aceea
   lăţimea e forţată aici, altfel butonul de ghid se întinde cât bara. */
.ghid-progres .buton-ghid,
.buton-ghid { display: inline-flex; align-items: center; gap: .35rem; width: auto; flex: 0 0 auto; margin: 0;
  padding: .35rem .75rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: #fff; color: var(--navy, #1f3a5f); border: 2px solid var(--navy, #1f3a5f); }
.buton-ghid:hover { background: var(--navy, #1f3a5f); color: #fff; }

/* ---- bulele „ce e asta?" ---- */
.ce-e-asta {
  display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin: 0 0 0 .3rem;
  border-radius: 50%; border: 1.5px solid #9fb3cd; background: #fff; color: #5d6f8a;
  font-size: .72rem; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle;
  flex: 0 0 auto;
}
.ce-e-asta:hover, .ce-e-asta:focus { background: var(--navy, #1f3a5f); border-color: var(--navy, #1f3a5f); color: #fff; }
.ajutor-bula {
  position: absolute; z-index: 1005; background: var(--navy, #1f3a5f); color: #fff;
  border-radius: 10px; padding: .6rem .75rem; box-shadow: 0 10px 30px rgba(10, 20, 40, .3);
  font-size: .85rem; line-height: 1.4;
}
.ajutor-bula p { margin: 0; padding-right: 1rem; }
.ajutor-bula .ajutor-x { position: absolute; top: 2px; right: 4px; width: auto; margin: 0;
  padding: 0 .25rem; background: none; border: 0; color: #fff; font-size: 1.05rem; line-height: 1; opacity: .7; }
.ajutor-bula::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top: 0; border-bottom-color: var(--navy, #1f3a5f); }

/* ---- confetti: două secunde de bucurie, apoi dispare singur ---- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1100; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation: cade linear forwards; }
@keyframes cade {
  to { transform: translateY(102vh) rotate(720deg); opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .ghid-gaura, .ghid-bula { transition: none; }
  .confetti { display: none; }
}