body.jr-login-redesign {
    --jr-login-bg: #f6f4f0;
    --jr-login-card: rgba(248, 246, 242, 0.96);
    --jr-login-inner: #fcfbf8;
    --jr-login-line: #d1b08d;
    --jr-login-border: #ddd4c6;
    --jr-login-title: #5b4336;
    --jr-login-text: #575452;
    --jr-login-muted: #6f6b67;
    --jr-login-button-1: #6e533f;
    --jr-login-button-2: #5a412f;
    --jr-login-link: #a96d42;
}

body.jr-login-redesign .content-area,
body.jr-login-redesign .site-main,
body.jr-login-redesign main {
    background: transparent !important;
}

body.jr-login-redesign .entry-content,
body.jr-login-redesign .page-content,
body.jr-login-redesign .site-main main {
    max-width: 1320px;
    margin: 22px auto 34px;
}


body.jr-login-redesign .entry-content,
body.jr-login-redesign .page-content,
body.jr-login-redesign .entry-content-wrap,
body.jr-login-redesign article.entry,
body.jr-login-redesign article.page,
body.jr-login-redesign .site-container .content-wrap {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


body.jr-login-redesign .entry-content,
body.jr-login-redesign .page-content,
body.jr-login-redesign article.entry,
body.jr-login-redesign article.page {
    padding: 0 !important;
    border-radius: 0 !important;
}



body.jr-login-redesign .content-wrap,
body.jr-login-redesign .entry-content-wrap,
body.jr-login-redesign .single-content {
    max-width: 930px;
    margin: 0 auto;
    padding: 18px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(90, 65, 47, .90), rgba(110, 83, 63, .88)) !important;
    background-image: none !important;
    box-shadow: 0 16px 30px rgba(62, 41, 28, .18);
    box-sizing: border-box;
}

body.jr-login-redesign .jr-login-shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(208, 189, 148, .30), rgba(187, 160, 116, .34));
    border: 1px solid rgba(184, 154, 104, .38);
    box-shadow: 0 12px 24px rgba(62, 41, 28, .08);
}

body.jr-login-redesign .jr-login-panel {
    padding: 6px 4px 4px;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.jr-login-redesign .jr-login-header {
    text-align: center;
    margin: 0 0 18px;
}

body.jr-login-redesign .jr-login-title {
    margin: 0;
    color: var(--jr-login-title);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(42px, 5.1vw, 66px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.jr-login-redesign .jr-login-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 12px auto 10px;
    color: var(--jr-login-line);
}

body.jr-login-redesign .jr-login-divider::before,
body.jr-login-redesign .jr-login-divider::after {
    content: '';
    width: min(150px, 18vw);
    height: 1px;
    background: var(--jr-login-line);
}

body.jr-login-redesign .jr-login-divider span {
    font-size: 20px;
    line-height: 1;
}

body.jr-login-redesign .jr-login-subtitle {
    margin: 0;
    color: var(--jr-login-title);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(16px, 1.6vw, 19px);
}

body.jr-login-redesign .jr-login-form-card {
    padding: 20px 20px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(222, 214, 201, .95);
}

body.jr-login-redesign .jr-login-form-card form {
    margin: 0;
}

body.jr-login-redesign .jr-login-form-card p,
body.jr-login-redesign .jr-login-form-card .um-field,
body.jr-login-redesign .jr-login-form-card .wppb-form-field,
body.jr-login-redesign .jr-login-form-card .tml-field-wrap,
body.jr-login-redesign .jr-login-form-card .login-remember,
body.jr-login-redesign .jr-login-form-card .login-submit {
    margin-bottom: 12px;
}

body.jr-login-redesign .jr-login-form-card label,
body.jr-login-redesign .jr-login-form-card .wppb-form-field label,
body.jr-login-redesign .jr-login-form-card .tml-label,
body.jr-login-redesign .jr-login-form-card .um-field-label label {
    display: block;
    margin: 0 0 6px;
    color: #332f2d;
    font-size: 15px;
    font-weight: 500;
}

body.jr-login-redesign .jr-login-form-card input[type="text"],
body.jr-login-redesign .jr-login-form-card input[type="email"],
body.jr-login-redesign .jr-login-form-card input[type="password"],
body.jr-login-redesign .jr-login-form-card input[type="search"],
body.jr-login-redesign .jr-login-form-card input[type="tel"],
body.jr-login-redesign .jr-login-form-card textarea,
body.jr-login-redesign .jr-login-form-card select {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #b7bfcc;
    background: #eaf0fb;
    color: #2a2a2a;
    font-size: 15px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

body.jr-login-redesign .jr-login-form-card input:focus,
body.jr-login-redesign .jr-login-form-card textarea:focus,
body.jr-login-redesign .jr-login-form-card select:focus {
    outline: none;
    border-color: #8e7764;
    box-shadow: 0 0 0 3px rgba(174, 135, 95, .14);
}

body.jr-login-redesign .jr-login-form-card .login-password,
body.jr-login-redesign .jr-login-form-card .password-wrap,
body.jr-login-redesign .jr-login-form-card .um-field-password {
    position: relative;
}

body.jr-login-redesign .jr-login-form-card .show-password,
body.jr-login-redesign .jr-login-form-card .toggle-password,
body.jr-login-redesign .jr-login-form-card .wppb-toggle-pw,
body.jr-login-redesign .jr-login-form-card .pass-toggle,
body.jr-login-redesign .jr-login-form-card .password-toggle {
    color: #6d523c;
    font-weight: 600;
}

body.jr-login-redesign .jr-login-form-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    accent-color: #8d6a46;
}

body.jr-login-redesign .jr-login-form-card .login-remember label,
body.jr-login-redesign .jr-login-form-card .rememberme,
body.jr-login-redesign .jr-login-form-card .remember-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

body.jr-login-redesign .jr-login-form-card input[type="submit"],
body.jr-login-redesign .jr-login-form-card button[type="submit"],
body.jr-login-redesign .jr-login-form-card .button,
body.jr-login-redesign .jr-login-form-card .btn,
body.jr-login-redesign .jr-login-form-card .wppb-submit,
body.jr-login-redesign .jr-login-form-card .um-button {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--jr-login-button-2), var(--jr-login-button-1), var(--jr-login-button-2));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 16px rgba(74, 52, 34, .14);
    cursor: pointer;
}

body.jr-login-redesign .jr-login-form-card input[type="submit"]:hover,
body.jr-login-redesign .jr-login-form-card button[type="submit"]:hover,
body.jr-login-redesign .jr-login-form-card .button:hover,
body.jr-login-redesign .jr-login-form-card .btn:hover,
body.jr-login-redesign .jr-login-form-card .wppb-submit:hover,
body.jr-login-redesign .jr-login-form-card .um-button:hover {
    filter: brightness(1.03);
}

body.jr-login-redesign .jr-login-link-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--jr-login-line);
    flex-wrap: wrap;
}

body.jr-login-redesign .jr-login-link-row::before,
body.jr-login-redesign .jr-login-link-row::after {
    content: '';
    width: min(120px, 14vw);
    height: 1px;
    background: rgba(206, 176, 138, .9);
}

body.jr-login-redesign .jr-login-link-row a,
body.jr-login-redesign .jr-login-form-card a {
    color: var(--jr-login-link);
    text-decoration: none;
    font-size: 15px;
}

body.jr-login-redesign .jr-login-link-row a:hover,
body.jr-login-redesign .jr-login-form-card a:hover {
    text-decoration: underline;
}

body.jr-login-redesign .jr-login-links-fallback {
    margin-top: 14px;
    text-align: center;
}

body.jr-login-redesign .jr-login-links-fallback a {
    margin: 0 8px;
}

body.jr-login-redesign .g-recaptcha,
body.jr-login-redesign .grecaptcha-badge,
body.jr-login-redesign .jr-login-form-card .um-field-g_recaptcha,
body.jr-login-redesign .jr-login-form-card .wppb-recaptcha {
    max-width: 304px;
}

body.jr-login-redesign .jr-login-form-card .message,
body.jr-login-redesign .jr-login-form-card .error,
body.jr-login-redesign .jr-login-form-card .notice,
body.jr-login-redesign .jr-login-form-card .um-notice,
body.jr-login-redesign .jr-login-form-card .wppb-error,
body.jr-login-redesign .jr-login-form-card .wppb-success {
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(205, 180, 146, .6);
    background: rgba(255,249,241,.96);
}

body.jr-login-redesign .jr-login-orphan-links {
    display: none !important;
}


@media (max-width: 1024px) {
    body.jr-login-redesign .content-wrap,
    body.jr-login-redesign .entry-content-wrap,
    body.jr-login-redesign .single-content {
        max-width: 900px;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    body.jr-login-redesign .jr-login-shell {
        max-width: 820px;
        padding: 12px;
    }

    body.jr-login-redesign .jr-login-panel {
        padding: 4px 2px 2px;
    }
}


@media (max-width: 767px) {
    body.jr-login-redesign .content-wrap,
    body.jr-login-redesign .entry-content-wrap,
    body.jr-login-redesign .single-content {
        max-width: none;
        width: auto;
        margin: 0 0 0 0;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.jr-login-redesign .entry-content,
    body.jr-login-redesign .page-content,
    body.jr-login-redesign .site-main main {
        max-width: none;
        margin: 14px 12px 24px;
    }

    body.jr-login-redesign .jr-login-shell {
        max-width: none;
        width: 100%;
        padding: 10px;
        border-radius: 18px;
    }

    body.jr-login-redesign .jr-login-panel {
        padding: 0;
        border-radius: 0;
    }

    body.jr-login-redesign .jr-login-form-card {
        padding: 16px 14px;
    }

    body.jr-login-redesign .jr-login-divider::before,
    body.jr-login-redesign .jr-login-divider::after,
    body.jr-login-redesign .jr-login-link-row::before,
    body.jr-login-redesign .jr-login-link-row::after {
        width: 54px;
    }

    body.jr-login-redesign .jr-login-form-card input[type="text"],
    body.jr-login-redesign .jr-login-form-card input[type="email"],
    body.jr-login-redesign .jr-login-form-card input[type="password"],
    body.jr-login-redesign .jr-login-form-card input[type="search"],
    body.jr-login-redesign .jr-login-form-card input[type="tel"],
    body.jr-login-redesign .jr-login-form-card textarea,
    body.jr-login-redesign .jr-login-form-card select,
    body.jr-login-redesign .jr-login-form-card input[type="submit"],
    body.jr-login-redesign .jr-login-form-card button[type="submit"],
    body.jr-login-redesign .jr-login-form-card .button,
    body.jr-login-redesign .jr-login-form-card .btn,
    body.jr-login-redesign .jr-login-form-card .wppb-submit,
    body.jr-login-redesign .jr-login-form-card .um-button {
        min-height: 48px;
    }
}


/* ===========================================================
 * v1.0.9 - Mobile login: one wide visible surface
 * Desktop and tablet are deliberately unchanged. This fix lives
 * in the canonical login plugin (not a supplementary plugin).
 * =========================================================== */
@media screen and (max-width: 767px) {
    /* Remove the decorative outer Kadence/article surfaces rather than
       showing an ivory layer around the actual beige login panel. */
    html body.jr-login-redesign #primary,
    html body.jr-login-redesign .content-area,
    html body.jr-login-redesign .content-wrap,
    html body.jr-login-redesign .entry-content-wrap,
    html body.jr-login-redesign .entry-content,
    html body.jr-login-redesign .entry-content.single-content,
    html body.jr-login-redesign .single-content,
    html body.jr-login-redesign .page-content,
    html body.jr-login-redesign .site-main,
    html body.jr-login-redesign article.entry,
    html body.jr-login-redesign article.page {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        overflow: visible !important;
    }

    html body.jr-login-redesign .content-wrap,
    html body.jr-login-redesign .entry-content-wrap,
    html body.jr-login-redesign .entry-content.single-content,
    html body.jr-login-redesign .single-content {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    html body.jr-login-redesign .entry-content,
    html body.jr-login-redesign .page-content {
        padding: 0 !important;
        overflow: visible !important;
    }

    html body.jr-login-redesign .jr-login-shell {
        /* Break out of Kadence's narrower centered content column. */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 20px) !important;
        width: calc(100dvw - 20px) !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 14px 0 26px !important;
        padding: 12px 5px 14px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(184, 154, 104, .38) !important;
        background: linear-gradient(180deg, #eee6d4 0%, #e8dcc5 100%) !important;
        background-image: linear-gradient(180deg, #eee6d4 0%, #e8dcc5 100%) !important;
        box-shadow: 0 12px 24px rgba(62,41,28,.08) !important;
    }

    html body.jr-login-redesign .jr-login-panel {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html body.jr-login-redesign .jr-login-form-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 16px 8px 14px !important;
    }
    html body.jr-login-redesign .jr-login-form-card form {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Keep Google's checkbox inside the usable form area. It is 304px wide
       and its iframe cannot be made fluid using ordinary form-field rules. */
    html body.jr-login-redesign .jr-login-form-card .g-recaptcha,
    html body.jr-login-redesign .jr-login-form-card .anr_captcha_field,
    html body.jr-login-redesign .jr-login-form-card .anr_captcha_field_div,
    html body.jr-login-redesign .jr-login-form-card .rc-anchor-container {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 349px) {
    html body.jr-login-redesign .jr-login-form-card .g-recaptcha {
        transform: scale(.88) !important;
        transform-origin: left top !important;
        max-width: none !important;
        margin-bottom: -9px !important;
    }
}


/* =============================================================
 * v1.0.10 — Mobile-only: slim ivory surround + inset beige panel
 * Keep Kadence's additional wrapper surfaces transparent to avoid
 * returning to the previous oversized/nested layout.
 * ============================================================= */
@media screen and (max-width: 767px) {
    html body.jr-login-redesign .jr-login-shell {
        /* Slightly narrower than 1.0.9 (14px instead of 10px each side). */
        width: calc(100vw - 28px) !important;
        width: calc(100dvw - 28px) !important;
        padding: 7px !important;
        box-sizing: border-box !important;
        border-radius: 24px !important;
        border: 1px solid #e0d6c8 !important;
        background: #faf8f3 !important;
        background-image: none !important;
        box-shadow: 0 12px 24px rgba(62, 41, 28, .08) !important;
    }

    html body.jr-login-redesign .jr-login-panel {
        /* Restore beige as a real inner layer: a constant 7px
           ivory surround remains visible on all four edges. */
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 5px 12px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        border: 1px solid rgba(184, 154, 104, .38) !important;
        background: linear-gradient(180deg, #eee6d4 0%, #e8dcc5 100%) !important;
        background-image: linear-gradient(180deg, #eee6d4 0%, #e8dcc5 100%) !important;
        box-shadow: none !important;
    }
}


/* v1.0.11 — slightly reduce only the mobile login heading.
 * All form spacing, panel widths, and tablet/desktop sizes remain unchanged. */
@media screen and (max-width: 767px) {
    html body.jr-login-redesign .jr-login-title {
        font-size: clamp(35px, 9.5vw, 38px) !important;
    }
}


/* ============================================================
 * v1.0.12 — final mobile login polish (mobile only)
 * Keep the v1.0.10 layered containers and v1.0.11 title unchanged.
 * ============================================================ */
@media screen and (max-width: 767px) {
    /* Bring the white form card slightly closer to the intro. */
    html body.jr-login-redesign .jr-login-header {
        margin-bottom: 9px !important; /* previous: 18px */
    }

    /* Keep Google's checkbox centred without changing its secure iframe. */
    html body.jr-login-redesign .jr-login-form-card .anr_captcha_field,
    html body.jr-login-redesign .jr-login-form-card .anr_captcha_field_div,
    html body.jr-login-redesign .jr-login-form-card .wppb-recaptcha,
    html body.jr-login-redesign .jr-login-form-card .um-field-g_recaptcha {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    html body.jr-login-redesign .jr-login-form-card .g-recaptcha {
        display: block !important;
        width: 304px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Scale down only the password visibility utility, not form labels. */
    html body.jr-login-redesign .jr-login-form-card .show-password,
    html body.jr-login-redesign .jr-login-form-card .toggle-password,
    html body.jr-login-redesign .jr-login-form-card .wppb-toggle-pw,
    html body.jr-login-redesign .jr-login-form-card .pass-toggle,
    html body.jr-login-redesign .jr-login-form-card .password-toggle,
    html body.jr-login-redesign .jr-login-form-card .wp-hide-pw {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    html body.jr-login-redesign .jr-login-form-card .show-password svg,
    html body.jr-login-redesign .jr-login-form-card .toggle-password svg,
    html body.jr-login-redesign .jr-login-form-card .password-toggle svg,
    html body.jr-login-redesign .jr-login-form-card .wp-hide-pw .dashicons {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }
}