/* =============================================
   MEETRA - Custom Login Page Styles v2
   ============================================= */

/* --- Background --- */
body.login,
body.login div#login {
    background: linear-gradient(135deg, #e8f4fd 0%, #dceef9 40%, #cce5f5 100%) !important;
}

body.login {
    background-attachment: fixed !important;
    font-family: 'Segoe UI', sans-serif !important;
}

/* --- Card form --- */
body.login #login {
    background: white !important;
    border-radius: 20px !important;
    padding: 2rem 2.2rem !important;
    box-shadow: 0 8px 40px rgba(24, 95, 165, 0.15) !important;
    width: 360px !important;
    margin-top: 60px !important;
    border: none !important;
}

/* --- Logo di atas card --- */
body.login #login h1 a,
body.login h1 a {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    background: white url("https://meetraspace.id/wp-content/uploads/2026/04/Logo_Meetra-3.webp") center/contain no-repeat !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(24, 95, 165, 0.15) !important;
    margin: -70px auto 1.5rem !important;
    text-indent: -9999px !important;
}

/* --- Label --- */
body.login #loginform label,
body.login #lostpasswordform label,
body.login form label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4a6080 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* --- Input field --- */
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #loginform input[type="email"],
body.login #lostpasswordform input[type="text"],
body.login #lostpasswordform input[type="email"],
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    background: #fafcfe !important;
    border: 1.5px solid #d0e0ee !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1a2e4a !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: #185FA5 !important;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.1) !important;
    outline: none !important;
}

/* --- Tombol Log Masuk --- */
body.login #loginform #wp-submit,
body.login #loginform input[type="submit"],
body.login input#wp-submit,
body.login .submit input[type="submit"] {
    background: #185FA5 !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px !important;
    width: 100% !important;
    height: auto !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
}

body.login input#wp-submit:hover {
    background: #0d4a85 !important;
}

/* --- Tombol Login Gmail --- */
body.login .meetra-google-btn,
body.login a[href*="google"],
body.login .gmail-login-btn,
body.login #meetra-gmail-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 16px !important;
    background: white !important;
    border: 1.5px solid #dadce0 !important;
    border-radius: 10px !important;
    color: #3c4043 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-top: 12px !important;
    transition: box-shadow 0.2s ease !important;
}

body.login a[href*="google"]:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.15) !important;
    background: #f8faff !important;
}

/* --- Checkbox Ingat Saya --- */
body.login #loginform .forgetmenot,
body.login .forgetmenot {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #5a7a99 !important;
    float: none !important;
}

body.login .forgetmenot input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: #185FA5 !important;
}

/* --- Sembunyikan nav bawah --- */
body.login #nav,
body.login #backtoblog,
body.login .language-switcher,
body.login #language-switcher,
body.login form p.language-switcher {
    display: none !important;
}

/* --- Error/success message --- */
body.login #login_error,
body.login .message,
body.login .success {
    border-radius: 10px !important;
    border-left: 4px solid #185FA5 !important;
    font-size: 13px !important;
}

/* --- Responsive mobile --- */
@media (max-width: 480px) {
    body.login #login {
        width: calc(100% - 2rem) !important;
        margin: 70px 1rem 1rem !important;
        padding: 1.5rem !important;
    }
}
/* --- Hapus bayangan di belakang logo --- */
body.login #login h1 a,
body.login h1 a {
    display: none !important;
}

/* --- Tampilkan kembali #nav untuk Lupa Sandi --- */
body.login #nav {
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;
}

body.login #nav a {
    color: #185FA5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.login #nav a:first-child {
    display: none !important;
}