/* ============================================
   File: assets/css/pages/login.css
   ============================================ */

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    background: #f0f4f8;
    overflow: hidden;
}

/* ══════════════════════════════════════════════
   LEFT PANEL
══════════════════════════════════════════════ */
.login-left {
    width: 48%;
    background: linear-gradient(145deg, #1a2a3a 0%, #0d3349 50%, #0a4a6e 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 60px;
    position: relative;
    overflow: hidden;
}
.login-left::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    border: 60px solid rgba(255,255,255,0.04);
    top: -100px; right: -100px;
}
.login-left::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    border: 50px solid rgba(255,255,255,0.04);
    bottom: -80px; left: -60px;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.login-logo .logo-icon {
    width: 46px; height: 46px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    backdrop-filter: blur(10px);
}
.login-logo .logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
.login-logo .logo-text span { color: #5bc0de; }

.login-promo {
    position: relative;
    z-index: 1;
}
.login-promo h1 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 18px;
}
.login-promo h1 span { color: #5bc0de; }
.login-promo p {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    max-width: 380px;
    margin-bottom: 36px;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}
.feature-list li .feat-icon {
    width: 32px; height: 32px;
    background: rgba(91,192,222,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5bc0de;
    font-size: 14px;
    flex-shrink: 0;
}

.login-left-footer {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
}

/* ══════════════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════════════ */
.login-right {
    width: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    background: #f0f4f8;
}

.login-box {
    width: 100%;
    max-width: 420px;
}
.login-box h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1a2a3a;
    margin-bottom: 6px;
}
.login-box .subtitle {
    font-size: 14px;
    color: #7a8a9a;
    margin-bottom: 36px;
}

/* ── Form ───────────────────────────────────── */
.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-wrap { position: relative; }

.input-wrap .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 16px;
    pointer-events: none;
}
.input-wrap input {
    width: 100%;
    height: 50px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 16px 0 44px;
    font-size: 14px;
    color: #2d3748;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.input-wrap input:focus {
    border-color: #5bc0de;
    box-shadow: 0 0 0 4px rgba(91,192,222,0.12);
}
.input-wrap input::placeholder { color: #c0ccd8; }

.input-wrap .toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.2s;
}
.input-wrap .toggle-password:hover { color: #5bc0de; }

/* ── Captcha ────────────────────────────────── */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 18px;
    height: 50px;
    flex-shrink: 0;
    user-select: none;
    /* Slight visual distortion to deter bots */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(91,192,222,0.04) 0px,
        rgba(91,192,222,0.04) 1px,
        transparent 1px,
        transparent 8px
    );
}

.captcha-num {
    font-size: 20px;
    font-weight: 800;
    color: #1a2a3a;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    /* Slight skew to make OCR harder */
    display: inline-block;
    transform: skewX(-5deg);
}
.captcha-num:nth-child(1) { transform: skewX(-8deg) rotate(-2deg); color: #0d3349; }
.captcha-num:nth-child(3) { transform: skewX(6deg)  rotate(1deg);  color: #0a4a6e; }

.captcha-op {
    font-size: 18px;
    font-weight: 700;
    color: #5bc0de;
    font-family: 'Courier New', monospace;
}
.captcha-q {
    font-size: 20px;
    font-weight: 800;
    color: #e53e3e;
    font-family: 'Courier New', monospace;
}

.captcha-input-wrap { flex: 1; }

.captcha-input-wrap input {
    /* Remove number spinners */
    -moz-appearance: textfield;
}
.captcha-input-wrap input::-webkit-outer-spin-button,
.captcha-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Forgot note ────────────────────────────── */
.forgot-note {
    font-size: 12px;
    color: #a0aec0;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.forgot-note i { color: #5bc0de; }

/* ── Submit button ──────────────────────────── */
.btn-login {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #5bc0de 0%, #31b0d5 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(91,192,222,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-login:hover {
    opacity: 0.92;
    box-shadow: 0 6px 20px rgba(91,192,222,0.5);
    transform: translateY(-1px);
}
.btn-login:active { transform: translateY(0); }
.btn-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── Divider ────────────────────────────────── */
.login-divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}
.login-divider::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: #e2e8f0;
}
.login-divider span {
    position: relative;
    background: #f0f4f8;
    padding: 0 14px;
    font-size: 12px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Register link ──────────────────────────── */
.register-link {
    text-align: center;
    font-size: 13px;
    color: #7a8a9a;
}
.register-link a {
    color: #5bc0de;
    font-weight: 600;
    text-decoration: none;
}
.register-link a:hover { text-decoration: underline; }

/* ── Alerts ─────────────────────────────────── */
.alert-error {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-left: 4px solid #e53e3e;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #c53030;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 900px) {
    body { overflow: auto; flex-direction: column; }
    .login-left { display: none; }
    .login-right { width: 100%; padding: 40px 24px; min-height: 100vh; }
}