/* Autentificare + înregistrare într-un singur card (06.10.2026), după modelul
   „glassy login form V2”: pe calculator două fețe una lângă alta (login stânga,
   înregistrare dreapta) și un panou de sticlă cu marginea în diagonală care
   acoperă fața inactivă; la comutare panoul alunecă, iar textele se estompează
   și revin clare. Pe telefon (≤860px) panoul dispare și se vede doar fața activă.
   Markup în login.html (#loginModalBack.au-uni), comutarea în login-page.js. */

.au-uni { --au-durata: .75s; --au-curba: cubic-bezier(.7, 0, .25, 1); padding: 24px; }
/* Cardul stă în hero, nu într-o fereastră peste pagină */
.au-uni.au-inline { position: relative; inset: auto; z-index: auto; display: flex; padding: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Înălțimea o pune login-page.js după conținutul fețelor (crește când apar erorile
   sub câmpuri, ca să nu apară derularea); 640px e doar punctul de pornire. */
.au-inline .au-card { height: 640px; scroll-margin: 90px; text-align: left; }

.au-card {
  position: relative; width: 100%; max-width: 940px;
  height: min(640px, calc(100vh - 48px)); height: min(640px, calc(100dvh - 48px));
  border-radius: 22px; overflow: hidden; isolation: isolate;
  background: rgba(26, 28, 36, .55);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: auIntra .45s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes auIntra { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.au-card.shake { animation: lmShake .45s ease; }
/* reflexul de sticlă: o pată de lumină difuză peste tot cardul */
.au-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, .07), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(139, 143, 240, .08), transparent 60%);
}
.au-x { top: 16px; right: 16px; z-index: 6; }

/* ── Fețele ── */
.au-fata {
  position: absolute; top: 0; bottom: 0; width: 50%;
  transition: opacity calc(var(--au-durata) * .55) ease, filter calc(var(--au-durata) * .55) ease,
              transform var(--au-durata) var(--au-curba), visibility 0s linear calc(var(--au-durata) * .55);
}
.au-fata-login { left: 0; }
.au-fata-reg { left: 50%; }
.au-fata-2fa, .au-fata-forgot { left: 0; }   /* verificarea în doi pași și parola uitată iau locul login-ului */
.au-scroll { height: 100%; overflow-y: auto; display: flex; scrollbar-width: thin; scrollbar-color: rgba(139,143,240,.5) transparent; }
.au-scroll::-webkit-scrollbar { width: 4px; }
.au-scroll::-webkit-scrollbar-thumb { background: rgba(139, 143, 240, .5); border-radius: 2px; }
.au-continut { margin: auto 0; width: 100%; padding: 26px 34px; }
/* spre panou, loc în plus: diagonala lui intră până la ~40px în jumătatea activă */
.au-fata-login .au-continut, .au-fata-2fa .au-continut, .au-fata-forgot .au-continut { padding-right: 78px; padding-left: 44px; }
.au-fata-reg .au-continut { padding-left: 78px; padding-right: 44px; }

/* fețele inactive: estompate și împinse puțin spre panou */
.au-uni:not([data-mod="login"]) .au-fata-login,
.au-uni:not([data-mod="register"]) .au-fata-reg,
.au-uni:not([data-mod="2fa"]) .au-fata-2fa,
.au-uni:not([data-mod="forgot"]) .au-fata-forgot {
  opacity: 0; filter: blur(10px); visibility: hidden; pointer-events: none;
}
.au-uni:not([data-mod="register"]) .au-fata-reg { transform: translateX(-6%); }
.au-uni:not([data-mod="login"]) .au-fata-login { transform: translateX(6%); }
.au-uni:not([data-mod="2fa"]) .au-fata-2fa,
.au-uni:not([data-mod="forgot"]) .au-fata-forgot { transform: translateX(-4%); }
/* fața care apare intră după ce panoul a trecut de jumătate */
.au-uni[data-mod="login"] .au-fata-login,
.au-uni[data-mod="register"] .au-fata-reg,
.au-uni[data-mod="2fa"] .au-fata-2fa,
.au-uni[data-mod="forgot"] .au-fata-forgot {
  transition-delay: calc(var(--au-durata) * .4), calc(var(--au-durata) * .4), 0s, 0s;
}

/* Login: fără chenarul vechi al antetului, totul pe sticla cardului */
.au-fata-login .lm-header { background: none; border: 0; padding: 0 0 22px; }
.au-fata-login .lm-title { font-size: 26px; }
.au-fata-login .lm-body { padding: 0; }
/* Înregistrare: antetul `.au-cap` era făcut pentru padding-ul de 28px al ferestrei vechi */
.au-fata-reg .rg-scroll { padding: 0; max-height: none; }
.au-fata-reg .au-cap, .au-fata-2fa .au-cap, .au-fata-forgot .au-cap { margin: 0 0 18px; padding: 0 40px 0 0; background: none; border: 0; }
.au-fata-reg .au-titlu, .au-fata-2fa .au-titlu, .au-fata-forgot .au-titlu { font-size: 24px; }
/* „Continuă” / „Creează contul” lipite de josul zonei care derulează: pe un ecran
   scund rămâneau sub margine și nu era clar că trebuie derulat (06.10). */
.au-fata-reg .rg-actiuni {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 -6px; padding: 14px 6px 4px;
  background: linear-gradient(to top, rgb(30, 32, 41) 72%, rgba(30, 32, 41, 0));
}
.au-fata-reg .modal-form-group { margin-bottom: 12px; }
/* Mesajul de la ANAF pe un singur rând: „Găsită la ANAF: <denumire lungă> · plătitoare
   de TVA” trecea pe două și mărea cardul. Textul întreg rămâne în `title`. */
.au-fata-reg .rg-anaf-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pe telefon cardul crește oricum pe înălțime: mesajul trece pe rândul următor, nu se taie cu „…”. */
@media (max-width: 860px) { .au-fata-reg .rg-anaf-msg { white-space: normal; } }
.au-fata-reg .au-cap { margin-bottom: 14px; }
.au-comuta-jos { margin-top: 16px; }
/* Pe calculator comută panoul; linkurile de jos rămân doar pe telefon, unde panoul lipsește. */
@media (min-width: 861px) { .au-comuta-jos { display: none; } }
.au-comuta-jos button { background: none; border: none; color: #8f94fb; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; padding: 0; margin-left: 4px; }
.au-comuta-jos button:hover { text-decoration: underline; }

/* ── Panoul de sticlă ── */
.au-panou {
  /* Paralelogram fix, mai lat decât jumătatea: latura din afară iese din card și e
     tăiată de el, deci se vede doar diagonala dinspre formular. La comutare panoul
     doar alunecă, fără să-și schimbe forma (06.10, „să culiseze așa oblic”). */
  position: absolute; top: 0; bottom: 0; width: 62%; left: 46%; z-index: 4;
  /* Fără backdrop-filter: estomparea se aplica dreptunghiului întreg, nu formei
     decupate, și lăsa o linie verticală peste câmpuri (06.10). Sticla e doar culoare. */
  /* culoarea mărcii (06.10): indigo → violet, ca butoanele principale și „simplu și profesional” din hero */
  background: linear-gradient(135deg, rgba(78, 84, 200, .95) 0%, rgba(106, 90, 205, .93) 55%, rgba(139, 92, 246, .9) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%);
  transition: left var(--au-durata) var(--au-curba);
}
.au-uni[data-mod="register"] .au-panou { left: -8%; }
.au-panou-strat {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 130px 40px 74px; color: #fff;
  transition: opacity calc(var(--au-durata) * .5) ease, filter calc(var(--au-durata) * .5) ease, transform calc(var(--au-durata) * .5) ease;
}
.au-panou-pt-reg { padding: 40px 74px 40px 125px; }
.au-uni:not([data-mod="login"]) .au-panou-pt-login,
.au-uni:not([data-mod="register"]) .au-panou-pt-reg,
.au-uni:not([data-mod="2fa"]) .au-panou-pt-2fa,
.au-uni:not([data-mod="forgot"]) .au-panou-pt-forgot { opacity: 0; filter: blur(8px); transform: scale(.96); pointer-events: none; visibility: hidden; }
.au-uni[data-mod="login"] .au-panou-pt-login,
.au-uni[data-mod="register"] .au-panou-pt-reg,
.au-uni[data-mod="2fa"] .au-panou-pt-2fa,
.au-uni[data-mod="forgot"] .au-panou-pt-forgot { transition-delay: calc(var(--au-durata) * .5); }
.au-panou-strat { transition-property: opacity, filter, transform, visibility; }

.au-panou-titlu {
  font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -.5px; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.au-panou-titlu .au-marca { text-transform: none; }  /* numele se scrie ca în siglă, nu cu majuscule */
.au-panou-text { margin: 14px 0 22px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 300px; }
.au-panou-text strong { color: #fff; }
.au-panou-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm, 8px); cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background .2s, border-color .2s, transform .15s;
}
.au-panou-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.au-panou-btn:hover .ti { transform: translateX(3px); }
.au-panou-btn .ti { transition: transform .2s; }


/* Prima deschidere: fără animația de comutare */
.au-uni.au-fara-anim .au-fata, .au-uni.au-fara-anim .au-panou,
.au-uni.au-fara-anim .au-panou-strat { transition: none !important; }

/* ── Telefon / tabletă îngustă: o singură față, fără panou ── */
@media (max-width: 860px) {
  .au-uni { padding: 12px; }
  .au-uni.au-inline { padding: 0; }
  /* Hero pe telefon (06.10): cardul urcă imediat sub titlu; paragraful și „Verifică status
     reparație” coboară sub el. `display: contents` face din copiii lui .hero-inner elemente
     ale grilei, ca să le putem schimba ordinea fără să dublăm textul în HTML. */
  .hero { padding-top: 28px; }
  .hero-grid { gap: 0; }
  .hero-grid .hero-inner { display: contents; }
  .hero-grid .hero-badge { order: 1; margin-bottom: 10px; }
  .hero-grid h1 { order: 2; margin-bottom: 18px; }
  .hero-grid .au-inline { order: 3; }
  .hero-grid .hero-sub { order: 4; margin: 24px auto 0; }
  .hero-grid .hero-status-link { order: 5; justify-self: center; margin-top: 16px; }
  .au-inline .au-card { height: auto; max-height: none; }
  .au-inline .au-scroll { max-height: none; }
  /* `minmax(0, 1fr)`, nu coloana implicită (`auto`): aceea se lățea după cel mai lung
     text pe un rând — mesajul ANAF de sub CUI e `nowrap` —, iar pe telefoanele de
     360px câmpurile ieșeau din card și erau tăiate în dreapta, până când căutarea la
     ANAF scurta mesajul (raportat de user 10.10.2026). */
  .au-card { max-width: 460px; height: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: grid;
    grid-template-columns: minmax(0, 1fr); }
  .au-panou { display: none; }
  .au-fata { position: relative; width: auto; left: auto; grid-area: 1 / 1; min-height: 0; min-width: 0; }
  .au-scroll { max-height: calc(100vh - 26px); max-height: calc(100dvh - 26px); }
  .au-continut, .au-fata-login .au-continut, .au-fata-reg .au-continut, .au-fata-2fa .au-continut, .au-fata-forgot .au-continut { padding: 26px 22px 22px; }
  .au-uni:not([data-mod="login"]) .au-fata-login,
  .au-uni:not([data-mod="register"]) .au-fata-reg,
  .au-uni:not([data-mod="2fa"]) .au-fata-2fa,
  .au-uni:not([data-mod="forgot"]) .au-fata-forgot { transform: translateY(10px) scale(.98); display: none; }
  /* cât ține comutarea se văd doar cele două fețe implicate (`data-din` = fața de plecare) */
  .au-uni.au-comutare[data-din="login"] .au-fata-login,
  .au-uni.au-comutare[data-din="register"] .au-fata-reg,
  .au-uni.au-comutare[data-din="2fa"] .au-fata-2fa,
  .au-uni.au-comutare[data-din="forgot"] .au-fata-forgot { display: block; }
  .au-fata-login .lm-title { font-size: 22px; }
  .au-fata-reg .au-titlu, .au-fata-2fa .au-titlu, .au-fata-forgot .au-titlu { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .au-card, .au-fata, .au-panou, .au-panou-strat { animation: none !important; transition: none !important; }
}