/* ============================================================================
   mediweb-medic.css — pagina unui medic (29.07.2026)

   Se încarcă doar pe /programari/<specialitate>/<medic>.
   Schimbă DOAR prezentarea. Formularul de programare, calendarul și apelurile
   AJAX rămân exact cum erau: aceleași id-uri (#datepicker, #appointment-form,
   #availability-result, #loading-spinner, #first-available-wrapper …), fiindcă
   pe ele se creează programări reale pentru pacienți.
   ============================================================================ */

body.pp-medic { background: #f1f5f9; }

/* cutia albă din styles.css ar dubla cardurile de dedesubt */
body.pp-medic section.registration-form {
  background: transparent; box-shadow: none; border-radius: 0;
  padding: 0; width: 100%; margin: 0;
}

/* ------------------------------------------------------------------- antetul */
body.pp-medic .pp-medhero {
  background: linear-gradient(135deg, #1c7ed6 0%, #1560ab 100%);
  color: #fff; padding: 24px 16px 28px;
}
body.pp-medic .pp-medhero .in { max-width: 1200px; margin: 0 auto; }
body.pp-medic .pp-crumbs { font-size: .85rem; opacity: .92; margin-bottom: 8px; }
body.pp-medic .pp-crumbs a { color: #fff; text-decoration: none; }
body.pp-medic .pp-crumbs a:hover { text-decoration: underline; }
body.pp-medic .pp-medhero h1 { font-size: 1.6rem; margin: 0 0 5px; color: #fff; line-height: 1.25; }
body.pp-medic .pp-medhero .meta { font-size: .92rem; opacity: .93; }

/* --------------------------------------------------- cele două coloane */
body.pp-medic main {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  width: min(1200px, 94vw); margin: 20px auto 0; padding: 0;
}
body.pp-medic .left-column,
body.pp-medic .right-column {
  background: transparent; box-shadow: none; padding: 0; border-radius: 0;
}
body.pp-medic .left-column  { flex: 1 1 340px; }
body.pp-medic .right-column { flex: 1.4 1 420px; }

/* ------------------------------------------------------------ fișa medicului */
.pp-medcard {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); text-align: center;
}
.pp-medfoto { display: inline-block; line-height: 0; }
.pp-medfoto img {
  width: 132px; height: 132px; object-fit: cover; border-radius: 50%;
  border: 4px solid #eff6ff; cursor: zoom-in;
  box-shadow: 0 4px 14px rgba(15,23,42,.1);
}
.pp-medav {
  width: 132px; height: 132px; border-radius: 50%; background: #eff6ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; margin: 0 auto; border: 4px solid #e0f2fe;
}
.pp-mednume { font-size: 1.2rem; color: #1e293b; margin: 14px 0 4px; line-height: 1.3; }
.pp-medgrad { color: #0369a1; font-weight: 600; font-size: .9rem; }

.pp-medloc { margin-top: 16px; text-align: left; border-top: 1px solid #f1f5f9; padding-top: 14px; }
.pp-medloc-item { margin-bottom: 10px; }
.pp-medloc-item .nume { font-weight: 600; color: #1e293b; font-size: .9rem; }
.pp-medloc-item .adr  { font-size: .84rem; color: #64748b; line-height: 1.5; }
.pp-medloc-item .adr a { color: #0369a1; text-decoration: none; font-weight: 600; white-space: nowrap; }
.pp-medloc-item .adr a:hover { text-decoration: underline; }

/* orarul ca bare vizuale (ziua de lucru 7:00–20:00) */
.pp-medorar { margin-top: 16px; text-align: left; border-top: 1px solid #f1f5f9; padding-top: 14px; }
.pp-medorar-titlu {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; font-weight: 700; margin-bottom: 10px;
}
.pp-medorar-cab {
  font-size: .78rem; color: #0369a1; font-weight: 700; margin: 12px 0 6px;
}
.pp-medzi { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; font-size: .84rem; }
.pp-medzi .zi { width: 58px; flex: 0 0 auto; color: #334155; font-weight: 600; }
.pp-medzi .bara {
  position: relative; flex: 1 1 auto; height: 9px; background: #f1f5f9;
  border-radius: 99px; overflow: hidden; min-width: 40px;
}
.pp-medzi .bara i {
  position: absolute; top: 0; bottom: 0; background: #0ea5e9; border-radius: 99px;
}
.pp-medzi .ore { flex: 0 0 auto; color: #334155; font-weight: 600; font-size: .8rem; text-align: right; }
.pp-medzi.fara .zi, .pp-medzi.fara .ore { color: #cbd5e1; font-weight: 500; }
.pp-rot { background: #fef3c7; color: #92400e; border-radius: 999px;
          padding: 1px 7px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.pp-medgol { color: #64748b; font-size: .88rem; }

/* ------------------------------------------------- cardul de programare */
.pp-rezcard {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pp-rezcard h2 { font-size: 1.2rem; color: #1e293b; margin: 0 0 8px; }
.pp-rezintro { color: #64748b; font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }
.pp-rezintro a { color: #0369a1; font-weight: 600; }
.pp-rezinfo {
  background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px;
  padding: 9px 12px; font-size: .86rem; color: #1e40af; margin: 0 0 10px;
}
.pp-rezliber {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
  padding: 9px 12px; font-size: .88rem; color: #15803d; margin: 0 0 10px; font-weight: 600;
}
.pp-rezplin {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
  padding: 9px 12px; font-size: .88rem; color: #b91c1c; margin: 0 0 10px; font-weight: 600;
}

.pp-rezcard form { margin-top: 4px; }
.pp-rezcard label {
  display: block; font-weight: 700; color: #334155; font-size: .86rem; margin-bottom: 6px;
}
/* toate câmpurile de text din card, inclusiv cele venite prin AJAX */
body.pp-medic .pp-rezcard input[type="text"],
body.pp-medic .pp-rezcard input[type="email"],
body.pp-medic .pp-rezcard input[type="tel"],
body.pp-medic .pp-rezcard input[type="number"],
body.pp-medic .pp-rezcard select,
body.pp-medic .pp-rezcard textarea {
  width: 100%; max-width: none; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  border: 1px solid #cbd5e1; border-radius: 10px; margin: 0 0 12px; background: #fff; color: #1e293b;
}
/* Iconița de calendar DOAR pe câmpul de dată. Înainte era pusă pe toate
   `input[type=text]` din card și apărea și la „Numele pacientului” sau „CNP”. */
body.pp-medic .pp-rezcard input#datepicker {
  cursor: pointer; padding-right: 40px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") no-repeat right 12px center;
}
body.pp-medic .pp-rezcard input:focus,
body.pp-medic .pp-rezcard select:focus,
body.pp-medic .pp-rezcard textarea:focus {
  outline: 2px solid #7dd3fc; outline-offset: 1px; border-color: #0ea5e9;
}
body.pp-medic .pp-rezcard input[type="submit"] {
  background: #0ea5e9; color: #fff; font-weight: 700; padding: 12px 22px;
  border: 0; border-radius: 10px; cursor: pointer; font-size: .95rem; font-family: inherit;
}
body.pp-medic .pp-rezcard input[type="submit"]:hover { background: #0284c7; }

/* ==========================================================================
   FLUXUL DE PROGRAMARE ÎN 5 PAȘI (macheta aprobată)
   ========================================================================== */
.pp-pasi { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.pp-pas {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; color: #94a3b8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pp-pas i {
  width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: .7rem; font-weight: 800; flex: 0 0 auto;
}
.pp-pas.on   { color: #0369a1; }
.pp-pas.on i { background: #0ea5e9; color: #fff; }
.pp-pas.gata { color: #15803d; }
.pp-pas.gata i { background: #22c55e; color: #fff; }
.pp-bara { height: 4px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.pp-bara i {
  display: block; height: 100%; background: #0ea5e9; border-radius: 99px;
  width: calc(var(--pas, 1) * 25%); transition: width .3s ease;
}

.pp-panou { display: none; }
.pp-panou.on { display: block; animation: pp-panou-intra .25s ease both; }
@keyframes pp-panou-intra { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-panou.on { animation: none; } }

/* primul loc liber */
.pp-primul {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
  padding: 11px 13px; margin-bottom: 12px; font-size: .88rem; color: #15803d;
}
.pp-primul button {
  margin-left: auto; background: #22c55e; color: #fff; border: 0; border-radius: 8px;
  padding: 7px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: inherit;
}
.pp-primul button:hover { background: #16a34a; }

/* calendar + ore */
.pp-alege { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .pp-alege { grid-template-columns: 1fr; } }

.pp-cal-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pp-cal-cap b { color: #1e293b; font-size: .95rem; text-transform: capitalize; }
.pp-cal-sag {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff;
  color: #0369a1; font-size: 1.1rem; cursor: pointer; line-height: 1; font-family: inherit;
}
.pp-cal-sag:hover { background: #eff6ff; }
.pp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pp-cal-zi { text-align: center; font-size: .68rem; font-weight: 700; color: #94a3b8; padding-bottom: 3px; }
.pp-cal-d {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  font-size: .82rem; font-weight: 700; font-family: inherit; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
/* aceleași trei semnale ca la calendarul vechi: umplere, culoare, tăiere */
.pp-cal-d.lib { background: #15803d; border-color: #166534; color: #fff; }
.pp-cal-d.lib:hover { background: #166534; }
.pp-cal-d.pln { background: #fff1f2; border-color: #fecdd3; color: #be123c;
                text-decoration: line-through; font-weight: 400; cursor: not-allowed; }
.pp-cal-d.blc, .pp-cal-d.trc { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8;
                               font-weight: 400; cursor: not-allowed; }
.pp-cal-d.ind { background: transparent; color: #cbd5e1; font-weight: 400; cursor: default; }
.pp-cal-d.ales { outline: 3px solid #7dd3fc; outline-offset: 1px; }

.pp-legenda { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px; font-size: .72rem; color: #64748b; }
.pp-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pp-legenda .l-lib { background: #15803d; }
.pp-legenda .l-pln { background: #fff1f2; border: 1px solid #fecdd3; }
.pp-legenda .l-ind { background: #f1f5f9; border: 1px solid #e2e8f0; }

.pp-ore-wrap h4 { font-size: .85rem; color: #1e293b; margin: 0 0 9px; }
.pp-ore { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; }
.pp-ora {
  padding: 10px 4px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 9px;
  font-weight: 700; font-size: .88rem; color: #1e293b; cursor: pointer; font-family: inherit;
}
.pp-ora:hover { background: #eff6ff; border-color: #7dd3fc; color: #0369a1; }
.pp-ora.ales { background: #0ea5e9; border-color: #0284c7; color: #fff; box-shadow: 0 2px 8px rgba(14,165,233,.35); }
.pp-nimicales { color: #94a3b8; font-size: .85rem; margin: 0; }

/* formularul pasului 2 */
.pp-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .pp-r2 { grid-template-columns: 1fr; } }
.pp-camp { margin-bottom: 10px; min-width: 0; }
.pp-camp label { display: block; font-weight: 700; color: #334155; font-size: .84rem; margin-bottom: 5px; }
.pp-camp .req { color: #e11d48; }
.pp-optional { font-weight: 500; color: #94a3b8; }
/* ATENȚIE: `input[type="text"]` NU se potrivește cu `<input id="x">` — un
   input fără atributul `type` nu e prins de selectorul pe atribut, deși
   browserul îl tratează ca text. De aceea stilizăm după element, nu după tip;
   altfel câmpurile rămâneau cu aspectul implicit al browserului. */
/* `.pp-rezcard` e repetat ca să întrecem regula generală de mai sus
   (`.pp-rezcard input[type="email"]`), care altfel dădea câmpului Email alt
   chenar și altă înălțime decât restul. */
body.pp-medic .pp-rezcard .pp-camp input,
body.pp-medic .pp-rezcard .pp-camp select,
body.pp-medic .pp-rezcard .pp-camp textarea {
  width: 100%; max-width: none; margin: 0;
  padding: 11px 13px; font-size: .95rem; font-family: inherit; color: #1e293b;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
  box-sizing: border-box; line-height: 1.4;
}
body.pp-medic .pp-camp textarea { resize: vertical; min-height: 64px; }
body.pp-medic .pp-camp select { cursor: pointer; }
body.pp-medic .pp-camp input::placeholder,
body.pp-medic .pp-camp textarea::placeholder { color: #94a3b8; }
body.pp-medic .pp-camp input:focus,
body.pp-medic .pp-camp select:focus,
body.pp-medic .pp-camp textarea:focus {
  outline: 2px solid #7dd3fc; outline-offset: 1px; border-color: #0ea5e9;
}
body.pp-medic .pp-camp input.gresit,
body.pp-medic .pp-camp select.gresit { border-color: #fca5a5; background: #fff5f5; }
/* Bifa de acord. Două lucruri de anulat:
   1. `styles.css` are `input[type="checkbox"] { display: none }` — o regulă
      globală rămasă de la vechiul comutator de meniu, care ascunde TOATE
      bifele din site; fără `display` explicit aici, caseta nu se vedea deloc.
   2. nu trebuie să primească stilul de câmp de text de mai sus. */
body.pp-medic .pp-acord input[type="checkbox"] {
  display: inline-block !important;
  appearance: auto; -webkit-appearance: checkbox;
  width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 1px 0 0;
  border: 0; border-radius: 0; background: none; accent-color: #0ea5e9;
  flex: 0 0 auto; cursor: pointer;
}
.pp-ajutor { font-size: .76rem; color: #94a3b8; margin-top: 4px; }
.pp-ajutor.ok  { color: #15803d; font-weight: 600; }
.pp-ajutor.rau { color: #b91c1c; font-weight: 600; }
.pp-eroare { display: none; font-size: .78rem; color: #b91c1c; font-weight: 600; margin-top: 4px; }
.pp-eroare-lat { margin: 8px 0; }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp-acord { display: flex; gap: 9px; align-items: flex-start; margin: 6px 0 2px; }
.pp-acord input { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: #0ea5e9; }
.pp-acord label { font-size: .82rem; color: #475569; line-height: 1.45; font-weight: 500; }
.pp-acord a { color: #0369a1; font-weight: 600; }

/* sumar + avertisment */
.pp-sumar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.pp-sumar .r { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .87rem; }
.pp-sumar .r span { color: #64748b; flex: 0 0 auto; }
.pp-sumar .r b { color: #1e293b; text-align: right; min-width: 0; word-break: break-word; }
.pp-atentie {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 11px 13px; font-size: .84rem; color: #92400e; line-height: 1.5; margin-bottom: 14px;
}

.pp-actiuni { display: flex; gap: 9px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.pp-btn {
  background: #0ea5e9; color: #fff; font-weight: 700; padding: 12px 22px; border: 0;
  border-radius: 10px; cursor: pointer; font-size: .93rem; font-family: inherit; margin-left: auto;
}
.pp-btn:hover { background: #0284c7; }
.pp-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.pp-btn.ghost { background: #f1f5f9; color: #475569; margin-left: 0; }
.pp-btn.ghost:hover { background: #e2e8f0; }

#loading-spinner { color: #64748b; font-size: .88rem; margin-bottom: 10px; }

/* ==========================================================================
   PAȘII URMĂTORI, aduși prin AJAX (check_availability.php, apoi pagina
   intermediară cu datele pacientului). HTML-ul lor NU a fost modificat —
   îl stilizăm după clasele pe care le folosește deja: .slot, .alert, titluri.
   ========================================================================== */
#availability-result { margin-top: 18px; }
#availability-result > h3:first-child,
#availability-result h2 { font-size: 1.05rem; color: #1e293b; margin: 0 0 12px; }
#availability-result h3 { font-size: 1rem; color: #1e293b; margin: 22px 0 10px;
                          padding-top: 16px; border-top: 1px solid #f1f5f9; }
#availability-result hr { border: 0; border-top: 1px solid #f1f5f9; margin: 20px 0; }
#availability-result p { margin: 0 0 8px; font-size: .92rem; color: #475569; line-height: 1.5; }
#availability-result p b, #availability-result strong { color: #1e293b; }
#availability-result label { display: block; font-weight: 700; color: #334155;
                             font-size: .86rem; margin: 12px 0 6px; }

/* Orele libere — pastile compacte, așezate în grilă.
   Fiecare oră pe câte un rând întreg ocupa inutil tot ecranul; grupate, se
   cuprind dintr-o privire, ca într-un orar. */
#availability-result #slot-form,
#availability-result form { display: block; }
#availability-result .slot,
#availability-result label.slot {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 6px; margin: 0; font-weight: 700; color: #1e293b; font-size: .92rem;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
  min-width: 0; text-align: center;
}
/* grila propriu-zisă: pastilele sunt copii direct ai formularului */
#availability-result #slot-form,
#availability-result form:has(.slot) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; align-items: stretch;
}
/* elementele care nu sunt ore (butoane, câmpuri ascunse, mesaje) rămân pe tot rândul */
#availability-result #slot-form > *:not(.slot),
#availability-result form:has(.slot) > *:not(.slot) { grid-column: 1 / -1; }

#availability-result .slot:hover { background: #eff6ff; border-color: #7dd3fc; color: #0369a1; }
/* Bifa nu mai e nevoie vizual — pastila întreagă arată starea. O păstrăm însă
   în pagină, accesibilă pentru cititoarele de ecran și pentru tastatură. */
#availability-result .slot input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
#availability-result .slot:has(input[type="radio"]:checked) {
  background: #0ea5e9; border-color: #0284c7; color: #fff;
  box-shadow: 0 2px 8px rgba(14,165,233,.35);
}
#availability-result .slot:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #0369a1; outline-offset: 2px;
}
/* browsere fără `:has()` — pastilele rămân în grilă, doar că bifa se vede */
@supports not selector(:has(*)) {
  #availability-result .slot { gap: 8px; }
  #availability-result .slot input[type="radio"] {
    position: static; opacity: 1; width: 16px; height: 16px; accent-color: #0ea5e9;
  }
}

/* butoanele pașilor următori */
#availability-result input[type="submit"],
#availability-result button[type="submit"],
#availability-result button {
  background: #0ea5e9; color: #fff; font-weight: 700; padding: 12px 24px;
  border: 0; border-radius: 10px; cursor: pointer; font-size: .95rem; font-family: inherit;
  margin-top: 10px;
}
#availability-result input[type="submit"]:hover,
#availability-result button:hover { background: #0284c7; }
#availability-result input[type="submit"]:disabled,
#availability-result button:disabled { background: #94a3b8; cursor: default; }

/* mesajele de stare */
#availability-result .alert {
  display: block; padding: 12px 14px; border-radius: 10px; margin: 10px 0;
  font-size: .92rem; line-height: 1.45; font-weight: 600;
}
#availability-result .alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
#availability-result .alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
#availability-result .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
#availability-result .alert-danger,
#availability-result .alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* contorul „13 caractere ramase” și alte note mici */
#availability-result small,
#availability-result .help,
#availability-result i { color: #94a3b8; font-size: .8rem; font-style: normal; }

@media (max-width: 760px) {
  body.pp-medic main { flex-direction: column; gap: 14px; width: min(1200px, 100%); padding: 0 16px; }
  body.pp-medic .left-column, body.pp-medic .right-column { flex: 1 1 auto; width: 100%; }
  body.pp-medic .pp-medhero h1 { font-size: 1.3rem; }
  .pp-medcard, .pp-rezcard { padding: 18px 16px; }
  .pp-medfoto img, .pp-medav { width: 108px; height: 108px; }
  .pp-medav { font-size: 2.8rem; }
  .pp-medzi .zi { width: 52px; }
  .pp-medzi .ore { font-size: .76rem; }
}

/* mesajul de eroare de la codul primit pe email (vine gata formatat din
   erify_appointment_otp.php, in error_html) */
.pp-otp-eroare { margin-bottom: 12px; }
.pp-otp-eroare .alert {
  display: block; padding: 12px 14px; border-radius: 10px; margin: 0 0 8px;
  font-size: .9rem; line-height: 1.45; font-weight: 600;
}
.pp-otp-eroare .alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.pp-otp-eroare div { font-size: .85rem; color: #64748b; margin-bottom: 8px; }

/* ---------------------------------------- ecranul 5: programare confirmată */
.pp-final { text-align: center; }
.pp-final-bifa {
  width: 62px; height: 62px; margin: 4px auto 14px; border-radius: 50%;
  background: #dcfce7; color: #15803d; font-size: 2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pp-final h2 { font-size: 1.25rem; color: #15803d; margin: 0 0 4px; }
.pp-final-sub { color: #64748b; font-size: .9rem; margin: 0 0 18px; }
.pp-final-cod {
  background: #f0fdf4; border: 1px dashed #86efac; border-radius: 12px;
  padding: 14px; margin-bottom: 16px;
}
.pp-final-cod b {
  display: block; font-size: 1.7rem; font-weight: 800; color: #15803d;
  letter-spacing: .04em; line-height: 1.2;
}
.pp-final-cod small { display: block; font-size: .75rem; color: #64748b; margin-top: 3px; }
.pp-final-sumar { text-align: left; }
.pp-final-info {
  text-align: left; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.pp-final-info-titlu { font-weight: 700; color: #92400e; font-size: .88rem; margin-bottom: 8px; }
.pp-final-info ul { margin: 0; padding-left: 18px; }
.pp-final-info li { font-size: .85rem; color: #78350f; line-height: 1.55; margin-bottom: 7px; }
.pp-final-info li:last-child { margin-bottom: 0; }
.pp-final-info a { color: #0369a1; font-weight: 600; }
.pp-final-nota { font-size: .85rem; color: #64748b; margin: 0 0 4px; }
.pp-final-nota a { color: #0369a1; font-weight: 600; }

/* ============================================================================
   „Anunță-mă când se eliberează un loc” (30.07.2026)
   Lista pliantă: implicit se vede DOAR antetul, la aceleași dimensiuni ca banda
   „⛔ Momentan nu sunt locuri libere”. La clic se desfășoară caseta cu e-mail.
   Folosim <details>/<summary> — merge și fără JavaScript.
   ============================================================================ */
details.pp-lista {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px;
  margin: 0 0 10px; overflow: hidden;
}

/* antetul — aceeași înălțime/tipar cu .pp-rezplin (padding 9px 12px, .88rem, 600) */
details.pp-lista > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 9px 12px; font-size: .88rem; font-weight: 600; color: #0369a1;
  display: flex; align-items: center; gap: 8px;
}
details.pp-lista > summary::-webkit-details-marker { display: none; }
details.pp-lista > summary:hover { background: #e0f2fe; }
details.pp-lista > summary:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }
details.pp-lista > summary .sag {
  margin-left: auto; flex: 0 0 auto; font-size: .8rem; color: #0284c7;
  transition: transform .2s ease;
}
details.pp-lista[open] > summary { border-bottom: 1px solid #bae6fd; }
details.pp-lista[open] > summary .sag { transform: rotate(180deg); }

/* Corpul care se desfășoară.
   Înălțimea o animă JS-ul (`element.animate()` din mediweb-filtrare.js — vezi
   mwPliaza), fiindcă `height:auto` nu se poate anima din CSS. Aici rămâne doar
   apariția conținutului, ca să pară că „intră” după deschidere.
   NU folosim Isotope: pozitionează absolut și se poate bloca (vezi nota din
   mediweb-filtrare.js). */
.pp-lista-corp { padding: 12px; }
.pp-lista[open] > .pp-lista-corp > * { animation: ppListaIntra .3s cubic-bezier(.2,.7,.3,1) both; }
.pp-lista[open] > .pp-lista-corp > *:nth-child(1) { animation-delay: .04s; }
.pp-lista[open] > .pp-lista-corp > *:nth-child(2) { animation-delay: .08s; }
.pp-lista[open] > .pp-lista-corp > *:nth-child(3) { animation-delay: .12s; }
.pp-lista[open] > .pp-lista-corp > *:nth-child(4) { animation-delay: .16s; }
@keyframes ppListaIntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* cât ține deschiderea, ascundem ce iese din chenar */
.pp-lista.pp-anim { overflow: hidden; }
.pp-lista-corp p { margin: 0 0 10px; font-size: .86rem; color: #475569; line-height: 1.55; }
.pp-lista-corp small { display: block; margin-top: 8px; font-size: .78rem; color: #94a3b8; }

.pp-lista-rand { display: flex; gap: 8px; flex-wrap: wrap; }
body .pp-lista-rand input[type="email"] {
  flex: 1 1 200px; min-width: 0; max-width: none; margin: 0;
  padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 9px;
  font-size: 15px; font-family: inherit; color: #1e293b; background: #fff;
}
body .pp-lista-rand input[type="email"]:focus {
  outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px #bae6fd;
}
body .pp-lista-rand button {
  background: #0ea5e9; color: #fff; border: 0; padding: 10px 18px; border-radius: 9px;
  font-weight: 700; cursor: pointer; font-size: .9rem; font-family: inherit;
}
body .pp-lista-rand button:hover { background: #0284c7; }
body .pp-lista-rand button:disabled { background: #94a3b8; cursor: default; }

/* capcana pentru roboti */
.pp-hp2 { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pp-lista-msg { font-size: .85rem; margin-bottom: 10px; line-height: 1.5; }
.pp-lista-msg:empty { display: none; }
.pp-lista-msg.bun { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0;
                    border-radius: 9px; padding: 9px 12px; }
.pp-lista-msg.rau { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
                    border-radius: 9px; padding: 9px 12px; }

@media (max-width: 520px) {
  .pp-lista-rand { flex-direction: column; }
  /* ATENȚIE: pe coloană, `flex-basis` se aplică pe ÎNĂLȚIME — `flex:1 1 200px`
     făcea câmpul de e-mail înalt de 200px. Îl readucem la înălțimea normală. */
  body .pp-lista-rand input[type="email"] { flex: 0 0 auto; width: 100%; }
  body .pp-lista-rand button { width: 100%; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-lista[open] > .pp-lista-corp > * { animation: none; }
  details.pp-lista > summary .sag { transition: none; }
}