/* ============================================================
   Farmacist pe bune - fluxul asistat („alege tu pentru mine")
   Trei pagini: chestionarul, ecranul de aprobare al Claudiei,
   confirmarea comenzii.

   Fișier SEPARAT de styles.css intenționat: styles.css e sistemul
   de bază al site-ului (header, footer, butoane, carduri) și se
   încarcă primul. Aici stă DOAR ce e specific fluxului asistat.
   Tokenii de brand (--teal, --turcoaz, --mint, fonturi) vin din
   :root-ul din styles.css, nu se redefinesc nimic aici.

   Mobile-first peste tot, dar ecranul Claudiei (aproba.html) e
   mobile-ONLY ca intenție: ea îl deschide din email, pe telefon,
   între două ture, și decide în 2 minute cu degetul mare.
   ============================================================ */

/* ---------- 1. Comun celor trei pagini ---------- */

.pagina-alege {
  background: var(--mint);
  padding: 48px 0 72px;
}

.alege-wrap {
  width: min(100% - 32px, 720px);
  margin-inline: auto;
}

.alege-intro {
  text-align: center;
  margin-bottom: 32px;
}

.alege-intro h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 14px;
}

.alege-intro h1 em {
  font-style: italic;
  color: var(--teal);
}

.alege-intro .sub {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.65;
}

.card-alege {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra-m);
  padding: 28px 22px;
}

@media (min-width: 640px) {
  .card-alege { padding: 36px 34px; }
}

/* ---------- 2. Chestionarul ---------- */

/* .intrebare e uneori <div>, uneori <fieldset> (cand grupeaza checkbox-uri).
   Pe <fieldset>, browserul pune din oficiu un chenar 2px groove pe toate laturile
   si decupeaza <legend> in el. Regula de reset de mai jos era `.intrebare fieldset`
   = descendent, deci nu prindea niciodata elementul care ESTE fieldset.intrebare:
   chenarul default ramanea, taia prin titlu si arata a formular HTML nestilizat.
   min-width: 0 = fieldset-ul are min-width: min-content din UA si sparge grila. */
.intrebare {
  border: none;
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
  min-width: 0;
}

.intrebare:first-child { padding-top: 0; }
.intrebare:last-of-type { border-bottom: none; }

.intrebare > .eticheta,
.intrebare > legend {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  padding: 0;
}

.intrebare .ajutor {
  display: block;
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-bottom: 14px;
  line-height: 1.55;
}

.intrebare fieldset { border: none; padding: 0; margin: 0; }

/* Pastilele de bifat: țintă mare pentru deget, nu casete de 13px */
.optiuni {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 520px) {
  .optiuni { grid-template-columns: 1fr 1fr; }
}

.optiune {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--mint);
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.optiune:hover { border-color: var(--turcoaz); }

/* 24px, nu 22: sub pragul asta si cu alta tinta la mai putin de 24px distanta,
   criteriul WCAG 2.2 2.5.8 pica. Doua pixeli, si nicio consecinta vizuala. */
.optiune input {
  width: 24px;
  height: 24px;
  accent-color: var(--teal);
  flex-shrink: 0;
  margin: 0;
}

/* :has e suportat de toate browserele curente; fără el, pastila rămâne
   doar nebifat-colorată, iar bifa nativă arată oricum starea */
.optiune:has(input:checked) {
  background: var(--teal-050);
  border-color: var(--teal);
  font-weight: 600;
}

.optiune:has(input:focus-visible) {
  outline: 3px solid var(--turcoaz);
  outline-offset: 2px;
}

.camp-text,
.camp-text-lung {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--alb);
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  padding: 13px 14px;
}

.camp-text-lung { min-height: 92px; resize: vertical; }

.camp-text:focus,
.camp-text-lung:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-050);
}

.camp-text::placeholder,
.camp-text-lung::placeholder { color: #9A9691; }

.pereche-campuri {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 560px) {
  .pereche-campuri { grid-template-columns: 1fr 1fr; }
}

.camp + .camp { margin-top: 14px; }

.camp label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

/* Nota de siguranță: semnal, nu diagnostic. Claudia e farmacist, deci
   întreabă ca să fie atentă la interacțiuni, nu ca să pună un verdict. */
.nota-siguranta {
  background: var(--teal-050);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-top: 14px;
}

.acord {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 6px;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.6;
  cursor: pointer;
}

.acord input {
  width: 22px;
  height: 22px;
  accent-color: var(--teal);
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-mare {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 800;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

.btn-mare:disabled { opacity: 0.55; cursor: default; }

/* ---------- 3. Ecranul Claudiei (aproba.html) ----------
   Cel mai important ecran din tot fluxul. Dacă nu e binar și instant,
   modelul cade: ea nu are timp să citească un dashboard între ture. */

.ecran-claudia {
  width: min(100% - 24px, 560px);
  margin-inline: auto;
}

.cerere-client {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.cerere-client h2 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.cerere-client dl { margin: 0; }

.cerere-client dt {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px;
}

.cerere-client dt:first-child { margin-top: 0; }

.cerere-client dd {
  margin: 3px 0 0;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
}

.titlu-selectie {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 12px;
}

/* Fara bara colorata pe latura: e semnatura vizuala a UI-urilor generate de AI,
   iar regula asta e deja scrisa in styles.css (.fara-bot) - o incalcam aici.
   Produsul propus se distinge prin fundal, nu printr-un tab lateral. */
.produs-propus {
  display: flex;
  gap: 14px;
  background: var(--teal-050);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.produs-propus .poza-mica {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--mint-2);
}

.produs-propus h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.produs-propus .categorie {
  display: block;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 2px;
}

.produs-propus .motiv {
  margin: 9px 0 0;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.6;
}

.produs-propus .pret-mic {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal);
}

/* Cele două butoane. Mari, departe unul de altul, imposibil de greșit
   cu degetul mare. DA-ul primul: ăsta e drumul normal. */
.decizie {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(240, 253, 250, 0), var(--mint) 22%);
  padding: 22px 0 12px;
  margin-top: 26px;
}

.decizie .btn-da,
.decizie .btn-nu {
  display: block;
  width: 100%;
  min-height: 64px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 16px;
  cursor: pointer;
  border: none;
}

.decizie .btn-da {
  background: var(--teal);
  color: #fff;
  box-shadow: var(--umbra-m);
}

.decizie .btn-da:active { background: var(--teal-700); }

.decizie .btn-nu {
  margin-top: 12px;
  min-height: 54px;
  font-size: 1rem;
  background: transparent;
  color: var(--text-soft);
  border: 1.5px solid var(--linie);
}

.decizie button:disabled { opacity: 0.5; }

.nota-claudia-camp {
  margin-top: 18px;
}

.nota-claudia-camp label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}

/* Ecranul de după decizie: confirmare mare, fără de-a face nimic mai departe */
.gata-ecran {
  text-align: center;
  padding: 44px 20px;
}

.gata-ecran .bifa {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal);
  display: grid;
  place-items: center;
}

.gata-ecran .bifa svg { width: 40px; height: 40px; }

.gata-ecran h2 {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.gata-ecran p {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 40ch;
  margin-inline: auto;
}

/* ---------- 4. Stări (încărcare, gol, eroare) ---------- */

.stare-incarc,
.stare-goala {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
  font-size: 1rem;
}

.stare-goala h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 10px;
}

/* ---------- 5. Confirmarea comenzii (comanda-asistata.html) ---------- */

.rezumat-selectie {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 20px;
  margin-bottom: 22px;
}

.vorba-claudiei {
  background: var(--teal-050);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

.vorba-claudiei .semnat {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-700);
}

.nota-plata-asistata {
  background: var(--mint-2);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-top: 16px;
}

.legal-mic {
  font-size: 0.8rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-top: 22px;
}

/* ---------- 6. Pas cu pas (banda de sus a chestionarului) ---------- */

.pasi {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 0;
  list-style: none;
}

.pasi li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 7px 13px;
}

.pasi li b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-700);
  font-size: 0.72rem;
}

@media (max-width: 519px) {
  .pasi { gap: 6px; }
  .pasi li { font-size: 0.76rem; padding: 6px 10px; }
}