html, body.login {
    height: 100%;
    margin: 0;
}

body.login {
    background-color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    min-height: 100vh; /* Ensure full viewport height */
    height: auto;
    box-sizing: border-box;
    padding: 20px; /* Standard padding for all sides */
    margin: 0; /* Remove default body margin */
}

html {
    margin: 0 !important; /* Force remove top margin often added by WP admin bar or themes */
    padding: 0 !important;
    height: 100%;
}

/* Global Box Sizing for Login Page */
body.login * {
    box-sizing: border-box;
}

body.login div#login {
    padding: 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Wider container for registration page to support 2-column layout */
body.login-action-register div#login {
    max-width: 600px;
}

/* Logo Positioning: Natural flow */
body.login h1 {
    position: relative; /* Restored to natural flow */
    width: 100%;
    text-align: center;
    margin: 0 0 20px 0 !important; /* Space below logo */
    padding: 0;
}

body.login h1 a {
    background-image: url('https://engineershouse.org/wp-content/uploads/2026/01/byt-almhndsyn-engineers-house-2026.jpeg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
    border-radius: 10px;

    /* Responsive Sizing: Use clamp() for fluid scaling with min/max bounds */
    /* Width scales with viewport width (vw), Height scales with viewport height (vh) */
    width: clamp(150px, 30vw, 300px); 
    height: clamp(50px, 10vh, 100px);
}

/* Removed obsolete media query for fixed logo positioning */

body.login form {
    background: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 40px;
    margin-top: 20px;
    overflow: hidden;
}

/* Typography & Labels */
body.login label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

/* Reset Paragraph Margins to control spacing */
body.login form p {
    margin-bottom: 20px;
}

body.login form p.forgetmenot {
    display: none !important;
}

body.login form p.submit {
    margin-bottom: 0;
}

/* Unified Field Styling */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"],
body.login input[type="url"],
body.login input[type="search"],
body.login select {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    background: #f9f9f9;
    transition: all 0.2s;
    box-shadow: none;
    margin-bottom: 0; /* Let paragraph handle spacing */
    line-height: normal;
}

body.login input:focus,
body.login select:focus {
    border-color: #2271b1;
    background: #fff;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Social Buttons */
.msa-login-social-buttons {
    margin-bottom: 20px;
}

/* Icons Only Layout */
.msa-login-social-buttons.msa-social-icons-only {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.msa-login-social-buttons.msa-social-icons-only .msa-login-social-btn {
    width: 48px;
    height: 48px;
    padding: 10px;
    margin-bottom: 0;
    border-radius: 50%; /* Circular buttons */
    display: flex;
    align-items: center;
    justify-content: center;
}

.msa-login-social-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.msa-login-social-btn svg {
    width: 24px;
    height: 24px;
}

.msa-login-social-btn.msa-google {
    background-color: #fff;
    color: #757575;
    border: 1px solid #ddd;
}

.msa-login-social-btn.msa-google:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.msa-login-social-btn.msa-linkedin {
    background-color: #0077b5;
    color: #fff;
    border: none;
}

.msa-login-social-btn.msa-linkedin:hover {
    background-color: #006097;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.msa-login-social-btn.msa-linkedin svg path {
    fill: #fff;
}

.msa-login-social-btn.msa-facebook {
    background-color: #1877F2;
    color: #fff;
    border: none;
}

.msa-login-social-btn.msa-facebook:hover {
    background-color: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.msa-login-social-btn.msa-facebook svg path {
    fill: #fff;
}

/* Divider */
.msa-login-divider,
.msa-login-or-separator {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.msa-login-divider::before,
.msa-login-or-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #ddd;
}

.msa-login-divider span,
.msa-login-or-separator span {
    background: #fff;
    padding: 0 10px;
    position: relative;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

/* Custom Links Styling */
.login .message.register,
.login #nav, 
.login #backtoblog {
    text-align: center;
    padding: 0 !important;
    margin: 20px 0 0 !important;
    font-size: 14px;
}

.login #nav a,
.login #backtoblog a {
    color: #555 !important;
    text-decoration: none;
    transition: color 0.2s;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    margin: 0 5px;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #2271b1 !important;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Hide unwanted footer links */
.login #backtoblog,
.privacy-policy-page-link {
    display: none !important;
}

/* Registration Page 2-Column Layout */
body.login-action-register form#registerform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Remove margin from direct children to rely on grid gap */
body.login-action-register form#registerform > p {
    margin-bottom: 0;
}

/* Full width elements in grid */
body.login-action-register form#registerform > p.msa-full-width,
body.login-action-register form#registerform > .user-pass1-wrap,
body.login-action-register form#registerform > .user-pass2-wrap,
body.login-action-register form#registerform > .pw-weak,
body.login-action-register form#registerform > p.submit,
body.login-action-register form#registerform > .msa-register-steps,
body.login-action-register form#registerform > .msa-step-content,
body.login-action-register form#registerform > .msa-login-or-separator,
body.login-action-register form#registerform > .msa-login-social-buttons,
body.login-action-register form#registerform > .msa-cloudflare-turnstile,
body.login-action-register form#registerform > .msa-registration-message {
    grid-column: span 2;
}

/* Step content grid */
.msa-step-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.msa-step-content p {
    margin-bottom: 0;
    height: 100%; /* Ensure p takes full height of grid cell */
    display: flex;
    flex-direction: column;
}

/* Flexbox alignment for labels to ensure inputs align at bottom */
.msa-step-content p label {
    display: flex;
    flex-direction: column;
    height: auto;
    flex-grow: 1;
    margin-bottom: 0;
    gap: 5px;
}

.msa-step-content p > br,
.msa-step-content p label br {
    display: none; /* Hide BR as flex handles layout */
}

.msa-step-content p > .input,
.msa-step-content p > input,
.msa-step-content p label .input,
.msa-step-content p label select,
.msa-step-content p label .iti {
    margin-top: auto; /* Push input to bottom */
    margin-bottom: 0;
    width: 100%;
}

/* Add spacing between label text and input */
/* Removed specific rule since gap is now on label and p will handle standard inputs via margin-top:auto */

/* Responsive adjustments */
@media (max-width: 600px) {
    body.login-action-register form#registerform,
    .msa-step-content {
        grid-template-columns: 1fr;
    }
    
    body.login-action-register form#registerform > p.msa-full-width,
    body.login-action-register form#registerform > .user-pass1-wrap,
    body.login-action-register form#registerform > .user-pass2-wrap,
    body.login-action-register form#registerform > .pw-weak,
    body.login-action-register form#registerform > p.submit,
    body.login-action-register form#registerform > .msa-register-steps,
    body.login-action-register form#registerform > .msa-step-content,
    .msa-step-content p.msa-full-width,
    body.login-action-register form#registerform > .msa-login-or-separator,
    body.login-action-register form#registerform > .msa-login-social-buttons,
    body.login-action-register form#registerform > .msa-cloudflare-turnstile,
    body.login-action-register form#registerform > .msa-registration-message {
        grid-column: span 1;
    }
}

/* Custom link styling */
.msa-register-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    text-decoration: underline;
    color: #2271b1;
}

.msa-register-link:hover {
    color: #135e96;
}

/* Hide empty messages */
.message:empty, .login-message:empty {
    display: none !important;
}

/* Force hide the registration message box even if not empty (e.g. empty HTML tags) */
.login .message.register {
    display: none !important;
}

/* Hide default WP registration message to avoid duplication */
#reg_passmail {
    display: none !important;
}

/* Registration Message */
.msa-registration-message {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

/* Fix Intl Tel Input Width & Alignment */
.iti {
    width: 100%;
    display: block;
}

.iti input {
    height: 48px !important;
}

/* Required field indicator */
.required {
    color: #d63638;
    font-weight: bold;
    margin-left: 4px;
}

/* RTL Support for Intl Tel Input */
body.rtl .iti--allow-dropdown .iti__flag-container, 
body.rtl .iti--separate-dial-code .iti__flag-container {
    right: 0;
    left: auto;
}

body.rtl .iti--allow-dropdown input, 
body.rtl .iti--allow-dropdown input[type=text], 
body.rtl .iti--allow-dropdown input[type=tel], 
body.rtl .iti--separate-dial-code input, 
body.rtl .iti--separate-dial-code input[type=text], 
body.rtl .iti--separate-dial-code input[type=tel] {
    padding-left: 6px;
    padding-right: 52px;
}

body.rtl .iti__country-list {
    text-align: right;
    margin-right: -1px;
    margin-left: 0;
}