/**
 * AZEZY CSS - Light Theme for Authentication Pages
 */

/* ==========================================================
   LIGHT THEME FOR AUTHENTICATION PAGES (Sleek Clean Style)
   ========================================================== */
body.auth-body-light {
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 40%),
                var(--light-bg) !important;
    color: var(--light-text-primary) !important;
    background-size: 100% 100%;
}

body.auth-body-light .card-luxury {
    background: var(--light-surface) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.08) !important;
}

body.auth-body-light .card-luxury:hover {
    transform: none;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.08) !important;
}

body.auth-body-light .card-header-luxury {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1) !important;
    color: var(--light-text-primary) !important;
    padding: 25px !important;
}

body.auth-body-light .card-header-luxury h3 {
    font-weight: 800;
    margin: 0;
}

body.auth-body-light .card-header-luxury h3 span {
    color: var(--violet) !important;
}

body.auth-body-light .card-body-luxury {
    background: transparent !important;
    color: var(--light-text-secondary) !important;
}

body.auth-body-light .input-group-luxury {
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    background: #ffffff !important;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

body.auth-body-light .input-group-luxury:focus-within {
    border-color: var(--violet) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12) !important;
}

body.auth-body-light .input-group-luxury .form-control {
    border: none !important;
    background: transparent !important;
    color: var(--light-text-primary) !important;
}

body.auth-body-light .input-group-luxury .form-control::placeholder {
    color: var(--light-text-muted) !important;
}

body.auth-body-light .input-group-luxury .input-group-text {
    border: none !important;
    background: transparent !important;
    color: var(--violet) !important;
}

body.auth-body-light .toggle-password:hover {
    color: var(--primary) !important;
}

body.auth-body-light .btn-gold {
    background: var(--brand-gradient) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25) !important;
}

body.auth-body-light .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4) !important;
}

body.auth-body-light .btn-google-custom {
    background-color: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    color: var(--light-text-secondary) !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.04) !important;
}

body.auth-body-light .btn-google-custom:hover {
    background-color: rgba(99, 102, 241, 0.04) !important;
    border-color: var(--violet) !important;
    color: var(--primary) !important;
}

body.auth-body-light hr {
    border-color: rgba(99, 102, 241, 0.15) !important;
    opacity: 0.3 !important;
}

body.auth-body-light .text-gold {
    color: var(--violet) !important;
    font-weight: 600;
}

body.auth-body-light .text-gold:hover {
    color: var(--primary) !important;
}

body.auth-body-light .form-check-label {
    color: var(--light-text-secondary) !important;
}

body.auth-body-light .auth-or-text {
    background-color: var(--light-surface) !important;
    color: var(--light-text-muted) !important;
}

/* ==========================================================
   DARK THEME FOR AUTHENTICATION PAGES (Cyber-Dark Tech Style)
   ========================================================== */
body.auth-body-dark {
    background-color: var(--dark-bg) !important;
    color: var(--text-primary) !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 40%) !important;
}

body.auth-body-dark .card-luxury {
    background: var(--dark-bg-light) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body.auth-body-dark .card-luxury:hover {
    transform: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body.auth-body-dark .card-header-luxury {
    background: rgba(255, 255, 255, 0.01) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    color: var(--text-primary) !important;
    padding: 25px !important;
}

body.auth-body-dark .card-header-luxury h3 span {
    color: var(--accent) !important;
}

body.auth-body-dark .card-body-luxury {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

body.auth-body-dark .input-group-luxury {
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.auth-body-dark .input-group-luxury:hover {
    border-color: rgba(6, 182, 212, 0.6) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.auth-body-dark .input-group-luxury:focus-within {
    border-color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.25), 0 10px 20px rgba(0, 0, 0, 0.4) !important;
}

body.auth-body-dark .input-group-luxury .form-control {
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 14px 18px !important;
}

body.auth-body-dark .input-group-luxury .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.auth-body-dark .input-group-luxury .input-group-text {
    border: none !important;
    border-right: 1px solid rgba(99, 102, 241, 0.3) !important;
    background: rgba(99, 102, 241, 0.2) !important;
    color: var(--accent) !important;
    padding: 14px 20px !important;
    min-width: 55px;
    justify-content: center;
}

body.auth-body-dark .input-group-luxury .toggle-password {
    border: none !important;
    border-left: 1px solid rgba(99, 102, 241, 0.3) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-secondary) !important;
    padding: 14px 20px !important;
    transition: all 0.3s ease;
}

body.auth-body-dark .input-group-luxury .toggle-password:hover {
    background: rgba(6, 182, 212, 0.15) !important;
    color: var(--accent) !important;
}

body.auth-body-dark .btn-gold {
    background: var(--brand-gradient) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25) !important;
}

body.auth-body-dark .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4) !important;
}

body.auth-body-dark .btn-google-custom {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
}

body.auth-body-dark .btn-google-custom:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

body.auth-body-dark hr {
    border-color: var(--dark-border) !important;
    opacity: 0.3 !important;
}

body.auth-body-dark .text-gold {
    color: var(--accent) !important;
    font-weight: 600;
}

body.auth-body-dark .text-gold:hover {
    color: #fff !important;
}

body.auth-body-dark .form-check-label {
    color: var(--text-secondary) !important;
}

body.auth-body-dark .auth-or-text {
    background-color: var(--dark-bg-light) !important;
    color: var(--text-muted) !important;
}