/**
 * My Account — Navigation, Content Layout & Mobile
 *
 * Standalone styles for the WooCommerce My Account page.
 * Independent of Astra Pro — works with free Astra only.
 *
 * Does NOT style order-tracking modal or shipment cards
 * (those are inline in delhivery/enhancements.php).
 *
 * Verified against:
 * - WooCommerce 9.3.0 templates (navigation.php, my-account.php)
 * - WooCommerce layout CSS (woocommerce-layout.scss — float: left 30% / right 68%)
 * - WooCommerce smallscreen CSS (float: none, width: 100% at ≤768px)
 * - WooCommerce core CSS (clearfix on .woocommerce-account .woocommerce)
 * - WCAG 2.1 AA (focus-visible, touch targets, reduced motion, aria-current)
 *
 * @since 3.6.0
 */

/* ==========================================================================
   0. CSS CUSTOM PROPERTIES — single source of truth for theming
   Ref: WordPress CSS best practices, future-proofing for theme.json
   ========================================================================== */

.woocommerce-account {
    --rg-accent: #004E81;
    --rg-accent-hover: #003a61;
    --rg-accent-light: #e8f4fc;
    --rg-accent-ring: rgba(0, 78, 129, 0.1);
    --rg-border: #e5e7eb;
    --rg-border-light: #f3f4f6;
    --rg-text: #374151;
    --rg-text-muted: #6b7280;
    --rg-text-dark: #111827;
    --rg-bg-card: #ffffff;
    --rg-bg-hover: #fafbfc;
    --rg-radius-card: 14px;
    --rg-radius-sm: 8px;
    --rg-radius-md: 10px;
    --rg-nav-width: 300px;
}

/* ==========================================================================
   1. PAGE LAYOUT — sidebar + content
   Ref: WooCommerce layout CSS uses float:left 30% / float:right 68%.
   We override with flexbox but MUST reset floats to prevent conflict.
   WooCommerce smallscreen CSS sets float:none + width:100% at ≤768px.
   Our desktop breakpoint at 769px aligns with WooCommerce's 768px mobile.
   ========================================================================== */

/* Mobile-first: stacked (matches WooCommerce smallscreen.scss) */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}

/* Desktop: side-by-side via flexbox */
@media (min-width: 769px) {
    /* Ref: WooCommerce core adds clearfix (::after pseudo) to this element.
       Neutralize it so it doesn't become a flex child. */
    .woocommerce-account .entry-content > .woocommerce,
    .woocommerce-account .woocommerce {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }

    .woocommerce-account .entry-content > .woocommerce::after,
    .woocommerce-account .woocommerce::after {
        display: none;
    }

    /* Ref: Override WooCommerce layout CSS float:left + width:30% */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: none;
        width: auto;
        flex: 0 0 var(--rg-nav-width);
        max-width: var(--rg-nav-width);
        margin-bottom: 0;
        position: sticky;
        top: 100px;
    }

    /* Ref: Override WooCommerce layout CSS float:right + width:68% */
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none;
        width: auto;
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================================================
   2. NAVIGATION CARD
   ========================================================================== */

.rg-account-nav {
    background: var(--rg-bg-card);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-card);
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* ==========================================================================
   3. USER GREETING — avatar + name
   ========================================================================== */

.rg-account-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.25rem 0.25rem 1.15rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--rg-border-light);
}

.rg-account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e0e7ff;
    box-shadow: 0 0 0 3px var(--rg-accent-ring);
}

.rg-account-greeting {
    font-size: 0.95rem;
    color: var(--rg-text-muted);
    line-height: 1.4;
}

.rg-account-greeting strong {
    display: block;
    color: var(--rg-text-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

/* ==========================================================================
   4. NAV ICON GRID — 2 columns
   Ref: WooCommerce wc_get_account_menu_item_classes() outputs:
   "woocommerce-MyAccount-navigation-link
    woocommerce-MyAccount-navigation-link--{endpoint}
    is-active" (conditional)
   ========================================================================== */

.rg-account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.rg-account-nav ul li {
    margin: 0;
    padding: 0;
}

/* ── Nav link ── */
.rg-account-nav ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.5rem;
    border-radius: var(--rg-radius-md);
    text-decoration: none;
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
    border: 1px solid transparent;
    min-height: 44px; /* WCAG 2.5.8 — minimum touch/click target */
    box-sizing: border-box;
}

.rg-account-nav ul li a:hover {
    background-color: #f0f5ff;
    color: var(--rg-accent);
    border-color: #dbeafe;
}

/* Ref: WCAG 2.4.7 — Focus Visible. Use :focus-visible for keyboard focus
   ring without affecting mouse/touch users. */
.rg-account-nav ul li a:focus-visible {
    outline: 2px solid var(--rg-accent);
    outline-offset: 2px;
    border-color: transparent;
}

/* ── Active state ──
   Ref: WooCommerce adds .is-active class via wc_get_account_menu_item_classes() */
.rg-account-nav ul li.is-active a {
    background-color: var(--rg-accent-light);
    color: var(--rg-accent);
    border-color: #bfdbfe;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(26, 86, 219, 0.1);
}

/* ==========================================================================
   5. ICON CIRCLES — colored backgrounds per endpoint
   Ref: WooCommerce default endpoints from wc_get_account_menu_items():
   dashboard, orders, downloads, edit-address, payment-methods,
   edit-account, customer-logout
   ========================================================================== */

.rg-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--rg-radius-md);
    background-color: var(--rg-border-light);
    color: var(--rg-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rg-nav-icon svg {
    width: 20px;
    height: 20px;
}

/* Color per endpoint */
.woocommerce-MyAccount-navigation-link--dashboard .rg-nav-icon {
    background-color: #eff6ff;
    color: #2563eb;
}

.woocommerce-MyAccount-navigation-link--orders .rg-nav-icon {
    background-color: #fef3c7;
    color: #d97706;
}

.woocommerce-MyAccount-navigation-link--downloads .rg-nav-icon {
    background-color: #ecfdf5;
    color: #059669;
}

.woocommerce-MyAccount-navigation-link--edit-address .rg-nav-icon {
    background-color: #fce7f3;
    color: #db2777;
}

/* Ref: payment-methods is a default WooCommerce endpoint
   (shown when gateways support tokenization) */
.woocommerce-MyAccount-navigation-link--payment-methods .rg-nav-icon {
    background-color: #f0fdf4;
    color: #16a34a;
}

.woocommerce-MyAccount-navigation-link--edit-account .rg-nav-icon {
    background-color: #ede9fe;
    color: #7c3aed;
}

.woocommerce-MyAccount-navigation-link--customer-logout .rg-nav-icon {
    background-color: #fef2f2;
    color: #dc2626;
}

/* Active state: icon inherits active link color */
.rg-account-nav ul li.is-active .rg-nav-icon {
    background-color: #dbeafe;
    color: var(--rg-accent);
}

/* Hover: icon follows link color */
.rg-account-nav ul li a:hover .rg-nav-icon {
    background-color: #dbeafe;
    color: var(--rg-accent);
}

/* Logout hover — keeps red theme instead of blue */
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: #dc2626;
    background-color: #fef2f2;
    border-color: #fecaca;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover .rg-nav-icon {
    background-color: #fecaca;
    color: #dc2626;
}

/* ==========================================================================
   6. CONTENT AREA — card wrapper, tables, forms, addresses
   Ref: WooCommerce uses both .woocommerce-orders-table (modern) and
   table.my_account_orders (legacy). Target both for backward compatibility.
   ========================================================================== */

/* Content area — card to match navigation card */
@media (min-width: 769px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        background: var(--rg-bg-card);
        border: 1px solid var(--rg-border);
        border-radius: var(--rg-radius-card);
        padding: 1.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
}

/* Dashboard info paragraph — styled as welcome callout */
.woocommerce-account .woocommerce-MyAccount-content > p + p {
    font-size: 0.95rem;
    color: var(--rg-text);
    line-height: 1.75;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
    border-radius: var(--rg-radius-sm);
    border-left: 3px solid var(--rg-accent);
    margin: 0 0 1.5rem;
}

/* Action links inside content */
.woocommerce-account .woocommerce-MyAccount-content > p a:not(.button) {
    color: var(--rg-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(26, 86, 219, 0.3);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content > p a:not(.button):hover {
    border-bottom-color: var(--rg-accent);
    border-bottom-style: solid;
    color: var(--rg-accent-hover);
}

/* ── Orders table (modern + legacy class) ── */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.my_account_orders {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-md);
    overflow: hidden;
    width: 100%;
    font-size: 0.9rem;
}

.woocommerce-account .woocommerce-orders-table thead th,
.woocommerce-account table.my_account_orders thead th {
    background: #f9fafb;
    color: var(--rg-text);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rg-border);
    white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account table.my_account_orders td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--rg-border-light);
    vertical-align: middle;
    color: var(--rg-text);
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account table.my_account_orders tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover,
.woocommerce-account table.my_account_orders tbody tr:hover {
    background-color: var(--rg-bg-hover);
}

/* Action buttons inside orders table */
.woocommerce-account .woocommerce-orders-table .woocommerce-button,
.woocommerce-account table.my_account_orders .button {
    font-size: 0.8rem;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    white-space: nowrap;
}

/* ── Addresses grid ──
   Ref: WooCommerce uses .woocommerce-Addresses wrapper
   with .woocommerce-Address for each address card.
   Legacy uses .addresses .title with float:left/right for h3/edit. */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Ref: Override WooCommerce col2-set float/width on grid children.
   WC core sets .col-1 { float:left; width:48% } / .col-2 { float:right; width:48% }.
   CSS Grid ignores float but NOT width — cards render at 48% of their grid cell. */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
    float: none;
    width: 100%;
}

.woocommerce-account .woocommerce-Address {
    background: var(--rg-bg-card);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-md);
    padding: 1.25rem;
}

/* Ref: Override WooCommerce core float layout on .addresses .title */
.woocommerce-account .woocommerce-Address header,
.woocommerce-account .addresses .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rg-border-light);
}

.woocommerce-account .woocommerce-Address header h3,
.woocommerce-account .addresses .title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    float: none;
}

.woocommerce-account .addresses .title .edit {
    float: none;
}

.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    line-height: 1.65;
    color: #4b5563;
    font-size: 0.9rem;
}

/* ── Form fields (edit account, edit address) ──
   Ref: WooCommerce wraps fields in .woocommerce-EditAccountForm
   and .woocommerce-address-fields / .woocommerce-address-fields__field-wrapper */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row {
    margin-bottom: 1rem;
}

.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="tel"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields select {
    border: 1px solid #d1d5db;
    border-radius: var(--rg-radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Ref: WCAG 2.4.7 — visible focus indicator.
   Use :focus-visible so mouse clicks don't show the ring. */
.woocommerce-account .woocommerce-EditAccountForm input:focus-visible,
.woocommerce-account .woocommerce-address-fields input:focus-visible,
.woocommerce-account .woocommerce-address-fields select:focus-visible {
    border-color: var(--rg-accent);
    box-shadow: 0 0 0 3px var(--rg-accent-ring);
    outline: none;
}

/* Save button
   Ref: WooCommerce uses .woocommerce-Button--save class */
.woocommerce-account .woocommerce-Button--save,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] {
    background-color: var(--rg-accent);
    color: #fff;
    border: none;
    border-radius: var(--rg-radius-sm);
    padding: 0.7rem 1.75rem;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    min-height: 44px; /* WCAG 2.5.8 touch target */
}

.woocommerce-account .woocommerce-Button--save:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover {
    background-color: var(--rg-accent-hover);
}

.woocommerce-account .woocommerce-Button--save:focus-visible,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:focus-visible {
    outline: 2px solid var(--rg-accent);
    outline-offset: 2px;
}

/* ── Empty state ── */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
    border-radius: var(--rg-radius-md);
    padding: 1rem 1.25rem;
    font-size: 0.92rem;
}

/* Hide broken WooCommerce icon-font glyph — the WooCommerce @font-face
   declaration is often stripped by UCSS/CSS optimization, causing the
   ::before content character to render as a visible square ("tofu"). */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
    display: none;
}

/* ==========================================================================
   7. HIDE DEFAULT WOOCOMMERCE GREETING
   Ref: WooCommerce dashboard renders "Hello {name}" as a <p> inside
   .woocommerce-MyAccount-content. A .woocommerce-notices-wrapper <div>
   is prepended before it, so :first-child won't match — use :first-of-type.
   We show our own greeting in the nav card instead.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    display: none;
}

/* ==========================================================================
   8. MOBILE RESPONSIVE
   Ref: WooCommerce smallscreen breakpoint is 768px.
   Our phone breakpoint (600px) and tablet (601-768px) fit within that.
   ========================================================================== */

/* Phones (≤ 600px) */
@media (max-width: 600px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        background: var(--rg-bg-card);
        border: 1px solid var(--rg-border);
        border-radius: 12px;
        padding: 1.25rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .rg-account-nav {
        padding: 1rem;
        border-radius: 12px;
    }

    .rg-account-nav ul {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .rg-account-nav ul li a {
        padding: 0.7rem 0.4rem;
        font-size: 0.78rem;
    }

    .rg-nav-icon {
        width: 34px;
        height: 34px;
        border-radius: var(--rg-radius-sm);
    }

    .rg-nav-icon svg {
        width: 18px;
        height: 18px;
    }

    .rg-account-user {
        padding-bottom: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .rg-account-avatar {
        width: 44px;
        height: 44px;
    }

    .rg-account-greeting {
        font-size: 0.88rem;
    }

    .rg-account-greeting strong {
        font-size: 0.95rem;
    }

    /* Orders table: horizontal scroll on narrow screens */
    .woocommerce-account .woocommerce-orders-table__row .woocommerce-orders-table__cell {
        white-space: nowrap;
    }

    /* Address cards: single column */
    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }

    /* Bottom nav clearance (mobile-bottom-nav.php renders a 54px sticky bar) */
    .woocommerce-account .woocommerce-MyAccount-content {
        padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 1rem);
    }
}

/* Small phones (≤ 380px) */
@media (max-width: 380px) {
    .rg-account-nav ul li a {
        padding: 0.6rem 0.35rem;
        font-size: 0.75rem;
    }

    .rg-nav-icon {
        width: 30px;
        height: 30px;
    }

    .rg-nav-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* Tablet (601–768px): stacked layout but centered nav card */
@media (min-width: 601px) and (max-width: 768px) {
    .rg-account-nav {
        max-width: 480px;
        margin-inline: auto;
    }
}

/* ==========================================================================
   9. REDUCED MOTION
   Ref: WCAG 2.3.3 — respect prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rg-account-nav ul li a,
    .rg-nav-icon,
    .woocommerce-account .woocommerce-EditAccountForm input,
    .woocommerce-account .woocommerce-address-fields input,
    .woocommerce-account .woocommerce-address-fields select,
    .woocommerce-account .woocommerce-Button--save,
    .woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
    #customer_login input,
    #customer_login button {
        transition: none !important;
    }
}

/* ==========================================================================
   10. LOGIN / REGISTER PAGE — Single centered card with toggle
   Ref: Custom form-login.php template replaces WooCommerce's two-column
   (Login | Register) layout with a single card. Shows one view at a time;
   a "Sign Up" / "Sign In" link toggles between them.
   ========================================================================== */

/* ── Centered card wrapper ── */
#customer_login.rg-auth-page {
    max-width: 520px;
    margin: 2rem auto;
    background: var(--rg-bg-card);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-card);
    padding: 2.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* Section headings */
#customer_login h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rg-text-dark);
    margin: 0 0 1.5rem;
    text-align: center;
}

/* ── Form rows ── */
#customer_login .form-row {
    margin-bottom: 1.15rem;
}

/* Labels */
#customer_login label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rg-text);
    margin-bottom: 0.35rem;
}

#customer_login label .required {
    color: #dc2626;
}

/* Text inputs */
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="tel"],
#customer_login input[type="password"] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: var(--rg-radius-sm);
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    color: var(--rg-text-dark);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

#customer_login input[type="text"]:focus,
#customer_login input[type="email"]:focus,
#customer_login input[type="tel"]:focus,
#customer_login input[type="password"]:focus {
    border-color: var(--rg-accent);
    box-shadow: 0 0 0 3px var(--rg-accent-ring);
    outline: none;
}

/* Password field with show/hide toggle */
#customer_login .password-input {
    position: relative;
}

#customer_login .password-input input {
    padding-right: 2.75rem;
}

#customer_login .show-password-input {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rg-text-muted);
    padding: 0.3rem;
    min-width: auto;
    min-height: auto;
}

/* ── Submit buttons ── */
#customer_login .woocommerce-form-login__submit,
#customer_login .woocommerce-form-register__submit {
    width: 100%;
    background-color: var(--rg-accent);
    color: #fff;
    border: none;
    border-radius: var(--rg-radius-sm);
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
    min-height: 48px;
    margin-top: 0.25rem;
}

#customer_login .woocommerce-form-login__submit:hover,
#customer_login .woocommerce-form-register__submit:hover {
    background-color: var(--rg-accent-hover);
}

#customer_login .woocommerce-form-login__submit:focus-visible,
#customer_login .woocommerce-form-register__submit:focus-visible {
    outline: 2px solid var(--rg-accent);
    outline-offset: 2px;
}

/* Remember me checkbox */
#customer_login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--rg-text-muted);
    margin-bottom: 0;
}

/* Lost password link */
#customer_login .lost_password {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
}

#customer_login .lost_password a {
    color: var(--rg-accent);
    font-size: 0.9rem;
    text-decoration: none;
}

#customer_login .lost_password a:hover {
    text-decoration: underline;
    color: var(--rg-accent-hover);
}

/* ── "or" divider ── */
#customer_login .rg-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--rg-text-muted);
    font-size: 0.85rem;
}

#customer_login .rg-auth-divider::before,
#customer_login .rg-auth-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--rg-border);
}

/* ── Social login section (OAuth 2.0 — replaces Nextend plugin) ── */
#customer_login .rg-social-login-section {
    margin-top: 0.5rem;
}

#customer_login .rg-social-login {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#customer_login .rg-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-sm);
    background: #fff;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

#customer_login .rg-social-btn:hover {
    background: #f8f8f8;
    border-color: #999;
}

#customer_login .rg-social-btn:focus-visible {
    outline: 2px solid var(--rg-accent);
    outline-offset: 2px;
}

#customer_login .rg-social-btn__icon {
    flex-shrink: 0;
}

#customer_login .rg-social-btn--google {
    border-color: #dadce0;
}

#customer_login .rg-social-btn--google:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#customer_login .rg-social-btn--facebook {
    background: #1877F2;
    border-color: #1877F2;
    color: #fff;
}

#customer_login .rg-social-btn--facebook:hover {
    background: #166fe5;
}

#customer_login .rg-social-btn--facebook .rg-social-btn__icon path {
    fill: #fff;
}

/* ── "Don't have an account? Sign Up" / "Already have an account? Sign In" ── */
#customer_login .rg-auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rg-border-light);
    font-size: 0.9rem;
    color: var(--rg-text-muted);
}

#customer_login .rg-auth-switch a {
    color: var(--rg-accent);
    font-weight: 600;
    text-decoration: none;
}

#customer_login .rg-auth-switch a:hover {
    text-decoration: underline;
    color: var(--rg-accent-hover);
}

/* ── Name fields row (First Name / Last Name side by side) ── */
#customer_login .form-row-first {
    float: left;
    width: calc(50% - 0.5rem);
    margin-right: 0.5rem;
}

#customer_login .form-row-last {
    float: right;
    width: calc(50% - 0.5rem);
    margin-left: 0.5rem;
}

/* Clear floats after the name row */
#customer_login .form-row-wide {
    clear: both;
}

/* ── Privacy policy text ── */
#customer_login .woocommerce-privacy-policy-text {
    font-size: 0.82rem;
    color: var(--rg-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

#customer_login .woocommerce-privacy-policy-text a {
    color: var(--rg-accent);
}

/* ── Email collection form (Facebook no-email fallback) ── */
#customer_login.rg-email-form-page .rg-email-form-icon {
    text-align: center;
    margin-bottom: 0.75rem;
}

#customer_login.rg-email-form-page h2 {
    text-align: center;
}

#customer_login.rg-email-form-page .rg-email-form-desc {
    font-size: 0.9rem;
    color: var(--rg-text-muted);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.25rem;
}

#customer_login.rg-email-form-page .rg-email-form-note {
    font-size: 0.8rem;
    color: var(--rg-text-muted);
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0;
    line-height: 1.5;
}

#customer_login.rg-email-form-page .rg-auth-switch-sep {
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: var(--rg-border);
    margin: 0 0.6rem;
    vertical-align: middle;
}

#customer_login.rg-email-form-page .woocommerce-error {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--rg-radius-sm);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    #customer_login.rg-auth-page {
        margin: 0.5rem auto;
        padding: 1rem 1.15rem;
        border-radius: 12px;
    }

    #customer_login h2 {
        font-size: 1.15rem;
        margin-bottom: 0.75rem;
    }

    #customer_login .form-row {
        margin-bottom: 0.7rem;
    }

    #customer_login label {
        margin-bottom: 0.15rem;
        font-size: 0.85rem;
    }

    #customer_login input[type="text"],
    #customer_login input[type="email"],
    #customer_login input[type="tel"],
    #customer_login input[type="password"] {
        padding: 0.5rem 0.7rem;
        font-size: 0.9rem;
    }

    #customer_login .woocommerce-form-login__submit,
    #customer_login .woocommerce-form-register__submit {
        min-height: 44px;
        padding: 0.5rem 1.25rem;
        margin-top: 0.1rem;
    }

    #customer_login .woocommerce-form-login__rememberme {
        font-size: 0.85rem;
    }

    #customer_login .lost_password {
        margin-top: 0.35rem;
    }

    #customer_login .lost_password a {
        font-size: 0.85rem;
    }

    #customer_login .rg-auth-divider {
        margin: 0.5rem 0;
        font-size: 0.8rem;
    }

    #customer_login .rg-social-login {
        gap: 0.4rem;
    }

    #customer_login .rg-social-btn {
        min-height: 40px;
        padding: 0.45rem 0.75rem;
        font-size: 0.85rem;
    }

    #customer_login .rg-auth-switch {
        margin-top: 0.75rem;
        padding-top: 0.6rem;
        font-size: 0.85rem;
    }

    #customer_login .form-row-first,
    #customer_login .form-row-last {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #customer_login .woocommerce-privacy-policy-text {
        margin-bottom: 0.6rem;
        font-size: 0.78rem;
    }
}

/* Additional auth responsiveness refinements for Sign In / Sign Up card */
@media (min-width: 601px) and (max-width: 900px) {
    #customer_login.rg-auth-page {
        max-width: 620px;
        padding: 1.75rem;
    }
}

@media (max-width: 380px) {
    #customer_login.rg-auth-page {
        margin: 0.25rem auto;
        padding: 0.9rem 0.85rem;
    }

    #customer_login h2 {
        font-size: 1.05rem;
    }

    #customer_login .woocommerce-form-login__submit,
    #customer_login .woocommerce-form-register__submit {
        font-size: 0.92rem;
    }
}

/* Logged-out My Account: keep auth card centered instead of sidebar layout on desktop */
@media (min-width: 769px) {
    .woocommerce-account:not(.logged-in) .entry-content > .woocommerce,
    .woocommerce-account:not(.logged-in) .woocommerce {
        display: block;
    }

    .woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation {
        display: none;
    }

    .woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }

    .woocommerce-account:not(.logged-in) #customer_login.rg-auth-page {
        margin: 2rem auto;
        max-width: 520px;
    }
}