/* =============================================================================
   AUTH v7 — autentificare / creare cont / resetare parolă.
   Destinația tuturor CTA-urilor de conversie din chat (modal limită, sidebar,
   meniu). Minimal, centrat, zero distrageri: un singur card, un singur CTA.
   Twig țintă: themes/nutritie/views/core/account/*.html.twig (vezi 03 §10).
   ============================================================================= */

.aux { min-height: 100svh; display: flex; flex-direction: column; }
.aux-top { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem clamp(1rem, 4vw, 2.75rem); }
.aux-top .brand svg { height: 1.875rem; width: auto; display: block; }
.aux-back { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; font-size: 0.84375rem; font-weight: 600; color: var(--muted); transition: color var(--dur-fast), background var(--dur-fast); }
.aux-back:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.aux-back svg { width: 0.9375rem; height: 0.9375rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.aux-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1rem 3rem; }
.aux-card {
  position: relative; width: 100%; max-width: 27.5rem;
  background: var(--panel); border: 0.0625rem solid var(--card-bd); border-radius: var(--r-xl);
  padding: 1.875rem 1.625rem 1.625rem; box-shadow: var(--sh-3), var(--inset-hi);
}
.aux-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.0625rem; pointer-events: none; opacity: .45;
  background: linear-gradient(150deg, rgba(0, 194, 255, .5), rgba(124, 92, 252, .22) 42%, rgba(181, 33, 233, .45) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.aux-card h1 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 1.5rem; color: #fff; }
.aux-sub { margin: 0.5rem 0 0; font-size: 0.84375rem; line-height: 1.5; color: var(--muted); }
.aux-sub a, .aux-links a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-color: rgba(var(--accent-rgb), .5); }
.aux-sub a:hover, .aux-links a:hover { color: #fff; }

.aux-form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.8125rem; }

/* câmpuri cu etichetă plutitoare (același limbaj ca formularele din chat) */
.aux-field { position: relative; }
.aux-field input,
.aux-field textarea {
  width: 100%; min-height: 3.375rem; background: var(--bg-elev);
  border: 0.0625rem solid var(--card-bd); border-radius: var(--r-sm);
  padding: 1.375rem 2.875rem 0.5rem 0.875rem; color: #fff; font: inherit; font-size: 1rem;
  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .3);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.aux-field input::placeholder, .aux-field textarea::placeholder { color: transparent; }
/* Hibrida: câmpul «Nu-mi place» e textarea — aceeași etichetă plutitoare, înălțime pe conținut. */
.aux-field textarea { min-height: 5.25rem; resize: vertical; display: block; }
/* autofill: neutralizează fundalul alb + textul negru pe care le pune Chrome
   pe câmpurile completate automat (vezi și chat-v7.css). */
.aux-field input:-webkit-autofill,
.aux-field input:-webkit-autofill:hover,
.aux-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 62.5rem var(--bg-elev) inset;
  transition: background-color 9999s ease-out 0s;
}
.aux-field input:focus-visible,
.aux-field textarea:focus-visible {
  outline: none; border-color: rgba(var(--accent-rgb), .6);
  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .3), 0 0 0 0.1875rem rgba(var(--accent-rgb), .18);
}
.aux-field label {
  position: absolute; left: 0.875rem; top: 1.6875rem; transform: translateY(-50%);
  transform-origin: left center; font-size: 0.90625rem; color: var(--dim); pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base);
}
.aux-field.on label { transform: translateY(-50%) translateY(-0.8125rem) scale(.78); font-weight: 700; color: var(--accent-text); }
.aux-field.bad input { border-color: rgba(var(--danger-rgb), .65); box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .3), 0 0 0 0.1875rem rgba(var(--danger-rgb), .14); animation: auxShake .5s ease-out; }
.aux-err { display: none; margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; color: #FF9DB0; }
.aux-field.bad + .aux-err, .aux-field.bad .aux-err { display: block; }
/* PRODUCȚIE (adăugat la integrare): framework.bundle.js marchează câmpurile invalide
   cu `[data-field-invalid]`, nu cu clasa `.aux-field.bad` (aceea era a demo-ului din
   replică). Oglindim starea roșie pe contractul real, ca validarea serverului
   (StandardResponse → validation_errors) să se vadă pe câmp. Textul erorii vine prin
   notificările framework-ului, ca peste tot în aplicație. */
.aux-field input[data-field-invalid] { border-color: rgba(var(--danger-rgb), .65); box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .3), 0 0 0 0.1875rem rgba(var(--danger-rgb), .14); animation: auxShake .5s ease-out; }
.aux-check input[data-field-invalid] { border-color: rgba(var(--danger-rgb), .65); animation: auxShake .5s ease-out; }
@keyframes auxShake { 0% { transform: translateX(0); } 15% { transform: translateX(-0.4375rem); } 30% { transform: translateX(0.3125rem); } 45% { transform: translateX(-0.1875rem); } 60% { transform: translateX(0.125rem); } 100% { transform: translateX(0); } }

/* ochiul de parolă (contract framework: data-form-password-toggle) */
.aux-eye {
  position: absolute; right: 0.375rem; top: 0.4375rem; width: 2.5rem; height: 2.5rem;
  border: none; background: none; cursor: pointer; border-radius: 0.625rem;
  display: inline-flex; align-items: center; justify-content: center; color: var(--dim);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.aux-eye:hover { color: var(--accent-text); background: rgba(255, 255, 255, .05); }
.aux-eye svg { width: 1.1875rem; height: 1.1875rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aux-eye .off { display: none; }
.aux-eye[data-visible] .off { display: block; }
.aux-eye[data-visible] .onn { display: none; }

/* checklist-ul viu al parolei — oglindește EXACT regexul serverului */
.aux-rules { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: -0.1875rem; }
.aux-rule {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font-size: 0.6875rem; font-weight: 600; color: var(--dim);
  background: rgba(255, 255, 255, .035); border: 0.0625rem solid var(--card-bd);
  border-radius: 62.4375rem; padding: 0.25rem 0.5625rem;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.aux-rule::before {
  content: ""; width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  border: 0.09375rem solid var(--dim); box-sizing: border-box;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.aux-rule.ok { color: var(--ok-text); border-color: rgba(var(--ok-rgb), .3); background: rgba(var(--ok-rgb), .08); }
.aux-rule.ok::before {
  border-color: transparent; background: var(--ok);
  -webkit-mask: none; mask: none;
}

/* checkbox-uri (limbajul consent din LP) */
.aux-check { display: flex; gap: 0.625rem; align-items: flex-start; min-height: 2.5rem; padding: 0.25rem 0; font-size: 0.78125rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.aux-check input {
  appearance: none; -webkit-appearance: none; width: 1.3125rem; height: 1.3125rem; border-radius: 0.375rem;
  border: 0.09375rem solid var(--hairline-strong); background: var(--bg-elev);
  flex-shrink: 0; margin-top: 0.0625rem; cursor: pointer; position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.aux-check input:checked { background: var(--accent); border-color: transparent; }
.aux-check input:checked::after {
  content: ""; position: absolute; inset: 0.25rem; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: auxCk .2s var(--ease-press);
}
@keyframes auxCk { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.aux-check.bad input { border-color: rgba(var(--danger-rgb), .65); animation: auxShake .5s ease-out; }
.aux-check a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.125rem; }

.aux-form .cta { width: 100%; margin-top: 0.25rem; font-weight: 800; position: relative; }
.aux-form .cta[data-loading] { pointer-events: none; opacity: .85; }
.aux-form .cta[data-loading] > div { opacity: 0; }
.aux-form .cta[data-loading]::after {
  content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 0.15625rem solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: auxSpin .8s linear infinite;
}
@keyframes auxSpin { to { transform: rotate(360deg); } }

.aux-links { margin-top: 1rem; text-align: center; font-size: 0.8125rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.5rem; }

/* starea de succes (StandardResponse → mesaj + pasul următor)
   PRODUCȚIE: framework.bundle.js pune `data-success="true"` pe FORMULAR
   (`self.formEl`), nu pe `.aux-card` (acela era demo-ul din replică, care punea
   atributul pe card). Legăm succesul de formular prin `:has` — la fel cum chat-v7.css
   folosește deja `body:has(...)`. Pe login panoul ESTE acum starea finală: răspunsul
   nu mai are `redirect` (AuthenticationForm::login), utilizatorul rămâne pe pagină.

   Odată intrat în starea de succes dispare tot chrome-ul de dinainte de autentificare,
   nu doar formularul: `.aux-sub` („Nu ai cont? Creează unul acum"), `.aux-ctx` (pilula
   de context — „Chat-ul devine nelimitat cu cont") și `.aux-links` („Ți-ai uitat
   parola?" pe autentificare, „Ți-ai reamintit parola?" pe resetare). Toate trei sunt
   fără sens pentru cineva care s-a autentificat deja acum. */
.aux-success { display: none; text-align: center; padding: 0.5rem 0 0.125rem; }
.aux-card:has(.aux-form[data-success="true"]) .aux-form,
.aux-card:has(.aux-form[data-success="true"]) .aux-ctx,
.aux-card:has(.aux-form[data-success="true"]) .aux-links,
.aux-card:has(.aux-form[data-success="true"]) .aux-sub { display: none; }
.aux-card:has(.aux-form[data-success="true"]) .aux-success { display: block; animation: acxRise .5s var(--ease-emph) both; }
/* `data-static` — panou de succes randat DE SERVER, fără formular în pagină (verificarea
   adresei de email, când linkul din email a consumat deja codul). Regula de mai sus
   depinde de `data-success="true"` pus de framework pe formular, adică de o stare de
   client; aici nu există niciun formular care s-o poarte. */
.aux-success[data-static] { display: block; animation: acxRise .5s var(--ease-emph) both; }
.aux-success .ic {
  width: 3.375rem; height: 3.375rem; border-radius: 50%; margin: 0.375rem auto 0.875rem;
  background: rgba(var(--ok-rgb), .12); border: 0.0625rem solid rgba(var(--ok-rgb), .35);
  display: flex; align-items: center; justify-content: center;
}
.aux-success .ic::before {
  content: ""; width: 1.375rem; height: 1.375rem; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: auxCk .35s var(--ease-press) .15s both;
}
.aux-success p { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.55; color: var(--fg-body); }
.aux-success .cta { width: 100%; font-weight: 800; }

/* pastila de context „vii din chat" */
.aux-ctx {
  display: inline-flex; align-items: center; gap: 0.4375rem; margin-bottom: 0.875rem;
  font-size: 0.71875rem; font-weight: 700; color: var(--ok-text);
  background: rgba(var(--ok-rgb), .1); border: 0.0625rem solid rgba(var(--ok-rgb), .3);
  border-radius: 62.4375rem; padding: 0.3125rem 0.75rem;
}
.aux-ctx .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--ok); animation: acxPulse 2.2s ease-out infinite; }

body[data-anim-entrance] .aux-card { animation: acxRise .55s var(--ease-emph) .08s both; }
@media (max-width: 719.98px) {
  .aux-main { align-items: flex-start; padding-top: 4vh; }
  .aux-card { padding: 1.625rem 1.25rem 1.375rem; }
}

/* resetare: în PRODUCȚIE pasul e ales SERVER-SIDE (PasswordResetController trimite
   `code`), deci twig-ul randează un singur bloc, fără wrapper `[data-step]` — regulile
   de mai jos rămân din replică (demo cu ambii pași) și sunt inerte la noi. */
body[data-aux-step="1"] [data-step="2"] { display: none; }
body[data-aux-step="2"] [data-step="1"] { display: none; }
/* succesul per-formular (cardul de resetare are 2 sub-blocuri) */
.aux-card [data-step] .aux-success { display: none; }
.aux-card[data-success] [data-step] .aux-form { display: none; }
body[data-aux-step="1"] .aux-card[data-success] [data-step="1"] .aux-success { display: block; animation: acxRise .5s var(--ease-emph) both; }
body[data-aux-step="2"] .aux-card[data-success] [data-step="2"] .aux-success { display: block; animation: acxRise .5s var(--ease-emph) both; }

/* Cerut 7 sept (Dennis): al doilea buton din cardul de succes („Vezi programul",
   dezvăluit de auth-v7.js doar când contul are program) stă sub „Continuă în chat". */
.aux-success .aux-success-plan { margin-top: 0.625rem; }
.aux-success .aux-success-plan[hidden] { display: none; }

/* Cerut 10 sept (Dennis): pe desktop, pe ecranele de cont (.aux: autentificare,
   creare cont, parolă, verificare email) logo-ul e mai mare (+40%: 30 → 42px), iar
   caseta de confirmare de după submit (.aux-success) e cu ~50% mai mare:
   pictograma 54 → 80px (bifa 22 → 32), textul 14 → 17px cu mai mult aer,
   butoanele mai înalte. Mobilul rămâne cum e. */
@media (min-width: 1024px) {
  .aux-top .brand svg { height: 2.625rem; }
  .aux-success { padding: 1.25rem 0 0.625rem; }
  .aux-success .ic { width: 5rem; height: 5rem; margin: 0.5rem auto 1.5rem; }
  .aux-success .ic::before { width: 2rem; height: 2rem; }
  .aux-success p { font-size: 1.0625rem; line-height: 1.6; margin-bottom: 1.5rem; }
  .aux-success .cta { min-height: 3.625rem; font-size: 1.0625rem; }
  .aux-success .aux-success-plan { margin-top: 0.875rem; }
}