/*
    My Saved Posts, guest view (template-parts/saved-posts/saved-posts-guest.php): the benefit
    panel a logged-out visitor sees in place of the list.

    Loads after wb-post-listing-v2.css (container, heading, phone gutters) and after
    wb-login-form-ent-v2-popup.css (the inline [wb_login_form skin="ent-v2-popup"]); the page
    template enqueues both first so the rules here always come later in the cascade. The popup
    skin is shared with the login modal on single posts and checkout and is never edited:
    everything the card needs from it is scoped under .wb-saved-posts-guest-form, and !important
    is used only where the skin or a Bootstrap utility already uses it.

    .wb-saved-posts-guest-panel      the card: intro / form / register grid
    .wb-saved-posts-guest-intro      badge, heading and text (Theme Settings > General)
    .wb-saved-posts-guest-badge      the "Member benefit" pill (its own Customizer colours)
    .wb-saved-posts-guest-form       wraps the skin's #wb-ent-login-form-popup
    .wb-saved-posts-guest-register   the panel's own "Not a member yet?" line, under the intro text
    .wb-saved-posts-guest-carousels  the "My Saved Posts Guest Carousels" widget area
    --wb-primary / --wb-link / --wb-badge-bg / --wb-badge-color   set inline on the panel from the
                                     theme mods (primary_button_color, link_color,
                                     member_benefit_badge_bg_color, member_benefit_badge_font_color)
*/

/* ---------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------ */

/* The form spans both rows; "auto 1fr" hands all of its extra height to the second row so the
 * register line follows the intro text at the row gap instead of floating mid-column */
.wb-saved-posts-guest-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "intro form"
        "register form";
    column-gap: 48px;
    row-gap: 16px;
    align-items: start;
    margin-bottom: 32px;
    padding: 40px;
    border: 1px solid #DEE2E6;
    border-radius: 12px;
}

.wb-saved-posts-guest-intro {
    grid-area: intro;
}

.wb-saved-posts-guest-form {
    grid-area: form;
    min-width: 0;
}

/* Directly under the intro text (the grid row gap is the space); the form column may run longer */
.wb-saved-posts-guest-register {
    grid-area: register;
    align-self: start;
    margin: 0;
    color: #6C757D;
    font-size: 14px;
    line-height: 1.5;
}

.wb-saved-posts-guest-register a {
    color: var(--wb-link);
    font-weight: 700;
    text-decoration: none;
}

.wb-saved-posts-guest-register a:hover,
.wb-saved-posts-guest-register a:focus-visible {
    color: var(--wb-link);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Intro: badge, heading, text
 * ------------------------------------------------------------------ */

.wb-saved-posts-guest-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--wb-badge-bg, #E6EFEF);
    color: var(--wb-badge-color, #065F5D);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.wb-saved-posts-guest-intro h2 {
    margin: 0 0 12px;
    color: #000000;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.wb-saved-posts-guest-intro p {
    margin: 0;
    color: #6C757D;
    font-size: 16px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * The popup skin inside the card
 *
 * Skin specificity: .form-control / .wb-ent-form-label / a.ent-back-link (0,1,0)-(0,1,1),
 * #wb-ent-login-submit (1,0,0) with !important on margin-top and the side paddings. Bootstrap
 * utilities on the button (rounded-0, mt-4, pl-5 pr-5) and the forgot link (mb-3) are !important,
 * and the theme's wb-style.min.css sets .btn.btn-primary { font-size: 14px !important;
 * font-weight: 500 !important } site-wide.
 * ------------------------------------------------------------------ */

/* The skin centres the form for the modal; in the card it fills the column */
.wb-saved-posts-guest-form #wb-ent-login-form-popup form,
.wb-saved-posts-guest-form #wb-ent-login-form-popup > .mx-2 {
    margin: 0 !important;
    max-width: none;
}

/* Hidden: the "Please log in below" notice (kept in the DOM: the skin JS inserts the login error
 * right after it), the Cancel link and the skin's own "Don't have an account?" block, which the
 * panel's register line replaces. Both the form and the SSO branch are covered. */
.wb-saved-posts-guest-form form .wb-login-popup-notice,
.wb-saved-posts-guest-form .ent-back-link,
.wb-saved-posts-guest-form form > .form-group:last-child,
.wb-saved-posts-guest-form #wb-ent-login-form-popup > .mx-2 > .form-group:last-child {
    display: none !important;
}

.wb-saved-posts-guest-form .invalid-feedback {
    display: block;
    margin: 6px 0 0;
    font-size: 14px;
}

/* The login error lands above the Email label (after the hidden notice) */
.wb-saved-posts-guest-form .wb-login-popup-notice + .invalid-feedback {
    margin: 0 0 12px;
}

.wb-saved-posts-guest-form .form-group + .form-group {
    margin-top: 16px;
}

.wb-saved-posts-guest-form .wb-ent-form-label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 0;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 16px stops iOS zooming on focus */
.wb-saved-posts-guest-form .form-control.wb-ent-form-field {
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #CED4DA;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: none;
}

.wb-saved-posts-guest-form .form-control.wb-ent-form-field:focus {
    border-color: var(--wb-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-primary) 20%, transparent);
    outline: 0;
}

.wb-saved-posts-guest-form .form-control.wb-ent-form-field.is-invalid,
.wb-saved-posts-guest-form .form-control.wb-ent-form-field.is-invalid:focus {
    border-color: #DC3545;
}

.wb-saved-posts-guest-form .form-control.wb-ent-form-field.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .2);
}

.wb-saved-posts-guest-form #wb-ent-forgot-password {
    display: block;
    margin: 12px 0 0 !important;
    color: var(--wb-link);
    font-size: 14px;
    line-height: 1.4;
    text-align: right;
}

.wb-saved-posts-guest-form #wb-ent-login-submit {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 20px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1;
}

/* Optional site copy the skin may print (wb_ent_login_description, wb_ent_login_btn_text) */
.wb-saved-posts-guest-form .wb-ent-register-email-text {
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.wb-saved-posts-guest-form .wb-ent-terms-conditions {
    margin: 12px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* SSO branch: no <form>, just the notice and the Log In link (the notice carries inline styles) */
.wb-saved-posts-guest-form #wb-ent-login-form-popup > .mx-2 > .wb-login-popup-notice {
    margin: 0 0 16px !important;
    color: #212529 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.wb-saved-posts-guest-form #wb-ent-login-form-popup > .mx-2 > .btn {
    display: block;
    width: 100%;
    padding: 0 16px;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 46px;
    text-align: center;
}

/* ---------------------------------------------------------------------
 * Carousels
 * ------------------------------------------------------------------ */

.wb-saved-posts-guest-carousels {
    margin-top: 8px;
}

/* ---------------------------------------------------------------------
 * Breakpoints
 * ------------------------------------------------------------------ */

/* With a right-rail banner the content column is too narrow for two columns */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .wb-ent-has-banner .wb-saved-posts-guest-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "intro"
            "form"
            "register";
    }
}

/* Single column: intro, form, then the register line */
@media (max-width: 991.98px) {
    .wb-saved-posts-guest-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "intro"
            "form"
            "register";
        row-gap: 20px;
        padding: 32px;
    }
}

@media (max-width: 767px) {
    .wb-saved-posts-guest-panel {
        margin-bottom: 24px;
        padding: 20px 16px;
    }

    .wb-saved-posts-guest-badge {
        margin-bottom: 12px;
    }

    .wb-saved-posts-guest-intro h2 {
        margin-bottom: 8px;
        font-size: 22px;
    }

    .wb-saved-posts-guest-register {
        text-align: center;
    }

    /* The carousel adds 20px gutters of its own on top of the section's 1rem phone gutters */
    .wb-saved-posts-guest-carousels .carousel-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}