/* =====================================================================
   AEG Intake Form — stiluri de componentă
   ---------------------------------------------------------------------
   Totul e "scoped" sub .intake, deci nu poate strica restul paginii.
   Culorile sunt variabile locale (--if-*), nu valori fixe: ca sa schimbi
   tema, suprascrii 5-6 variabile, nu 40 de reguli.
   ===================================================================== */

.intake {
  /* ---- tokens: sursa unica de adevar pentru tot componentul ---- */
  --if-radius:        32px;
  --if-radius-s:      12px;
  --if-pad:           clamp(24px, 4vw, 52px);

  --if-surface:       rgba(255, 255, 255, .05);
  --if-border:        rgba(191, 227, 204, .18);
  --if-blur:          blur(10px);
  --if-shadow:        none;

  --if-text:          var(--e-global-color-978afc1, #fbfbf7);
  --if-muted:         #bfe3cc;
  --if-muted-2:       #8fbc9f;
  --if-line:          rgba(191, 227, 204, .18);

  --if-track:         rgba(191, 227, 204, .18);
  /* verde → piersica, exact gradientul din design */
  --if-fill:          linear-gradient(90deg,
                        var(--e-global-color-primary, #0e683a),
                        var(--e-global-color-accent,  #fcb16d));

  --if-option-bg:     transparent;
  --if-option-text:   #bfe3cc;
  --if-option-hover:  var(--e-global-color-f1a08a6, #1a693d);

  /* Starea "selectat" — verde #1A693D. Alb pe el = contrast 6,7:1 (AA). */
  --if-sel-bg:        var(--e-global-color-f1a08a6, #1a693d);
  --if-sel-border:    var(--e-global-color-f1a08a6, #1a693d);
  --if-sel-text:      var(--e-global-color-978afc1, #ffffff);

  /* Butoane — legate de Global Colors / Global Fonts din Elementor */
  --if-accent:        var(--e-global-color-accent,  #fcb16d);
  --if-accent-hover:  var(--e-global-color-596efe7, #ff8a2b);
  --if-accent-ink:    var(--e-global-color-ba61bf8, #160404);
  --if-shadow-rest:   0 12px 28px -12px rgba(255, 138, 43, .5);
  --if-shadow-hover:  0 14px 28px -10px rgba(255, 138, 43, .7);
  --if-error:         #ff8a6b;

  /* ---- tipografie, preluata din Global Fonts ---- */
  /* Al doilea argument din var() e valoarea de rezerva, folosita doar
     daca Global Font-ul nu are proprietatea respectiva setata. */
  --if-font-body:     var(--e-global-typography-text-font-family, 'Plus Jakarta Sans'), sans-serif;
  --if-fs-body:       var(--e-global-typography-text-font-size, 1rem);   /* nu cobora sub 16px */
  --if-lh-body:       var(--e-global-typography-text-line-height, 1.7);

  --if-font-accent:   var(--e-global-typography-accent-font-family, 'Plus Jakarta Sans'), sans-serif;
  --if-fs-accent:     var(--e-global-typography-accent-font-size, .9375rem);
  --if-fw-accent:     var(--e-global-typography-accent-font-weight, 500);
  --if-lh-accent:     var(--e-global-typography-accent-line-height, 1.3);

  /* Space Grotesk Medium 21px nu are corespondent in kit-ul tau.
     Vezi nota din raspuns: merita adaugat ca Global Font "Subtitlu". */
  --if-font-label:    'Space Grotesk', system-ui, sans-serif;
  --if-fs-label:      clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --if-fw-label:      500;
  --if-fs-small:      .875rem;

  font-family: var(--if-font-body);
  font-size: var(--if-fs-body);
  line-height: var(--if-lh-body);
  color: var(--if-text);
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  padding: var(--if-pad);
  box-shadow: var(--if-shadow);
  -webkit-backdrop-filter: var(--if-blur);
  backdrop-filter: var(--if-blur);

  /* permite @container: componentul reactioneaza la latimea LUI,
     nu la latimea ecranului. Vezi blocul @container de mai jos. */
  container-type: inline-size;
  container-name: intake;
}

/* ---------------------------------------------------------------------
   VARIANTA DESCHISA — cardul alb din hero
   Doar variabile suprascrise. Zero reguli duplicate.
   --------------------------------------------------------------------- */
.intake--light {
  --if-surface:       var(--e-global-color-978afc1, #fbfbf7);
  --if-border:        rgba(44, 62, 51, .07);
  --if-blur:          none;
  --if-shadow:        0 30px 70px -35px rgba(8, 26, 18, .55);

  --if-text:          var(--e-global-color-text, #2c3e33);
  --if-muted:         #516357;
  /* #869E8E din specul XD da doar 2,8:1 pe #FBFBF7 si pica WCAG AA.
     #5F7367 da 4,9:1 la o diferenta vizuala minima. Placeholder-ul e
     singura eticheta vizibila a campurilor, deci trebuie sa fie lizibil. */
  --if-muted-2:       #5f7367;
  --if-line:          rgba(44, 62, 51, .14);

  --if-track:         rgba(44, 62, 51, .08);
  --if-select-bg:     rgba(44, 62, 51, .06);   /* gri deschis, ca in design */

  --if-option-text:   #516357;

  /* Aceeasi culoare globala ca pe fundal inchis — se schimba dintr-un
     singur loc, din Site Settings → Global Colors. */
  --if-option-hover:  var(--e-global-color-f1a08a6, #1a693d);
  --if-sel-bg:        var(--e-global-color-f1a08a6, #1a693d);
  --if-sel-border:    var(--e-global-color-f1a08a6, #1a693d);
  --if-sel-text:      #ffffff;

  --if-error:         #c0492b;
}

/* Umbra butonului urmareste automat culoarea de accent.
   color-mix() e suportat in toate browserele moderne; blocul @supports
   face ca browserele vechi sa pastreze valorile rgba de mai sus. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .intake {
    --if-shadow-rest:  0 12px 28px -12px color-mix(in srgb, var(--if-accent-hover) 50%, transparent);
    --if-shadow-hover: 0 14px 28px -10px color-mix(in srgb, var(--if-accent-hover) 70%, transparent);
  }
}

/* Varianta compacta — pentru sidebar sau coloane inguste */
.intake--compact {
  --if-pad:      clamp(20px, 3vw, 32px);
  --if-radius:   20px;
}

/* ---------------------------------------------------------------------
   BARA DE PROGRES
   Segmentele sunt generate din JS, in functie de numarul real de pasi.
   --------------------------------------------------------------------- */
.intake__progress {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
}
.intake__progress .seg {
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--if-track);
  position: relative;
  overflow: hidden;
}
.intake__progress .seg i {
  position: absolute;
  inset: 0;
  background: var(--if-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.intake__progress .seg.done i { transform: scaleX(1); }

/* ---------------------------------------------------------------------
   PASI
   --------------------------------------------------------------------- */
.intake .form-step { display: none; }
.intake .form-step.active {
  display: block;
  animation: intakeStepIn .45s ease;
}
@keyframes intakeStepIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.intake .form-step > label,
.intake .intake__label {
  font-family: var(--if-font-label);
  font-weight: var(--if-fw-label);
  font-size: var(--if-fs-label);
  line-height: 1.4;
  color: var(--if-text);
  display: block;
  margin-bottom: 26px;
}

/* ---------------------------------------------------------------------
   OPTIUNI
   --------------------------------------------------------------------- */
.intake .option-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intake .option {
  font: inherit;
  font-size: .875rem;          /* 14px */
  cursor: pointer;
  background: var(--if-option-bg);
  border: 1px solid var(--if-line);
  border-radius: var(--if-radius-s);
  padding: 12px 22px;
  color: var(--if-option-text);
  text-align: left;
  /* 48px inaltime minima = tinta de atins conforma pe mobil */
  min-height: 48px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.intake .option:hover {
  border-color: var(--if-option-hover);
  color: var(--if-text);
}
.intake .option:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 2px;
}
.intake .option.selected {
  background: var(--if-sel-bg);
  border-color: var(--if-sel-border);
  color: var(--if-sel-text);
}

/* ---------------------------------------------------------------------
   CAMPURI
   --------------------------------------------------------------------- */
.intake .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.intake .field-grid input {
  font: inherit;
  font-size: 1rem;               /* NU cobora sub 16px: iOS face zoom automat */
  background: var(--if-option-bg);
  border: 1px solid var(--if-line);
  border-radius: var(--if-radius-s);
  color: var(--if-text);
  padding: 15px 16px;
  min-height: 48px;
  width: 100%;
}
.intake .field-grid input::placeholder { color: var(--if-muted-2); }
.intake .field-grid input:focus {
  outline: none;
  border-color: var(--if-accent);
}
.intake .field-grid input:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 1px;
}
.intake .field-grid .field--full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------
   MESAJ DE EROARE
   --------------------------------------------------------------------- */
.intake__error {
  display: none;
  margin-top: 14px;
  font-size: var(--if-fs-small);
  color: var(--if-error);
}
.intake__error.show { display: block; }

/* ---------------------------------------------------------------------
   BUTOANE
   --------------------------------------------------------------------- */
.intake__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 40px;
}
.intake .btn-ghost,
.intake .btn-solid {
  cursor: pointer;
  border-radius: 100px;
  min-height: 48px;
  transition: background-color .25s ease, box-shadow .25s ease,
              border-color .25s ease, color .25s ease, transform .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* Tipografia butoanelor vine din Global Fonts → Accent */
  font-family: var(--if-font-accent);
  font-size:   var(--if-fs-accent);
  font-weight: var(--if-fw-accent);
  line-height: var(--if-lh-accent);
}
.intake .btn-ghost {
  font-weight: 500;
  color: var(--if-muted);
  padding: 14px 26px;
  background: none;
  border: 1px solid var(--if-line);
}
.intake .btn-ghost:hover {
  border-color: var(--if-text);
  color: var(--if-text);
}
.intake .btn-solid {
  color: var(--if-accent-ink);
  background-color: var(--if-accent);
  border: 1px solid transparent;
  padding: 14px 30px;
  box-shadow: var(--if-shadow-rest);
}
.intake .btn-solid:hover {
  background-color: var(--if-accent-hover);
  box-shadow: var(--if-shadow-hover);
  transform: translateY(-2px);
}

/* ---- iconite in butoane ----
   Dimensiunea e in "em", deci creste odata cu font-size-ul butonului
   preluat din Global Fonts. Nu trebuie ajustata manual. */
.intake__icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  stroke: currentColor;   /* preia culoarea textului butonului */
  transition: transform .25s ease;
}
.intake .btn-solid:hover .intake__icon      { transform: translateX(4px); }
.intake .btn-ghost:hover .intake__icon--back { transform: translateX(-4px); }
.intake .btn-solid:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}
.intake [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   SUCCES
   --------------------------------------------------------------------- */
.intake__success { display: none; }
.intake__success.show {
  display: block;
  animation: intakeStepIn .5s ease;
}
.intake__success h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.5rem, 1.35rem + .7vw, 1.875rem);
  color: var(--if-text);
  margin: 0 0 16px;
}
.intake__success p {
  color: var(--if-muted);
  max-width: 36ch;
  margin: 0;
}

/* ---------------------------------------------------------------------
   RESPONSIVE — pe latimea COMPONENTULUI, nu a ecranului.
   Daca il pui intr-o coloana de 400px pe desktop, se comporta corect.
   --------------------------------------------------------------------- */
@container intake (max-width: 380px) {
  .intake .field-grid { grid-template-columns: 1fr; }
  .intake__actions    { flex-wrap: wrap; }
  .intake__progress   { gap: 6px; margin-bottom: 28px; }
}

/* Fallback pentru browsere fara container queries */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) {
    .intake .field-grid { grid-template-columns: 1fr; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intake .form-step.active,
  .intake__success.show { animation: none; }
  .intake .btn-solid:hover { transform: none; }
  .intake__progress .seg i { transition: none; }
  .intake__icon,
  .intake .btn-solid:hover .intake__icon,
  .intake .btn-ghost:hover .intake__icon--back { transition: none; transform: none; }
}

/* =====================================================================
   FORMULARUL DE CONTACT
   Refoloseste .intake ca baza, dar cu spatiere mult mai stransa:
   e un formular scurt, nu unul cu 4 pasi.
   ===================================================================== */
.aeg-contact {
  --if-pad:      clamp(24px, 2.6vw, 34px);
  --if-radius:   24px;
  --if-radius-s: 10px;
}

.aeg-contact__title {
    font-family: var(--if-font-label);
    font-weight: var(--if-fw-label);
    font-size: var(--if-fs-label);
    line-height: 1.4;
  color: var(--if-text);
  margin: 0 0 20px;
}

/* Campuri mai stranse decat la formularul multi-pas */
.aeg-contact .field-grid {
  gap: 10px;
}
.aeg-contact .field-grid input,
.aeg-contact .field-grid select {
  padding: 13px 15px;
  min-height: 46px;
}

/* Email, Telefon si Buget ocupa tot randul.
   Nume + Companie raman impreuna pe primul rand. */
.aeg-contact .field--full { grid-column: 1 / -1; }

/* -------------------------------------------------------------------
   SELECT — are fundal propriu, ca in design, ca sa se distinga de
   campurile de text: e alt tip de interactiune (alegi, nu scrii).
   ------------------------------------------------------------------- */
.intake .field-grid select {
  font: inherit;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--if-select-bg, rgba(44, 62, 51, .06));
  border: 1px solid transparent;
  border-radius: var(--if-radius-s);
  color: var(--if-text);
  padding: 15px 44px 15px 16px;
  min-height: 48px;
  width: 100%;
  cursor: pointer;

  /* sageata desenata din gradiente, fara fisier extern */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 1px),
    calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.intake .field-grid select:invalid { color: var(--if-muted-2); }
.intake .field-grid select:focus {
  outline: none;
  border-color: var(--if-accent);
}
.intake .field-grid select:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 1px;
}

/* -------------------------------------------------------------------
   BUTON + TELEFON pe acelasi rand
   flex-wrap: wrap le lasa sa treaca unul sub altul doar daca
   chiar nu incap.
   ------------------------------------------------------------------- */
.aeg-contact .intake__actions {
  margin-top: 22px;
  gap: 14px;
  flex-wrap: wrap;
}
.aeg-contact .btn-solid {
  padding: 13px 26px;
  min-height: 46px;
}

.aeg-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding-inline: 6px;
  color: var(--if-text);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--if-font-accent);
  font-size: var(--if-fs-accent);
  font-weight: 600;
  transition: color .25s ease;
}
.aeg-contact__phone:hover { color: var(--if-accent-hover); }
.aeg-contact__phone .intake__icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
  color: var(--if-accent);
}

/* Pe carduri foarte inguste, campurile trec pe cate un rand */
@container intake (max-width: 380px) {
  .aeg-contact .intake__actions { gap: 10px; }
}

/* =====================================================================
   HONEYPOT — capcana pentru boti.
   NU folosim display:none: unii boti il detecteaza si sar peste camp.
   Il scoatem din ecran, dar ramane "completabil" pentru ei.
   ===================================================================== */
.aeg-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =====================================================================
   FORMULARUL PAGINII DE CONTACT
   Refoloseste .intake, adauga textarea si acordul GDPR.
   ===================================================================== */
.aeg-message .field-grid { gap: 12px; }

.intake .field-grid textarea {
  font: inherit;
  font-size: 1rem;              /* sub 16px, iOS face zoom la focus */
  background: var(--if-option-bg);
  border: 1px solid var(--if-line);
  border-radius: var(--if-radius-s);
  color: var(--if-text);
  padding: 14px 16px;
  width: 100%;
  min-height: 130px;
  resize: vertical;             /* doar pe verticala: orizontal ar rupe grila */
  line-height: 1.6;
  font-family: inherit;         /* fara asta, textarea foloseste monospace */
}
.intake .field-grid textarea::placeholder { color: var(--if-muted-2); }
.intake .field-grid textarea:focus {
  outline: none;
  border-color: var(--if-accent);
}
.intake .field-grid textarea:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 1px;
}

/* ---- acordul GDPR ---- */
.aeg-consent {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    font-size: .75rem !important;
    line-height: 1.6 !important;
    color: var(--if-muted-2) !important;
    cursor: pointer;
    font-weight: 400 !important;
}
.aeg-consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--if-accent);   /* coloreaza bifa nativa, fara CSS complicat */
  cursor: pointer;
}
.aeg-consent input:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 2px;
}
.aeg-consent a {
  color: var(--if-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aeg-consent a:hover { color: var(--if-accent-hover); }