/* =============================================================
   WP 2FA Verification Page — 1:1 SYNCHRONIZED REPLICATION
   Matches the client-login (custom-auth-zoho-plugin) layout exactly.
   Strictly scoped to body.wp-2fa-login for final isolation.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

.cazp-login-right-side h1,
.cazp-login-right-side h2,
.cazp-login-right-side h3,
.cazp-login-right-side h4,
.cazp-login-right-side h5,
.cazp-login-right-side h6 {
    font-family: 'DM Serif Text', Georgia, "Times New Roman", serif !important;
    padding-bottom: 10px !important;
    line-height: 1em !important;
}

/* ── Root Page Resets ── */
body.wp-2fa-login {
    background: linear-gradient(135deg, #6b1117 0%, #8b1d22 60%, #a52328 100%) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Hide WP default elements */
body.wp-2fa-login #login h1,
body.wp-2fa-login #login > h1 {
    display: none !important;
}

/* --- Layout CSS moved to layout.css --- */

body.wp-2fa-login .cazp-form-container {
    background: #ffffff !important;
    padding: 45px 50px !important;
    border-radius: 28px !important;
    border-top: 6px solid #8b1d22 !important;
    box-shadow:
        0 10px 25px rgba(26, 6, 8, 0.05),
        0 20px 48px rgba(26, 6, 8, 0.1) !important;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

/* ── 2FA Form Header Matching Client Portal ── */
body.wp-2fa-login .cazp-2fa-form-header { text-align: center; margin-bottom: 28px; }
body.wp-2fa-login .cazp-2fa-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    background: #8b1d22 !important;
    color: #fff !important;
    font-size: 24px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 6px 16px rgba(139, 29, 34, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body.wp-2fa-login .cazp-2fa-form-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #1a0608 !important;
    font-family: 'DM Serif Text', serif !important;
    margin-bottom: 8px !important;
}

body.wp-2fa-login .cazp-2fa-form-subtitle {
    font-size: 15px !important;
    color: #8a7070 !important;
    font-family: inherit !important;
}

/* ── WP 2FA Specific Resets ── */
body.wp-2fa-login #login {
    width: 100% !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important;
   
}
body.wp-2fa-login #loginform, 
body.wp-2fa-login #lgraceform {
    background: transparent !important; padding: 0 !important; margin: 0 !important;
    box-shadow: none !important; border: none !important;
}

/* ── MODERN BUTTON SYNCHRONIZATION ── */
body.wp-2fa-login #wp-submit {
    width: 100% !important;
    height: 60px !important;
    background: #8b1d22 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.35s ease !important;
    font-family: 'Inter', sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

/* Shimmer Effect (Identical to Client Portal) */
body.wp-2fa-login #wp-submit::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
    transition: left 0.5s ease !important;
}

body.wp-2fa-login #wp-submit:hover::after {
    left: 100% !important;
}

body.wp-2fa-login #wp-submit:hover { 
    transform: translateY(-2px) !important; 
    
}

body.wp-2fa-login #backtoblog { display: none !important; }

/* ── Form Fields Matching Client Portal ── */
/* ── Form Fields Matching Setup Page ── */
body.wp-2fa-login input[type="text"],
body.wp-2fa-login input[type="number"],
body.wp-2fa-login input[type="tel"],
body.wp-2fa-login input[type="password"] {
    width: 100% !important;
    height: 60px !important;
    background: #ebf2ff !important; /* Light blue matching screenshot */
    border: 1.5px solid #d0d9e8 !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    font-size: 32px !important;
    color: #1a0608 !important;
    text-align: center !important;
    letter-spacing: 0.2em !important;
    outline: none !important;
}

body.wp-2fa-login input:focus {
    border-color: #8b1d22 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(139, 29, 34, 0.1) !important;
}

/* ── EXACT RESPONSIVE REPLICATION ── */
@media (max-width: 600px) {
    body.wp-2fa-login .cazp-form-container { padding: 28px 22px !important; }
}

#loginform label,
.cazp-2fa-input-label {
    display: block !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    color: #1a0608 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    text-transform: none !important;
}