/* ==========================================================================
   Formulare
   Câmpul stă pe Claritate în interiorul unei suprafețe Prezență, dar
   diferența dintre cele două tonuri e prea mică pentru a desena singură
   conturul: pe multe ecrane câmpul nu se citea ca fiind un câmp. De aceea
   fiecare câmp are hairline vizibil pe Liniște. Focus = ring 2px Impuls.
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }

@media (min-width: 768px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--sp-2); align-content: start; }

.label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--profunzime);
}
.label .req { color: var(--impuls); margin-left: 2px; }

.hint { font-size: var(--fs-xs); color: var(--reflectie-light); }

.input,
.textarea,
.select {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--sp-4);
  border: 1px solid var(--liniste);
  border-radius: var(--r-sm);
  background: var(--claritate);
  color: var(--profunzime);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: box-shadow var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease),
              border-color var(--t-btn) var(--ease);
  appearance: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--reflectie-light); }

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--reflectie-light); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--impuls);
  box-shadow: 0 0 0 2px var(--impuls);
  background: var(--prezenta);
}

.textarea { min-height: 140px; resize: vertical; }

.select {
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7468' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right var(--sp-4) center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  cursor: pointer;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.input[disabled],
.textarea[disabled],
.select[disabled] { opacity: .5; cursor: not-allowed; }

/* Eroare */
.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--impuls-dark); box-shadow: 0 0 0 1px var(--impuls-dark); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--impuls-text);
}
.field__error i { font-size: 14px; line-height: 0; }

/* --- Radio și checkbox --------------------------------------------------- */
.choice-group { display: grid; gap: var(--sp-3); }
.choice-group--inline { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--sp-5); }

@media (max-width: 767px) {
  .choice-group--inline { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--sp-3); }
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--profunzime);
}

.choice input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--reflectie-light);
  background: var(--prezenta);
  cursor: pointer;
  transition: border-color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.choice input[type="radio"] { border-radius: var(--r-full); }
.choice input[type="checkbox"] { border-radius: 7px; }

.choice:hover input { border-color: var(--impuls-light); }

/* Starea bifată nu umple caseta cu portocaliu. Portocaliul plin pe un câmp
   de formular se citește ca semnal de eroare, nu ca alegere confirmată.
   Caseta rămâne neutră, iar semnul din interior e cel care poartă culoarea. */
.choice input:checked {
  border-color: var(--reflectie-light);
  background: var(--profunzime-wash);
}
.choice input[type="radio"]:checked {
  background:
    radial-gradient(circle at center, var(--impuls) 0 5px, rgba(0,0,0,0) 6px),
    var(--profunzime-wash);
}
.choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EB6336' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.choice input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Alegere blocată — o sesiune care face parte obligatoriu din curs. Rămâne
   bifată, dar fără accentul portocaliu și fără cursorul de acțiune: se
   citește ca „inclusă”, nu ca „aleasă de tine”. */
.choice input:disabled {
  cursor: default;
  border-color: var(--liniste);
  background: var(--liniste);
}
.choice input[type="checkbox"]:disabled:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A7468' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-color: var(--liniste);
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.choice:has(input:disabled) { cursor: default; color: var(--reflectie); }
.choice:has(input:disabled):hover input { border-color: var(--liniste); }

.choice__text { line-height: 1.5; }
.choice__text small { display: block; color: var(--reflectie); font-size: var(--fs-xs); }

/* --- Cursul la care se face înscrierea --------------------------------------
   Deasupra sesiunilor: ce curs, în ce zile și cu cine. Se rescrie la fiecare
   bifă, ca să nu rămână o promisiune care nu mai e adevărată. */
.form__course {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--claritate);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--reflectie);
}
/* Rezumatul e un bilet, nu un câmp: suprafața Claritate, ca la .consent,
   îl desparte de câmpurile din jur; eticheta rămâne accentul. */
.form__course b { color: var(--profunzime); font-weight: 600; }

/* --- Sesiunile unui curs ----------------------------------------------------
   Numele și perioada în stânga, prețul în dreapta, deci prețurile se citesc
   unul sub altul. Linia de jos desparte totalul de ce îl compune. */
.sessions { display: grid; }

.sessions__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 2px var(--sp-3);
}
/* Linia dintre sesiuni: fără ea, prețul din dreapta pare al listei, nu al
   rândului lui. Prima sesiune n-are linie deasupra — o are legenda. */
.sessions__row + .sessions__row { border-top: var(--hairline); }
.sessions__row > input { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.sessions__name { grid-column: 2; grid-row: 1; }
.sessions__date { grid-column: 2; grid-row: 2; font-size: var(--fs-xs); color: var(--reflectie); }
.sessions__price { grid-column: 3; grid-row: 1; text-align: right; font-weight: 600; }

.sessions__total {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-4);
  border-top: var(--hairline);
  justify-content: space-between;
}
.sessions__total-label { font-size: var(--fs-sm); color: var(--reflectie); }
.sessions__total-value { display: flex; align-items: baseline; gap: var(--sp-2); }

/* Consimțământ */
.consent {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--claritate);
}
.consent .choice { font-size: var(--fs-xs); color: var(--reflectie); }
.consent .choice a { color: var(--impuls-text); }

/* --- Card de formular ---------------------------------------------------- */
.form-card {
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}
@media (min-width: 768px) {
  .form-card { padding: var(--sp-7); }
}
.form-card__head { margin-bottom: var(--sp-6); }
.form-card__head :is(h2, h3, h4) { margin-bottom: var(--sp-2); }
.form-card__head p { color: var(--reflectie); font-size: var(--fs-sm); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* --- Câmp cu iconiță ------------------------------------------------------
   Iconița e decorativă; eticheta de deasupra rămâne cea care denumește
   câmpul. */
.field--icon { position: relative; }
.field--icon .input { padding-left: var(--sp-8); }
.field__icon {
  position: absolute;
  left: var(--sp-4);
  bottom: 16px;
  color: var(--reflectie);
  font-size: 18px;
  line-height: 0;
  pointer-events: none;
}

/* --- Opțiuni ca suprafețe --------------------------------------------------
   Când alegerea e importantă — formatul unui curs, tipul abonamentului —
   opțiunea primește o suprafață proprie, cu zonă de click generoasă. */
.choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--liniste);
  border-radius: var(--r-sm);
  background: var(--prezenta);
  cursor: pointer;
  transition: border-color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.choice-card:hover { border-color: var(--impuls-light); }
/* Opțiunea aleasă se marchează cu o suprafață neutră abia perceptibilă și cu
   un contur ceva mai prezent — nu cu portocaliu, care ar semnala o problemă.
   Singurul accent colorat rămâne bifa. */
.choice-card:has(input:checked) {
  border-color: var(--reflectie-light);
  background: var(--profunzime-wash);
  /* Suprafața aleasă e cu o treaptă mai închisă decât albul, deci textul de
     sprijin coboară și el o treaptă, ca să rămână peste prag. */
  --reflectie: #6E695E;
}
[data-theme="dark"] .choice-card:has(input:checked) { --reflectie: #ABA396; }
.choice-card:has(input:focus-visible) {
  outline: 2px solid var(--impuls);
  outline-offset: 2px;
}
.choice-card input { flex: none; margin-top: 2px; }
.choice-card .choice__text { font-size: var(--fs-sm); }

/* Fără :has, opțiunea rămâne funcțională, doar fără evidențierea suprafeței. */
@supports not selector(:has(a)) {
  .choice-card { border-color: var(--liniste); }
}

/* --- Grup de câmpuri pe orizontală ------------------------------------------ */
.field-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.field-row .field { flex: 1 1 200px; }

/* --- Stare de succes --------------------------------------------------------- */
.form__success {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--impuls-wash);
  color: var(--impuls-text);
  font-size: var(--fs-sm);
}
.form__success i { font-size: 18px; line-height: 0; margin-top: 2px; }