/* ==========================================================================
   Client authentication pages - premium split-screen design
   Used by: login.php, register.php, reset-password.php, verify-login.php
   Primary: #03045E (same as the admin panel). No cards/panels, never scrolls.
   ========================================================================== */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary-color: #03045E;
    --primary-light: #90E0EF;
    --primary-dark: #010238;
    --accent: #00B4D8;
    --accent-soft: #CAF0F8;
    --background-dark: #03045E;
    --card-glass: transparent;
    --border-glass: rgba(255, 255, 255, 0.16);
    --field-bg: rgba(255, 255, 255, 0.07);
    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.62);
    --error-color: #ff8a8a;
    --success-color: #34d399;
    --step-inactive: rgba(255, 255, 255, 0.1);
    --touch-min: clamp(40px, 6vh, 46px);
    --gap-y: clamp(10px, 1.9vh, 18px);
}

html,
body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

body.auth-page {
    font-family: 'Outfit', sans-serif;
    background: var(--primary-color);
    color: var(--text-white);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Brand side ---------- */
.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 5vh, 56px) clamp(32px, 5vw, 72px);
    background:
        radial-gradient(circle at 15% 12%, rgba(0, 180, 216, 0.28) 0%, transparent 42%),
        radial-gradient(circle at 90% 95%, rgba(144, 224, 239, 0.16) 0%, transparent 45%),
        linear-gradient(150deg, #0a0dad 0%, #03045E 52%, #010238 100%);
}

.auth-brand::before,
.auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.auth-brand::before {
    width: 560px;
    height: 560px;
    right: -220px;
    top: -160px;
    box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.02), 0 0 0 140px rgba(255, 255, 255, 0.015);
    animation: drift 16s ease-in-out infinite alternate;
}

.auth-brand::after {
    width: 380px;
    height: 380px;
    left: -140px;
    bottom: -120px;
    animation: drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-18px, 14px) scale(1.04); }
}

.brand-top,
.brand-copy,
.brand-foot { position: relative; z-index: 1; }

.brand-top { display: flex; align-items: center; gap: 12px; }

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.brand-logo svg { width: 24px; height: 24px; color: var(--accent-soft); }

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand-copy h2 {
    font-size: clamp(1.9rem, 2.2vw + 1rem, 3.1rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: clamp(10px, 2vh, 18px);
    max-width: 14ch;
}

.brand-copy h2 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--primary-light), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-copy > p {
    color: var(--text-muted);
    font-size: clamp(0.9rem, 0.4vw + 0.8rem, 1.05rem);
    line-height: 1.55;
    max-width: 38ch;
    margin-bottom: clamp(16px, 3.5vh, 32px);
}

.brand-points { list-style: none; display: grid; gap: clamp(8px, 1.6vh, 14px); }

.brand-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.86);
}

.brand-points li span {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(144, 224, 239, 0.14);
    color: var(--primary-light);
}

.brand-points svg { width: 15px; height: 15px; }

.brand-foot { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); }

/* ---------- Form side (no card, sits directly on the background) ---------- */
.login-wrapper,
.signup-wrapper,
.reset-wrapper,
.forgot-wrapper,
.verify-wrapper {
    grid-column: 2;
    height: 100dvh;
    width: 100%;
    max-width: none;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 4vh, 48px) clamp(24px, 5vw, 72px);
    background: var(--text-white);
    animation: formIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-wrapper::-webkit-scrollbar,
.signup-wrapper::-webkit-scrollbar,
.reset-wrapper::-webkit-scrollbar,
.verify-wrapper::-webkit-scrollbar { display: none; }

@keyframes formIn {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}

.login-container,
.signup-container,
.reset-container,
.forgot-container,
.verify-container {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: left;
}

.signup-container { max-width: 540px; }

.login-header,
.signup-header,
.reset-header,
.forgot-header,
.verify-header {
    text-align: left;
    margin-bottom: clamp(14px, 3.2vh, 30px);
}

.login-header h1,
.signup-header h1,
.reset-header h1,
.forgot-header h1,
.verify-header h1 {
    font-size: clamp(1.55rem, 1.6vw + 0.9rem, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--primary-color); margin-bottom: 6px;
}

.login-header p,
.signup-header p,
.reset-header p,
.forgot-header p,
.verify-header p {
    color: #4b5563; font-size: 0.9375rem;
    line-height: 1.45;
}

.reset-header p[style],
.verify-header p[style] { margin-top: 4px !important; font-size: 0.9rem !important; }

.phone-highlight,
.email-highlight { color: var(--primary-light); font-weight: 600; word-break: break-all; }

/* ---------- Fields ---------- */
.form-group { margin-bottom: var(--gap-y); position: relative; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    line-height: 18px;
    color: #1f2937; font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

.input-wrapper { position: relative; display: flex; align-items: center; }

.input-wrapper input,
.form-group input,
.form-group select {
    width: 100%;
    min-height: var(--touch-min);
    padding: 10px 16px;
    background: #f9fafb; border: 1px solid #d1d5db; border-radius: 12px; font-size: 0.975rem; color: #111827;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.input-wrapper input::placeholder,
.form-group input::placeholder { color: #9ca3af; }

.input-wrapper input:hover,
.form-group input:hover,
.form-group select:hover { border-color: #9ca3af; }

.input-wrapper input:focus,
.form-group input:focus,
.form-group select:focus {
    background: #ffffff; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(3, 4, 94, 0.1);
}

.input-wrapper input,
#password,
#confirmPassword { padding-right: 46px; }

select option { background: #fff; color: #111827; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0 1000px #f9fafb inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 36px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer; color: #6b7280;
    border-radius: 9px;
    padding: 0;
    margin: 0;
    transition: color 0.2s, background 0.2s;
}

.input-wrapper .password-toggle { top: 50%; transform: translateY(-50%); }

.password-toggle:hover { color: var(--primary-color); background: rgba(3, 4, 94, 0.05); }
.password-toggle svg { width: 19px; height: 19px; }

.required { color: var(--error-color); margin-left: 2px; }

.error-message {
    color: var(--error-color);
    font-size: 0.75rem;
    margin-top: 5px;
    display: none;
    font-weight: 500;
}
.error-message.show { display: block; }

.remember-info { display: flex; margin-bottom: var(--gap-y); }

.remember-info span {
    font-size: 0.78rem;
    color: var(--success-color);
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.22);
    padding: 7px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.remember-info svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn-submit,
.btn-login,
.reset-btn,
.verify-btn,
.btn {
    min-height: var(--touch-min);
    padding: 11px 20px;
    border: 0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.01em;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.btn-submit,

.btn-login,
.reset-btn,
.verify-btn,
.btn-primary {
    background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(3, 4, 94, 0.2);
}

.btn-submit,

.btn-login,
.reset-btn,
.verify-btn { width: 100%; margin-bottom: clamp(12px, 2.4vh, 22px); }

.btn-submit:hover:not(:disabled),

.btn-login:hover:not(:disabled),
.reset-btn:hover:not(:disabled),
.verify-btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(3, 4, 94, 0.3);
}

.btn-submit:active:not(:disabled),

.btn-login:active:not(:disabled),
.reset-btn:active:not(:disabled),
.verify-btn:active:not(:disabled),
.btn-primary:active:not(:disabled) { transform: none; }

.btn-submit:disabled,

.btn-login:disabled,
.reset-btn:disabled,
.verify-btn:disabled,
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-secondary {
    background: transparent; color: #374151; border: 1px solid #d1d5db;
}
.btn-secondary:hover:not(:disabled) { background: #f3f4f6; color: #111827; transform: translateY(-1px); }

.form-actions { display: flex; gap: 12px; margin-top: clamp(14px, 3vh, 26px); }
.form-actions .btn { flex: 1; min-width: 0; }

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(3, 4, 94, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Links ---------- */
.footer-links,
.login-link {
    text-align: left;
    font-size: 0.875rem;
    color: #4b5563; } .login-link { margin-top: clamp(12px, 2.4vh, 22px); }
.footer-links p { margin-bottom: 8px; }
.footer-links p:last-child { margin-bottom: 0; }

.footer-links a,
.login-link a {
    color: var(--primary-color); text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(3, 4, 94, 0.2);
    transition: color 0.2s, border-color 0.2s;
}
.footer-links a:hover,
.login-link a:hover { color: var(--primary-dark); border-color: var(--primary-dark); }

/* ---------- Alerts ---------- */
.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: var(--gap-y);
    font-size: 0.85rem;
    display: none;
    line-height: 1.4;
}
.alert.show { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.alert-error { background: rgba(255, 90, 90, 0.14); color: #ffc2c2; border: 1px solid rgba(255, 120, 120, 0.3); }
.alert-success { background: rgba(52, 211, 153, 0.13); color: #a7f3d0; border: 1px solid rgba(52, 211, 153, 0.3); }

/* ---------- OTP (verify + reset) ---------- */
.otp-inputs {
    display: flex;
    gap: clamp(6px, 1.4vw, 10px);
    margin-bottom: var(--gap-y);
}

.otp-inputs input {
    flex: 1;
    min-width: 0;
    max-width: 62px;
    width: auto;
    height: clamp(46px, 7.5vh, 58px);
    padding: 0;
    background: #f9fafb; border: 1px solid #d1d5db; border-radius: 12px; color: #111827;
    font-size: clamp(1.25rem, 2.6vh + 0.6rem, 1.6rem);
    font-weight: 700;
    text-align: center;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.otp-inputs input:focus {
    background: #ffffff; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(3, 4, 94, 0.1);
}

.resend-box { color: #4b5563; font-size: 0.85rem; margin-bottom: clamp(10px, 2vh, 18px); }
.resend-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.resend-btn {
    background: none;
    border: 0;
    color: var(--primary-color); font-weight: 600; cursor: pointer;
    padding: 0;
    margin-left: 4px;
    font-size: inherit;
    font-family: inherit;
    transition: color 0.2s;
}
.resend-btn:hover:not(:disabled) { color: var(--primary-dark); } .resend-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- Register wizard ---------- */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: clamp(14px, 3vh, 26px);
    position: relative;
}

.wizard-step { flex: 1; min-width: 0; text-align: left; position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }

.wizard-step::after {
    content: '';
    flex: 1;
    height: 2px;
    margin-right: 6px;
    border-radius: 2px;
    background: var(--step-inactive);
    transition: background 0.3s ease;
}
.wizard-step.completed::after { background: var(--success-color); }
.wizard-step:last-child::after { display: none; }
.wizard-step:last-child { flex: 0 0 auto; }

.step-number {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--step-inactive);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    margin: 0;
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
}
.wizard-step.active .step-number { background: #fff; color: var(--primary-color); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16); }
.wizard-step.completed .step-number { background: var(--success-color); border-color: var(--success-color); color: #04281c; }

.step-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
}
.wizard-step.active .step-label { color: #fff; }

.form-step { display: none; }
.form-step.active { display: block; animation: stepFade 0.4s ease forwards; }
@keyframes stepFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.password-strength {
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.18);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    display: none;
}
.password-strength.show { display: block; animation: fadeIn 0.25s ease; }

.strength-requirements { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 5px; }
.strength-requirements li {
    color: var(--text-muted);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.strength-requirements li.valid { color: var(--success-color); }
.strength-requirements li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: background 0.2s;
}
.strength-requirements li.valid::before { background: var(--success-color); }

.phone-input-wrapper { display: flex; gap: 10px; }

.review-title { margin-bottom: 12px; color: #fff; font-weight: 600; font-size: 1.05rem; }
.review-box {
    background: rgba(0, 0, 0, 0.18);
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 4px;
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.review-box strong { color: #fff; font-weight: 500; }
.review-box > div { margin-bottom: 8px; }
.review-box > div:last-child { margin-bottom: 0; }

/* Select2 */
.select2-container--default .select2-selection--single {
    min-height: var(--touch-min) !important;
    height: auto !important;
    padding: 9px 12px !important;
    background: #f9fafb !important; border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    transition: all 0.2s !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 3px rgba(144, 224, 239, 0.18) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111827 !important; line-height: 1.4 !important;
    padding-left: 0 !important;
    font-size: 0.975rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 10px !important; }
.select2-dropdown {
    background: #ffffff !important; border: 1px solid #d1d5db !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important; border-radius: 12px !important; margin-top: 6px !important; color: #111827;
}
.select2-results__option { padding: 10px 14px !important; font-size: 0.875rem !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--accent) !important; color: #fff !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: #f3f4f6 !important; }
.select2-search--dropdown .select2-search__field {
    background: #f9fafb !important; border: 1px solid #d1d5db !important; color: #111827 !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
}
.phone-input-wrapper .select2-container { width: 130px !important; }
.flag-img { width: 20px; height: 14px; margin-right: 10px; border-radius: 2px; vertical-align: middle; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body.auth-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .auth-brand {
        padding: 14px 22px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .auth-brand::before { width: 260px; height: 260px; right: -110px; top: -140px; box-shadow: none; }
    .auth-brand::after { display: none; }
    .brand-copy,
    .brand-foot { display: none; }
    .brand-logo { width: 36px; height: 36px; border-radius: 11px; }
    .brand-logo svg { width: 20px; height: 20px; }
    .brand-name { font-size: 1.1rem; }

    .login-wrapper,
    .signup-wrapper,
    .reset-wrapper,
    .forgot-wrapper,
    .verify-wrapper {
        grid-column: 1;
        height: auto;
        min-height: 0;
        padding: clamp(14px, 3vh, 28px) 22px;
        animation: none;
    }

    .login-container,
    .signup-container,
    .reset-container,
    .verify-container { max-width: 460px; }
}

@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
    .phone-input-wrapper { flex-direction: column; gap: 10px; }
    .phone-input-wrapper .select2-container { width: 100% !important; }
    .step-label { display: none; }
    .wizard-step { gap: 0; }
    .wizard-step::after { margin-left: 8px; margin-right: 8px; }
    .strength-requirements { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 700px) {
    .login-header p,
    .signup-header p { display: none; }
    .login-header,
    .signup-header { margin-bottom: 12px; }
    .remember-info { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}