/**
 * WooPlus Auth — Split shell (v2.22.1).
 *
 * Loaded LAST in the auth CSS chain so its rules win over auth-frontend.css
 * and auth-frontend-tabs.css where selectors collide.
 *
 * What this file owns:
 *   1. The two-column shell layout (.wpu-auth-shell + .wpu-auth-visual + .wpu-auth-card)
 *   2. The visual hero panel (image clipping, overlays, dark-mode behaviour)
 *   3. A polished tab strip that reads as folder tabs sitting on the panel
 *   4. Header/typography refinements inside the card
 *   5. Responsive collapse: split on desktop → banner on tablet → form-only on phone
 *
 * What it does NOT touch:
 *   - Input/button base styles (those live in auth-frontend.css)
 *   - Tab-panel bodies (those live under templates/tabs/*.php and the original CSS)
 *   - JS hooks — every selector the JS reaches for is still emitted by the template
 *
 * Token strategy:
 *   We extend the existing --wpu-auth-* variables with a few new ones for the
 *   visual side. All variables fall back to the centralized DS tokens
 *   (--wooplus-*), so brand-color and dark-mode flow through automatically.
 */

/* ===========================================================================
   Token bridge — extend the existing --wpu-auth-* vocabulary
   =========================================================================== */
.wpu-auth-page,
.wpu-auth-shell,
.wpu-auth-card {
    /* Surface tokens used by the new shell.  We deliberately keep them
       on this scope so the sentinel doesn't bleed into other plugins. */
    --wpu-auth-shell-bg:        var(--wooplus-bg-soft, #F2F0EA);
    --wpu-auth-shell-radius:    14px;
    --wpu-auth-shell-shadow:    0 30px 60px -25px rgba(11, 18, 38, .35),
                                0 10px 25px -10px rgba(11, 18, 38, .18);
    --wpu-auth-shell-border:    var(--wooplus-border, #D6D3CC);

    --wpu-auth-visual-bg:       #0B1226;        /* matches the hero PNG so the
                                                   image edge has no seam */
    --wpu-auth-visual-overlay:  linear-gradient(180deg,
                                  rgba(11,18,38,0) 0%,
                                  rgba(11,18,38,.10) 70%,
                                  rgba(11,18,38,.30) 100%);

    /* Card surface refined: elevated paper feeling vs the page background */
    --wpu-auth-card-pad-x: clamp(20px, 4vw, 44px);
    --wpu-auth-card-pad-y: clamp(28px, 5vw, 56px);
}

/* ===========================================================================
   Page wrapper
   ===========================================================================
   The page wrapper provides:
     - viewport min-height so the shell sits centred on dedicated login pages
     - a soft page background so the elevated card reads
     - graceful fallback when used inside a theme with its own padding
   The split layout's parent .wpu-auth-page--split inherits all of this; the
   simple layout (legacy) keeps the older centred-card behaviour.
   =========================================================================== */
.wpu-auth-page {
    background: var(--wpu-auth-shell-bg);
}

/* v3.2.35 — Force full-width on the wrapper so parent containers
 * (WC's .woocommerce, theme's .container, etc) don't constrain it
 * and push the card off-center. The .wpu-auth-shell inside has its
 * own max-width so we don't overflow on wide screens. */
.wpu-auth-page,
.wpu-auth-page--split,
.wpu-auth-page--lostpassword,
.wpu-auth-page--register {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.wpu-auth-page--split {
    /* Reset the legacy centring so the shell gets to fill its container */
    padding: clamp(20px, 5vh, 64px) clamp(16px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================================================
   Shell — the two-column container
   =========================================================================== */
.wpu-auth-shell {
    /* Reasonable max so on huge displays the card doesn't stretch unreadably */
    width: 100%;
    max-width: 1080px;

    /* Grid keeps two equal columns; gap=0 because the visual sits flush with
       the card, separated only by a hairline border on the card side. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;

    background: var(--wooplus-surface, #FFFFFF);
    border: 1px solid var(--wpu-auth-shell-border);
    border-radius: var(--wpu-auth-shell-radius);
    box-shadow: var(--wpu-auth-shell-shadow);
    overflow: hidden;       /* clip the hero image to the rounded corner */
    isolation: isolate;     /* contain blends/overlays */

    min-height: 620px;      /* keeps the visual side from collapsing on
                               short content; phones override this below */
}

/* ===========================================================================
   Visual hero panel
   ===========================================================================
   - The hero image is hosted in a frame so we can object-fit-cover it
     to whatever aspect ratio the shell has at any breakpoint.
   - A subtle overlay sits on top to anchor the image into the dark
     palette and to provide contrast for any future overlaid text.
   =========================================================================== */
.wpu-auth-visual {
    position: relative;
    background: var(--wpu-auth-visual-bg);
    /* Fill the full grid cell on every axis */
    display: block;
    min-height: 100%;
    overflow: hidden;
}

.wpu-auth-visual-frame {
    position: absolute;
    inset: 0;
}

.wpu-auth-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slight kenburns-style slow drift, optional. Disabled in
       prefers-reduced-motion. */
    transform: scale(1.02);
    transition: transform 12s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

/* v2.22.1 — admin-selectable fit. `contain` letter-boxes the image so a
   logo-style or composition-sensitive hero isn't cropped. We also lock
   the kenburns drift in `contain` mode because scaling a contained image
   visually pushes it off the panel edges. */
.wpu-auth-visual[data-fit="contain"] .wpu-auth-visual-img {
    object-fit: contain;
    transform: none;
}
.wpu-auth-shell:hover .wpu-auth-visual[data-fit="contain"] .wpu-auth-visual-img,
.wpu-auth-shell:focus-within .wpu-auth-visual[data-fit="contain"] .wpu-auth-visual-img {
    transform: none;
}

.wpu-auth-shell:hover .wpu-auth-visual-img,
.wpu-auth-shell:focus-within .wpu-auth-visual-img {
    transform: scale(1.06);
}

.wpu-auth-visual-overlay {
    position: absolute;
    inset: 0;
    background: var(--wpu-auth-visual-overlay);
    pointer-events: none;
}

/* ===========================================================================
   Form panel — extend the existing .wpu-auth-card
   =========================================================================== */
.wpu-auth-shell > .wpu-auth-card {
    /* Inside the shell we don't want a second border or shadow — the shell
       owns those. We also override the centred max-width from the legacy
       card so the form fills its column.                                    */
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: var(--wooplus-surface, #FFFFFF);
    padding: var(--wpu-auth-card-pad-y) var(--wpu-auth-card-pad-x);

    /* Legacy auth-frontend.css caps .wpu-auth-card at max-width: 440px
       (centred-card behaviour). Inside the shell the card IS one half of
       a wider layout, so the cap is wrong here.                             */
    max-width: none;
    width: 100%;
    margin: 0;

    /* The card aligns content on a vertical rhythm. Setting min-width:0
       prevents a long field (e.g. an email autocomplete dropdown) from
       blowing out the grid track.                                           */
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* The simple-layout card (no shell wrapper) keeps its own max-width so it
   centres nicely in legacy contexts. */
.wpu-auth-page--simple .wpu-auth-card {
    max-width: 460px;
    margin-inline: auto;
}

/* ===========================================================================
   Card header refinements
   ===========================================================================
   The original auth-frontend.css uses .wpu-auth-title at 24px / 700 — we
   bump it up inside the split layout because we have more horizontal room
   and we want the headline to anchor the panel.
   =========================================================================== */
.wpu-auth-shell .wpu-auth-card-header {
    text-align: start;          /* RTL → right; LTR → left */
    margin-bottom: 8px;         /* gap on .wpu-auth-card handles the rest */
}

.wpu-auth-shell .wpu-auth-logo {
    margin-bottom: 14px;
}

.wpu-auth-shell .wpu-auth-logo img {
    max-height: 44px;
    max-width: 200px;
    object-fit: contain;
    /* Logos can be bitmap or SVG; force crisp scaling */
    image-rendering: -webkit-optimize-contrast;
}

.wpu-auth-shell .wpu-auth-title {
    margin: 0 0 6px;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--wpu-auth-text);
}

.wpu-auth-shell .wpu-auth-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--wpu-auth-text-mute);
    max-width: 38ch;
}

/* ===========================================================================
   Tab strip — folder-tab feel
   ===========================================================================
   The tabs sit on a neutral track. Active tab pulls a coloured underline
   AND a subtle background that visually "lifts" it. This is sharper and
   more deliberate than a slider pill while still reading as a tab strip.
   =========================================================================== */
.wpu-auth-shell .wpu-auth-tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;            /* never wrap to a second line */
    gap: 4px;
    padding: 4px;
    background: var(--wooplus-bg-soft, #F2F0EA);
    backdrop-filter: none;        /* kill the legacy blur layer */
    -webkit-backdrop-filter: none;
    border: 1px solid var(--wpu-auth-border);
    border-radius: 10px;
    box-shadow: none;             /* kill the legacy gradient shadow */
    margin: 4px 0 6px;
    width: 100%;
    box-sizing: border-box;
}

.wpu-auth-shell .wpu-auth-tab-indicator { display: none; }

.wpu-auth-shell .wpu-auth-tab {
    flex: 1 1 0;                  /* equal share, allowed to shrink to 0 */
    min-width: 0;
    min-height: 42px;             /* ensure room for the icon + padding;
                                     replaces legacy 52px which was over-sized */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--wpu-auth-text-mute);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    transform: none;              /* kill legacy scale(1.02) on active */
    white-space: nowrap;
    overflow-x: hidden;           /* horizontal clip for label ellipsis */
    overflow-y: visible;          /* but never vertically clip the icon */
    text-overflow: ellipsis;
}

.wpu-auth-shell .wpu-auth-tab:hover {
    color: var(--wpu-auth-text);
    background: rgba(255, 255, 255, .55);
}

.wpu-auth-shell .wpu-auth-tab.is-active,
.wpu-auth-shell .wpu-auth-tab[aria-selected="true"] {
    color: var(--wpu-auth-primary);
    background: var(--wooplus-surface, #FFFFFF);
    transform: none;             /* override legacy scale(1.02) */
    box-shadow: 0 1px 2px rgba(11,18,38,.05),
                0 0 0 1px var(--wpu-auth-border);
}

.wpu-auth-shell .wpu-auth-tab.is-active .wpu-auth-tab-icon {
    transform: none;             /* override legacy scale(1.05) */
}

.wpu-auth-shell .wpu-auth-tab-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: currentColor;
}

.wpu-auth-shell .wpu-auth-tab-icon svg {
    width: 100%;
    height: 100%;
}

.wpu-auth-shell .wpu-auth-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Narrow widths: drop labels for 4+ tabs (longest Persian labels like
   "رمز عبور" are ~7 chars and cannot ellipsize gracefully — icon-only is
   the cleaner fallback). The legacy auth-frontend.css does the OPPOSITE
   (hides icons, keeps labels) so we must explicitly re-enable the icon. */
@media (max-width: 540px) {
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="4"] .wpu-auth-tab-label,
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="5"] .wpu-auth-tab-label,
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="6"] .wpu-auth-tab-label {
        display: none;
    }
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="4"] .wpu-auth-tab,
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="5"] .wpu-auth-tab,
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="6"] .wpu-auth-tab {
        flex: 1 1 0;
        padding: 8px 0;
    }
    /* Re-enable icons (legacy rule hides them at <=480px) and bump size
       so they read well as the only signifier for the tab. */
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="4"] .wpu-auth-tab-icon,
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="5"] .wpu-auth-tab-icon,
    .wpu-auth-shell .wpu-auth-tabs[data-tab-count="6"] .wpu-auth-tab-icon {
        display: inline-flex !important;
        width: 20px;
        height: 20px;
    }
}

/* ===========================================================================
   Step panels — small spacing tweaks for the split layout
   =========================================================================== */
.wpu-auth-shell .wpu-auth-step-1 {
    margin-top: 4px;
}
.wpu-auth-shell .wpu-auth-panel-host {
    /* The panel is the content surface; subtle inset keeps it visually
       grouped with the active tab.                                          */
    padding-block: 6px 0;
    min-height: 140px; /* prevents layout jump while a panel is being fetched */
}

/* Skeleton (during AJAX tab fetch) */
.wpu-auth-shell .wpu-auth-panel-skeleton {
    display: grid;
    gap: 12px;
    padding-block: 8px 0;
}
.wpu-auth-shell .wpu-auth-skel-line   { height: 14px; width: 60%; border-radius: 4px; background: var(--wpu-auth-border); animation: wpu-skel 1.2s ease-in-out infinite; }
.wpu-auth-shell .wpu-auth-skel-input  { height: 44px;             border-radius: 4px; background: var(--wpu-auth-border); animation: wpu-skel 1.2s ease-in-out infinite; animation-delay: .1s; }
.wpu-auth-shell .wpu-auth-skel-button { height: 44px; width: 38%; border-radius: 4px; background: var(--wpu-auth-border); animation: wpu-skel 1.2s ease-in-out infinite; animation-delay: .2s; }
@keyframes wpu-skel { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

/* ===========================================================================
   Social provider buttons — tighter and more deliberate inside the split
   =========================================================================== */
.wpu-auth-shell .wpu-auth-social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}

.wpu-auth-shell .wpu-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--wpu-auth-text-mute);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 4px 0;
}
.wpu-auth-shell .wpu-auth-divider::before,
.wpu-auth-shell .wpu-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wpu-auth-border);
}

/* ===========================================================================
   Status / footer
   =========================================================================== */
.wpu-auth-shell .wpu-auth-status:empty { display: none; }

.wpu-auth-shell .wpu-auth-card-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--wpu-auth-border);
    color: var(--wpu-auth-text-mute);
    font-size: 12px;
    line-height: 1.6;
}

/* v2.22.1 — Signup CTA at the bottom of the card on wp-login.php.
   Replaces WP's default #nav links which we hide. Lives INSIDE the
   card so the layout reads as a single unit. */
.wpu-auth-card-signup {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--wpu-auth-border);
    text-align: center;
    font-size: 13px;
    color: var(--wpu-auth-text-mute);
}
.wpu-auth-card-signup span {
    margin-inline-end: 6px;
}
.wpu-auth-card-signup a {
    color: var(--wpu-auth-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
.wpu-auth-card-signup a:hover,
.wpu-auth-card-signup a:focus {
    color: var(--wpu-auth-primary-hover, var(--wpu-auth-primary));
    text-decoration: underline;
}

/* ===========================================================================
   Responsive — the heart of "works on every screen"
   ===========================================================================
   Breakpoint plan:
     ≥ 980px  →  full split (form right, hero left in RTL)
     720–980  →  split, hero shrinks; card grows to ~58%
     420–720  →  stacked: hero becomes a top banner ~220px tall
     <  420   →  hero hidden entirely, form-only (fastest path on phones)
   =========================================================================== */
@media (max-width: 980px) {
    .wpu-auth-shell {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        min-height: 580px;
    }
}

@media (max-width: 720px) {
    .wpu-auth-page--split {
        padding: 16px;
    }
    .wpu-auth-shell {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    /* Hero becomes a banner. Order: hero first (top), form second (below). */
    .wpu-auth-shell > .wpu-auth-card { order: 2; }
    .wpu-auth-shell > .wpu-auth-visual {
        order: 1;
        min-height: 200px;
        max-height: 200px;
    }
    .wpu-auth-shell .wpu-auth-card-header { text-align: center; }
    .wpu-auth-shell .wpu-auth-subtitle { margin-inline: auto; }
}

@media (max-width: 480px) {
    .wpu-auth-shell > .wpu-auth-visual {
        min-height: 160px;
        max-height: 160px;
    }
    .wpu-auth-shell > .wpu-auth-card { padding: 22px 18px 20px; }
}

/* Only on very small screens (e.g. iPhone SE 1st gen), drop the hero
   entirely so the form is the fastest path. */
@media (max-width: 360px) {
    .wpu-auth-shell > .wpu-auth-visual { display: none; }
}

/* ===========================================================================
   Reduced-motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wpu-auth-visual-img,
    .wpu-auth-tab,
    .wpu-auth-skel-line,
    .wpu-auth-skel-input,
    .wpu-auth-skel-button {
        transition: none !important;
        animation: none !important;
    }
    .wpu-auth-shell:hover .wpu-auth-visual-img,
    .wpu-auth-shell:focus-within .wpu-auth-visual-img {
        transform: none;
    }
}

/* ===========================================================================
   Dark mode — leverages DS data-theme attribute, no media-query coupling
   ===========================================================================
   The DS controller flips a [data-theme="dark"] attribute on <html>. The
   tokens already swap, but a couple of values below need explicit dark-side
   mappings so the shell reads correctly.
   =========================================================================== */
[data-theme="dark"] .wpu-auth-page--split,
[data-theme="dark"] .wpu-auth-shell,
[data-theme="dark"] .wpu-auth-card {
    --wpu-auth-shell-bg:     #0B1226;
    --wpu-auth-shell-shadow: 0 30px 60px -25px rgba(0,0,0,.7),
                              0 10px 25px -10px rgba(0,0,0,.5);
    --wpu-auth-shell-border: rgba(255,255,255,.08);
    --wpu-auth-visual-overlay: linear-gradient(180deg,
                                  rgba(0,0,0,0) 0%,
                                  rgba(0,0,0,.12) 70%,
                                  rgba(0,0,0,.40) 100%);
}

[data-theme="dark"] .wpu-auth-shell {
    background: var(--wooplus-surface, #14182A);
}
[data-theme="dark"] .wpu-auth-shell > .wpu-auth-card {
    background: var(--wooplus-surface, #14182A);
}
[data-theme="dark"] .wpu-auth-shell .wpu-auth-tabs {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .wpu-auth-shell .wpu-auth-tab.is-active,
[data-theme="dark"] .wpu-auth-shell .wpu-auth-tab[aria-selected="true"] {
    background: rgba(255,255,255,.08);
    box-shadow: 0 1px 2px rgba(0,0,0,.4),
                0 0 0 1px rgba(255,255,255,.08);
}

/* ===========================================================================
   wp-login.php compatibility — body.login is the standalone login template
   ===========================================================================
   When our shell is injected via login_message on wp-login.php, WordPress
   wraps everything inside #login (a 320px wide flex column). We need to
   widen that wrapper so our split shell has room to breathe.

   Scoped to body.login.wpu-auth-active so we only modify the wrapper when
   our markup is actually present (the on_wp_login_body_class adds this
   class only when WooPlus is rendering its card on top of WP).
   =========================================================================== */
/* ===========================================================================
   wp-login.php compatibility — body.login is the standalone login template
   ===========================================================================
   When our shell is injected via login_message on wp-login.php, WordPress
   wraps everything inside #login (a 320px wide flex column). We need to
   widen that wrapper so our split shell has room to breathe, AND we need
   to defeat several legacy CSS layers that fight the grid:
     1. WP core's own login.css            #login { width: 320px; ... }
     2. Auth module's auth-frontend.css    body.login .wpu-auth-page { display:block; min-height:auto }
     3. DS skin's skins/login.css          body.login.wooplus-login-skin .wpu-auth-page { min-height:auto !important; padding:0; bg:none !important }
   The DS skin's rules use !important on background, so we use !important
   on the structural properties we care about (display, grid columns,
   min-height) to outrank them. Specificity is bumped via .wpu-auth-active
   AND a second class to keep us above three-class skin rules.

   We also re-apply the rules unscoped to .wpu-auth-page--split so they
   work even if the body class injection got dropped (defensive against
   plugin update timing where the JS hooks haven't reloaded yet).
   =========================================================================== */
body.login.wpu-auth-active #login,
body.login #login.wpu-auth-active-login {
    width: min(1080px, 92vw) !important;
    max-width: none !important;
    padding: 4vh 0 6vh;
}
/* v2.22.2 — On login + register screens, #login is a vertical flex
   container so the h1 (logo) sits above the card centered. */
body.login.wpu-auth-active:not(.wpu-auth-secondary) #login {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
body.login.wpu-auth-active #login h1 {
    margin: 0 auto 22px !important;
    text-align: center;
    flex-shrink: 0;
}
/* The h1 is followed by the auth shell wrapper (.wpu-auth-page) which
   contains the card. Make sure the wrapper takes the available width. */
body.login.wpu-auth-active:not(.wpu-auth-secondary) #login > .wpu-auth-page {
    width: 100%;
}

/* v2.23.1 — Logo + site title at the TOP of the auth card.
 *
 * v2.22.2 had hidden `.wpu-auth-logo` and `.wpu-auth-title` inside the
 * card on wp-login.php to avoid duplication with the WP-default h1
 * logo above the card. v2.23.0 lifted the WP h1 above the shell. The
 * merchant feedback for v2.23.1: they want the configured logo +
 * "WooPlus | smarter than ever" site title visible AT THE TOP OF THE
 * CARD itself, properly sized to the card width.
 *
 * Resolution:
 *   - Re-show .wpu-auth-logo inside the card (override the v2.22.2 hide).
 *   - Re-show .wpu-auth-title inside the card.
 *   - Hide WP's native h1 above the shell (it duplicated the in-card
 *     logo and wasn't sized consistently).
 *   - Constrain logo size so it doesn't overwhelm the card.
 */
body.login.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-logo,
body.login.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-title {
    display: block !important;
}
body.login.wpu-auth-active #login > h1 {
    display: none !important;
}
.wpu-auth-card .wpu-auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.wpu-auth-card .wpu-auth-logo img {
    max-width: 96px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.wpu-auth-card .wpu-auth-card-header {
    text-align: center;
    margin-bottom: 24px;
}
.wpu-auth-card .wpu-auth-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--wooplus-text, #1B254B);
    margin: 0 0 6px;
    line-height: 1.3;
}
.wpu-auth-card .wpu-auth-subtitle {
    font-size: 13px;
    color: var(--wooplus-text-mute, #707EAE);
    margin: 0;
    line-height: 1.5;
}

/* Defeat layout-collapsing legacy rules. These rules are intentionally
   over-specific (.wpu-auth-page--split is only emitted by the split
   layout template, never by simple/legacy) so they can't accidentally
   affect the legacy single-column card. */
.wpu-auth-page.wpu-auth-page--split {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
}

/* The shell itself must keep its grid layout. We assert this everywhere
   the split shell renders, not only on wp-login. */
.wpu-auth-page--split .wpu-auth-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    background: var(--wooplus-surface, #FFFFFF) !important;
    overflow: hidden !important;
    border-radius: var(--wpu-auth-shell-radius, 14px) !important;
    box-shadow: var(--wpu-auth-shell-shadow, 0 30px 60px -25px rgba(11,18,38,.35)) !important;
}

/* Inside the shell, the card must NOT be capped by legacy "max-width:
   100%" rules — it must fill its grid cell. */
.wpu-auth-page--split .wpu-auth-shell > .wpu-auth-card {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: var(--wpu-auth-card-pad-y, clamp(28px, 5vw, 56px))
             var(--wpu-auth-card-pad-x, clamp(20px, 4vw, 44px)) !important;
}

/* The visual side must NOT be hidden by any DS rule. */
.wpu-auth-page--split .wpu-auth-shell > .wpu-auth-visual {
    display: block !important;
    min-height: 100% !important;
    background: var(--wpu-auth-visual-bg, #0B1226) !important;
}

/* On viewports below 720px, follow the same banner-top pattern as the
   stand-alone shortcode: hero becomes a banner above the form. */
@media (max-width: 720px) {
    .wpu-auth-page--split .wpu-auth-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .wpu-auth-page--split .wpu-auth-shell > .wpu-auth-card { order: 2 !important; }
    .wpu-auth-page--split .wpu-auth-shell > .wpu-auth-visual {
        order: 1 !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
}

@media (max-width: 360px) {
    .wpu-auth-page--split .wpu-auth-shell > .wpu-auth-visual {
        display: none !important;
    }
}

/* v2.22.1 — Hide WordPress-default chrome around our card on the LOGIN
   action only. On secondary actions (lostpassword, register, resetpass)
   we keep the WP nav/back links because they're useful navigation. */
body.login.wpu-auth-active:not(.wpu-auth-secondary) #nav,
body.login.wpu-auth-active:not(.wpu-auth-secondary) #backtoblog,
body.login.wpu-auth-active:not(.wpu-auth-secondary) .language-switcher,
body.login.wpu-auth-active:not(.wpu-auth-secondary) #loginform,
body.login.wpu-auth-active:not(.wpu-auth-secondary) .wpu-auth-classic-toggle {
    display: none !important;
}

/* v3.2.33 — Defensive sweep: on the LOGIN action only, hide every
   direct child of #login that isn't our shell wrapper (.wpu-auth-page)
   or our logo (h1). Some themes (or extra login_message hookers) inject
   stray paragraphs, register-prompts, or repeated "ورود" links AFTER
   our card, which the merchant pointed out look broken. By hiding all
   non-WooPlus direct children we make the page deterministic. */
body.login.wpu-auth-active:not(.wpu-auth-secondary) #login > *:not(.wpu-auth-page):not(h1):not(.wpu-auth-shell) {
    display: none !important;
}

/* v2.22.2 — On wp-login.php?action=register, hide the WP native register
   form (#registerform) and the "Registration confirmation will be emailed
   to you" message — our [wooplus_auth] card already provides the OTP-based
   signup flow.
   v3.2.34 — Use direct-child selector (`#login > #registerform`) so we
   only hide WP's native form, not our own <form id="registerform"> that
   sits INSIDE the .wpu-auth-card. Pre-3.2.34 the rule used a descendant
   selector that matched both, making our register card render empty. */
body.login.wpu-auth-on-register #login > #registerform,
body.login.wpu-auth-on-register #login > p#reg_passmail,
body.login.wpu-auth-on-register #login > p:has(> #reg_passmail) {
    display: none !important;
}

/* ===========================================================================
   v2.22.2 — Secondary actions (lostpassword, rp/resetpass, register)
   ===========================================================================
   These keep WP's native form. We just turn #login into a 2-column grid
   so the hero panel (injected via login_message) sits next to the form.

   Markup that WP emits (paraphrased):
     <body class="login ... wpu-auth-active wpu-auth-secondary wpu-auth-secondary--lostpassword">
       <div id="login">
         <h1><a>WooPlus</a></h1>                    ← logo (header row)
         {login_message → our hero panel here}
         <p class="message">...</p>                  ← optional notice
         <form id="lostpasswordform">...</form>
         <p id="nav">...</p>
         <p id="backtoblog">...</p>
       </div>

   Layout strategy:
     - #login becomes grid-template-columns: hero | form
     - h1 spans both columns at the top
     - hero panel = 1st column, full height
     - everything else (.message, form, #nav, #backtoblog) = 2nd column,
       stacked vertically inside an implicit flow.
   =========================================================================== */
body.login.wpu-auth-active.wpu-auth-secondary {
    background: var(--wooplus-bg, #f1f1f1);
    min-height: 100vh;
}
body.login.wpu-auth-active.wpu-auth-secondary #login {
    width: min(1080px, 92vw) !important;
    max-width: none !important;
    padding: 4vh 0 6vh;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 0;
    row-gap: 0;
    background: var(--wooplus-surface, #FFFFFF);
    border-radius: var(--wpu-auth-shell-radius, 14px);
    box-shadow: var(--wpu-auth-shell-shadow, 0 30px 60px -25px rgba(11,18,38,.35));
    overflow: hidden;
    margin: 5vh auto;
}
/* Logo (h1) — span both columns, sit at the top of the form column area */
body.login.wpu-auth-active.wpu-auth-secondary #login h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 28px 32px 0;
    text-align: start;
}
body.login.wpu-auth-active.wpu-auth-secondary #login h1 a {
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: var(--wpu-auth-primary, #157a41);
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}
/* Hero panel — left column, full height */
body.login.wpu-auth-active.wpu-auth-secondary .wpu-auth-visual--secondary {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-height: 540px;
    background: var(--wpu-auth-visual-bg, #0B1226);
    position: relative;
    overflow: hidden;
}
body.login.wpu-auth-active.wpu-auth-secondary .wpu-auth-visual--secondary .wpu-auth-visual-frame {
    position: absolute;
    inset: 0;
}
body.login.wpu-auth-active.wpu-auth-secondary .wpu-auth-visual--secondary .wpu-auth-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}
body.login.wpu-auth-active.wpu-auth-secondary .wpu-auth-visual--secondary[data-fit="contain"] .wpu-auth-visual-img {
    object-fit: contain;
}

/* Form area — first column, rows 2+ */
body.login.wpu-auth-active.wpu-auth-secondary #login > p.message,
body.login.wpu-auth-active.wpu-auth-secondary #login > #lostpasswordform,

body.login.wpu-auth-active.wpu-auth-secondary #login > #resetpassform,
body.login.wpu-auth-active.wpu-auth-secondary #login > #nav,
body.login.wpu-auth-active.wpu-auth-secondary #login > #backtoblog {
    grid-column: 1;
    margin-inline: 0;
    padding-inline: 32px;
}
body.login.wpu-auth-active.wpu-auth-secondary #login > p.message {
    grid-row: 2;
    margin: 16px 0 0;
    padding: 14px 16px;
    background: var(--wooplus-surface-2, #f6f3ec);
    border-radius: 8px;
    border-inline-start: 3px solid var(--wpu-auth-primary, #157a41);
    margin-inline: 32px;
}
body.login.wpu-auth-active.wpu-auth-secondary #login > #lostpasswordform,

body.login.wpu-auth-active.wpu-auth-secondary #login > #resetpassform {
    grid-row: 3;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding-block: 24px;
    margin-block: 0;
    align-self: start;
}
/* Style WP native inputs to match our shell */
body.login.wpu-auth-active.wpu-auth-secondary #login input[type="text"],
body.login.wpu-auth-active.wpu-auth-secondary #login input[type="email"],
body.login.wpu-auth-active.wpu-auth-secondary #login input[type="password"] {
    width: 100%;
    border: 1.5px solid var(--wpu-auth-border, #E5DCC9);
    border-radius: var(--wpu-auth-radius, 10px);
    /* چهارمین جای همان تله حالت تیره، این بار روی ورودی های خود wp-login. */
    background: var(--wpu-auth-card-bg, #fff);
    color: var(--wpu-auth-text, #1a1a1a);
    padding: 11px 14px;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.login.wpu-auth-active.wpu-auth-secondary #login input:focus {
    outline: none;
    border-color: var(--wpu-auth-primary, #157a41);
    box-shadow: 0 0 0 3px var(--wpu-auth-primary-soft, rgba(21,122,65,.15));
}
body.login.wpu-auth-active.wpu-auth-secondary #login label {
    color: var(--wpu-auth-text, #1a1a1a);
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}
body.login.wpu-auth-active.wpu-auth-secondary #login .submit,
body.login.wpu-auth-active.wpu-auth-secondary #login p.submit {
    text-align: end;
    margin-top: 16px;
}
body.login.wpu-auth-active.wpu-auth-secondary #login .button-primary,
body.login.wpu-auth-active.wpu-auth-secondary #login input[type="submit"] {
    background: var(--wpu-auth-primary, #157a41) !important;
    border-color: var(--wpu-auth-primary, #157a41) !important;
    color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 11px 22px !important;
    border-radius: var(--wpu-auth-radius, 10px) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    height: auto !important;
    line-height: 1.3 !important;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
body.login.wpu-auth-active.wpu-auth-secondary #login .button-primary:hover,
body.login.wpu-auth-active.wpu-auth-secondary #login input[type="submit"]:hover {
    background: var(--wpu-auth-primary-hover, #4f52d6) !important;
    border-color: var(--wpu-auth-primary-hover, #4f52d6) !important;
}
/* Page heading under WP form (e.g. "Get New Password" — actually rendered
   above the form via login_message; we restyle if WP injects it) */
body.login.wpu-auth-active.wpu-auth-secondary #login h2 {
    grid-column: 1;
    margin: 24px 32px 8px;
    font-size: 20px;
    color: var(--wpu-auth-text, #1a1a1a);
}

/* Nav links (back to login, etc.) */
body.login.wpu-auth-active.wpu-auth-secondary #login > #nav,
body.login.wpu-auth-active.wpu-auth-secondary #login > #backtoblog {
    grid-row: auto;
    margin: 8px 0 0;
    padding: 8px 32px;
    text-align: start;
    font-size: 13px;
    color: var(--wpu-auth-text-mute, #6b7280);
}
body.login.wpu-auth-active.wpu-auth-secondary #login > #nav { grid-row: 4; padding-top: 16px; }
body.login.wpu-auth-active.wpu-auth-secondary #login > #backtoblog {
    grid-row: 5;
    padding-bottom: 28px;
}
body.login.wpu-auth-active.wpu-auth-secondary #login a {
    color: var(--wpu-auth-primary, #157a41);
    text-decoration: none;
}
body.login.wpu-auth-active.wpu-auth-secondary #login a:hover {
    text-decoration: underline;
}

/* Privacy policy link, language switcher etc. — keep them visible at
   the very bottom but lift outside the grid card. */
body.login.wpu-auth-active.wpu-auth-secondary .privacy-policy-page-link,
body.login.wpu-auth-active.wpu-auth-secondary .language-switcher {
    text-align: center;
    margin-top: 20px;
    padding: 0 16px;
    font-size: 12px;
    color: var(--wpu-auth-text-mute, #6b7280);
}

/* Responsive: stack to single column under 720px */
@media (max-width: 720px) {
    body.login.wpu-auth-active.wpu-auth-secondary #login {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto;
    }
    body.login.wpu-auth-active.wpu-auth-secondary .wpu-auth-visual--secondary {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 200px;
        max-height: 200px;
    }
    body.login.wpu-auth-active.wpu-auth-secondary #login h1 {
        grid-column: 1;
        grid-row: 2;
        padding: 24px 24px 0;
    }
    body.login.wpu-auth-active.wpu-auth-secondary #login > p.message,
    body.login.wpu-auth-active.wpu-auth-secondary #login > #lostpasswordform,
    
    body.login.wpu-auth-active.wpu-auth-secondary #login > #resetpassform,
    body.login.wpu-auth-active.wpu-auth-secondary #login > #nav,
    body.login.wpu-auth-active.wpu-auth-secondary #login > #backtoblog {
        padding-inline: 24px;
    }
}
@media (max-width: 360px) {
    body.login.wpu-auth-active.wpu-auth-secondary .wpu-auth-visual--secondary {
        display: none !important;
    }
}

/* Hide the DS-injected brand panel if it slipped through (it shouldn't,
   we gate it server-side, but defense in depth). */
body.login.wpu-auth-active .wooplus-login-brand,
body.login.wpu-auth-active .wooplus-login-brand__pattern,
body.login.wpu-auth-active .wooplus-login-brand__logo {
    display: none !important;
}

/* If the DS body class is still present (e.g. cache, deploy lag), neutralize
   the page-level decorations the DS skin paints around #login. */
body.login.wooplus-login-skin.wpu-auth-active {
    background: var(--wooplus-bg, #f1f1f1) !important;
}
body.login.wooplus-login-skin.wpu-auth-active::before,
body.login.wooplus-login-skin.wpu-auth-active::after {
    display: none !important;
    content: none !important;
}

/* ===========================================================================
 * v2.23.0 — Custom lostpassword + register cards
 * ===========================================================================
 * These actions used to fall through to WP's native forms (action=lostpassword
 * showed the bare WP form; action=register showed the OTP shortcode). v2.23.0
 * renders dedicated split-shell cards for both — see render_lostpassword_card()
 * and render_register_card() in class-wooplus-auth-frontend.php.
 *
 * The CSS below:
 *   1. Hides the WP-native forms when our cards take over.
 *   2. Lifts WP's logo (h1) above our shell so the merchant's uploaded
 *      logo (page_logo) sits visually above the card title — the user
 *      asked for "the configured icon to appear above the site title".
 *   3. Polishes the field rows + footer-link styling shared by both
 *      cards so they look consistent with the login card.
 * ========================================================================= */

/* Hide WP-native lostpassword & resetpass forms when our card is rendered.
 * Our new card lives at .wpu-auth-page--lostpassword (rendered via
 * login_message); the WP form (#lostpasswordform) sits later in #login. */
body.login.wpu-auth-on-lostpassword #login > #lostpasswordform,
body.login.wpu-auth-on-lostpassword #login > p#nav,
body.login.wpu-auth-on-lostpassword #login > p#backtoblog,
body.login.wpu-auth-on-lostpassword #login > p.message {
    display: none !important;
}

/* Hide WP-native register form when our card is rendered. */
body.login.wpu-auth-on-register #login > #registerform,
body.login.wpu-auth-on-register #login > p#reg_passmail,
body.login.wpu-auth-on-register #login > p#nav,
body.login.wpu-auth-on-register #login > p#backtoblog {
    display: none !important;
}

/* v2.23.1 — h1 above shell is now FULLY HIDDEN. The site title +
 * configured logo render inside the card header instead, where they
 * sit properly sized within the card boundaries (see rules above for
 * .wpu-auth-card .wpu-auth-logo / .wpu-auth-title). The previous v2.23.0
 * approach of lifting the WP h1 above the shell looked unbalanced on
 * wide viewports and was inconsistent with the merchant's mental model
 * of "logo at the top of the form". */

/* Form field rows on register card */
.wpu-auth-card .wpu-auth-field-row {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wpu-auth-card .wpu-auth-field-row .wpu-auth-input {
    width: 100%;
    box-sizing: border-box;
    /* v3.2.36 — Make sure the input is comfortably tall and uses the
     * full column width even when nested deep in WC/elementor wrappers. */
    min-height: 42px;
    padding: 8px 12px;
    border: 1.5px solid var(--wpu-auth-border, #E5DCC9);
    border-radius: 8px;
    background: #fff;
    font: inherit;
}
.wpu-auth-card .wpu-auth-checkbox-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.wpu-auth-card .wpu-auth-checkbox-label input[type="checkbox"] {
    width: auto !important;
    margin: 0;
}
.wpu-auth-required {
    color: var(--wpu-auth-primary, #157a41);
    margin-inline-start: 4px;
    font-weight: 700;
}

/* v3.2.36 — Force a usable min-width on the register card column so
 * inputs never end up under 280px wide (which they did on wp-login.php
 * iPad landscape inside the split-shell's 50% column). */
.wpu-auth-page--register .wpu-auth-shell > .wpu-auth-card {
    min-width: 320px;
}
@media (min-width: 768px) {
    .wpu-auth-page--register .wpu-auth-shell > .wpu-auth-card {
        min-width: 420px;
    }
}

/* Lostpassword card extras */
.wpu-auth-page--lostpassword .wpu-auth-lostpw-form,
.wpu-auth-page--register .wpu-auth-register-form {
    display: flex;
    flex-direction: column;
}
.wpu-auth-page--lostpassword .wpu-auth-submit,
.wpu-auth-page--register .wpu-auth-submit {
    margin-top: 8px;
}
.wpu-auth-card-footer--links {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--wooplus-divider, #e9edf7);
    font-size: 13px;
    color: var(--wooplus-text-mute, #707EAE);
}
.wpu-auth-card-footer--links .wpu-auth-link {
    color: var(--wpu-auth-primary, #157a41);
    font-weight: 600;
    text-decoration: none;
}
.wpu-auth-card-footer--links .wpu-auth-link:hover {
    text-decoration: underline;
}

.wpu-auth-register-note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--wooplus-text-mute, #707EAE);
    text-align: center;
}

/* Two-column layout for register name fields when the screen has room.
 * Targets .wpu-auth-field-row with name="first_name" and "last_name"
 * specifically — using :has() so we don't touch other field rows.
 * v3.2.35 — Only apply when the form has room (≥880px). Below that
 * the form is in a single-column shell where 2-col grid squishes
 * the inputs. Also explicitly disable when parent shell is in
 * .wpu-auth-page--split (wp-login.php) since the form sits in a
 * 50%-width column, halving the usable space again. */
@media (min-width: 880px) {
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > button,
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > .wpu-auth-register-note,
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > input[type="hidden"] {
        grid-column: 1 / -1;
    }
    /* user_login + email rows always span full width because they are
     * mandatory and visually anchor the form. */
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > .wpu-auth-field-row:has(input[name="user_login"]),
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > .wpu-auth-field-row:has(input[name="user_email"]),
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > .wpu-auth-field-row:has(input[name="billing_address_1"]),
    .wpu-auth-page:not(.wpu-auth-page--split) .wpu-auth-card .wpu-auth-register-form > .wpu-auth-field-row:has(input[name="billing_company"]) {
        grid-column: 1 / -1;
    }
}

/* v3.2.35 — In split-shell mode, force every register-form row to
 * single column. The previous @media query had this implicit but the
 * cascade allowed the inherited grid from an older rule version to
 * leak through when the user upgraded mid-session. */
.wpu-auth-page--split .wpu-auth-card .wpu-auth-register-form {
    display: flex !important;
    flex-direction: column !important;
}
.wpu-auth-page--split .wpu-auth-card .wpu-auth-register-form > * {
    grid-column: unset !important;
    width: 100%;
}

/* ===========================================================================
 * v2.23.2 — Bulletproof brand block (HIGHEST PRIORITY in this file)
 * ===========================================================================
 *
 * The ".wpu-auth-brand" container always renders the merchant's uploaded
 * logo + the site title at the top of the auth card. v2.23.0/v2.23.1
 * tried to do this but the rules were gated to body.login.wpu-auth-active
 * (wp-login.php only) — on a custom WordPress page using [wooplus_auth]
 * shortcode, those gates didn't fire and the title/logo could be hidden
 * by the active theme's CSS.
 *
 * v2.23.2 strategy:
 *   1. Use HIGH specificity (no !important spam — instead use selectors
 *      that themes are unlikely to override).
 *   2. Apply rules unconditionally (work on wp-login.php AND custom pages).
 *   3. Force min-height + visibility so even if theme CSS sets opacity/
 *      visibility, the block still renders.
 *   4. Force display so theme CSS targeting generic h1/img inside
 *      .wpu-auth-card can't hide the brand title.
 *   5. Cap logo dimensions to 56–96px height range so logos of any size
 *      look balanced in the card.
 * ========================================================================= */

/* The brand container itself — always visible, with adequate spacing */
.wpu-auth-card > .wpu-auth-brand,
.wpu-auth-shell .wpu-auth-card > .wpu-auth-brand,
.wpu-auth-page .wpu-auth-card > .wpu-auth-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--wooplus-divider, rgba(15, 23, 42, .08)) !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Logo — moderate sizing, never overwhelms the card */
.wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-logo,
.wpu-auth-shell .wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    max-height: 80px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-logo > img,
.wpu-auth-shell .wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-logo > img {
    max-height: 64px !important;
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    image-rendering: -webkit-optimize-contrast;
    /* Reset theme-injected filters/transforms */
    filter: none !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Site title — large, bold, unmissable */
.wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-title,
.wpu-auth-shell .wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-title,
h1.wpu-auth-brand-title,
h2.wpu-auth-brand-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: clamp(18px, 2.4vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
    color: var(--wooplus-text, var(--wpu-auth-text, #1B254B)) !important;
    text-align: center !important;
    /* Reset themes that hide h1/h2 inside cards */
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-indent: 0 !important;
    background: transparent !important;
    text-shadow: none !important;
    text-decoration: none !important;
    /* Fallback font stack with Vazirmatn first */
    font-family: var(--wooplus-font-body, "Vazirmatn", system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif) !important;
}

/* Subtitle */
.wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-subtitle,
.wpu-auth-shell .wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--wooplus-text-mute, var(--wpu-auth-text-mute, #707EAE)) !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* Hide WP-default h1 logo on wp-login.php — the brand block inside the
 * card replaces it. */
body.login.wpu-auth-active #login > h1 {
    display: none !important;
}

/* Old hide rules that broke the brand on wp-login.php — neutralized.
 * Just covering ourselves: any future v2.22.x style rule attempting to
 * hide .wpu-auth-logo or .wpu-auth-title inside the card is overridden
 * by the higher-specificity rules above. */

/* Responsive: smaller logo on phones */
@media (max-width: 480px) {
    .wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-logo > img {
        max-height: 48px !important;
        max-width: 160px !important;
    }
    .wpu-auth-card > .wpu-auth-brand > .wpu-auth-brand-title {
        font-size: 18px !important;
    }
}

/* ===========================================================================
 * v2.23.3 — Reinforced brand block rules
 * ===========================================================================
 * The user reported that the brand wrapper renders in DOM but children
 * aren't visible. Possible causes:
 *   - Direct-child combinator (>) didn't match because of theme HTML wrapping
 *   - Theme CSS hiding inner h1/img with higher specificity
 * Solution: descendant selectors (no > requirement) with even more
 * `!important` props. These rules are placed at file end so they win
 * cascade order regardless of source order.
 * ========================================================================= */

/* Wrapper — descendant-based selectors without > combinator */
.wpu-auth-brand,
.wpu-auth-card-header.wpu-auth-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 20px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid var(--wooplus-divider, rgba(15, 23, 42, .08)) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Logo container */
.wpu-auth-brand .wpu-auth-brand-logo,
.wpu-auth-brand-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: 80px !important;
}

/* Logo image */
.wpu-auth-brand .wpu-auth-brand-logo img,
.wpu-auth-brand-logo img,
.wpu-auth-brand img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 64px !important;
    max-width: 200px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Site title — most aggressive selectors */
.wpu-auth-brand .wpu-auth-brand-title,
.wpu-auth-brand-title,
.wpu-auth-brand h1,
.wpu-auth-brand h2,
h1.wpu-auth-brand-title,
h2.wpu-auth-brand-title,
h1.wpu-auth-title.wpu-auth-brand-title,
h2.wpu-auth-title.wpu-auth-brand-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
    color: var(--wooplus-text, var(--wpu-auth-text, #1B254B)) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    text-indent: 0 !important;
    background: transparent !important;
    background-image: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    font-family: var(--wooplus-font-body, "Vazirmatn", system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif) !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Defeat any theme rule that hid h1 via clip-path or transform */
    clip-path: none !important;
    transform: none !important;
}

/* Subtitle */
.wpu-auth-brand .wpu-auth-brand-subtitle,
.wpu-auth-brand-subtitle,
.wpu-auth-brand p.wpu-auth-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--wooplus-text-mute, var(--wpu-auth-text-mute, #707EAE)) !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    text-shadow: none !important;
    font-family: var(--wooplus-font-body, "Vazirmatn", system-ui, sans-serif) !important;
}

/* Mobile sizing */
@media (max-width: 480px) {
    .wpu-auth-brand .wpu-auth-brand-logo img,
    .wpu-auth-brand-logo img,
    .wpu-auth-brand img {
        max-height: 48px !important;
        max-width: 160px !important;
    }
    .wpu-auth-brand .wpu-auth-brand-title,
    .wpu-auth-brand-title {
        font-size: 18px !important;
    }
}

/* ===================================================================
 * v2.24.3 — Hide theme chrome on WC my-account auth endpoints.
 *
 * On WC's `/my-account/lost-password/` and `/my-account/customer-login/`,
 * the theme renders its own site-header (with site title) and page-header
 * (with .entry-title showing "فراموشی گذرواژه" or similar). These compete
 * visually with the auth card's own brand title ("WooPlus") and headline
 * ("بازیابی رمز عبور"), creating duplicate stacked titles.
 *
 * Strategy: when the body has BOTH `wpu-auth-active` AND a WC auth page
 * marker, hide the theme's structural chrome. Leaves the actual auth
 * card untouched, leaves other my-account pages (orders, downloads)
 * with their normal theme chrome.
 *
 * Specificity is high enough to override common themes (Hello Elementor,
 * Storefront, Astra, Twenty-Twenty-Whatever) without !important wars.
 * Filter `wooplus_auth_hide_theme_chrome` lets devs opt out.
 * =================================================================== */
body.wpu-auth-active.woocommerce-lost-password #site-header,
body.wpu-auth-active.woocommerce-lost-password .page-header,
body.wpu-auth-active.woocommerce-lost-password .entry-title,
body.wpu-auth-active.woocommerce-lost-password #site-footer,
body.wpu-auth-active.wpu-auth-on-lostpassword #site-header,
body.wpu-auth-active.wpu-auth-on-lostpassword .page-header,
body.wpu-auth-active.wpu-auth-on-lostpassword .entry-title,
body.wpu-auth-active.wpu-auth-on-lostpassword #site-footer,
body.wpu-auth-active.wpu-auth-on-register #site-header,
body.wpu-auth-active.wpu-auth-on-register .page-header,
body.wpu-auth-active.wpu-auth-on-register .entry-title,
body.wpu-auth-active.wpu-auth-on-register #site-footer {
    display: none !important;
}

/* Tighten main content padding so the card sits centered without the
 * removed header/footer leaving awkward whitespace. */
body.wpu-auth-active.woocommerce-lost-password #content,
body.wpu-auth-active.wpu-auth-on-lostpassword #content,
body.wpu-auth-active.wpu-auth-on-register #content,
body.wpu-auth-active.woocommerce-lost-password main.site-main,
body.wpu-auth-active.wpu-auth-on-lostpassword main.site-main,
body.wpu-auth-active.wpu-auth-on-register main.site-main {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Also handle the customer-login endpoint (when not logged in). The
 * body class on that page is `woocommerce-account` without the
 * `-lost-password`/`-dashboard` modifiers, so we gate via our own
 * `wpu-auth-active` + `wpu-auth-ready` combo (added in v2.24.2 by
 * wc_account_body_class). */
body.wpu-auth-active.wpu-auth-ready.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) #site-header,
body.wpu-auth-active.wpu-auth-ready.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) .page-header,
body.wpu-auth-active.wpu-auth-ready.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) .entry-title,
body.wpu-auth-active.wpu-auth-ready.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) #site-footer {
    display: none !important;
}

/* ===================================================================
 * v2.24.4 — Polish pass on /lost-password/, /customer-login/, /register/
 *
 * Five merchant complaints from v2.24.3 production install resolved as
 * one CSS block + matching server-side error capture in
 * class-wooplus-auth-frontend.php:
 *
 *   1. Logo from Settings → آیکون ورود سفارشی not appearing on the
 *      auth card → handled in resolve_logo_url() PHP-side; CSS adds
 *      consistent sizing for the brand-block logo.
 *   2. Card visually drifted to the right edge instead of centred →
 *      strengthen .wpu-auth-shell margin-inline:auto with !important
 *      and lock parent flex-centring against theme dir-flip quirks.
 *   3. Title and body copy inside the card too large (Hello Elementor
 *      sets <h1> to 36px+ which leaks through our clamp) → tighten
 *      typography with !important guards.
 *   4. Login/lostpassword errors rendering OUTSIDE/BELOW the card via
 *      .woocommerce-notices-wrapper → hide them out of the auth flow
 *      and rely on the in-card .wpu-auth-status block.
 *   5. Brand-block subtitle two-line collapse on narrow viewports
 *      reflowed awkwardly → set explicit line-height.
 *
 * Specificity strategy: gate every rule on body.wpu-auth-active so we
 * never bleed into non-auth pages. !important is used for theme-bleed
 * defence (auth shell is a closed surface; merchants do not customise
 * inner typography there).
 * =================================================================== */

/* --- 2.4.4-A: Lock the shell to centre regardless of theme direction
 *              context. flex+margin-inline:auto belt-and-braces. */
body.wpu-auth-active .wpu-auth-page--split {
    display: flex !important;
    flex-direction: row !important;       /* row keeps centring stable in RTL */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.wpu-auth-active .wpu-auth-page--split > .wpu-auth-shell,
body.wpu-auth-active .wpu-auth-shell {
    margin-inline: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 2.4.4-B: Tighten typography inside the card. clamp() ranges
 *              reduced; !important guards keep theme h1/p/label
 *              defaults out (Hello Elementor / Astra / Twenty-Twenty
 *              all set h1 to a much larger size). */
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-title,
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card h1.wpu-auth-title {
    font-size: clamp(16px, 1.6vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
    letter-spacing: -.01em !important;
}
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-subtitle,
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card p.wpu-auth-subtitle {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    color: var(--wpu-auth-text-mute, #6b7280) !important;
    font-weight: 400 !important;
}
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-subtitle strong {
    font-weight: 700 !important;
    color: var(--wpu-auth-text, #111827) !important;
    font-size: 14px !important;
    display: inline-block;
    margin-bottom: 2px;
}
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-label,
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card label.wpu-auth-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-input {
    font-size: 14px !important;
    padding: 12px 14px !important;
    line-height: 1.4 !important;
}
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-btn,
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card button.wpu-auth-submit {
    font-size: 14px !important;
    padding: 12px 18px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

/* --- 2.4.4-C: Brand-block logo sizing (smaller, polished). */
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-brand .wpu-auth-logo,
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-brand-logo {
    margin: 0 0 10px !important;
}
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-brand .wpu-auth-logo img,
body.wpu-auth-active .wpu-auth-shell .wpu-auth-card .wpu-auth-brand-logo img {
    max-height: 38px !important;
    max-width: 180px !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
    object-fit: contain !important;
}

/* --- 2.4.4-D: Hide WC notices appearing OUTSIDE the auth card.
 *              On lost-password / customer-login pages, WooCommerce
 *              prints notices via .woocommerce-notices-wrapper either
 *              above the page panel or via the storefront flash slot.
 *              We render the same errors inside the card via
 *              .wpu-auth-status, so the outer block is duplicate noise. */
body.wpu-auth-active.woocommerce-lost-password .woocommerce-notices-wrapper,
body.wpu-auth-active.wpu-auth-on-lostpassword .woocommerce-notices-wrapper,
body.wpu-auth-active.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) .woocommerce-notices-wrapper,
body.wpu-auth-active.woocommerce-lost-password ul.woocommerce-error,
body.wpu-auth-active.wpu-auth-on-lostpassword ul.woocommerce-error,
body.wpu-auth-active.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) ul.woocommerce-error,
body.wpu-auth-active.woocommerce-lost-password .woocommerce-error,
body.wpu-auth-active.wpu-auth-on-lostpassword .woocommerce-error,
body.wpu-auth-active.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) .woocommerce-error,
body.wpu-auth-active.woocommerce-lost-password .woocommerce-message,
body.wpu-auth-active.wpu-auth-on-lostpassword .woocommerce-message,
body.wpu-auth-active.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) .woocommerce-message {
    display: none !important;
}
/* Re-enable WC notice slot ONLY when our in-card status block has been
 * cloned into it server-side (added by render_lostpassword_card +
 * render_login_card via the wpu-auth-status-pinned class). */
body.wpu-auth-active .wpu-auth-card .wpu-auth-status.wpu-auth-status-pinned {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    background: rgba(220, 38, 38, .08) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(220, 38, 38, .25) !important;
}
body.wpu-auth-active .wpu-auth-card .wpu-auth-status.wpu-auth-status-pinned > div {
    margin: 0 !important;
}
body.wpu-auth-active .wpu-auth-card .wpu-auth-status.wpu-auth-status-pinned a {
    color: #991b1b !important;
    text-decoration: underline !important;
}

/* --- 2.4.4-E: Card padding refinement — slightly less generous so the
 *              card reads as "polished" rather than "spacious". */
@media (min-width: 768px) {
    body.wpu-auth-active .wpu-auth-shell > .wpu-auth-card {
        padding: clamp(24px, 3.2vw, 38px) clamp(20px, 3vw, 36px) !important;
        gap: 14px !important;
    }
}

/* ===================================================================
 * v2.24.7 — Comprehensive auth-page chrome and notice suppression
 *
 * Merchant feedback after v2.24.6:
 *   1. Login error "خطا: نام کاربری nsn..." renders OUTSIDE the card,
 *      below it. v2.24.4 fixed this for lost-password and register;
 *      we missed customer-login.
 *   2. The page TITLE "ورود" still leaks at the bottom of the page
 *      from the Hello Elementor / Elementor Pro page-content wrapper
 *      that v2.24.3's chrome-hiding rules don't catch.
 *
 * Strategy: extend the existing rules to also cover
 * `.wpu-auth-on-customer-login` body class (added in v2.24.7) and
 * use broader selectors that catch Elementor Pro's specific page
 * title placement.
 * =================================================================== */

/* --- Hide WC notice slot on the login page (mirror of lostpassword). */
body.wpu-auth-active.wpu-auth-on-customer-login .woocommerce-notices-wrapper,
body.wpu-auth-active.wpu-auth-on-customer-login ul.woocommerce-error,
body.wpu-auth-active.wpu-auth-on-customer-login .woocommerce-error,
body.wpu-auth-active.wpu-auth-on-customer-login .woocommerce-message,
body.wpu-auth-active.wpu-auth-on-customer-login .woocommerce-info,
body.wpu-auth-active.woocommerce-account:not(.logged-in):not(.woocommerce-dashboard) .woocommerce-info {
    display: none !important;
}

/* --- Hide the page title "ورود" / "Log in" wherever the theme places it.
 * Hello Elementor uses `.elementor-heading-title`. Astra uses
 * `.entry-title`. Twenty Twenty-Four uses block H1.
 * The selectors target ONLY trailing/standalone titles by gating on
 * `:not(.wpu-auth-card *)` — i.e. NOT within our card's title element.
 *
 * We also catch any heading whose immediate text is "ورود" / "Log in"
 * via attribute-content matching (limited support, but harmless). */
body.wpu-auth-active.wpu-auth-on-customer-login .elementor-heading-title,
body.wpu-auth-active.wpu-auth-on-customer-login .entry-title,
body.wpu-auth-active.wpu-auth-on-customer-login .page-title,
body.wpu-auth-active.wpu-auth-on-customer-login h1.entry-title,
body.wpu-auth-active.wpu-auth-on-customer-login h1.page-title,
body.wpu-auth-active.wpu-auth-on-lostpassword .elementor-heading-title,
body.wpu-auth-active.wpu-auth-on-lostpassword .entry-title,
body.wpu-auth-active.wpu-auth-on-lostpassword .page-title,
body.wpu-auth-active.wpu-auth-on-lostpassword h1.entry-title,
body.wpu-auth-active.wpu-auth-on-lostpassword h1.page-title {
    display: none !important;
}

/* --- Hide bare standalone <h1>/<h2> that are NOT inside our card.
 * Some themes (Hello Elementor block-edit mode) emit a stray <h1>ورود</h1>
 * as the page title at the bottom of the post content. We hide any
 * standalone H1 that isn't inside our auth shell. */
body.wpu-auth-active.wpu-auth-on-customer-login main > h1,
body.wpu-auth-active.wpu-auth-on-customer-login main > h2,
body.wpu-auth-active.wpu-auth-on-customer-login article > h1,
body.wpu-auth-active.wpu-auth-on-customer-login article > h2,
body.wpu-auth-active.wpu-auth-on-customer-login .elementor-widget-heading:not(.wpu-keep),
body.wpu-auth-active.wpu-auth-on-customer-login .elementor-widget-theme-page-title,
body.wpu-auth-active.wpu-auth-on-customer-login .elementor-widget-post-info,
body.wpu-auth-active.wpu-auth-on-customer-login .elementor-section-wrap > section:first-child .elementor-heading-title {
    display: none !important;
}

/* --- For visual consistency, also hide page footer + anything that
 * shouldn't appear on auth pages. Existing rules cover #site-header,
 * .page-header, .entry-title, #site-footer; we add Elementor-specific
 * selectors. */
body.wpu-auth-active.wpu-auth-on-customer-login [data-elementor-type="header"],
body.wpu-auth-active.wpu-auth-on-customer-login [data-elementor-type="footer"],
body.wpu-auth-active.wpu-auth-on-lostpassword [data-elementor-type="header"],
body.wpu-auth-active.wpu-auth-on-lostpassword [data-elementor-type="footer"] {
    display: none !important;
}

/* --- Re-enable WC error pin INSIDE our card (already styled in v2.24.4
 * block 2.4.4-D, just ensuring the customer-login flow uses it). */
body.wpu-auth-active.wpu-auth-on-customer-login .wpu-auth-card .wpu-auth-status.wpu-auth-status-pinned,
body.wpu-auth-active.wpu-auth-on-customer-login .wpu-auth-card .wpu-auth-status {
    display: block !important;
}