/* =========================== PAGINI AUTENTIFICARE / REGISTER Se aplică DOAR când =========================== */ .auth-page { background: radial-gradient(circle at top left, #0f172a 0, #020617 55%, #000 100%); } /* Secțiunea principală – card centrat */ .auth-page .section { min-height: calc(100vh - 72px); padding: 96px 1.5rem 40px; display: flex; align-items: center; justify-content: center; } /* Îngustăm panoul pe paginile de auth */ .auth-page .panel-wrapper { max-width: 520px; margin: 0 auto; } .auth-page .panel-card.auth-card { background: radial-gradient( circle at top left, rgba(15,23,42,0.97), rgba(15,23,42,0.94) ); border-radius: 24px; border: 1px solid rgba(148,163,184,0.55); box-shadow: 0 26px 70px rgba(15,23,42,0.95); padding: 28px 30px 30px; } /* Titlu + subtitlu */ .auth-page .panel-title { font-size: 1.6rem; margin-bottom: 0.35rem; } .auth-page .panel-subtitle { font-size: 0.92rem; color: #9ca3af; margin-bottom: 1.6rem; } /* Formular */ .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-field { display: flex; flex-direction: column; gap: 0.25rem; } .auth-field label { font-size: 0.88rem; color: #e5e7eb; } /* câmpuri text (email, parolă, telefon) – stil unitar, indiferent dacă tipul e password sau text */ .auth-field input:not([type="checkbox"]) { border-radius: 999px; border: 1px solid rgba(148,163,184,0.7); background: rgba(15,23,42,0.98); padding: 0.55rem 0.9rem; font-size: 0.9rem; color: #e5e7eb; outline: none; transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out; } .auth-field input:not([type="checkbox"]):focus { border-color: rgba(129,140,248,0.95); box-shadow: 0 0 0 1px rgba(129,140,248,0.7), 0 12px 30px rgba(15,23,42,0.9); } .auth-field input::placeholder { color: #6b7280; } .auth-field input:focus { border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56,189,248,0.55); } /* fix pentru autofill (Chrome / Edge) – nu mai albește câmpul */ .auth-field input:-webkit-autofill, .auth-field input:-webkit-autofill:hover, .auth-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px rgba(15,23,42,0.98) inset !important; -webkit-text-fill-color: #e5e7eb !important; border-radius: 999px; border: 1px solid rgba(148,163,184,0.7); } /* placeholder la fel ca înainte */ .auth-field input::placeholder { color: #6b7280; } /* Wrapper pentru câmpurile de parolă + buton-ochi */ .password-wrapper { position: relative; display: flex; align-items: center; } .password-wrapper input[type="password"], .password-wrapper input[type="text"] { width: 100%; padding-right: 2.4rem; } .toggle-password-btn { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 999px; border: none; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease-out, transform 0.1s ease-out; } .toggle-password-btn:hover { opacity: 1; transform: translateY(-50%) scale(1.05); } .toggle-password-btn svg { width: 18px; height: 18px; display: block; } /* stare „vizibil” – ușor accentuată */ .toggle-password-btn.visible { opacity: 1; } /* Mesaje de eroare / info */ .auth-alert { border-radius: 16px; padding: 0.7rem 0.9rem; font-size: 0.88rem; margin-bottom: 0.8rem; } .auth-alert-error { background: rgba(239,68,68,0.12); border: 1px solid rgba(248,113,113,0.7); color: #fecaca; } /* Butoane */ .auth-actions { margin-top: 0.6rem; display: flex; justify-content: flex-end; } .auth-actions .btn { border-radius: 999px; padding: 0.5rem 1.4rem; font-size: 0.92rem; } .auth-page .btn-primary { background: linear-gradient(to right, #38bdf8, #a855f7); color: #f9fafb; border: none; box-shadow: 0 10px 30px rgba(56,189,248,0.4); cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, opacity 0.15s ease-out; } .auth-page .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(56,189,248,0.5); } /* Link schimbare pagină (login / register) */ .auth-switch { margin-top: 1.2rem; font-size: 0.86rem; color: #9ca3af; text-align: center; } .auth-switch a { color: #e5e7eb; font-weight: 500; } .auth-switch a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 768px) { .auth-page .section { padding: 88px 1rem 32px; } .auth-page .panel-card.auth-card { padding: 22px 20px 24px; } } /* Stil forțat pentru câmpul de telefon din register */ .auth-card input#phone_number { border-radius: 999px !important; border: 1px solid rgba(148,163,184,0.7) !important; background: rgba(15,23,42,0.98) !important; padding: 0.55rem 0.9rem !important; font-size: 0.9rem !important; color: #e5e7eb !important; outline: none !important; width: 100% !important; box-sizing: border-box !important; } .auth-card input#phone_number::placeholder { color: #6b7280 !important; }