/**
 * NXDS-139 — login modal, modern brand-blue redesign (ARC design system v0.7).
 *
 * Scope: only the RealHomes login modal overlay (.rh_login_modal_wrapper).
 * Parent markup: common/partials/login-modal.php. Behaviour and the parent's
 * slide transition between Login / Reset password are untouched; this file
 * only restyles. The full-colour logo and the per-screen headings are injected
 * by assets/js/arc-login-modal.js (.arc-lm-*).
 *
 * Plan: one white card. Logo on top, then the screen heading, mist fields,
 * brand-blue button. Blue does the work; yellow is the focus ring on fields,
 * the button text on hover/focus, and the link underline on hover/focus.
 * Enqueued at PHP_INT_MAX; !important only where the parent's ultra skin wins.
 */

.rh_login_modal_wrapper {
    --arc-blue: #263D8A;
    --arc-blue-dark: #1B2A66;
    --arc-ink: #0F1A44;
    --arc-yellow: #F2DB0D;
    --arc-text: #0B1220;
    --arc-muted: #52607A;
    --arc-mist: #F6F8FC;
    --arc-line: #D3DAEA;
    --arc-error-ink: #8A1C1C;
    --arc-error-tint: #FDEEEE;
    --arc-error-line: #E7A6A6;
    --arc-ok-ink: #1E6B3A;
    --arc-ok-tint: #E8F5EC;
    --arc-ok-line: #9FD3AF;
    --arc-display: "DM Serif Display", Georgia, serif;
    --arc-body: "Plus Jakarta Sans", Arial, sans-serif;
    --arc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Overlay ---------- */
.rh_login_modal_wrapper {
    box-sizing: border-box !important;
    padding: 20px !important;
    background: rgba(15, 26, 68, 0.68) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--arc-body) !important;
}

/* ---------- Card shell ---------- */
.rh_login_modal_wrapper .rh_login_modal_box,
.rh_login_modal_wrapper .rh_login_modal_box.rh_login_no_quote {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 480px !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 80px rgba(15, 26, 68, 0.45) !important;
}

/* The theme's own quote side is not used. */
.rh_login_modal_wrapper .rh_login_quote_side {
    display: none !important;
}

/* ---------- Logo (injected once, above the sliding forms) ---------- */
.rh_login_modal_wrapper .arc-lm-logo-wrap {
    margin: 0 0 30px;
}

.rh_login_modal_wrapper .arc-lm-logo {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    margin: 0;
}


/* ---------- Form panel ---------- */
.rh_login_modal_wrapper .rh_login_modal_box .rh_login_sides.rh_login_form_side {
    position: relative;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box !important;
    padding: 44px 48px 40px !important;
    background: #fff !important;
    overflow: visible !important;
}

/* The dark logo and site title give way to the brand panel. */
.rh_login_modal_wrapper .rh_login_logo,
.rh_login_modal_wrapper .rh_login_blog_name {
    display: none !important;
}

/* The parent pins this container to a pixel height measured when the modal
   opens (or on resize), which clips the taller heading + instruction + button
   of the reset screen if that measurement is ever off. Let it follow the form
   that is showing. The slide between the screens is jQuery animating the
   forms' own heights, so it still plays. */
.rh_login_modal_wrapper .rh_wrapper_login_forms {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.rh_login_modal_wrapper .rh_form_modal {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Per-screen heading + one-line instruction (injected) */
.rh_login_modal_wrapper .arc-lm-title {
    margin: 0 0 8px !important;
    font-family: var(--arc-display) !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: var(--arc-ink) !important;
    text-transform: none !important;
}

.rh_login_modal_wrapper .arc-lm-sub {
    margin: 0 0 26px !important;
    max-width: 38ch;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--arc-muted) !important;
}

/* ---------- Tabs row: becomes the "Back to log in" link on reset ---------- */
.rh_login_modal_wrapper .rh_login_tabs {
    display: flex !important;
    align-items: center;
    min-height: 26px;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
}

.rh_login_modal_wrapper .rh_login_tabs li {
    margin: 0 20px 0 0 !important;
    padding: 0 0 4px !important;
    font-family: var(--arc-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--arc-muted) !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer;
    transition: color 150ms var(--arc-ease), border-color 150ms var(--arc-ease), opacity 220ms var(--arc-ease) !important;
}

.rh_login_modal_wrapper .rh_login_tabs li:hover {
    color: var(--arc-blue) !important;
    border-color: var(--arc-line) !important;
}

.rh_login_modal_wrapper .rh_login_tabs li.rh_active {
    color: var(--arc-blue) !important;
    border-color: var(--arc-blue) !important;
}

/* Login only (Register off): the tab is redundant on the login screen, so it
   stays in layout but invisible; on the reset screen it reads as a link. */
.rh_login_modal_wrapper .rh_login_tabs:not(:has(.rh_register_target)) li.rh_active {
    opacity: 0;
    visibility: hidden;
}

/* No spare row above the heading on the login screen. */
.rh_login_modal_wrapper .rh_login_tabs:not(:has(.rh_register_target)):has(li.rh_active) {
    min-height: 0;
    height: 0;
    margin: 0 !important;
    overflow: hidden;
}

.rh_login_modal_wrapper .rh_login_tabs:not(:has(.rh_register_target)) li:not(.rh_active) {
    font-size: 0 !important;
    color: var(--arc-blue) !important;
    border-color: transparent !important;
}

.rh_login_modal_wrapper .rh_login_tabs:not(:has(.rh_register_target)) li:not(.rh_active)::after {
    content: "Back to log in";
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(38, 61, 138, 0.35);
    text-underline-offset: 4px;
}

.rh_login_modal_wrapper .rh_login_tabs:not(:has(.rh_register_target)) li:not(.rh_active):hover::after,
.rh_login_modal_wrapper .rh_login_tabs:not(:has(.rh_register_target)) li:not(.rh_active):focus-visible::after {
    text-decoration-color: var(--arc-yellow);
    text-decoration-thickness: 1.5px;
}

/* ---------- Labels + fields ---------- */
.rh_login_modal_wrapper .rh_modal_labels {
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-family: var(--arc-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--arc-ink) !important;
    text-transform: none !important;
}

.rh_login_modal_wrapper .rh_wrapper_inline_labels {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rh_login_modal_wrapper .rh_modal_field,
.rh_login_modal_wrapper #user-role,
.rh_login_modal_wrapper .rh_custom_login_modal_select {
    box-sizing: border-box !important;
    height: 50px !important;
    margin: 0 0 20px !important;
    padding: 0 16px !important;
    font-family: var(--arc-body) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: var(--arc-text) !important;
    background: var(--arc-mist) !important;
    border: 1px solid var(--arc-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color 150ms var(--arc-ease), box-shadow 150ms var(--arc-ease), background-color 150ms var(--arc-ease) !important;
}

.rh_login_modal_wrapper .rh_modal_field::placeholder {
    color: #6F7B95 !important;
    opacity: 1;
}

.rh_login_modal_wrapper .rh_modal_field:hover {
    border-color: #9FAACB !important;
}

.rh_login_modal_wrapper .rh_modal_field:focus,
.rh_login_modal_wrapper .rh_modal_field:focus-visible {
    background: #fff !important;
    border-color: var(--arc-blue) !important;
    box-shadow: 0 0 0 3px var(--arc-yellow) !important;
    outline: none !important;
}

.rh_login_modal_wrapper .rh_modal_field.error {
    background: var(--arc-error-tint) !important;
    border-color: #C0392B !important;
    box-shadow: none !important;
}

.rh_login_modal_wrapper .rh_modal_field.error:focus {
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.2) !important;
}

/* Custom-field checkbox (register) */
.rh_login_modal_wrapper .rh_modal_label_cb:before {
    background-color: #fff !important;
    border: 1px solid var(--arc-line);
    border-radius: 5px !important;
    box-sizing: border-box;
}

.rh_login_modal_wrapper .rh_modal_input_cb:checked ~ .rh_modal_label_cb:before {
    background-color: var(--arc-blue) !important;
    border-color: var(--arc-blue);
}

.rh_login_modal_wrapper .rh_modal_label_cb span {
    font-family: var(--arc-body) !important;
    color: var(--arc-text) !important;
}

/* ---------- Primary button: brand blue ---------- */
.rh_login_modal_wrapper #login-button,
.rh_login_modal_wrapper #register-button,
.rh_login_modal_wrapper #forgot-button {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 52px !important;
    margin: 8px 0 0 !important;
    padding: 0 24px !important;
    font-family: var(--arc-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #fff !important;
    background: var(--arc-blue) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 220ms var(--arc-ease), color 220ms var(--arc-ease) !important;
}

.rh_login_modal_wrapper #login-button:hover,
.rh_login_modal_wrapper #register-button:hover,
.rh_login_modal_wrapper #forgot-button:hover,
.rh_login_modal_wrapper #login-button:focus-visible,
.rh_login_modal_wrapper #register-button:focus-visible,
.rh_login_modal_wrapper #forgot-button:focus-visible {
    color: var(--arc-yellow) !important;
    background: var(--arc-blue-dark) !important;
}

.rh_login_modal_wrapper #login-button:disabled,
.rh_login_modal_wrapper #register-button:disabled,
.rh_login_modal_wrapper #forgot-button:disabled {
    background: var(--arc-blue) !important;
    opacity: 0.55;
    cursor: progress;
}

/* Loading: soft white veil + blue spinner over the form panel */
.rh_login_modal_wrapper .rh_modal_login_loader {
    z-index: 5;
    background: rgba(255, 255, 255, 0.72) !important;
}

.rh_login_modal_wrapper .rh_modal_login_loader svg path,
.rh_login_modal_wrapper .rh_modal_login_loader svg circle {
    fill: var(--arc-blue) !important;
}

/* ---------- "Forgot password?" text link ---------- */
.rh_login_modal_wrapper .rh_forget_password_trigger {
    margin: 0 !important;
    font-family: var(--arc-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--arc-blue) !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 150ms var(--arc-ease), color 150ms var(--arc-ease) !important;
}

.rh_login_modal_wrapper .rh_forget_password_trigger:hover,
.rh_login_modal_wrapper .rh_forget_password_trigger:focus-visible {
    color: var(--arc-blue) !important;
    text-decoration-color: var(--arc-yellow);
    text-decoration-thickness: 1.5px;
}

/* ---------- Keyboard focus ---------- */
.rh_login_modal_wrapper button:focus-visible,
.rh_login_modal_wrapper .rh_login_close:focus-visible,
.rh_login_modal_wrapper .rh_login_close_message:focus-visible,
.rh_login_modal_wrapper .rh_login_tabs li:focus-visible,
.rh_login_modal_wrapper .rh_forget_password_trigger:focus-visible {
    outline: 3px solid var(--arc-blue) !important;
    outline-offset: 3px !important;
}

.rh_login_modal_wrapper .rh_login_close:focus-visible {
    outline-color: var(--arc-blue) !important;
}

/* ---------- Close button ---------- */
.rh_login_modal_wrapper .rh_login_modal_box .rh_login_close {
    top: 16px !important;
    right: 16px !important;
    z-index: 10;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--arc-muted) !important;
    background: var(--arc-mist) !important;
    border-radius: 50% !important;
    transition: background-color 220ms var(--arc-ease), color 220ms var(--arc-ease) !important;
}

.rh_login_modal_wrapper .rh_login_modal_box .rh_login_close:hover {
    color: #fff !important;
    background: var(--arc-blue) !important;
}

/* ---------- Messages: calm callout under the button, in flow ---------- */
.rh_login_modal_wrapper .rh_login_modal_messages {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    transition: none !important;
}

.rh_login_modal_wrapper .rh_login_modal_messages p {
    margin: 0 !important;
    padding: 13px 44px 13px 16px !important;
    font-family: var(--arc-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 10px;
    border: 1px solid transparent;
}

.rh_login_modal_wrapper .rh_login_modal_messages p[id$="-error"] {
    color: var(--arc-error-ink) !important;
    background: var(--arc-error-tint);
    border-color: var(--arc-error-line);
}

.rh_login_modal_wrapper .rh_login_modal_messages p[id$="-message"] {
    color: var(--arc-ok-ink) !important;
    background: var(--arc-ok-tint);
    border-color: var(--arc-ok-line);
}

.rh_login_modal_wrapper .rh_login_modal_messages a {
    color: inherit !important;
    text-decoration: underline;
}

.rh_login_modal_wrapper .rh_login_modal_messages .rh_login_close_message {
    top: 10px !important;
    right: 10px !important;
    z-index: 2;
    padding: 2px 6px !important;
    color: currentColor !important;
    opacity: 0.6;
    transition: opacity 150ms var(--arc-ease);
}

.rh_login_modal_wrapper .rh_login_modal_messages:has(p[id$="-error"]:not([style*="none"])) .rh_login_close_message {
    color: var(--arc-error-ink) !important;
}

.rh_login_modal_wrapper .rh_login_modal_messages .rh_login_close_message:hover {
    opacity: 1;
}

/* ---------- Social login (empty here; tidy if ever enabled) ---------- */
.rh_login_modal_wrapper .inspiry_social_login:empty {
    display: none;
}

.rh_login_modal_wrapper .inspiry_social_login {
    margin-top: 16px;
}

/* ---------- One-time-code panel ---------- */
.rh_login_modal_wrapper .rh_otp_verification_panel {
    text-align: left !important;
    padding: 0 !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_title {
    font-family: var(--arc-display) !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: var(--arc-ink) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_description,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_timer_wrap,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_status_text {
    font-family: var(--arc-body) !important;
    color: var(--arc-muted) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_inputs,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_buttons {
    justify-content: flex-start !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel input.rh_otp_digit {
    background: var(--arc-mist) !important;
    border: 1px solid var(--arc-line) !important;
    border-radius: 10px !important;
    font-family: var(--arc-body) !important;
    color: var(--arc-text) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel input.rh_otp_digit:focus {
    background: #fff !important;
    border-color: var(--arc-blue) !important;
    box-shadow: 0 0 0 3px var(--arc-yellow) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_timer,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_message,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_status_text.rh_otp_status_success {
    color: var(--arc-blue) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_error,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_status_text.rh_otp_status_error {
    color: var(--arc-error-ink) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_spinner circle,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_checkmark circle,
.rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_checkmark polyline {
    stroke: var(--arc-blue) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_verify_btn,
.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_cancel_btn {
    height: 48px !important;
    padding: 0 26px !important;
    line-height: 1 !important;
    font-family: var(--arc-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    transition: background-color 220ms var(--arc-ease), color 220ms var(--arc-ease) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_verify_btn {
    color: #fff !important;
    background: var(--arc-blue) !important;
    border: 0 !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_verify_btn:hover:not(:disabled) {
    background: var(--arc-blue-dark) !important;
    color: var(--arc-yellow) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_verify_btn:disabled {
    background: var(--arc-line) !important;
    color: var(--arc-muted) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_cancel_btn {
    color: var(--arc-blue) !important;
    background: transparent !important;
    border: 1px solid var(--arc-line) !important;
}

.rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_cancel_btn:hover {
    background: var(--arc-mist) !important;
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    .rh_login_modal_wrapper {
        align-items: flex-start !important;
        padding: 12px !important;
    }

    .rh_login_modal_wrapper .arc-lm-logo {
        width: 180px;
    }

    .rh_login_modal_wrapper .rh_login_modal_box .rh_login_sides.rh_login_form_side {
        padding: 28px 24px 28px !important;
    }

    .rh_login_modal_wrapper .arc-lm-title {
        font-size: 30px !important;
    }


    .rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_inputs {
        gap: 6px;
    }

    .rh_login_modal_wrapper .rh_otp_verification_panel input.rh_otp_digit {
        width: 40px !important;
        height: 48px !important;
    }

    .rh_login_modal_wrapper .rh_otp_verification_panel .rh_otp_buttons {
        flex-direction: column;
    }

    .rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_verify_btn,
    .rh_login_modal_wrapper .rh_otp_verification_panel button.rh_otp_cancel_btn {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rh_login_modal_wrapper *,
    .rh_login_modal_wrapper *::before,
    .rh_login_modal_wrapper *::after {
        transition: none !important;
        animation: none !important;
    }
}