/* ==========================================================================
   WC Account Portal v1.1.0 — Material Design 3
   Font: Outfit | Icons: Material Symbols Rounded
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Root design tokens
   -------------------------------------------------------------------------- */
:root {
    /* --wap-primary and friends are injected via wp_add_inline_style after this file loads
       so they always reflect the user's chosen color from Settings > Appearance */

    --wap-sidebar-w:     280px;
    --wap-radius-sm:     8px;
    --wap-radius-md:     12px;
    --wap-radius-lg:     16px;
    --wap-radius-full:   100px;

    --wap-ease:          cubic-bezier(0.2, 0, 0, 1);
    --wap-dur-s:         150ms;
    --wap-dur-m:         250ms;
    --wap-dur-l:         400ms;

    --wap-elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
    --wap-elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);

    --wap-font:   'Outfit', sans-serif;
    --wap-fs-xs:  0.75rem;
    --wap-fs-sm:  0.875rem;
    --wap-fs-base:1rem;
    --wap-fs-md:  1.125rem;
    --wap-fs-lg:  1.375rem;
    --wap-fs-xl:  1.75rem;
    --wap-fs-2xl: 2.25rem;
    /* Nav color defaults — always derived from --wap-primary so preset change applies instantly */
    --wap-nav-hover:  rgba(var(--wap-primary-rgb, 61,59,243), 0.08);
    --wap-nav-active: rgba(var(--wap-primary-rgb, 61,59,243), 0.13);
    --wap-nav-color:  var(--wap-primary, #3D3BF3);
    --wap-secondary:  #22C55E;
    --wap-secondary-rgb: 34,197,94;
}

/* --------------------------------------------------------------------------
   0b. Root fallbacks — ensure nav items are ALWAYS visible even if the
       mode data-attribute hasn't been set yet (before JS runs).
       These match the dark theme defaults so there's no unstyled flash.
   -------------------------------------------------------------------------- */
:root {
    --wap-bg:         #0f0f13;
    --wap-surface:    #1a1a22;
    --wap-surface-2:  #22222e;
    --wap-surface-3:  #2a2a3a;
    --wap-outline:    rgba(255,255,255,.10);
    --wap-outline-v:  rgba(255,255,255,.05);
    --wap-on-bg:      #e8e8f0;
    --wap-on-s:       #cacacf;  /* nav link text — critical for visibility */
    --wap-on-s2:      #9898a0;
    --wap-on-s3:      #606068;
    --wap-nav-hover:  rgba(61,59,243,.12);
    --wap-nav-active: rgba(61,59,243,.18);
    --wap-nav-color:  #8987f7;
    --wap-input-bg:   #1e1e2a;
    --wap-input-br:   rgba(255,255,255,.15);
    --wap-card-bg:    #1f1f2a;
    --wap-card-br:    rgba(255,255,255,.06);
    --wap-scrollbar:  rgba(255,255,255,.15);
}

/* --------------------------------------------------------------------------
   1. Dark theme
   -------------------------------------------------------------------------- */
[data-wap-mode="dark"],
.wap-mode-dark {
    --wap-bg:         #0f0f13;
    --wap-surface:    #1a1a22;
    --wap-surface-2:  #22222e;
    --wap-surface-3:  #2a2a3a;
    --wap-outline:    rgba(255,255,255,.10);
    --wap-outline-v:  rgba(255,255,255,.05);
    --wap-on-bg:      #e8e8f0;
    --wap-on-s:       #cacacf;
    --wap-on-s2:      #9898a0;
    --wap-on-s3:      #606068;
    --wap-nav-hover:  rgba(var(--wap-primary-rgb),.12);
    --wap-nav-active: rgba(var(--wap-primary-rgb),.18);
    --wap-nav-color:  var(--wap-primary-light);
    --wap-input-bg:   #1e1e2a;
    --wap-input-br:   rgba(255,255,255,.15);
    --wap-card-bg:    #1f1f2a;
    --wap-card-br:    rgba(255,255,255,.06);
    --wap-scrollbar:  rgba(255,255,255,.15);
}

/* --------------------------------------------------------------------------
   2. Light theme
   -------------------------------------------------------------------------- */
[data-wap-mode="light"],
.wap-mode-light {
    --wap-bg:         #f4f4fb;
    --wap-surface:    #ffffff;
    --wap-surface-2:  #f0f0f8;
    --wap-surface-3:  #e6e6f2;
    --wap-outline:    rgba(0,0,0,.09);
    --wap-outline-v:  rgba(0,0,0,.04);
    --wap-on-bg:      #111118;
    --wap-on-s:       #2a2a3a;
    --wap-on-s2:      #606070;
    --wap-on-s3:      #9898a8;
    --wap-nav-hover:  rgba(var(--wap-primary-rgb),.08);
    --wap-nav-active: rgba(var(--wap-primary-rgb),.12);
    --wap-nav-color:  var(--wap-primary-dark);
    --wap-input-bg:   #f8f8ff;
    --wap-input-br:   rgba(0,0,0,.18);
    --wap-card-bg:    #ffffff;
    --wap-card-br:    rgba(0,0,0,.07);
    --wap-scrollbar:  rgba(0,0,0,.15);
}

/* Auto (system) */
@media (prefers-color-scheme: dark) {
    .wap-mode-auto {
        --wap-bg:#0f0f13;--wap-surface:#1a1a22;--wap-surface-2:#22222e;
        --wap-surface-3:#2a2a3a;--wap-outline:rgba(255,255,255,.10);
        --wap-outline-v:rgba(255,255,255,.05);--wap-on-bg:#e8e8f0;
        --wap-on-s:#cacacf;--wap-on-s2:#9898a0;--wap-on-s3:#606068;
        --wap-nav-hover:rgba(var(--wap-primary-rgb),.12);
        --wap-nav-active:rgba(var(--wap-primary-rgb),.18);
        --wap-nav-color:var(--wap-primary-light);
        --wap-input-bg:#1e1e2a;--wap-input-br:rgba(255,255,255,.15);
        --wap-card-bg:#1f1f2a;--wap-card-br:rgba(255,255,255,.06);
        --wap-scrollbar:rgba(255,255,255,.15);
    }
}
@media (prefers-color-scheme: light) {
    .wap-mode-auto {
        --wap-bg:#f4f4fb;--wap-surface:#ffffff;--wap-surface-2:#f0f0f8;
        --wap-surface-3:#e6e6f2;--wap-outline:rgba(0,0,0,.09);
        --wap-outline-v:rgba(0,0,0,.04);--wap-on-bg:#111118;
        --wap-on-s:#2a2a3a;--wap-on-s2:#606070;--wap-on-s3:#9898a8;
        --wap-nav-hover:rgba(var(--wap-primary-rgb),.08);
        --wap-nav-active:rgba(var(--wap-primary-rgb),.12);
        --wap-nav-color:var(--wap-primary-dark);
        --wap-input-bg:#f8f8ff;--wap-input-br:rgba(0,0,0,.18);
        --wap-card-bg:#ffffff;--wap-card-br:rgba(0,0,0,.07);
        --wap-scrollbar:rgba(0,0,0,.15);
    }
}

/* --------------------------------------------------------------------------
   3. Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

.wap-portal-body {
    margin:0;padding:0;
    font-family:var(--wap-font);
    font-size:var(--wap-fs-base);
    line-height:1.6;
    background:var(--wap-bg);
    color:var(--wap-on-bg);
    min-height:100svh;
    overflow-x:hidden;
}

.wap-portal-body ::-webkit-scrollbar{width:4px;height:4px}
.wap-portal-body ::-webkit-scrollbar-track{background:transparent}
.wap-portal-body ::-webkit-scrollbar-thumb{background:var(--wap-scrollbar);border-radius:4px}

/* --------------------------------------------------------------------------
   4. Portal shell (sidebar + content) — logged-in layout
   -------------------------------------------------------------------------- */

/* Sidebar uses CSS logical properties → works in LTR and RTL automatically */
.wap-sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;           /* left in LTR, right in RTL */
    width: var(--wap-sidebar-w);
    height: 100svh;
    background: var(--wap-surface);
    border-inline-end: 1px solid var(--wap-outline); /* right in LTR, left in RTL */
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow-y: auto;
    /* Do NOT use overflow-x:hidden — it clips the sidebar footer content */
    transition: transform var(--wap-dur-l) var(--wap-ease),
                box-shadow var(--wap-dur-l) var(--wap-ease);
}

.wap-content-wrap {
    flex: 1;
    min-width: 0;
    margin-inline-start: var(--wap-sidebar-w); /* left in LTR, right in RTL */
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: var(--wap-bg);
}

/* --------------------------------------------------------------------------
   5. Sidebar header / logo
   -------------------------------------------------------------------------- */
.wap-sidebar-header {
    padding: 28px 0 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wap-logo-link, .wap-site-name-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.wap-logo-img {
    max-width: calc(var(--wap-sidebar-w) - 32px);
    width: 75%;
    height: auto;
    padding-top: 20px;
    object-fit: contain;
    display: block;
    /* Full-quality rendering on all screens */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.wap-site-name-link {
    font-size: var(--wap-fs-lg);
    font-weight: 700;
    color: var(--wap-primary);
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.wap-nav { flex: 1; padding: 4px 12px; }

.wap-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.wap-nav-item { position: relative; }

.wap-portal-body .wap-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--wap-btn-radius);
    color: var(--wap-on-s);
    text-decoration: none;
    font-size: var(--wap-fs-sm);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: background var(--wap-dur-s) var(--wap-ease),
                color var(--wap-dur-s) var(--wap-ease);
}

/* State layer */
.wap-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--wap-dur-s);
    pointer-events: none;
}

.wap-nav-link:hover::before { opacity: 0.07; }
.wap-nav-link:active::before { opacity: 0.12; }
.wap-portal-body .wap-nav-link:hover { background: var(--wap-nav-hover); color: var(--wap-on-s); }

.wap-portal-body .wap-nav-item--active .wap-nav-link {
    background: var(--wap-nav-active);
    color: var(--wap-nav-color);
    font-weight: 600;
}

/* Active indicator — 3px pill on the inner-start edge of the sidebar nav area.
   Placed on the li (not the link) so it's always within the sidebar bounds. */
.wap-nav-item--active {
    position: relative;
}
.wap-nav-item--active::before {
    content: '';
    position: absolute;
    inset-block: 18%;
    inset-inline-start: -8px;   /* sits in the 12px nav padding — always visible */
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--wap-primary);
}
[dir="rtl"] .wap-nav-item--active::before {
    border-radius: 3px 0 0 3px;
}

.wap-nav-icon {
    font-size: 22px;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    transition: font-variation-settings var(--wap-dur-s);
}

.wap-portal-body .wap-nav-item--active .wap-nav-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: var(--wap-nav-color);
}

.wap-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   7. Sidebar footer
   -------------------------------------------------------------------------- */
.wap-sidebar-footer { padding: 16px 16px 24px; flex-shrink: 0; }

.wap-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wap-fs-sm);
    color: var(--wap-on-s2);
    text-decoration: none;
    padding: 6px 4px;
    border-radius: var(--wap-radius-sm);
    transition: color var(--wap-dur-s);
    width: 100%;
}

.wap-back-link .material-symbols-rounded { font-size: 18px; flex-shrink: 0; }
.wap-back-link:hover { color: var(--wap-on-s); }

/* RTL: flip back arrow icon only (the text direction is handled by dir attr) */


/* Desktop theme toggle — matches .wap-back-link style, sits in sidebar footer */
.wap-theme-toggle--desktop {
    /* Identical layout to .wap-back-link — guaranteed to render correctly */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--wap-on-s2);
    font-family: var(--wap-font);
    font-size: var(--wap-fs-sm);
    font-weight: 500;
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
    transition: color var(--wap-dur-s);
    /* User-specified centering offset */
    position: relative;
    left: 15%;
}
.wap-theme-toggle--desktop:hover { color: var(--wap-on-s); }
.wap-theme-toggle--desktop .material-symbols-rounded { font-size: 18px; flex-shrink: 0; }
.wap-toggle-label { white-space: nowrap; }

/* Reset the offset on mobile — drawer uses same class via sidebar */
@media (max-width: 768px) {
    .wap-theme-toggle--desktop { position: static; left: auto; }
}

.wap-sidebar-divider { height: 1px; background: var(--wap-outline); margin: 14px 0; }

/* User row */
.wap-user-row { display: flex; align-items: center; gap: 10px; }

.wap-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wap-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wap-fs-sm);
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.wap-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.wap-user-name {
    font-size: var(--wap-fs-sm);
    font-weight: 600;
    color: var(--wap-on-s);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wap-user-email {
    font-size: var(--wap-fs-xs);
    color: var(--wap-on-s2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wap-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--wap-on-s2);
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--wap-dur-s), color var(--wap-dur-s);
}

.wap-logout-btn:hover { background: var(--wap-nav-hover); color: var(--wap-on-s); }
.wap-logout-btn .material-symbols-rounded { font-size: 20px; }

/* --------------------------------------------------------------------------
   8. Mobile top bar
   -------------------------------------------------------------------------- */
.wap-mobile-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 150;
    background: var(--wap-surface);
    border-block-end: 1px solid var(--wap-outline);
    padding: 0 16px;
    height: 60px;
    align-items: center;
    gap: 12px;
    box-shadow: var(--wap-elev-1);
}

.wap-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: var(--wap-on-s);
    transition: background var(--wap-dur-s);
    flex-shrink: 0;
}

.wap-hamburger:hover { background: var(--wap-nav-hover); }

.wap-hamburger-icon { display: flex; flex-direction: column; gap: 5px; }

.wap-hamburger-icon span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--wap-dur-m) var(--wap-ease), opacity var(--wap-dur-m);
}

.wap-sidebar-open .wap-hamburger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wap-sidebar-open .wap-hamburger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.wap-sidebar-open .wap-hamburger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.wap-mobile-spacer { flex: 1; }

.wap-mobile-logo-link,
.wap-mobile-sitename-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.wap-mobile-logo {
    max-height: 35px;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.wap-mobile-sitename {
    font-size: var(--wap-fs-md);
    font-weight: 700;
    color: var(--wap-primary);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Shared theme toggle (mobile & auth page)
   -------------------------------------------------------------------------- */
.wap-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--wap-on-s2);
    cursor: pointer;
    transition: background var(--wap-dur-s), color var(--wap-dur-s);
    flex-shrink: 0;
}

.wap-theme-toggle:hover { background: var(--wap-nav-hover); color: var(--wap-on-s); }
.wap-theme-toggle .material-symbols-rounded { font-size: 22px; }

/* Mobile toggle pushed to end */
.wap-theme-toggle--mobile { margin-inline-start: auto; }

/* Auth page toggle — positioned absolutely */
.wap-theme-toggle--auth {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
}

/* (icon show/hide rules removed — toggle now uses JS-managed text) */

/* --------------------------------------------------------------------------
   10. Drawer backdrop
   -------------------------------------------------------------------------- */
.wap-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 190;
    opacity: 0;
    transition: opacity var(--wap-dur-m) var(--wap-ease);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   11. Main content area (portal)
   -------------------------------------------------------------------------- */
.wap-main { flex: 1; padding: 40px 48px; }

.wap-welcome-block { margin-bottom: 36px; animation: wap-fade-in .4s var(--wap-ease) both; }

.wap-welcome-title {
    font-size: var(--wap-fs-xl);
    font-weight: 700;
    color: var(--wap-on-bg);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.wap-welcome-message { font-size: var(--wap-fs-base); color: var(--wap-on-s2); margin: 0; }
.wap-welcome-message p { margin: 0; }

.wap-wc-content { animation: wap-slide-up .35s var(--wap-ease) .05s both; }

/* --------------------------------------------------------------------------
   12. WooCommerce content overrides (portal)
   -------------------------------------------------------------------------- */
.wap-wc-content .woocommerce { font-family: var(--wap-font); color: var(--wap-on-s); }

/* Tables */
.wap-wc-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wap-fs-sm);
    background: var(--wap-card-bg);
    border-radius: var(--wap-radius-md);
    overflow: hidden;
    border: 1px solid var(--wap-card-br);
    box-shadow: var(--wap-elev-1);
}

.wap-wc-content table.shop_table th {
    padding: 14px 16px;
    text-align: start;
    font-size: var(--wap-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wap-on-s2);
    background: var(--wap-surface-2);
    border-block-end: 1px solid var(--wap-outline);
}

.wap-wc-content table.shop_table td {
    padding: 14px 16px;
    border-block-end: 1px solid var(--wap-outline-v);
    color: var(--wap-on-s);
    vertical-align: middle;
}

.wap-wc-content table.shop_table tr:last-child td { border-block-end: none; }
.wap-wc-content table.shop_table tr:hover td { background: var(--wap-surface-2); }

/* Order status */
.wap-wc-content .order-status,
.wap-wc-content mark.order-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--wap-radius-full);
    font-size: var(--wap-fs-xs);
    font-weight: 600;
    background: rgba(var(--wap-primary-rgb),.15);
    color: var(--wap-nav-color);
}

/* Buttons */
.wap-wc-content .button,
.wap-wc-content .woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--wap-btn-radius, 999px);
    border: none;
    font-family: var(--wap-font);
    font-size: var(--wap-fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--wap-dur-s), box-shadow var(--wap-dur-s), transform var(--wap-dur-s);
    background: var(--wap-primary);
    color: #fff;
    box-shadow: var(--wap-elev-1);
}

.wap-wc-content .button:hover,
.wap-wc-content .woocommerce-Button:hover {
    background: var(--wap-primary-dark);
    box-shadow: var(--wap-elev-2);
    transform: translateY(-1px);
}

/* Form fields */
.wap-wc-content input[type="text"],
.wap-wc-content input[type="email"],
.wap-wc-content input[type="password"],
.wap-wc-content input[type="tel"],
.wap-wc-content select,
.wap-wc-content textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--wap-radius-sm);
    border: 1px solid var(--wap-input-br);
    background: var(--wap-input-bg);
    color: var(--wap-on-s);
    font-family: var(--wap-font);
    font-size: var(--wap-fs-sm);
    transition: border-color var(--wap-dur-s), box-shadow var(--wap-dur-s);
    outline: none;
    -webkit-appearance: none;
}

.wap-wc-content input:focus,
.wap-wc-content select:focus,
.wap-wc-content textarea:focus {
    border-color: var(--wap-primary);
    box-shadow: 0 0 0 3px rgba(var(--wap-primary-rgb),.2);
}

.wap-wc-content label { font-size: var(--wap-fs-sm); font-weight: 500; color: var(--wap-on-s2); display: block; margin-bottom: 6px; }

/* Address fields grid — ONLY for the address wrapper, not all fieldsets */
.wap-wc-content .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wap-wc-content .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }

.wap-wc-content .woocommerce-message { padding: 12px 16px; border-radius: var(--wap-radius-sm); font-size: var(--wap-fs-sm); list-style: none; margin: 0 0 20px; background: rgba(var(--wap-primary-rgb),.12); color: var(--wap-nav-color); border: none; }
.wap-wc-content .woocommerce-error   { padding: 12px 16px; border-radius: var(--wap-radius-sm); font-size: var(--wap-fs-sm); list-style: none; margin: 0 0 20px; background: rgba(220,53,69,.12); color: #ff6b6b; border: none; }

/* Hide WC nav inside content (we have sidebar) */
.wap-portal-body .wap-wc-content .woocommerce-MyAccount-navigation { display: none; }

/* --------------------------------------------------------------------------
   13. AUTH LAYOUT (logged-out)
   -------------------------------------------------------------------------- */
.wap-auth-wrap {
    display: flex;
    min-height: 100svh;
    /* RTL: flex-direction is LTR-aware (row), logical properties handle alignment */
}

/* Brand panel — LEFT in LTR, RIGHT in RTL (flex order) */
.wap-auth-brand {
    position: relative;
    flex: 0 0 42%;
    background: var(--wap-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    order: 0;  /* first in LTR */
}

/* RTL: brand panel goes on the right → swap order */
/* RTL auth layout: direction:rtl on html reverses flex row automatically */

.wap-auth-brand-inner {
    position: relative;
    z-index: 2;
    padding: 48px;
    text-align: center;
}

.wap-auth-logo { max-width: 500px; width: 100%; object-fit: contain; filter: brightness(0) invert(1); }

.wap-auth-site-name {
    display: block;
    font-size: var(--wap-fs-2xl);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
}

.wap-auth-tagline {
    margin: 24px 0 0;
    font-size: var(--wap-fs-lg);
    font-weight: 400;
    color: rgba(255,255,255,.75);
    line-height: 1.4;
}

/* Decorative blobs */
.wap-auth-blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    bottom: -100px;
    inset-inline-start: -80px;
}

.wap-auth-blob--2 {
    width: 250px;
    height: 250px;
    top: -60px;
    inset-inline-end: -60px;
    inset-inline-start: auto;
    background: rgba(255,255,255,.05);
}

/* Form panel */
.wap-auth-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background: var(--wap-bg);
    position: relative;
    order: 1;
}

/* Mobile logo (hidden on desktop) */
.wap-auth-mobile-brand { display: none; text-align: center; margin-bottom: 32px; }
.wap-auth-mobile-logo  { max-height: 48px; object-fit: contain; }
.wap-auth-mobile-name  { font-size: var(--wap-fs-lg); font-weight: 700; color: var(--wap-primary); }

/* Tabs */
.wap-auth-tabs {
    display: flex;
    gap: 4px;
    background: var(--wap-surface-2);
    border-radius: var(--wap-radius-full);
    padding: 4px;
    margin-bottom: 32px;
    width: 100%;
    max-width: 420px;
}

.wap-auth-tab {
    flex: 1;
    text-align: center;
    padding: 9px 16px;
    border-radius: var(--wap-radius-full);
    font-size: var(--wap-fs-sm);
    font-weight: 500;
    color: var(--wap-on-s2);
    text-decoration: none;
    transition: background var(--wap-dur-s), color var(--wap-dur-s), box-shadow var(--wap-dur-s);
}

.wap-auth-tab--active {
    background: var(--wap-surface);
    color: var(--wap-primary);
    font-weight: 600;
    box-shadow: var(--wap-elev-1);
}

.wap-auth-tab:hover:not(.wap-auth-tab--active) { color: var(--wap-on-s); }

/* Auth content wrapper */
.wap-auth-content { width: 100%; max-width: 420px; }

/* WC forms inside auth panel */
.wap-auth-content .woocommerce { font-family: var(--wap-font); color: var(--wap-on-s); }
.wap-portal-body .wap-auth-content .woocommerce-MyAccount-navigation { display: none; }
.wap-auth-content .woocommerce-MyAccount-content { width: 100%; }

/* Auth form heading (from WC) */
.wap-auth-content h2 {
    font-size: var(--wap-fs-xl);
    font-weight: 700;
    color: var(--wap-on-bg);
    margin: 0 0 28px;
    letter-spacing: -0.02em;
}

.wap-auth-content p.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }

/* Auth form inputs */
.wap-auth-content input[type="text"],
.wap-auth-content input[type="email"],
.wap-auth-content input[type="password"] {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--wap-radius-md);
    border: 1.5px solid var(--wap-input-br);
    background: var(--wap-surface);
    color: var(--wap-on-bg);
    font-family: var(--wap-font);
    font-size: var(--wap-fs-base);
    outline: none;
    transition: border-color var(--wap-dur-s), box-shadow var(--wap-dur-s);
    -webkit-appearance: none;
}

.wap-auth-content input:focus {
    border-color: var(--wap-primary);
    box-shadow: 0 0 0 3px rgba(var(--wap-primary-rgb),.15);
}

/* Auth form labels — moved to input placeholder via JS. Labels remain in DOM for a11y.
   JS sets placeholder from label text and hides label with inline style. */
.wap-auth-content .form-row,
.wap-auth-content .woocommerce-form-row {
    margin-bottom: 18px;
}

/* Placeholder colour to match label styling */
.wap-auth-content input::placeholder { color: #777; opacity: 1; }
.wap-auth-content input::-webkit-input-placeholder { color: #777; }
.wap-auth-content input::-moz-placeholder { color: #777; }

/* Password wrapper */
.wap-auth-content .woocommerce-form-login__input-wrapper {
    position: relative;
    display: block;
}

/* Auth submit button */
.wap-auth-content .woocommerce-form-login__submit,
.wap-auth-content input[type="submit"],
.wap-auth-content button[type="submit"] {
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--wap-radius-full);
    border: none;
    background: var(--wap-primary);
    color: #fff;
    font-family: var(--wap-font);
    font-size: var(--wap-fs-base);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background var(--wap-dur-s), box-shadow var(--wap-dur-s), transform var(--wap-dur-s);
    box-shadow: 0 2px 8px rgba(var(--wap-primary-rgb),.35);
}

.wap-auth-content input[type="submit"]:hover,
.wap-auth-content button[type="submit"]:hover {
    background: var(--wap-primary-dark);
    box-shadow: 0 4px 16px rgba(var(--wap-primary-rgb),.4);
    transform: translateY(-1px);
}

/* Lost password link */
.wap-auth-content .woocommerce-LostPassword,
.wap-auth-content .lost_password { margin-top: 16px; text-align: center; }

.wap-auth-content .woocommerce-LostPassword a,
.wap-auth-content .lost_password a {
    font-size: var(--wap-fs-sm);
    color: var(--wap-primary);
    text-decoration: none;
    font-weight: 500;
}

.wap-auth-content .woocommerce-LostPassword a:hover,
.wap-auth-content .lost_password a:hover { text-decoration: underline; }

/* Notices inside auth */
.wap-auth-content .woocommerce-error,
.wap-auth-content .woocommerce-message {
    padding: 12px 16px;
    border-radius: var(--wap-radius-sm);
    font-size: var(--wap-fs-sm);
    list-style: none;
    margin: 0 0 20px;
    border: none;
}

.wap-auth-content .woocommerce-error   { background: rgba(220,53,69,.12); color: #e05260; }
.wap-auth-content .woocommerce-message { background: rgba(var(--wap-primary-rgb),.1); color: var(--wap-nav-color); }

/* Checkbox (remember me) */
.wap-auth-content input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--wap-primary);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    top: 3px;
}

/* ----------------------------------------------------------------
   Auth form column management
   WC's form-login.php renders both login + register in .u-column1 / .u-column2.
   Show only the relevant column based on which tab is active.
   ---------------------------------------------------------------- */

/* Login tab: hide the register column entirely */
.wap-auth-form-panel .wap-auth-content.wap-auth-mode-login .u-column2,
.wap-auth-form-panel .wap-auth-content.wap-auth-mode-login .col-2 {
    display: none;
}

/* Register tab: hide the login column entirely */
.wap-auth-form-panel .wap-auth-content.wap-auth-mode-register .u-column1,
.wap-auth-form-panel .wap-auth-content.wap-auth-mode-register .col-1 {
    display: none;
}

/* Remove WC's two-column grid wrapper in our portal */
.wap-auth-content .col2-set,
.wap-auth-content #customer_login {
    display: block;
    column-count: unset;
    column-gap: unset;
}

/* Full-width visible column */
.wap-auth-form-panel .wap-auth-content .u-column1,
.wap-auth-form-panel .wap-auth-content .u-column2 {
    width: 100%;
    float: none;
    padding: 0;
}

/* WooCommerce privacy policy text spacing */
.woocommerce-privacy-policy-text { padding-bottom: 20px; }

/* CAPTCHA widget */
.wap-captcha-wrap { margin: 16px 0; }
.wap-captcha-wrap .h-captcha,
.wap-captcha-wrap .g-recaptcha,
.wap-captcha-wrap .cf-turnstile { border-radius: var(--wap-radius-sm); overflow: hidden; }

/* Back link under form */
.wap-auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: var(--wap-fs-sm);
    color: var(--wap-on-s2);
    text-decoration: none;
    transition: color var(--wap-dur-s);
}

.wap-auth-back-link:hover { color: var(--wap-on-s); }
.wap-auth-back-link .material-symbols-rounded { font-size: 16px; }



/* --------------------------------------------------------------------------
   14. Animations
   -------------------------------------------------------------------------- */
@keyframes wap-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wap-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   15. RTL — only physical property overrides needed
       (logical properties handle everything else automatically)
   -------------------------------------------------------------------------- */

/* Mobile: sidebar starts off-screen to the RIGHT in RTL */
@media (max-width: 768px) {
    [dir="rtl"] .wap-sidebar {
        transform: translateX(100%);
    }

    [dir="rtl"] .wap-sidebar-open .wap-sidebar {
        transform: translateX(0);
    }
}

/* --------------------------------------------------------------------------
   16. Responsive — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
    :root { --wap-sidebar-w: 240px; }
    .wap-main { padding: 32px 32px; }
    .wap-auth-brand { flex: 0 0 38%; }
    .wap-auth-form-panel { padding: 48px 40px; }
}

/* --------------------------------------------------------------------------
   17. Responsive — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Sidebar off-screen by default */
    .wap-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .wap-sidebar-open .wap-sidebar {
        transform: translateX(0);
        box-shadow: var(--wap-elev-2), 8px 0 40px rgba(0,0,0,.4);
    }

    .wap-sidebar-open .wap-drawer-backdrop {
        display: block;
        opacity: 1;
    }

    .wap-content-wrap { margin-inline-start: 0; }

    .wap-mobile-bar { display: flex; }

    .wap-main { padding: 16px; }

    /* Theme toggle desktop: hide on mobile (mobile bar has its own) */
    .wap-theme-toggle--desktop { display: none; }

    /* Auth layout: stack vertically */
    .wap-auth-wrap { flex-direction: column; }

    .wap-auth-brand { display: none; }
    [dir="rtl"] .wap-auth-brand { display: none; }

    .wap-auth-form-panel {
        order: 0;
        padding: 40px 24px 60px;
        justify-content: flex-start;
    }

    .wap-auth-mobile-brand { display: block; }

    .wap-auth-tabs { max-width: 100%; }
    .wap-auth-content { max-width: 100%; }

    /* Forms: single column */
    .wap-wc-content .woocommerce-address-fields__field-wrapper,
    .wap-wc-content fieldset { grid-template-columns: 1fr; }

    .wap-wc-content .form-row-wide { grid-column: 1; }

    .wap-wc-content table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   WooCommerce Account Page — Specific Page Overrides
   ========================================================================== */

/* ── 0. Global heading color fix ────────────────────────────────────────────
   Headings inside the WC content area inherit the browser default (black) which
   is invisible on dark backgrounds. Set them explicitly to the theme text color. */
.wap-wc-content h1, .wap-wc-content h2, .wap-wc-content h3,
.wap-wc-content h4, .wap-wc-content h5, .wap-wc-content h6 {
    color: var(--wap-on-s);
}

/* ── 1. Address Overview (Addresses tab) ─────────────────────────────────── */

/* Two-column address card grid */
.wap-wc-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Individual address card */
.wap-wc-content .woocommerce-Address {
    background: var(--wap-card-bg);
    border: 1px solid var(--wap-card-br, var(--wap-outline));
    border-radius: var(--wap-radius-md);
    padding: 24px;
    box-shadow: var(--wap-elev-1);
}

/* Address heading (Billing / Shipping) */
.wap-wc-content .woocommerce-Address h2,
.wap-wc-content .woocommerce-Address h3 {
    font-size: var(--wap-fs-md);
    font-weight: 700;
    color: var(--wap-on-s);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wap-outline);
    letter-spacing: -0.01em;
}

/* "Edit Billing address" link */
.wap-wc-content .woocommerce-Address a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--wap-fs-sm);
    font-weight: 500;
    color: var(--wap-primary);
    text-decoration: none;
    margin-bottom: 14px;
}

.wap-wc-content .woocommerce-Address a:hover { text-decoration: underline; }

/* Address text block */
.wap-wc-content address {
    font-style: normal;
    font-size: var(--wap-fs-sm);
    color: var(--wap-on-s2);
    line-height: 1.8;
}

/* Fallback text when no address set */
.wap-wc-content .woocommerce-Address p:not(:has(a)) {
    font-size: var(--wap-fs-sm);
    color: var(--wap-on-s3);
}

/* ── 2. Account Details / Edit Account ───────────────────────────────────── */

/* Form layout — single column for account details */
.wap-wc-content .woocommerce-EditAccountForm .form-row {
    margin-bottom: 18px;
    display: block;
}

/* Two-column name row */
.wap-wc-content .woocommerce-EditAccountForm .form-row-first,
.wap-wc-content .woocommerce-EditAccountForm .form-row-last {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
    margin-bottom: 18px;
}

.wap-wc-content .woocommerce-EditAccountForm .form-row-first { margin-right: 16px; }

/* Description / hint text below fields */
.wap-wc-content .woocommerce-EditAccountForm em,
.wap-wc-content .form-row .description {
    display: block;
    margin-top: 5px;
    font-size: var(--wap-fs-xs);
    color: var(--wap-on-s3);
    font-style: italic;
}

/* ── 3. Password Change Fieldset ─────────────────────────────────────────── */

/* Override browser default fieldset rendering */
.wap-wc-content fieldset {
    border: 1px solid var(--wap-outline);
    border-radius: var(--wap-radius-md);
    padding: 20px 20px 8px;
    margin: 8px 0 24px;
    background: var(--wap-surface-2);
    /* Remove the grid that was applied to ALL fieldsets */
    display: block;
}

.wap-wc-content fieldset legend {
    font-size: var(--wap-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wap-on-s2);
    padding: 0 8px;
    background: var(--wap-surface-2);
    border-radius: 4px;
}

.wap-wc-content fieldset .form-row {
    margin-bottom: 14px;
}

/* Password strength meter */
.wap-wc-content .woocommerce-password-strength {
    margin: 8px 0;
    padding: 6px 12px;
    border-radius: var(--wap-radius-sm);
    font-size: var(--wap-fs-xs);
    font-weight: 600;
}

/* ── 4. Select / Dropdown — dark mode fix ────────────────────────────────── */

/* The browser default select has a white background regardless of theme.
   We must override it explicitly with !important because browser UA stylesheet
   has high specificity on <select> elements. */
.wap-portal-body .wap-wc-content select,
.wap-portal-body .wap-wc-content .select2-container .select2-selection,
.wap-portal-body .wap-auth-content select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--wap-input-bg);
    color: var(--wap-on-s);
    border: 1.5px solid var(--wap-input-br);
    border-radius: var(--wap-radius-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.wap-portal-body .wap-wc-content select:focus,
.wap-portal-body .wap-auth-content select:focus {
    border-color: var(--wap-primary);
    box-shadow: 0 0 0 3px rgba(var(--wap-primary-rgb), 0.2);
    outline: none;
}

/* Ensure option elements inherit the dark background */
.wap-wc-content select option,
.wap-auth-content select option {
    background-color: var(--wap-input-bg);
    color: var(--wap-on-s);
}

/* Select2 (WooCommerce uses select2 for country dropdowns) */
.wap-wc-content .select2-container--default .select2-selection--single {
    background-color: var(--wap-input-bg);
    border-color: var(--wap-input-br);
    color: var(--wap-on-s);
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--wap-radius-sm);
}

.wap-wc-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wap-on-s);
    line-height: 44px;
    padding: 0;
}

.wap-wc-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
}

.wap-wc-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--wap-on-s2) transparent transparent;
}

.wap-wc-content .select2-dropdown {
    background: var(--wap-surface);
    border-color: var(--wap-outline);
    border-radius: var(--wap-radius-sm);
    box-shadow: var(--wap-elev-2);
}

.wap-wc-content .select2-search--dropdown .select2-search__field {
    background: var(--wap-input-bg);
    color: var(--wap-on-s);
    border-color: var(--wap-outline);
    border-radius: var(--wap-radius-sm);
    padding: 8px 12px;
}

.wap-wc-content .select2-results__option {
    color: var(--wap-on-s);
    padding: 8px 12px;
    font-size: var(--wap-fs-sm);
}

.wap-wc-content .select2-results__option--highlighted[aria-selected] {
    background: rgba(var(--wap-primary-rgb), 0.15);
    color: var(--wap-nav-color);
}

/* ── 5. Responsive — mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wap-wc-content .woocommerce-Addresses { grid-template-columns: 1fr; }

    .wap-wc-content .woocommerce-EditAccountForm .form-row-first,
    .wap-wc-content .woocommerce-EditAccountForm .form-row-last {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

/* Address overview top spacing */
.wap-wc-content .woocommerce-Addresses { padding-top: 20px; }

/* Address edit form top spacing */
.woocommerce-address-fields { padding-top: 20px; }

/* ==========================================================================
   RTL / Arabic Language Support
   Arabic uses Cairo font (loaded by PHP when is_rtl() is true).
   The --wap-font var is overridden via inline style when RTL.
   ========================================================================== */

/* Ensure the Arabic font applies to all text in RTL context */
[dir="rtl"] .wap-portal-body {
    font-family: var(--wap-font, 'Cairo', sans-serif);
}

/* Apply Cairo to text nodes but NEVER override the icon font */
[dir="rtl"] .wap-portal-body *:not(.material-symbols-rounded):not([class*="material-symbols"]) {
    font-family: var(--wap-font, 'Cairo', sans-serif);
    letter-spacing: 0;
}

/* Explicitly keep icon font intact in RTL */
[dir="rtl"] .wap-portal-body .material-symbols-rounded,
[dir="rtl"] .wap-portal-body [class*="material-symbols"] {
    font-family: 'Material Symbols Rounded';
    letter-spacing: normal;
}

/* RTL: sidebar on the right (logical properties already handle this,
   but make sure transform animations are correct — handled in earlier blocks) */

/* RTL: nav icon order handled by PHP DOM swap in portal.php */

/* RTL: sidebar user row and theme toggle */
[dir="rtl"] .wap-theme-toggle--desktop { flex-direction: row-reverse; }
[dir="rtl"] .wap-user-row { flex-direction: row-reverse; }

/* RTL: back link — full-width link, push content to the right side */
[dir="rtl"] .wap-back-link,
[dir="rtl"] .wap-auth-back-link {
    justify-content: flex-end;
    direction: rtl;
    text-align: end;
}

/* RTL: auth brand text alignment */
[dir="rtl"] .wap-auth-brand-inner { text-align: right; }
[dir="rtl"] .wap-auth-tagline { text-align: center; }

/* RTL: auth form tabs */
[dir="rtl"] .wap-auth-tabs { flex-direction: row-reverse; }

/* RTL: back-link arrow direction handled by PHP $arrow_back variable */

/* RTL: form fields text alignment */
[dir="rtl"] .wap-wc-content input,
[dir="rtl"] .wap-wc-content select,
[dir="rtl"] .wap-wc-content textarea,
[dir="rtl"] .wap-auth-content input,
[dir="rtl"] .wap-auth-content select { text-align: right; }

/* RTL: table headers */
[dir="rtl"] .wap-wc-content table.shop_table th,
[dir="rtl"] .wap-wc-content table.shop_table td { text-align: right; }

/* RTL: welcome block */
[dir="rtl"] .wap-welcome-block { text-align: right; }

/* ==========================================================================
   AUTH PANEL — Comprehensive WooCommerce Form RTL Support
   ========================================================================== */

/* Form container: right-to-left flow */
[dir="rtl"] .wap-auth-form-panel .woocommerce-form,
[dir="rtl"] .wap-auth-form-panel .login,
[dir="rtl"] .wap-auth-form-panel .register,
[dir="rtl"] .wap-auth-form-panel .lost-password-form { direction: rtl; }

/* Labels: right-aligned */
[dir="rtl"] .wap-auth-content label,
[dir="rtl"] .wap-auth-content .woocommerce-form-row label {
    display: block;
    text-align: right;
}

/* Input fields: right-to-left text */
[dir="rtl"] .wap-auth-content input[type="text"],
[dir="rtl"] .wap-auth-content input[type="email"],
[dir="rtl"] .wap-auth-content input[type="password"] {
    direction: rtl;
    text-align: right;
}

/* Checkboxes: swap checkbox to the left of the text (RTL: text first = right, then checkbox left) */
[dir="rtl"] .wap-auth-content .woocommerce-form__label-for-checkbox,
[dir="rtl"] .wap-auth-content label.inline {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}
[dir="rtl"] .wap-auth-content .woocommerce-form__label-for-checkbox input[type="checkbox"],
[dir="rtl"] .wap-auth-content label.inline input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* Form rows: right-aligned content */
[dir="rtl"] .wap-auth-content .woocommerce-form-row,
[dir="rtl"] .wap-auth-content .form-row {
    text-align: right;
}

/* Remember me + lost password row */
[dir="rtl"] .wap-auth-content .woocommerce-form-login__rememberme { text-align: right; }
[dir="rtl"] .wap-auth-content .lost_password,
[dir="rtl"] .wap-auth-content .woocommerce-LostPassword { text-align: right; }

/* Paragraph description text */
[dir="rtl"] .wap-auth-content .woocommerce-privacy-policy-text,
[dir="rtl"] .wap-auth-content .woocommerce-form-row p { text-align: right; }

/* Required asterisk: moves to left of label in RTL */
[dir="rtl"] .wap-auth-content label .required { float: left; margin-right: 0; margin-left: 4px; }

/* Auth tabs: already have flex-direction:row-reverse but ensure text direction too */
[dir="rtl"] .wap-auth-tab { direction: rtl; }

/* Auth back link in RTL: align to the right of its container */
[dir="rtl"] .wap-auth-back-link { justify-content: flex-end; }

/* Mobile brand: center in RTL same as LTR */
[dir="rtl"] .wap-auth-mobile-brand { direction: rtl; text-align: right; }

/* Form panel heading (h2, h3 from WC forms) */
[dir="rtl"] .wap-auth-content h2,
[dir="rtl"] .wap-auth-content h3 { text-align: right; }

/* Password strength meter */
[dir="rtl"] .woocommerce-password-strength { text-align: right; }
[dir="rtl"] .woocommerce-password-hint    { text-align: right; }


/* ==========================================================================
   SECONDARY COLOR
   ========================================================================== */
.wap-wc-content a:not(.button):not(.woocommerce-button) { color: var(--wap-secondary, var(--wap-primary)); }
.wap-auth-content a { color: var(--wap-secondary, var(--wap-primary)); }
.wap-custom-page-body a { color: var(--wap-secondary, var(--wap-primary)); }

/* WooCommerce address field wrapper spacing */
.wap-wc-content .woocommerce-address-fields__field-wrapper {
    padding-bottom: 20px;
}

/* ==========================================================================
   BUTTON RADIUS — controlled by --wap-btn-radius (set from appearance settings)
   ========================================================================== */

/* Auth form submit buttons */
.wap-auth-content button[type="submit"],
.wap-auth-content input[type="submit"] {
    border-radius: var(--wap-btn-radius, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* WooCommerce content buttons */
.wap-portal-body .woocommerce button.button,
.wap-portal-body .woocommerce a.button,
.wap-portal-body .woocommerce input[type="submit"],
.wap-portal-body button[type="submit"] {
    border-radius: var(--wap-btn-radius, 999px);
}

/* ==========================================================================
   AUTOMATIC CSS (ACSS) v3 + v4 COMPATIBILITY
   All rules use .wap-portal-body scope (class specificity 0-1-0) which
   beats ACSS's element-level selectors (body, p, html = 0-0-1).
   The --root-font-size override is handled in PHP via wp_add_inline_style.
   ========================================================================== */

/* body { overflow-x: clip } — sidebar drawer would be invisible while sliding.
   Class selector beats element selector, no !important needed. */
.wap-portal-body { overflow-x: hidden; }

/* body { background: var(--body-bg-color); font-size: var(--text-m) }
   Class selector (0-1-0) beats body element (0-0-1). */
.wap-portal-body {
    background-color: var(--wap-bg);
    font-size: var(--wap-fs-base, 1rem);
    color: var(--wap-on-bg);
}

/* p { max-inline-size: var(--text-m-length) } and ul li { max-inline-size }
   Compound selector (.wap-portal-body p = 0-1-1) beats (p = 0-0-1). */
.wap-portal-body p,
.wap-portal-body ul li { max-inline-size: none; max-width: none; }

/* Nav labels must not wrap — ACSS text-wrap: pretty can cause ellipsis to fail */
.wap-portal-body .wap-nav-label { white-space: nowrap; text-wrap: nowrap; }

/* ACSS contextual link colours use :is(a):where(:not(...)) which has
   0-0-1 specificity (the :where() zeroes out). Our compound selector wins. */
.wap-portal-body .wap-nav-link,
.wap-portal-body .wap-nav-link:hover,
.wap-portal-body .wap-back-link,
.wap-portal-body .wap-auth-back-link { color: inherit; }

/* ACSS reset sets input/button/textarea/select { font: inherit }.
   Re-assert here scoped to our portal so form elements keep the portal font. */
.wap-portal-body button,
.wap-portal-body input,
.wap-portal-body textarea,
.wap-portal-body select { font: inherit; }

/* Bricks / ACSS section elements inside our portal get no extra padding */
.wap-portal-body section:where(:not(.bricks-shape-divider)) {
    padding: 0;
}

/* RTL: nav link icons — row-reverse puts icon (first child) on the right */
[dir="rtl"] .wap-portal-body .wap-nav-link {
    flex-direction: row-reverse;
}

/* RTL: back links — row-reverse puts icon on the right; template uses arrow_forward icon */


/* RTL: checkbox labels — flex puts first child (input) at the right in RTL flow */
[dir="rtl"] .wap-auth-content .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

[dir="rtl"] .wap-auth-content input[type="checkbox"] {
    order: 1;
    margin: 0;
}

/* RTL: required field asterisk — float right so it appears at the start of the label */
[dir="rtl"] .wap-auth-content span.required,
[dir="rtl"] .wap-auth-content abbr.required {
    float: right;
    margin-left: 4px;
    margin-right: 0;
}

/* Clear float so next elements aren't affected */
[dir="rtl"] .wap-auth-content label {
    display: block;
    overflow: hidden;
}

/* RTL: back link layout */
[dir="rtl"] a.wap-back-link {
    display: contents;
}
[dir="rtl"] .wap-back-link span.material-symbols-rounded {
    position: relative;
    top: 4px;
}

/* RTL: logout icon mirrored */
[dir="rtl"] .wap-logout-btn span.material-symbols-rounded {
    transform: rotate(180deg);
}

/* Avatar upload camera button */
.wap-user-avatar--uploadable {
    position: relative;
    cursor: pointer;
    overflow: visible !important;
}
.wap-user-avatar--uploadable:hover .wap-avatar-cam-btn { opacity: 1; }
.wap-avatar-cam-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wap-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
    border: 2px solid var(--wap-sidebar-bg, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.wap-avatar-cam-btn .material-symbols-rounded { font-size: 12px; line-height: 1; }
.wap-user-avatar--uploadable:hover { opacity: .9; }

/* Password visibility toggle */
.wap-pw-wrap{position:relative;display:block}
.wap-pw-wrap input{padding-right:44px !important}
.wap-pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:#999;display:flex;align-items:center;line-height:1;transition:color .15s;z-index:1}
.wap-pw-toggle:hover{color:var(--wap-primary)}
.wap-pw-toggle svg{width:18px;height:18px;display:block;pointer-events:none}
[dir=rtl] .wap-pw-toggle{right:auto;left:14px}