/* =============================================================================
   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: 14px clamp(16px, 4vw, 44px); }
.aux-top .brand svg { height: 30px; width: auto; display: block; }
.aux-back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; 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: 15px; height: 15px; 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: 20px 16px 48px; }
.aux-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--panel); border: 1px solid var(--card-bd); border-radius: var(--r-xl);
  padding: 30px 26px 26px; box-shadow: var(--sh-3), var(--inset-hi);
}
.aux-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; 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: 24px; color: #fff; }
.aux-sub { margin: 8px 0 0; font-size: 13.5px; 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: 3px; text-decoration-color: rgba(var(--accent-rgb), .5); }
.aux-sub a:hover, .aux-links a:hover { color: #fff; }

.aux-form { margin-top: 20px; display: flex; flex-direction: column; gap: 13px; }

/* câmpuri cu etichetă plutitoare (același limbaj ca formularele din chat) */
.aux-field { position: relative; }
.aux-field input {
  width: 100%; min-height: 54px; background: var(--bg-elev);
  border: 1px solid var(--card-bd); border-radius: var(--r-sm);
  padding: 22px 46px 8px 14px; color: #fff; font: inherit; font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.aux-field input::placeholder { color: transparent; }
/* 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 1000px var(--bg-elev) inset;
  transition: background-color 9999s ease-out 0s;
}
.aux-field input:focus-visible {
  outline: none; border-color: rgba(var(--accent-rgb), .6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.aux-field label {
  position: absolute; left: 14px; top: 27px; transform: translateY(-50%);
  transform-origin: left center; font-size: 14.5px; 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(-13px) scale(.78); font-weight: 700; color: var(--accent-text); }
.aux-field.bad input { border-color: rgba(var(--danger-rgb), .65); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 3px rgba(var(--danger-rgb), .14); animation: auxShake .5s ease-out; }
.aux-err { display: none; margin-top: 6px; font-size: 12px; 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 1px 2px rgba(0, 0, 0, .3), 0 0 0 3px 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(-7px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-3px); } 60% { transform: translateX(2px); } 100% { transform: translateX(0); } }

/* ochiul de parolă (contract framework: data-form-password-toggle) */
.aux-eye {
  position: absolute; right: 6px; top: 7px; width: 40px; height: 40px;
  border: none; background: none; cursor: pointer; border-radius: 10px;
  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: 19px; height: 19px; 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: 6px; margin-top: -3px; }
.aux-rule {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--dim);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--card-bd);
  border-radius: 999px; padding: 4px 9px;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.aux-rule::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px 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: 10px; align-items: flex-start; min-height: 40px; padding: 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.aux-check input {
  appearance: none; -webkit-appearance: none; width: 21px; height: 21px; border-radius: 6px;
  border: 1.5px solid var(--hairline-strong); background: var(--bg-elev);
  flex-shrink: 0; margin-top: 1px; 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: 4px; 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: 2px; }

.aux-form .cta { width: 100%; margin-top: 4px; 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: 20px; height: 20px; border-radius: 50%;
  border: 2.5px 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: 16px; text-align: center; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }

/* 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: 8px 0 2px; }
.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: 54px; height: 54px; border-radius: 50%; margin: 6px auto 14px;
  background: rgba(var(--ok-rgb), .12); border: 1px solid rgba(var(--ok-rgb), .35);
  display: flex; align-items: center; justify-content: center;
}
.aux-success .ic::before {
  content: ""; width: 22px; height: 22px; 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 16px; font-size: 14px; 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: 7px; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700; color: var(--ok-text);
  background: rgba(var(--ok-rgb), .1); border: 1px solid rgba(var(--ok-rgb), .3);
  border-radius: 999px; padding: 5px 12px;
}
.aux-ctx .dot { width: 6px; height: 6px; 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: 26px 20px 22px; }
}

/* 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; }