/* © WatchJunk */
/* coded by nya & suzunay */

/* === Base === */
    .login-section { min-height: 100vh; display: flex; align-items: center; padding: 2rem 0; }

    /* === Card === */
    .login-card {
        background: linear-gradient(145deg, #141824 0%, #0B1120 100%);
        border: 1px solid rgba(59,130,246,0.12);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 20px rgba(0,0,0,0.5);
    }

    /* === Image column === */
    .login-img-col {
        position: relative;
        height: 100%;
        min-height: 520px;
    }
    .login-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
    .login-img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, transparent 50%, #141824 100%);
    }

    /* === Body === */
    .login-body {
        padding: 2.5rem;
        color: #e0e0e0;
    }
    @media (min-width: 768px) { .login-body { padding: 3rem; } }

    /* === Heading === */
    .login-heading {
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.5px;
        margin-bottom: 0.3rem;
    }
    .login-subtitle {
        color: rgba(255,255,255,0.5);
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    /* === Google Button === */
    .btn-google-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 11px 16px;
        border-radius: 12px;
        font-size: 0.92rem;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        text-decoration: none;
        background: #fff;
        color: #3c4043;
    }
    .btn-google-login:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        color: #3c4043;
    }
    .btn-google-login:active { transform: translateY(0); }
    .btn-google-login svg { flex-shrink: 0; }

    /* === Divider === */
    .login-divider {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 1.5rem 0;
        color: rgba(255,255,255,0.35);
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .login-divider::before, .login-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255,255,255,0.08);
    }

    /* === Input fields === */
    .login-field { margin-bottom: 1.1rem; }
    .login-field label {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: rgba(255,255,255,0.5);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 6px;
    }
    .login-input {
        width: 100%;
        padding: 12px 16px;
        background: #141824;
        border: 1px solid rgba(59,130,246,0.15);
        border-radius: 10px;
        color: #fff;
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .login-input::placeholder { color: rgba(255,255,255,0.25); }
    .login-input:focus {
        border-color: #3B82F6;
        background: rgba(59,130,246,0.06);
        box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }

    /* === Submit === */
    .login-submit {
        width: 100%;
        padding: 13px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        margin-top: 0.5rem;
    }
    .login-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 8px rgba(59,130,246,0.35);
    }

    /* === Links === */
    .login-links { margin-top: 1.5rem; }
    .login-links a {
        display: block;
        color: rgba(255,255,255,0.5);
        font-size: 0.85rem;
        text-decoration: none;
        margin-bottom: 4px;
        transition: color 0.2s;
    }
    .login-links a:hover { color: #60A5FA; }
    .login-register {
        margin-top: 1.5rem;
        color: rgba(255,255,255,0.5);
        font-size: 0.9rem;
    }
    .login-register a { color: #3B82F6; text-decoration: none; font-weight: 500; }
    .login-register a:hover { color: #60A5FA; text-decoration: underline; }
    .login-legal { margin-top: 1rem; text-align: center; }
    .login-legal a { color: rgba(255,255,255,0.3); font-size: 0.82rem; text-decoration: none; }
    .login-legal a:hover { color: rgba(255,255,255,0.5); }

    /* === Alerts === */
    .login-alert-success {
        background: rgba(40,167,69,0.1);
        border: 1px solid rgba(40,167,69,0.3);
        color: #28A745;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    .login-alert-error {
        background: rgba(239,68,68,0.1);
        border: 1px solid rgba(239,68,68,0.3);
        color: #EF4444;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    /* === Already logged in === */
    .btn-logout {
        padding: 12px;
        width: 100%;
        border-radius: 12px;
        background: rgba(59,130,246,0.08);
        border: 1px solid rgba(59,130,246,0.2);
        color: #e0e0e0;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
        text-align: center;
        display: block;
        text-decoration: none;
    }
    .btn-logout:hover { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.3); color: #fff; }