/* -------------------------------------------------------------------------
 * LUS Auth — Login / Register / Forgot modal restyle + social buttons
 *
 * Adjusts only shape, size and spacing of the theme's #loginmodal fields and
 * buttons to match the new Guest/Host chooser — NO colour changes: buttons,
 * links, text and inputs keep the theme's own colours. Also styles the
 * "Continue with …" social buttons injected by js/lus-auth-signup-step.js
 * (neutral, so they don't fight the theme palette) and hides the theme's
 * native social markup inside the modal.
 *
 * Scoped to #loginmodal so nothing else on the site is affected.
 * ---------------------------------------------------------------------- */

/* --- Two-column layout: form + social side panel (no photo) ----------
 * The theme splits the modal into a 60% form + 40% background photo, with
 * a fixed-height absolutely-positioned dialog. We drop the photo and put
 * a real "continue with…" social panel (#lus-auth-side, injected by JS)
 * in its place, with everything auto-height.
 * ------------------------------------------------------------------------ */
#loginmodal .modal_login_image_wrapper,
#loginmodal .modal_login_image {
    display: none !important;
}

/* Vertically center the dialog in the viewport instead of the theme's
 * fixed margin-top:30px (which pins it near the top on anything taller
 * than the card itself). Bootstrap 3 has no built-in centered-modal
 * variant.
 *
 * This is deliberately NOT done by making #loginmodal a flex container
 * only while it carries Bootstrap's `.in` class: `.in` is removed the
 * instant close starts, ~300ms before the fade-out finishes and Bootstrap
 * actually sets display:none (see Modal.prototype.hide in bootstrap.js) —
 * so a flex-scoped-to-.in approach re-lays the dialog out at its
 * non-centered fallback position for that whole window, producing a
 * visible jump to the top-left right before it disappears. Centering the
 * dialog itself with position:absolute + transform instead means its
 * position never depends on `.in` at all, so nothing moves during close —
 * only the surrounding fade/opacity animates. */
#loginmodal .modal-dialog,
#loginmodal.with_social .modal-dialog {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.97) !important;
    width: 720px !important;
    max-width: 94vw;
    max-height: calc(100vh - 60px);
    margin: 0 !important;
    right: auto !important;
    min-height: 0 !important;
    /* The theme sets an inline style="height:Xpx" here, sized for its
       original two-column-with-photo layout — much taller than our actual
       (auto-height) card content. Centering the oversized invisible box
       left the real, top-aligned card looking off-center; force it to
       hug its content instead. */
    height: auto !important;
    overflow-y: auto;
    opacity: 0;
}

/* Subtle entrance: fade + scale up to full size once .in is added (the
 * same class/timing Bootstrap already uses to fade the backdrop in) — the
 * translate(-50%,-50%) staying identical in both states means this never
 * reintroduces the close-jump bug above; only scale/opacity animate. */
@media (prefers-reduced-motion: no-preference) {
    #loginmodal .modal-dialog {
        transition: transform .28s cubic-bezier(.25, .8, .25, 1), opacity .22s ease;
    }
}
#loginmodal.in .modal-dialog {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1;
}
#loginmodal .modal-content {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}
#loginmodal .modal-body {
    display: flex !important;
    align-items: stretch;
    height: auto !important;
    padding: 0 !important;
}
#loginmodal #ajax_login_div,
#loginmodal #ajax_register_div,
#loginmodal #forgot-pass-div_mod {
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 34px 32px !important;
    box-sizing: border-box;
}

/* Right-hand social panel — plain by default, or a real listing photo
 * behind the buttons when the server found one (functions.php). Hidden on
 * the Guest/Host chooser step specifically (see syncSidePanelToChooser in
 * the JS) — signing in with Google there would skip that choice entirely. */
#lus-auth-side.lus-hidden {
    display: none !important;
}
#lus-auth-side {
    position: relative;
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    border-left: 1px solid #ececec;
    box-sizing: border-box;
    overflow: hidden;
}
#lus-auth-side .lus-auth-side-content {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 34px 26px;
    box-sizing: border-box;
}
#lus-auth-side .lus-auth-side-title {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9a9a9a;
    text-align: center;
    transition: color .2s ease;
}

/* --- Photo variant ------------------------------------------------------ */
#lus-auth-side.lus-auth-side--photo {
    background: #1a1a1a;
}
.lus-auth-side-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.lus-auth-side-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Dark enough at the bottom for the caption/buttons to read as white
       text over a photo (WCAG contrast), lighter at the top so the image
       still reads as a photo, not just a dark panel. */
    background: linear-gradient(180deg, rgba(10, 10, 10, .18) 0%, rgba(10, 10, 10, .68) 75%, rgba(10, 10, 10, .78) 100%);
}
#lus-auth-side.lus-auth-side--photo .lus-auth-side-title {
    color: rgba(255, 255, 255, .9);
}
#lus-auth-side.lus-auth-side--photo .lus-social-note {
    color: rgba(255, 255, 255, .85);
}
.lus-auth-side-caption {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 26px 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
#lus-auth-side .lus-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#lus-auth-side .lus-social-btn {
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
}
#lus-auth-side .lus-social-btn-label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    font-size: 13px;
    font-weight: 600;
    color: #2b2b2b;
}
#lus-auth-side .lus-social-note {
    margin: 4px 0 0;
}

@media ( max-width: 767px ) {
    /* Anchored near the top instead of vertically centered — centering a
       box whose height changes (e.g. once the photo above is hidden here)
       makes it drift up/down the screen depending on content length; a
       fixed top position keeps the close button in a predictable spot.
       Horizontal centering and the entrance-animation approach (identical
       translate in both states, only scale differs, see the close-jump
       fix above) are both kept unchanged. */
    #loginmodal .modal-dialog,
    #loginmodal.with_social .modal-dialog {
        top: 16px !important;
        transform: translate(-50%, 0) scale(0.97) !important;
        max-height: calc(100vh - 32px);
    }
    #loginmodal.in .modal-dialog {
        transform: translate(-50%, 0) scale(1) !important;
    }

    #loginmodal .modal-body {
        flex-direction: column;
    }
    #lus-auth-side {
        flex: 1 1 auto;
        border-left: none;
        border-top: 1px solid #ececec;
    }
    /* The listing photo is a nice-to-have on desktop but just adds scroll
       height on a small screen — drop it there, keep the social button(s)
       in a plain panel like the no-photo desktop fallback. */
    .lus-auth-side-photo,
    .lus-auth-side-caption {
        display: none;
    }
    #lus-auth-side.lus-auth-side--photo {
        background: #fafafa;
    }
    #lus-auth-side.lus-auth-side--photo .lus-auth-side-title {
        color: #9a9a9a;
    }
    #lus-auth-side.lus-auth-side--photo .lus-social-note {
        color: #8a8a8a;
    }
}

/* The theme also makes these panels a full-height flex column with
 * justify-content:center; put them back into normal top-down flow so the
 * chooser / step-2 header / form stack with predictable spacing. .loginrow
 * is floated too, which strands phantom vertical gaps. */
#loginmodal #ajax_register_div,
#loginmodal #ajax_login_div {
    display: block;
    justify-content: flex-start;
}
#loginmodal .login_form {
    overflow: hidden; /* contain the (now optional) floats */
}
#loginmodal .loginrow {
    float: none;
    margin: 0 0 12px;
}

/* --- Headings ------------------------------------------------------------ */
#loginmodal .modal-header {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
/* Kill any themed decorative accent on the header (a stray rotated square
   was showing top-left of "Create an account"). */
#loginmodal .modal-header::before,
#loginmodal .modal-header::after,
#loginmodal h2.modal-title_big::before,
#loginmodal h2.modal-title_big::after {
    content: none !important;
    display: none !important;
}
#loginmodal h2.modal-title_big {
    display: block !important;
    margin: 0 0 18px !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700;
}
#loginmodal #lus-signup-step2-head {
    margin: 0 0 10px;
}
#loginmodal #lus-signup-chooser {
    padding-top: 0;
}

/* --- Inputs — shape & spacing only ------------------------------------- */
#loginmodal .form-control {
    height: 48px;
    padding: 10px 14px;
    font-size: 14px;
    border-width: 1.5px;
    border-radius: 10px;
    box-shadow: none;
}
#loginmodal .form-control:focus {
    border-color: #c9c9c9;
    box-shadow: none;
    outline: none;
}
/* Chrome/Safari paint autofilled fields with their own blue/yellow tint,
   which (especially with the floating-label redesign) reads as a stuck
   error/highlight rather than "the browser filled this in." Force it back
   to a plain white field — the long transition delay is the standard
   trick to stop the tint flashing before this overrides it. */
#loginmodal .form-control:-webkit-autofill,
#loginmodal .form-control:-webkit-autofill:hover,
#loginmodal .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #2b2b2b;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Password field + show/hide eye alignment */
#loginmodal .password_holder {
    position: relative;
}
#loginmodal .password_holder .form-control {
    padding-right: 44px;
}
#loginmodal .show_hide_password {
    position: absolute;
    top: 24px;
    right: 14px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Empty helper nodes the shortcode always prints — stop them eating space */
#loginmodal .password-strength:empty,
#loginmodal #reg_passmail:empty,
#loginmodal [id^="capthca_register"]:empty {
    display: none !important;
    margin: 0 !important;
}

/* --- Password strength / match feedback ---------------------------------
 * The parent theme's own style.css renders this as a full-width solid
 * red/green/blue banner (literal `background:red` etc.) — overridden here
 * with a small rounded "chip" plus a slim 4-segment strength bar (added by
 * js/lus-auth-signup-step.js, which watches this element's class and maps
 * it to a fill level) instead. Semantic color is intentional here — this
 * is validation feedback, not decoration — but nothing else in the modal
 * gains new color from this. */
#loginmodal .password-strength {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    float: none !important;
    padding: 3px 10px 3px 8px !important;
    margin: 8px 0 2px !important;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left !important;
    border-radius: 20px;
    background: rgba(0, 0, 0, .05) !important;
    color: #6b7280 !important;
}
#loginmodal .password-strength::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* .short covers both "very weak" and "mismatch" (WP core reuses the same
   class for both — see wp.passwordStrength.meter()'s return value 0/1/5). */
#loginmodal .password-strength.short {
    background: rgba(220, 38, 38, .1) !important;
    color: #dc2626 !important;
}
#loginmodal .password-strength.bad {
    background: rgba(217, 119, 6, .12) !important;
    color: #d97706 !important;
}
#loginmodal .password-strength.good {
    background: rgba(101, 163, 13, .12) !important;
    color: #65a30d !important;
}
#loginmodal .password-strength.strong {
    background: rgba(22, 163, 74, .12) !important;
    color: #16a34a !important;
}
/* Once the password is strong (and, since retype must match for this
   class to apply, confirmed matching) there's nothing left to tell the
   user — the chip + bar disappear instead of lingering as clutter. */
#loginmodal .password-strength.strong,
#loginmodal .password-strength.strong + .lus-pw-strength-bar {
    display: none !important;
}

/* 4-segment strength bar, injected + kept in sync with .password-strength
   by JS. Hidden until a password state exists (mirrors the :empty rule
   above for the text chip). */
.lus-pw-strength-bar {
    display: none;
    gap: 4px;
    margin: 8px 0 2px;
}
.lus-pw-strength-bar.is-active {
    display: flex;
}
.lus-pw-strength-bar span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .08);
    transition: background-color .2s ease;
}
.lus-pw-strength-bar[data-level="1"] span:nth-child(1),
.lus-pw-strength-bar[data-level="mismatch"] span:nth-child(1) {
    background: #dc2626;
}
.lus-pw-strength-bar[data-level="2"] span:nth-child(-n+2) {
    background: #d97706;
}
.lus-pw-strength-bar[data-level="3"] span:nth-child(-n+3) {
    background: #65a30d;
}
.lus-pw-strength-bar[data-level="4"] span:nth-child(-n+4) {
    background: #16a34a;
}

/* --- Terms row — leave the theme's checkbox alone, just tidy spacing --- */
#loginmodal .login_form > input[name="terms"] {
    margin-top: 4px;
}
#loginmodal #user_terms_register_sh_label {
    line-height: 1.4;
}

/* --- Primary buttons — shape, spacing + the theme's main accent colour --- */
#loginmodal #wp-login-but,
#loginmodal #wp-submit-register,
#loginmodal #wp-submit-register_sh,
#loginmodal #wp-forgot-but_mod,
#loginmodal .modal-content #wp-login-but,
#loginmodal button[id^="wp-login-but"],
#loginmodal button[id^="wp-submit-register"],
#loginmodal button[id^="wp-forgot-but"] {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    background-color: var(--lus-auth-accent, #d64541) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px;
    transition: filter .16s ease, transform .16s ease;
}
#loginmodal #wp-login-but:hover,
#loginmodal #wp-submit-register:hover,
#loginmodal #wp-submit-register_sh:hover,
#loginmodal #wp-forgot-but_mod:hover,
#loginmodal button[id^="wp-login-but"]:hover,
#loginmodal button[id^="wp-submit-register"]:hover,
#loginmodal button[id^="wp-forgot-but"]:hover {
    filter: brightness(0.93);
    transform: translateY(-1px);
}

/* --- Nav links — spacing only --------------------------------------------- */
#loginmodal .navigation_links {
    clear: both;
    margin-top: 16px;
    font-size: 13px;
}

/* --- Alerts — spacing only ------------------------------------------------ */
#loginmodal .loginalert:not(:empty) {
    margin-bottom: 12px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* --- Hide the theme's native social markup inside the modal ----------- */
#loginmodal .login-links {
    display: none !important;
}

/* --- Email-verification helpers ------------------------------------------ */
#loginmodal .lus-auth-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #8a8a8a;
    text-align: center;
}

/* Submit-button loading state — shared by the theme's #wp-submit-register
   and #wp-login-but. This is the login/register button's only "something
   is happening" feedback now that the text status area is fully
   suppressed (see .lus-message-suppressed) — no loading/success text
   banner anywhere, per the project's established no-banner rule. */
#loginmodal #wp-submit-register.lus-btn-loading,
#loginmodal #wp-login-but.lus-btn-loading {
    opacity: .75;
    cursor: default;
}
#loginmodal #wp-submit-register.lus-btn-loading::before,
#loginmodal #wp-login-but.lus-btn-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lusSpin .6s linear infinite;
}
@keyframes lusSpin { to { transform: rotate(360deg); } }

/* "Check your email" success panel (replaces the form after signup) */
#lus-signup-success {
    text-align: center;
    padding: 8px 4px 4px;
    animation: lusSignupFade .2s ease both;
}
#lus-signup-success .lus-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 50%;
    color: #fff;
    background: var(--lus-auth-accent, #d64541);
}
#lus-signup-success .lus-success-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #2b2b2b;
}
#lus-signup-success .lus-success-text {
    margin: 0 auto 18px;
    max-width: 320px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6a6a6a;
    word-break: break-word;
}
#lus-signup-success .lus-success-btn {
    display: inline-block;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--lus-auth-accent, #d64541);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .16s ease;
}
#lus-signup-success .lus-success-btn:hover {
    filter: brightness(0.93);
}

/* --- Our injected social sign-in — compact icon row at the form bottom --- */
.lus-auth-social-block {
    margin-top: 18px;
}

.lus-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}
.lus-auth-divider::before,
.lus-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6e6e6;
}
.lus-auth-divider span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9a9a9a;
}

.lus-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.lus-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 46px;
    padding: 0;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lus-social-btn:hover {
    border-color: #c9c9c9;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}
.lus-social-btn i {
    font-size: 18px;
    line-height: 1;
}
.lus-social-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.lus-social-google i   { color: #ea4335; }

.lus-social-btn.is-disabled {
    opacity: .4;
    cursor: not-allowed;
}
.lus-social-btn.is-disabled i {
    color: #9a9a9a;
}
.lus-social-btn.is-disabled:hover {
    border-color: #e0e0e0;
    box-shadow: none;
}
.lus-social-btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

.lus-social-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    text-align: center;
    color: #8a8a8a;
}
.lus-social-note:empty {
    display: none;
}

/* --- Floating labels ------------------------------------------------------
 * Replaces the theme's placeholder-only fields (js/lus-auth-signup-step.js
 * turns the placeholder text into a real <label>, then blanks the
 * placeholder itself so it doesn't double up with the label). */
#loginmodal .lus-field {
    position: relative;
}
#loginmodal .lus-field .form-control {
    padding: 21px 14px 7px !important;
}
/* Password fields also reserve space on the right for the show/hide eye
   icon — the shorthand rule above would otherwise clobber that spacing. */
#loginmodal .password_holder .lus-field .form-control {
    padding-right: 44px !important;
}
#loginmodal .lus-float-label {
    position: absolute;
    left: 15px;
    top: 50%;
    max-width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    transform-origin: left center;
    font-size: 14px;
    color: #9a9a9a;
    pointer-events: none;
    transition: top .15s ease, transform .15s ease, color .15s ease;
}
#loginmodal .lus-field .form-control:focus ~ .lus-float-label,
#loginmodal .lus-field .form-control:not(:placeholder-shown) ~ .lus-float-label {
    top: 14px;
    transform: translateY(-50%) scale(.76);
    color: #6b6b6b;
}

/* --- Field-level validation errors -----------------------------------
 * See initFieldErrorMapping() — keyword-matches the theme's one-string
 * AJAX error message to the field(s) it's about, so validation reads as
 * "this field is wrong" instead of a generic banner above the form.
 * Semantic red, same exception already agreed for password feedback. */
#loginmodal .lus-field-error .form-control {
    border-color: #dc2626 !important;
}
#loginmodal .lus-field-error .lus-float-label {
    color: #dc2626;
}
#loginmodal .lus-field-error-msg {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #dc2626;
}
/* The generic banner (#login_message_area / #register_message_area) is
   suppressed only when every current error was successfully mapped to a
   field — messages that aren't about any one field (rate limits,
   unverified account, registration disabled) still show there. */
.lus-message-suppressed {
    display: none !important;
}


/* Password: no strength meter or bar, just one plain instruction under the box
   (js/lus-auth-signup-step.js, #lus-pw-help). The rules are checked on submit. */
#loginmodal .password-strength,
#loginmodal .lus-pw-strength-bar {
    display: none !important;
}
#loginmodal .lus-pw-help {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}