/*
=====================================================
  DEFINITIVE & POLISHED AUTHENTICATION PAGE (V4)
=====================================================
*/

.auth-page-body-v3 {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 2rem 1rem;
    background-color: #121212; color: #ffffff;
    position: relative; overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.auth-page-body-v3::before, .auth-page-body-v3::after {
    content: ''; position: absolute; border-radius: 50%;
    background-image: linear-gradient(135deg, #6D28D9, #4F46E5);
    filter: blur(150px); z-index: 0;
}
.auth-page-body-v3::before { width: 500px; height: 500px; top: -10%; right: -15%; opacity: 0.3; }
.auth-page-body-v3::after { width: 400px; height: 400px; bottom: -15%; left: -10%; opacity: 0.2; }

.auth-wrapper-v3 {
    position: relative; z-index: 1; width: 100%; max-width: 1000px;
    display: grid; grid-template-columns: 1fr; gap: 2rem;
}

.auth-promo-panel-v3 {
    display: none; justify-content: center; flex-direction: column;
}
.promo-content-v3 .logo { color: white; margin-bottom: 2rem; text-decoration: none; font-size: 1.5rem; font-weight: bold; }
.promo-content-v3 h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.2; }
.promo-skip-link { display: inline-flex; align-items: center; gap: 1rem; color: #a0a0a0; text-decoration: none; margin-top: 1.5rem; }
.promo-skip-link .dashed-line { flex-grow: 1; height: 1px; border-bottom: 2px dashed #444; }

.auth-form-panel-v3 { display: flex; justify-content: center; align-items: center; }
.auth-glass-card-v3 {
    width: 100%; max-width: 420px;
    background: rgba(26, 26, 26, 0.4); backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem; padding: 2.5rem;
}
.auth-header-v3 { margin-bottom: 2rem; }
.auth-header-v3 h2 { font-size: 1.75rem; font-weight: 600; }
.auth-header-v3 p { color: #a0a0a0; margin-top: 0.25rem; }

.input-group { margin-bottom: 1.25rem; }
.input-group input {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid #444;
    color: white; padding: 0.75rem 0.25rem; font-size: 1rem; outline: none; transition: border-color 0.2s;
}
.input-group input:focus { border-color: #6D28D9; }
.input-group input::placeholder { color: #888; }
.password-input-wrapper { position: relative; }
.password-toggle-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; color: #888; cursor: pointer; padding: 0.5rem; }

.form-options { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 1.5rem; font-size: 0.9rem; color: #a0a0a0; }
.remember-me { display: flex; align-items: center; gap: 0.5rem; }
#remember-me { accent-color: #6D28D9; }
.forgot-password-link { color: #a0a0a0; text-decoration: none; }

.btn-primary-gradient {
    width: 100%; padding: 0.8rem; border-radius: 0.5rem; font-weight: 600; color: white;
    background: linear-gradient(90deg, #6D28D9, #4F46E5); border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary-gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(109, 40, 217, 0.4); }
.btn-primary-gradient:disabled { background: #444; cursor: not-allowed; transform: none; box-shadow: none; }

.separator-v3 { color: #666; text-align: center; margin: 1.5rem 0; }
.social-logins { display: flex; justify-content: center; gap: 1rem; }
.social-icon {
    display: flex; justify-content: center; align-items: center; width: 44px; height: 44px;
    border: 1px solid #444; border-radius: 50%; transition: border-color 0.2s; background-color: transparent; cursor: pointer;
}
.social-icon:hover { border-color: white; }
.social-icon svg { width: 22px; height: 22px; }

.auth-card-footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; color: #a0a0a0; }
.auth-card-footer .toggle-link a { color: white; font-weight: 600; text-decoration: none; cursor: pointer; }
.footer-links { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; }
.footer-links a { color: #a0a0a0; text-decoration: none; padding: 0 0.5rem; }

.success-message {
    color: #22c55e; background-color: color-mix(in srgb, #22c55e 15%, transparent); padding: 0.75rem;
    border-radius: 0.5rem; margin-bottom: 1rem; text-align: center; font-size: 0.9rem;
    border: 1px solid color-mix(in srgb, #22c55e 50%, transparent);
}
.error-message {
    display: none; align-items: center; gap: 0.75rem; margin-top: 1rem; margin-bottom: 1rem;
    background: color-mix(in srgb, #ef4444 10%, transparent); border: 1px solid #ef4444;
    padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 500; color: #f87171; animation: fadeIn 0.3s;
}
.error-icon { flex-shrink: 0; line-height: 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Styles for Phone Auth and reCAPTCHA */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-text {
    font-size: 0.75rem; color: #888; text-align: center; max-width: 300px;
    margin: 1.5rem auto 0; line-height: 1.5;
}
.recaptcha-text a { color: #aaa; text-decoration: none; }
.recaptcha-text a:hover { text-decoration: underline; }
.form-subtitle-small { text-align: center; margin-bottom: 1.5rem; color: #a0a0a0; line-height: 1.6; }
.form-subtitle-small strong { color: #fff; font-weight: 600; }

@media (min-width: 992px) {
    .auth-wrapper-v3 { grid-template-columns: 1fr 1fr; align-items: center; }
    .auth-promo-panel-v3 { display: flex; }
}


/* ADD THIS CSS to the end of auth-page.css */

/*
=====================================================
  STYLES FOR MINIMALIST PHONE INPUT (NO FLAG)
=====================================================
*/

/* Hides the flag dropdown container */
.iti__flag-container {
    display: none !important;
}

/* Adjusts the input field to take up the full width */
.iti__input {
    width: 100% !important;
    padding-left: 0.25rem !important; /* Reset padding to match other inputs */
}