/* ============================================
   Page-Specific Styles: Auth (Login/Register) - V3.1 Unified
   Style aligned with home page: gradient background, cards, rounded corners
   Created: 2026-09-07
   Updated: 2026-09-07 V3.1 - Clear Hierarchy & Unified Style
============================================ */

/* Full-page Gradient Background - matching homepage theme */
.auth-page {
    background: linear-gradient(135deg, #0D76FF 0%, #5ED0FB 50%, #00BE7D 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

/* Animated Background Orbs */
.auth-page::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

.auth-page::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 10s ease-in-out infinite reverse;
}

/* Login Container Card */
.auth-page .auth-container {
    width: 100%;
    max-width: 420px;
    padding: 20px;
    position: relative;
    z-index: 1;
    margin-top: 60px;
}

/* Brand Header */
.auth-page .auth-header {
    text-align: center;
    margin-bottom: 32px;
    color: #ffffff;
}

.auth-page .auth-header .brand-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.auth-page .auth-header .brand-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.auth-page .auth-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-page .auth-header p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}

/* White Card Form - matching home page card style */
.auth-page .auth-form {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.auth-page .auth-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0D76FF 0%, #5ED0FB 50%, #00BE7D 100%);
}

/* Form Group Spacing */
.auth-page .form-group {
    margin-bottom: 20px;
}

.auth-page .form-group label {
    display: block;
    font-size: 13px;
    color: var(--color-secondary);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Input Fields */
.auth-page .form-control {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-md);
    font-size: 15px;
    transition: all var(--transition-fast);
    background: #f8f9fa;
    box-shadow: var(--shadow-xs);
}

.auth-page .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 118, 255, 0.1), var(--shadow-sm);
    background: #ffffff;
    outline: none;
}

.auth-page .form-control::placeholder {
    color: var(--color-grey);
}

/* Large Input for Phone */
.auth-page .form-control-lg {
    padding: 18px 20px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

/* Primary Action Button */
.auth-page .btn-auth {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #0D76FF 0%, #5ED0FB 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 6px 20px rgba(13, 118, 255, 0.35);
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.auth-page .btn-auth::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.auth-page .btn-auth:hover::before {
    left: 100%;
}

.auth-page .btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 118, 255, 0.45);
}

.auth-page .btn-auth:active {
    transform: translateY(0);
}

/* Alternative Link */
.auth-page .auth-footer {
    text-align: center;
    margin-top: 24px;
}

.auth-page .auth-footer p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 0;
}

.auth-page .auth-footer a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.auth-page .auth-footer a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Forgot Password Link */
.auth-page .forgot-link {
    text-align: right;
    margin-top: -12px;
    margin-bottom: 20px;
}

.auth-page .forgot-link a {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
}

.auth-page .forgot-link a:hover {
    text-decoration: underline;
}

/* Divider */
.auth-page .divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--color-grey);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-page .divider::before,
.auth-page .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e0e0e0 50%, transparent 100%);
}

.auth-page .divider span {
    padding: 0 16px;
}

/* SMS Input Group */
.auth-page .sms-group {
    display: flex;
    gap: 12px;
}

.auth-page .sms-group .form-control {
    flex: 1;
}

.auth-page .sms-btn {
    padding: 0 24px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.auth-page .sms-btn:hover {
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    border-color: #d0d0d0;
}

.auth-page .sms-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Checkbox */
.auth-page .checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-page .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.auth-page .checkbox-group label {
    font-size: 12px;
    color: var(--color-secondary);
    cursor: pointer;
    margin: 0;
    line-height: 1.5;
}

.auth-page .checkbox-group a {
    color: var(--color-primary);
    font-weight: 600;
}

/* Back Button */
.auth-page .back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 2;
    text-decoration: none;
}

.auth-page .back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    color: #ffffff;
}

/* Language Selector */
.auth-page .lang-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

.auth-page .lang-selector a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.auth-page .lang-selector a:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    color: #ffffff;
}

/* Title Section */
.auth-page .title {
    padding: 40px 20px 20px;
    text-align: center;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.auth-page .title h4 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-page .title p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

/* Password Toggle Icon */
.auth-page .password-wrapper {
    position: relative;
}

.auth-page .password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-grey);
    transition: color var(--transition-fast);
}

.auth-page .password-toggle:hover {
    color: var(--color-primary);
}

/* Error State */
.auth-page .form-control.is-invalid {
    border-color: #FF0068;
    background-color: rgba(255, 0, 104, 0.05);
}

.auth-page .invalid-feedback {
    display: block;
    color: #FF0068;
    font-size: 12px;
    margin-top: 6px;
}

/* Success State */
.auth-page .form-control.is-valid {
    border-color: #00BE7D;
    background-color: rgba(0, 190, 125, 0.05);
}

.auth-page .valid-feedback {
    display: block;
    color: #00BE7D;
    font-size: 12px;
    margin-top: 6px;
}

/* ====================================================
   Legacy Styles: Old auth pages (login_no, register_no)
   These use the old "passport" layout - upgrade to V3
==================================================== */

/* Old layout wrapper - full page gradient */
body.passport,
.auth-page {
    background: linear-gradient(135deg, #0D76FF 0%, #5ED0FB 50%, #00BE7D 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Animated orbs for legacy pages */
body.passport::before,
.auth-page::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
    z-index: 0;
}

body.passport::after,
.auth-page::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 10s ease-in-out infinite reverse;
    z-index: 0;
}

/* Old header on passport pages - blend with gradient */
body.passport .header,
.auth-page .header {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    z-index: 10;
    position: relative;
}

body.passport .header .btn-link,
.auth-page .header .btn-link {
    color: #ffffff;
}

body.passport .header .btn-link:hover,
.auth-page .header .btn-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Old login container - modern card overlay */
body.passport .wrapper,
.auth-page .wrapper {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
}

body.passport .container,
.auth-page .container {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Old bg-default on passport - white card with gradient top bar */
body.passport .bg-default,
.auth-page .bg-default {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    margin: 20px auto 40px;
    max-width: 440px;
    width: calc(100% - 32px);
}

body.passport .bg-default::before,
.auth-page .bg-default::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0D76FF 0%, #5ED0FB 50%, #00BE7D 100%);
    z-index: 1;
}

/* Logo image on passport */
body.passport .bg-default img[src*="{:sysconf('site_icon')}"],
.auth-page .bg-default img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-md);
    margin: 0 auto 12px;
    display: block;
}

/* Site name and tagline */
body.passport .bg-default p,
.auth-page .bg-default p {
    color: var(--color-secondary);
}

body.passport .bg-default p b,
.auth-page .bg-default p b {
    color: var(--color-primary);
    font-size: 18px;
}

/* Old form inputs - enhanced */
body.passport .form-signin .form-control,
.auth-page .form-signin .form-control {
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-md);
    padding: 16px 18px;
    font-size: 15px;
    background: #f8f9fa;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast);
}

body.passport .form-signin .form-control:focus,
.auth-page .form-signin .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 118, 255, 0.1), var(--shadow-sm);
    background: #ffffff;
}

body.passport .form-signin .form-control-lg,
.auth-page .form-control-lg {
    padding: 18px 20px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

/* Old login button - gradient primary */
body.passport .bg-default .login,
auth-page .bg-default .login,
body.passport .form-buttom,
.auth-page .form-buttom {
    background: linear-gradient(135deg, #0D76FF 0%, #5ED0FB 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 6px 20px rgba(13, 118, 255, 0.35);
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
}

body.passport .bg-default .login::before,
.auth-page .bg-default .login::before,
body.passport .form-buttom::before,
.auth-page .form-buttom::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

body.passport .bg-default .login:hover::before,
.auth-page .bg-default .login:hover::before,
body.passport .form-buttom:hover::before,
.auth-page .form-buttom:hover::before {
    left: 100%;
}

body.passport .bg-default .login:hover,
.auth-page .bg-default .login:hover,
body.passport .form-buttom:hover,
.auth-page .form-buttom:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 118, 255, 0.45);
    color: #ffffff;
}

/* Footer links (register/login cross-links) */
body.passport .bg-default a[href*="login"],
body.passport .bg-default a[href*="register"],
.auth-page .bg-default a[href*="login"],
.auth-page .bg-default a[href*="register"] {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

body.passport .bg-default a[href*="login"]:hover,
body.passport .bg-default a[href*="register"]:hover,
.auth-page .bg-default a[href*="login"]:hover,
.auth-page .bg-default a[href*="register"]:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* intl-tel-input override on gradient bg */
body.passport .iti,
.auth-page .iti {
    width: 100% !important;
}

body.passport .iti__flag-container,
.auth-page .iti__flag-container {
    z-index: 2;
}

/* Fix dropdown-menu on gradient bg */
body.passport .dropdown-menu,
.auth-page .dropdown-menu {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

body.passport .dropdown-item,
.auth-page .dropdown-item {
    color: var(--color-secondary);
    border-radius: var(--radius-sm);
    margin: 2px 4px;
    padding: 8px 12px;
    transition: all var(--transition-fast);
}

body.passport .dropdown-item:hover,
.auth-page .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(13, 118, 255, 0.08) 0%, rgba(94, 208, 251, 0.08) 100%);
    color: var(--color-primary);
}

/* Dropdown toggle button styling */
body.passport .btn.dropdown-toggle.address,
.auth-page .btn.dropdown-toggle.address {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--color-secondary);
    font-weight: 600;
    padding: 0 16px;
    white-space: nowrap;
    font-size: 14px;
    height: 100%;
    display: flex;
    align-items: center;
}

body.passport .btn.dropdown-toggle.address:hover,
.auth-page .btn.dropdown-toggle.address:hover {
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    border-color: #d0d0d0;
    color: var(--color-secondary);
}

/* Notification bar on auth pages */
body.passport .notification,
.auth-page .notification {
    bottom: 20px;
}

/* Animation keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================================
   V3.1 Enhancement - Clear Hierarchy & Spacing
============================================ */

/* Auth Page Background - Consistent with All Pages */
.auth-page {
    background: linear-gradient(135deg, #0D76FF 0%, #5ED0FB 40%, #00BE7D 100%);
}

/* Brand Header - Better Hierarchy */
.auth-page .auth-header .brand-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.auth-page .auth-header .brand-icon img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.auth-page .auth-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
}

.auth-page .auth-header p {
    font-size: 13px;
    opacity: 0.85;
    margin: 0;
    font-weight: 400;
}

/* Auth Form - Enhanced Card */
.auth-page .auth-form {
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Form Input - Better Visual Hierarchy */
.auth-page .form-control {
    background: #f8f9fa;
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 15px;
    transition: all var(--transition-fast);
}

.auth-page .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 118, 255, 0.1);
    background: #ffffff;
}

/* Auth Button - Enhanced */
.auth-page .btn-auth {
    border-radius: var(--radius-pill);
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 24px rgba(13, 118, 255, 0.35);
}

/* Footer Link - Better Contrast */
.auth-page .auth-footer p {
    font-size: 13px;
    opacity: 0.85;
}

.auth-page .auth-footer a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Legacy Page - Consistent Background */
body.passport {
    background: linear-gradient(135deg, #0D76FF 0%, #5ED0FB 40%, #00BE7D 100%);
}

/* Legacy Card - Enhanced */
body.passport .bg-default,
.auth-page .bg-default {
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 32px 24px;
}

/* Legacy Form Input - Enhanced */
body.passport .form-signin .form-control,
.auth-page .form-signin .form-control {
    background: #f8f9fa;
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 15px;
    transition: all var(--transition-fast);
}

body.passport .form-signin .form-control:focus,
.auth-page .form-signin .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 118, 255, 0.1);
    background: #ffffff;
}

/* Legacy Button - Enhanced */
body.passport .bg-default .login,
.auth-page .bg-default .login,
body.passport .form-buttom,
.auth-page .form-buttom {
    border-radius: var(--radius-pill);
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 24px rgba(13, 118, 255, 0.35);
}