/**
 * Modern My Account Styling - Horizontal Pill Navigation with Glassmorphism
 *
 * Transforms the default WooCommerce navigation into horizontal pills using CSS only.
 * No template overrides needed - pure CSS transformation.
 *
 * Features:
 * - 8px border-radius and clamp() for responsive sizing
 * - Glassmorphism: gradient borders on inactive, treatment-mobile-book-bar style on active
 * - Active pill: rgba(100, 197, 178, 0.25) with 12px blur, 180% saturation, dark text
 * - LatePoint tabs: solid teal styling without glassmorphism
 * - Mobile-optimized: horizontal scrolling tabs, form fields stack vertically < 768px
 *
 * @package eRide
 * @since 1.1.5
 * @version 4.2.0
 * @changelog 4.2.0 - My Account UI improvements:
 *                   - Reordered mobile nav: Home, More, Glow (3 items only)
 *                   - Increased border-radius from 16px to 24px (fully rounded pill)
 *                   - Added teal spinner animation on menu item tap
 *                   - Removed margin-bottom from .dashboard-stats
 *                   - Removed margin-bottom from .entry-content
 *                   - Added #quote-cards-title font styling
 *                   - Fixed horizontal overflow with responsive grid (no fixed min-width)
 * @changelog 4.1.0 - Mobile bottom nav glassmorphism redesign:
 *                   - Added 16px border-radius (rounded-2xl)
 *                   - Added 12px spacing from screen edges (floating island effect)
 *                   - Teal-tinted glass background: rgba(100, 197, 178, 0.15)
 *                   - Enhanced backdrop-filter: blur(16px) saturate(180%)
 *                   - Teal border: 1px solid rgba(100, 197, 178, 0.3)
 *                   - Multi-layer box-shadow for depth
 *                   - Updated more-menu-dropdown positioning to align with floating nav
 *                   - Updated content padding-bottom for new nav dimensions
 *                   - Updated fallback styles for browsers without backdrop-filter
 * @changelog 4.0.1 - Fix: thumbnail display (added display:block, background fallback, width/height attrs)
 *                   - Fix: DETAILS/RE-ORDER buttons now equal width on desktop (align-items: stretch)
 *                   - Removed redundant order-date-label
 * @changelog 4.0.0 - MAJOR: Orders table replaced with card-based layout
 *                   - Product thumbnails, status accent borders, DETAILS/RE-ORDER buttons
 *                   - Responsive: desktop grid, tablet 2-col, mobile single column
 *                   - Verified badge for paid orders
 *                   - Status colors: green (delivered), blue (in transit), orange (pending), red (cancelled)
 * @changelog 3.6.5 - Nav hides when user scrolls to bottom of page
 * @changelog 3.6.4 - Removed footer/body padding (was causing excessive space)
 * @changelog 3.6.3 - Replaced Bootstrap Icons with Flaticon webp images (mobile + desktop)
 *                   - Desktop: Removed inactive nav styling, added logout separator with red font
 * @changelog 3.6.2 - Added footer/body padding-bottom to prevent content hiding behind fixed nav
 * @changelog 3.6.1 - Refined to match React mockup exactly
 *                   - Bottom nav: bg-white/90, h-16 (64px), border-slate-200
 *                   - Tab labels: font-bold (700), tracking-wider, slate-400 inactive, teal-600 active
 *                   - More menu backdrop: slate-900/40, backdrop-blur-sm
 *                   - More menu panel: rounded-3xl (24px), p-6 (24px), shadow-2xl
 *                   - More menu items: p-4 (16px), bg-slate-50, rounded-2xl (16px), slate-700 text
 *                   - Header: font-black (900), tracking-widest
 *                   - Logout: border-t border-slate-100, red-500
 * @changelog 3.6.0 - MAJOR: Mobile bottom navigation bar redesign
 *                   - Changed breakpoint from 768px to 1024px (tablets now get mobile nav)
 *                   - Added fixed bottom tab bar with 5 primary tabs (Home, Bookings, Glow, Profile, More)
 *                   - Added "More" menu overlay with checkbox hack toggle
 *                   - Secondary items (Photos, Orders, Addresses, Logout) moved to More menu
 *                   - iOS safe area support with env(safe-area-inset-bottom)
 *                   - Accessibility: ESC key close, reduced motion support
 * @changelog 3.5.0 - Logout pill: icon only (hide text), slightly larger icon
 * @changelog 3.4.1 - Issue #4.5: Added unified .pill-button class for consistent button styling
 *                   - 50px border-radius, teal color, no transform on hover
 *                   - Added .pill-button--outline variant
 * @changelog 3.4.0 - CSS Modernization: Integrated with design system variables
 *                   - Component variables now reference global --color-primary, --color-base, etc.
 *                   - Added transition variables for consistent animations
 *                   - Improved maintainability with centralized color management
 * @changelog 3.3.5 - Removed left/right padding from LatePoint bookings content (lines 993-1014)
 *                   - woocommerce-MyAccount-content: no horizontal padding
 *                   - latepoint-w inner elements: vertical padding only (no horizontal)
 *                   - Hidden Orders and Profile tabs from LatePoint customer dashboard (lines 916-922)
 * @changelog 3.3.4 - FIXED: Applied missing !important to base navigation pill font-weight (line 181)
 *                   - FIXED: Updated padding removal selectors to preserve header padding (lines 969-987)
 *                   - Changed from broad .has-global-padding to targeted content area selectors
 * @changelog 3.3.3 - Fixed navigation pill font-weight (400 !important) and confirmed header padding preservation
 *                   - Desktop sidebar layout (25% nav + 75% content)
 *                   - Treatment plan and photo navigation icons
 *                   - Enhanced clickable stat cards with Glow Journey styling
 */

/* ============================================
   CSS Variables
   ============================================ */

.woocommerce-account {
    /* Component variables mapped to design system */
    --color-teal: var(--color-primary, #64c5b2);
    --color-teal-hover: var(--color-primary-dark, #3fa692);
    --color-text-dark: var(--color-gray-100, #333333);
    --color-text-medium: var(--color-gray-400, #666666);
    --color-background-white: var(--color-base, #ffffff);
    --color-background-light: var(--color-base-3, #f9f9f9);
    --color-border-light: var(--color-gray-1100, #eeeeee);
    --border-radius: var(--radius-md, 8px);

    /* Glassmorphism variables */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: 10px;
    --glass-teal-bg: rgba(193, 238, 215, 0.95); /* #c1eed7 base color */
    --glass-teal-border: rgba(100, 197, 178, 0.4);

    /* Mobile bottom navigation variables (v3.6.0) */
    --mobile-nav-height: 65px;
    --mobile-nav-blur: 12px;
    --mobile-nav-z: 999;
    --more-menu-bg: rgba(255, 255, 255, 0.98);
}

/* ============================================
   Hide Notices Wrapper (Issue #4.1)
   ============================================ */
.woocommerce-account .woocommerce-notices-wrapper {
    display: none !important;
}

/* Prevent horizontal overflow on all screen sizes */
.woocommerce-account,
.woocommerce-account * {
    box-sizing: border-box;
}

.woocommerce-account {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   Override Theme Grid Layout
   ============================================ */

/* Mobile: Stack vertically */
.woocommerce-account .wp-block-post-content > .woocommerce {
    display: block !important;
    width: 100%;
}

/* Desktop: Two-column layout (≥1024px) - Side by side */
@media (min-width: 1024px) {
    .woocommerce-account .wp-block-post-content > .woocommerce {
        display: flex !important;
        flex-direction: row !important;
        gap: clamp(20px, 3vw, 40px);
        align-items: flex-start;
        width: 100%;
    }
}

/* ============================================
   Transform Navigation to Horizontal Pills (Mobile < 768px)
   Vertical Sidebar (Desktop ≥ 768px)
   ============================================ */

/* Mobile: Horizontal pills with sticky positioning */
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-background-white);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0; /* Issue #1: Removed padding */
    margin-bottom: clamp(20px, 3vw, 30px);
    width: 100%;
    grid-column: auto !important;
    /* Prevent overflow on mobile */
    box-sizing: border-box;
}

/* Desktop: Vertical sidebar */
@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        position: static; /* Remove sticky - fixes z-index conflict */
        flex: 0 0 25%; /* 25% width sidebar */
        max-width: 280px; /* Max width for readability */
        border-bottom: none;
        border-right: 1px solid var(--color-border-light);
        padding: 0 clamp(16px, 2vw, 20px) 0 0; /* Top/right/bottom/left */
        margin-bottom: 0;
        background-color: transparent;
        width: auto; /* Allow flex to control width */
    }
}

/* Mobile: Horizontal scrolling pills */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(8px, 1.5vw, 12px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 !important; /* Removed left/right padding - container now handles it */
    margin: 0 !important;
    list-style: none !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Subtle scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-teal) transparent;
}

/* Desktop: Vertical stacked menu */
@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: column !important;
        gap: clamp(6px, 1vw, 8px);
        overflow-x: visible;
        overflow-y: visible;
        padding: 0 !important;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    height: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-track {
    background: transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-thumb {
    background: var(--color-teal);
    border-radius: 2px;
}

/* Transform list items to pills (mobile) / menu items (desktop) */
.woocommerce-account .woocommerce-MyAccount-navigation li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Desktop: Full width menu items */
@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        display: flex !important;
        flex-shrink: 1;
        width: 100%;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: inline-flex !important;
    align-items: center;
    gap: clamp(6px, 1vw, 8px);
    padding: clamp(8px, 1.5vw, 10px) clamp(16px, 2.5vw, 20px) !important;
    background-color: var(--color-background-white);
    border-radius: 50px;
    /* color: var(--color-teal) !important; */
    font-size: clamp(13px, 1.8vw, 14px);
    font-weight: 400 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-all, all 0.2s ease-in-out);
    position: relative;

    /* Glassmorphism border for inactive pills */
    border: 1px solid transparent;
    background-clip: padding-box;
}

/* Desktop: Full width buttons with left alignment */
@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        display: flex !important;
        width: 100%;
        justify-content: flex-start;
        border-radius: var(--border-radius);
        padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2vw, 18px) !important;
        font-size: clamp(14px, 1.6vw, 15px);
    }
}

/* Glassmorphism border using box-shadow for inactive pills */
.woocommerce-account .woocommerce-MyAccount-navigation li a::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50px;
    background: linear-gradient(135deg,
        rgba(100, 197, 178, 0.4),
        rgba(100, 197, 178, 0.15));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    padding: 1px;
    z-index: -1;
}

/* Add icons via CSS (using Flaticon webp images) */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/apps.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--latepoint-bookings a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/calendar-clock.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--treatment-plans a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/heart.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--treatment-photos a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/camera.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/shopping-bag.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/shopping-bag.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/marker.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/shopping-bag.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/edit.webp');
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/shopping-bag.webp');
}

/* Logout: Icon only on mobile (hide text) */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    font-size: 0; /* Hide text */
    padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 14px) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    font-size: clamp(16px, 2.2vw, 18px); /* Slightly larger icon */
}

/* Desktop: Remove inactive item styling (per updates.md) */
@media (min-width: 1024px) {
    /* Remove gradient border from inactive items */
    .woocommerce-account .woocommerce-MyAccount-navigation li a::after {
        display: none;
    }

    /* Plain text style for inactive items */
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        background-color: transparent;
        border: none;
        border-radius: 12px; /* rounded-xl */
        color: #64748b !important; /* text-slate-500 */
        font-weight: 500; /* font-medium */
    }

    /* Hover: bg-slate-50 text-slate-700 */
    .woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
        background-color: #f8fafc; /* bg-slate-50 */
        color: #334155 !important; /* text-slate-700 */
        transform: none;
    }

    /* Active: bg-teal-50 text-teal-700 */
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
        background: #f0fdfa !important; /* bg-teal-50 */
        color: #0f766e !important; /* text-teal-700 */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
    }

    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
        background: #f0fdfa !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* Logout: Separate with border, show text, red color */
    .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e2e8f0; /* border-slate-200 */
    }

    .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
        font-size: clamp(14px, 1.6vw, 15px) !important; /* Show text */
        color: #ef4444 !important; /* text-red-500 */
        background: transparent !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
        background: #fef2f2 !important; /* bg-red-50 */
        color: #ef4444 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
        font-size: clamp(14px, 2vw, 16px); /* Normal icon size */
    }
}

/* Pill Hover State */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background-color: var(--color-background-light);
    color: var(--color-teal-hover) !important;
    transform: translateY(-1px);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::after {
    opacity: 1;
    background: linear-gradient(135deg,
        rgba(100, 197, 178, 0.6),
        rgba(100, 197, 178, 0.3));
}

/* Active Pill State with Glassmorphism (matching treatment-mobile-book-bar) */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--color-text-dark) !important;
    font-weight: 400 !important;

    /* Glassmorphism effect matching treatment-mobile-book-bar */
    background: rgba(100, 197, 178, 0.25); /* Semi-transparent teal */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);

    /* Subtle border for depth */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    /* Softer shadow for glass effect */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 1px 4px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
    color: var(--color-text-dark) !important;
    background: rgba(100, 197, 178, 0.35); /* Slightly more opaque on hover */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transform: translateY(0);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Main Content Area
   ============================================ */

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    max-width: 100%; /* Allow full width on mobile */
    margin: 0 auto;
    padding: 0; /* React components handle their own padding */
    grid-column: auto !important;
    box-sizing: border-box; /* Prevent overflow */
}

/* Issue #2: Remove padding-top from My Account content */
.woocommerce-account .wp-block-post-content > .woocommerce > .woocommerce-MyAccount-content {
    padding-top: 0 !important;
}

/* Desktop: 75% content area */
@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 1 1 75%; /* Take remaining space (approximately 75%) */
        max-width: none;
        margin: 0;
        padding: 0 0 0 clamp(20px, 3vw, 40px);
        width: auto; /* Allow flex to control width */
    }
}

/* ============================================
   Dashboard Stat Cards
   ============================================ */

.woocommerce-account .dashboard-stats {
    display: grid;
    /* v4.2.0: Fully responsive grid - no fixed min-width to prevent overflow */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(15px, 2.5vw, 20px);
    /* v4.2.0: Removed margin-bottom per issues.md */
}

.woocommerce-account .stat-card {
    background-color: var(--color-background-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    padding: clamp(16px, 2.5vw, 20px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03));
    transition: var(--transition-transform, transform 0.2s), box-shadow var(--transition-normal, 0.2s);
}

.woocommerce-account .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}

.woocommerce-account .stat-card-info {
    display: flex;
    flex-direction: column;
}

.woocommerce-account .stat-card-title {
    font-size: clamp(0.85rem, 1.2vw, 0.9rem);
    color: var(--color-text-medium);
    margin-bottom: clamp(6px, 1vw, 8px);
    font-weight: 500;
}

.woocommerce-account .stat-card-value {
    font-size: clamp(1.75rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1;
    margin-bottom: 4px;
}

.woocommerce-account .stat-card-icon {
    width: clamp(36px, 5vw, 40px);
    height: clamp(36px, 5vw, 40px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    flex-shrink: 0;
}

/* Clickable Stat Cards */
.woocommerce-account a.stat-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    cursor: pointer;
}

.woocommerce-account a.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.12), 0 6px 8px -4px rgba(0, 0, 0, 0.12);
}

.woocommerce-account .stat-card-subtitle {
    font-size: clamp(0.75rem, 1vw, 0.8rem);
    color: var(--color-text-medium);
    margin-top: clamp(4px, 0.8vw, 6px);
    font-weight: 400;
}

/* Card Icon Colors */
.woocommerce-account .stat-card:nth-child(1) .stat-card-icon,
.woocommerce-account .stat-card:nth-child(4) .stat-card-icon {
    background-color: rgba(100, 197, 178, 0.1);
    color: var(--color-teal);
}

.woocommerce-account .stat-card:nth-child(2) .stat-card-icon {
    background-color: rgba(100, 197, 178, 0.1);
    color: var(--color-teal);
}

.woocommerce-account .stat-card:nth-child(3) .stat-card-icon {
    background-color: rgba(255, 193, 7, 0.1);
    color: #f39c12;
}

/* Glow Journey specific styling */
.woocommerce-account .stat-card-clickable .stat-card-icon {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 193, 7, 0.15));
    color: #f39c12;
}

/* Issue #10: Disable stat-card--quote */
.woocommerce-account .stat-card.stat-card--quote {
    display: none !important;
}

/* Issue #10: Add background styling to stat cards container */
.woocommerce-account .dashboard-stats {
    background-color: rgb(249 250 251) !important; /* bg-gray-50 */
    padding: clamp(16px, 2.5vw, 20px);
    border-radius: var(--border-radius);
}

/* ============================================
   Content Cards
   ============================================ */

/* Hide default WooCommerce dashboard intro text and welcome message */
.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(1),
.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
    display: none;
}

/* Hide treatment plan dashboard and treatment photos wrapper */
.woocommerce-account .treatment-plan-dashboard,
.woocommerce-account .treatment-photos-wrapper {
    display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content > *:not(.dashboard-stats) {
    background-color: var(--color-background-white);
/*     border: 1px solid var(--color-border-light); */
    border-radius: var(--border-radius);
    padding: clamp(20px, 3vw, 24px);
    margin-bottom: clamp(16px, 2.5vw, 20px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03));
    transition: var(--transition-transform, transform 0.2s), box-shadow var(--transition-normal, 0.2s);
}

.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: clamp(16px, 2.5vw, 20px);
    color: var(--color-text-dark);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 400;
}

/* Tables */
.woocommerce-account .woocommerce-table {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
}

/* ============================================
   Orders Card Layout (v4.0.0)
   Enhanced card-based design with status accents
   ============================================ */

/* Orders Wrapper - Grid layout */
.woocommerce-orders-wrapper {
    display: grid;
    gap: clamp(12px, 2vw, 16px);
    margin-top: clamp(16px, 2.5vw, 20px);
}

/* Order Card Base */
.order-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "product product actions"
        "details details actions";
    gap: clamp(12px, 2vw, 16px) clamp(10px, 1.5vw, 12px);
    padding: clamp(16px, 2.5vw, 20px);
    padding-left: clamp(20px, 3vw, 24px);
    background: var(--color-background-white, #ffffff);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    position: relative;
    transition: box-shadow var(--transition-normal, 0.2s), transform var(--transition-normal, 0.2s);
}

.order-card:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

/* Left Accent Border (4px) via pseudo-element */
.order-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
    background: var(--color-gray-400, #9ca3af);
}

/* Status-based accent colors */
.order-card[data-status="completed"]::before { background: #10b981; } /* Green - Delivered */
.order-card[data-status="processing"]::before { background: #3b82f6; } /* Blue - In Transit */
.order-card[data-status="pending"]::before { background: #f59e0b; } /* Orange - Pending Payment */
.order-card[data-status="on-hold"]::before { background: #eab308; } /* Yellow - On Hold */
.order-card[data-status="cancelled"]::before,
.order-card[data-status="refunded"]::before,
.order-card[data-status="failed"]::before { background: #ef4444; } /* Red - Cancelled/Failed */

/* Product Section */
.order-card__product {
    grid-area: product;
    display: flex;
    gap: clamp(10px, 1.5vw, 12px);
    align-items: flex-start;
}

.order-card__thumbnail {
    display: block;
    width: clamp(56px, 8vw, 64px);
    height: clamp(56px, 8vw, 64px);
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
    border: 1px solid var(--color-border-light, #e5e7eb);
    background-color: var(--color-gray-100, #f3f4f6);
    flex-shrink: 0;
}

.order-card__product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-card__number {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 700;
    color: var(--color-contrast, #111827);
    margin: 0;
    line-height: 1.3;
}

.order-card__number a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-normal, 0.2s);
}

.order-card__number a:hover {
    color: var(--color-primary, #64c5b2);
}

.order-card__items {
    font-size: clamp(0.8rem, 1.1vw, 0.875rem);
    color: var(--color-gray-500, #6b7280);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-card__items i {
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    opacity: 0.8;
}

/* Details Section */
.order-card__details {
    grid-area: details;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 24px);
    align-items: flex-start;
}

.order-card__date,
.order-card__total,
.order-card__status {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-card__details .label {
    font-size: clamp(0.65rem, 0.9vw, 0.7rem);
    font-weight: 600;
    color: var(--color-gray-400, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-card__date time {
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 600;
    color: var(--color-gray-700, #374151);
}

.order-card__total strong {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    font-weight: 700;
    color: var(--color-contrast, #111827);
}

/* Verified Badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(0.6rem, 0.85vw, 0.7rem);
    font-weight: 600;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.verified-badge i {
    font-size: clamp(0.7rem, 0.95vw, 0.8rem);
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(5px, 0.8vw, 6px) clamp(10px, 1.3vw, 12px);
    border-radius: 6px;
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.status-badge i {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
}

.status-badge--completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-badge--processing {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge--pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-badge--on-hold {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.status-badge--cancelled,
.status-badge--refunded,
.status-badge--failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Actions Section */
.order-card__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
    min-width: 110px;
}

.order-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(8px, 1.2vw, 10px) clamp(14px, 2vw, 18px);
    border-radius: 6px;
    font-size: clamp(0.7rem, 0.95vw, 0.8rem);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: all var(--transition-normal, 0.2s);
    white-space: nowrap;
}

.order-action i {
    font-size: clamp(0.8rem, 1vw, 0.9rem);
}

.order-action--details {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-700, #374151);
}

.order-action--details:hover {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-contrast, #111827);
}

.order-action--reorder {
    background: transparent;
    color: var(--color-gray-500, #6b7280);
    border: 1px solid var(--color-border-light, #e5e7eb);
}

.order-action--reorder:hover {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-gray-300, #d1d5db);
    color: var(--color-gray-700, #374151);
}

/* Tablet Responsive (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .order-card {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "product product"
            "details actions";
    }

    .order-card__details {
        gap: clamp(12px, 2vw, 16px);
    }

    .order-card__actions {
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        padding-top: 8px;
    }
}

/* Mobile Responsive (< 768px) */
@media (max-width: 767px) {
    .order-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "product"
            "details"
            "actions";
        gap: clamp(12px, 2.5vw, 16px);
        padding: clamp(14px, 2vw, 16px);
        padding-left: clamp(18px, 2.5vw, 20px);
    }

    .order-card__product {
        padding-bottom: clamp(10px, 1.5vw, 12px);
        border-bottom: 1px solid var(--color-border-light, #e5e7eb);
    }

    .order-card__details {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(10px, 1.5vw, 12px);
    }

    .order-card__actions {
        flex-direction: row;
        align-items: center;
        justify-content: stretch;
        width: 100%;
        padding-top: clamp(10px, 1.5vw, 12px);
        border-top: 1px solid var(--color-border-light, #e5e7eb);
    }

    .order-action {
        flex: 1;
        justify-content: center;
        min-width: unset;
    }
}

/* ============================================
   Legacy Table Styles (for order details page)
   Keep these for backward compatibility
   ============================================ */

/* Table Body - Remove inherited border-color */
.woocommerce-account .woocommerce-orders-table tbody {
    border-color: transparent !important;
}

/* Override theme's border-top on first row */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders tbody tr:first-child td,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr:first-child td {
    border-top: none !important;
}

/* Override theme's border-bottom on all rows */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders tbody tr td,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr td {
    border-bottom: 1px solid var(--color-border-light) !important;
}

/* Wrap product titles in order details */
.woocommerce-account .woocommerce-table .product-name,
.woocommerce-account .woocommerce-table .product-name a {
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Order details - addresses container */
.woocommerce-account .woocommerce-columns--addresses {
    margin-block: inherit;
}

/* Address columns - Apply card styling (override existing styles) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .woocommerce-column,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns .woocommerce-column,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns .woocommerce-Address,
.woocommerce-account .woocommerce-column.woocommerce-column--shipping-address,
.woocommerce-account .woocommerce-column.woocommerce-column--billing-address {
    background-color: var(--color-background-white) !important;
    border-radius: var(--border-radius) !important;
    padding: clamp(20px, 3vw, 24px) !important;
    margin-bottom: clamp(16px, 2.5vw, 20px) !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03)) !important;
    transition: var(--transition-transform, transform 0.2s), box-shadow var(--transition-normal, 0.2s) !important;
}

/* Address column hover effect */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .woocommerce-column:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .woocommerce-Address:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns .woocommerce-column:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns .woocommerce-Address:hover,
.woocommerce-account .woocommerce-column.woocommerce-column--shipping-address:hover,
.woocommerce-account .woocommerce-column.woocommerce-column--billing-address:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)) !important;
}

/* Order Number Column - Linked */
.woocommerce-account .woocommerce-orders-table__cell-order-number .order-link {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: var(--font-normal, 400);
    transition: var(--transition-colors, color 0.2s);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number .order-link:hover {
    color: var(--color-teal-hover);
    text-decoration: underline;
}

/* Order Date Column - Short Format */
.woocommerce-account .woocommerce-orders-table__cell-order-date time {
    color: var(--color-text-medium);
    font-size: clamp(0.85rem, 1.1vw, 0.9rem);
}

/* Order Status Column */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
    font-weight: 500;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status mark {
    background-color: transparent;
    color: inherit;
    padding: clamp(4px, 0.8vw, 6px) clamp(10px, 1.5vw, 12px);
    border-radius: 50px;
    font-size: clamp(0.8rem, 1.1vw, 0.85rem);
    font-weight: 400;
    display: inline-block;
}

/* Status Colors */
.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-completed {
    background-color: rgba(100, 197, 178, 0.1);
    color: var(--color-teal);
}

.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-processing {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196f3;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-on-hold {
    background-color: rgba(255, 193, 7, 0.1);
    color: #f39c12;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-pending {
    background-color: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-cancelled,
.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-refunded,
.woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-failed {
    background-color: rgba(244, 67, 54, 0.1) !important;
    color: #f44336 !important;
}

/* Override WooCommerce default danger background */
.woocommerce-account .woocommerce-orders-table__cell-order-status mark[class*="status-"] {
    background-color: transparent;
}

/* Reapply our custom backgrounds with higher specificity */
.woocommerce-account .woocommerce-orders-table mark.order-status.status-failed {
    background-color: rgba(244, 67, 54, 0.1) !important;
    color: #f44336 !important;
}

/* Order Total Column */
.woocommerce-account .woocommerce-orders-table__cell-order-total {
    font-weight: 600;
    color: var(--color-text-dark);
}

/* Mobile Responsive Table */
@media (max-width: 1023px) {
    .woocommerce-account .woocommerce-orders-table thead {
        display: none;
    }

    .woocommerce-account .woocommerce-orders-table tbody tr {
        display: block;
        margin-bottom: clamp(16px, 2.5vw, 20px);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius);
        padding: clamp(12px, 2vw, 16px);
        background-color: var(--color-background-white);
    }

    .woocommerce-account .woocommerce-orders-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: clamp(8px, 1.5vw, 10px) 0;
        border-bottom: 1px solid var(--color-border-light);
    }

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

    .woocommerce-account .woocommerce-orders-table tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--color-text-medium);
        flex-shrink: 0;
    }

    .woocommerce-account .woocommerce-orders-table tbody tr:hover {
        background-color: var(--color-background-light);
    }
}

/* Text Links (replaces action buttons) */
.woocommerce-account a.edit {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: var(--font-semibold, 600);
    font-size: clamp(0.85rem, 1.1vw, 0.9rem);
    transition: var(--transition-colors, color 0.2s);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.woocommerce-account a.edit:hover {
    color: var(--color-teal-hover);
    text-decoration: underline;
}

.woocommerce-account a.edit::after {
    content: "\f285"; /* bi-arrow-right */
    font-family: bootstrap-icons;
    font-size: 0.9em;
    transition: var(--transition-transform, transform 0.2s);
}

.woocommerce-account a.edit:hover::after {
    transform: translateX(3px);
}

/* Buttons */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content .button {
    background-color: var(--color-teal);
    color: var(--color-background-white);
    border: none;
    border-radius: 24px;
    padding: clamp(10px, 1.5vw, 12px) clamp(20px, 3vw, 24px);
    font-weight: var(--font-normal, 400);
    font-size: clamp(13px, 1.8vw, 14px);
    transition: var(--transition-colors, background-color 0.2s);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
    background-color: var(--color-teal-hover);
}

/* ============================================
   Unified Pill Button Style (Issue #4.5)
   ============================================ */

/* Pill button: consistent rounded style across My Account */
.woocommerce-account .pill-button,
.woocommerce-account .woocommerce-MyAccount-content .pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--color-teal, #64c5b2);
    color: var(--color-background-white, #ffffff);
    border: none;
    border-radius: 50px; /* Full pill shape */
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.woocommerce-account .pill-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .pill-button:hover {
    background-color: var(--color-teal-hover, #3fa692);
    /* No transform - subtle background change only */
}

.woocommerce-account .pill-button:focus-visible {
    outline: 2px solid var(--color-teal, #64c5b2);
    outline-offset: 2px;
}

/* Pill button outline variant */
.woocommerce-account .pill-button--outline {
    background-color: transparent;
    border: 2px solid var(--color-teal, #64c5b2);
    color: var(--color-teal, #64c5b2);
}

.woocommerce-account .pill-button--outline:hover {
    background-color: rgba(100, 197, 178, 0.1);
}

/* ============================================
   Addresses Section
   ============================================ */

/* Remove shadow and padding from addresses container */
.woocommerce-account .woocommerce-Addresses.col2-set.addresses {
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Add shadow to individual address columns */
.woocommerce-account .woocommerce-Address {
    background-color: var(--color-background-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    padding: clamp(20px, 3vw, 24px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03));
    transition: var(--transition-transform, transform 0.2s), box-shadow var(--transition-normal, 0.2s);
}

.woocommerce-account .woocommerce-Address:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}

/* Address titles */
.woocommerce-account .woocommerce-Address-title h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    color: var(--color-text-dark);
    margin-bottom: clamp(12px, 2vw, 16px);
    font-weight: 400;
}

/* ============================================
   LatePoint Integration
   ============================================ */

.woocommerce-account .latepoint-my-account-wrapper {
    background-color: var(--color-background-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    padding: clamp(20px, 3vw, 24px);
    min-height: clamp(300px, 50vh, 400px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
}

.woocommerce-account .latepoint-my-account-wrapper h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: clamp(20px, 3vw, 24px);
    padding-bottom: clamp(12px, 2vw, 16px);
    border-bottom: 2px solid var(--color-border-light);
    font-weight: 600;
}

/* LatePoint Tab Navigation - Pills Style */
.latepoint .customer-dashboard-tabs,
.latepoint-w .customer-dashboard-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 1.5vw, 12px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px clamp(16px, 2.5vw, 20px) 4px clamp(16px, 2.5vw, 20px) !important;
    margin: 0 0 clamp(20px, 3vw, 24px) 0 !important;
    list-style: none !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom: 1px solid var(--color-border-light) !important;

    /* Subtle scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 197, 178, 0.3) transparent;
}

.latepoint .customer-dashboard-tabs::-webkit-scrollbar,
.latepoint-w .customer-dashboard-tabs::-webkit-scrollbar {
    height: 6px;
}

.latepoint .customer-dashboard-tabs::-webkit-scrollbar-track,
.latepoint-w .customer-dashboard-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.latepoint .customer-dashboard-tabs::-webkit-scrollbar-thumb,
.latepoint-w .customer-dashboard-tabs::-webkit-scrollbar-thumb {
    background-color: rgba(100, 197, 178, 0.3);
    border-radius: 3px;
}

.latepoint .customer-dashboard-tabs::-webkit-scrollbar-thumb:hover,
.latepoint-w .customer-dashboard-tabs::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 197, 178, 0.5);
}

.latepoint .customer-dashboard-tabs a,
.latepoint-w .customer-dashboard-tabs a,
.latepoint .latepoint-tab-trigger,
.latepoint-w .latepoint-tab-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(8px, 1.5vw, 10px) clamp(16px, 2.5vw, 20px) !important;
    background-color: var(--color-background-light) !important;
    color: var(--color-text-medium) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--border-radius) !important;
    font-size: clamp(13px, 1.8vw, 14px) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: var(--transition-slow, all 0.3s ease) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.latepoint .customer-dashboard-tabs a::after,
.latepoint-w .customer-dashboard-tabs a::after {
    display: none !important;
}

.latepoint .customer-dashboard-tabs a:hover,
.latepoint-w .customer-dashboard-tabs a:hover,
.latepoint .customer-dashboard-tabs a:focus,
.latepoint-w .customer-dashboard-tabs a:focus {
    background-color: var(--color-teal) !important;
    color: var(--color-background-white) !important;
    border-color: var(--color-teal) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(100, 197, 178, 0.2) !important;
}

.latepoint .customer-dashboard-tabs a.active,
.latepoint-w .customer-dashboard-tabs a.active {
    background-color: var(--color-teal) !important;
    color: var(--color-background-white) !important;
    border-color: var(--color-teal) !important;
    font-weight: 400 !important;
    box-shadow: 0 2px 4px -1px rgba(100, 197, 178, 0.3) !important;
}

.latepoint .customer-dashboard-tabs a.active:hover,
.latepoint-w .customer-dashboard-tabs a.active:hover {
    transform: none !important;
    box-shadow: 0 2px 4px -1px rgba(100, 197, 178, 0.3) !important;
}

/* v3.3.5: Hide specific LatePoint tabs (Orders & Profile) without creating gaps */
.latepoint .latepoint-tab-trigger[data-tab-target=".tab-content-customer-orders"],
.latepoint-w .latepoint-tab-trigger[data-tab-target=".tab-content-customer-orders"],
.latepoint .latepoint-tab-trigger[data-tab-target=".tab-content-customer-info-form"],
.latepoint-w .latepoint-tab-trigger[data-tab-target=".tab-content-customer-info-form"] {
    display: none !important;
}

/* Issue #5: Hide LatePoint "Welcome [Name]" and Logout link on My Bookings page */
.latepoint .customer-info-w,
.latepoint-w .customer-info-w,
.latepoint .customer-name-w,
.latepoint-w .customer-name-w,
.latepoint a[href*="customer_cabinet__logout"],
.latepoint-w a[href*="customer_cabinet__logout"] {
    display: none !important;
}

/* ============================================
   Mobile Responsive (< 1024px)
   ============================================ */

@media (max-width: 1023px) {
    /* Issue #3: Remove global padding from content, apply to header and px-0 */
    .woocommerce-account .has-global-padding:not(header):not(.site-header) {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .woocommerce-account header.has-global-padding,
    .woocommerce-account .site-header.has-global-padding {
        padding-right: var(--wp--style--root--padding-right) !important;
        padding-left: var(--wp--style--root--padding-left) !important;
    }

    /* Content area: 0 padding - React components handle their own */

    .woocommerce-account .dashboard-stats {
        grid-template-columns: 1fr;
    }

    /* LatePoint form fields - stack vertically on mobile */
    .latepoint-w .os-row,
    .latepoint .os-row {
        flex-direction: column !important;
    }

    .latepoint-w .os-col-6,
    .latepoint .os-col-6,
    .latepoint-w .os-col-4,
    .latepoint .os-col-4,
    .latepoint-w .os-col-8,
    .latepoint .os-col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .woocommerce-account .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Large (≥1200px) */
@media (min-width: 1200px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        max-width: clamp(1200px, 85vw, 1400px);
    }
}

/* ============================================
   LatePoint Bookings Endpoint - Padding Fixes
   ============================================ */

/**
 * Remove double padding on LatePoint bookings endpoint
 *
 * ISSUE: Two layers of padding reduce viewport unnecessarily:
 * 1. WordPress block wrapper (.has-global-padding) adds theme-level padding (from theme.json)
 * 2. LatePoint wrapper (.latepoint-w) adds plugin-level padding
 *
 * SOLUTION: Aggressively override all padding sources on My Account pages
 *
 * NOTE: Multiple selectors with increasing specificity to ensure override works
 * regardless of CSS load order or WordPress theme CSS specificity.
 */

/* v3.3.2: Remove WordPress global padding ONLY from content areas (preserve header padding) */
.woocommerce-account .woocommerce-MyAccount-content .has-global-padding,
.woocommerce-account .wp-block-post-content .has-global-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* v3.3.2: Remove WordPress block constrained layout padding ONLY from content areas */
.woocommerce-account .woocommerce-MyAccount-content .wp-block-group.is-layout-constrained,
.woocommerce-account .wp-block-post-content .wp-block-group.is-layout-constrained {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* v3.3.2: Remove alignwide padding override ONLY from content areas */
.woocommerce-account .woocommerce-MyAccount-content .alignwide.has-global-padding,
.woocommerce-account .wp-block-post-content .alignwide.has-global-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Preserve header padding on ALL screens - prevents header clipping */
.woocommerce-account header.has-global-padding,
.woocommerce-account .site-header.has-global-padding {
    padding-right: var(--wp--style--root--padding-right) !important;
    padding-left: var(--wp--style--root--padding-left) !important;
}

/* v3.3.5: Remove left/right padding from LatePoint bookings content (desktop only) */
@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* Remove LatePoint wrapper padding (plugin CSS override) */
.woocommerce-account .latepoint-w {
    padding: 0 !important;
}

/* Remove LatePoint wrapper padding - Content level */
.woocommerce-account .woocommerce-MyAccount-content .latepoint-w {
    padding: 0 !important;
}

/* v3.3.5: Keep minimal VERTICAL padding only (no horizontal padding) */
.woocommerce-account .woocommerce-MyAccount-content .latepoint-w > * {
    padding-top: clamp(12px, 2vw, 16px);
    padding-bottom: clamp(12px, 2vw, 16px);
    padding-left: 0;
    padding-right: 0;
}

/* Maintain padding on LatePoint tab navigation for proper spacing */
.woocommerce-account .woocommerce-MyAccount-content .latepoint-w .customer-dashboard-tabs {
    padding: 4px clamp(16px, 2.5vw, 20px) 4px clamp(16px, 2.5vw, 20px) !important;
    margin-bottom: clamp(16px, 2.5vw, 20px) !important;
}

/* Mobile: Reduce padding further on small screens */
@media (max-width: 1023px) {
    .woocommerce-account .woocommerce-MyAccount-content .latepoint-w > * {
        padding: clamp(8px, 2vw, 12px);
    }
}

/* ============================================
   Mobile Bottom Navigation Bar (v3.6.0)
   ============================================ */

/**
 * Fixed bottom tab bar for mobile/tablet (<1024px)
 * Uses checkbox hack for "More" menu toggle
 * Glassmorphism effect matching treatment-mobile-book-bar
 */

/* Hide default top navigation on mobile/tablet */
@media (max-width: 1023px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        display: none !important;
    }
}

/* Mobile bottom tab bar container */
@media (max-width: 1023px) {
    .woocommerce-account .mobile-bottom-nav {
        display: flex;
        position: fixed;
        /* Floating nav: 12px spacing from edges */
        bottom: calc(12px + env(safe-area-inset-bottom, 0));
        left: 12px;
        right: 12px;
        z-index: var(--mobile-nav-z);

        /* Glassmorphism: Teal-tinted glass effect (v4.1.0) */
        background: rgba(100, 197, 178, 0.15);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);

        /* Teal-tinted border all around */
        border: 1px solid rgba(100, 197, 178, 0.3);
        border-radius: 24px; /* v4.2.0: Increased for fully rounded pill effect */

        /* Subtle shadow for depth */
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.1),
            0 2px 4px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);

        /* h-16 = 64px */
        height: 64px;
        padding: 0 8px;

        /* Layout - justify-around items-center */
        justify-content: space-around;
        align-items: center;

        /* Smooth hide/show transition */
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Hide nav when at bottom of page */
    .woocommerce-account .mobile-bottom-nav.nav-hidden {
        transform: translateY(calc(100% + 24px)); /* Extra space for margin + border-radius */
        opacity: 0;
    }

    .woocommerce-account .more-menu-overlay.nav-hidden {
        opacity: 0;
        pointer-events: none;
    }

    /* Content padding to account for floating nav (64px height + 12px bottom margin + 12px extra) */
    .woocommerce-account .woocommerce-MyAccount-content {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0)) !important;
    }

}

/* Tab buttons styling - matching React TabItem component */
@media (max-width: 1023px) {
    .woocommerce-account .mobile-bottom-nav > a,
    .woocommerce-account .mobile-bottom-nav > label {
        /* flex flex-col items-center justify-center gap-1 flex-1 py-2 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px; /* gap-1 */
        flex: 1;
        padding: 8px 0; /* py-2 */

        /* text-[10px] font-bold uppercase tracking-wider */
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em; /* tracking-wider */
        text-transform: uppercase;
        text-decoration: none;

        /* text-slate-400 */
        color: #94a3b8;

        /* Interaction */
        cursor: pointer;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Icon styling (Flaticon images via ::before) */
    .woocommerce-account .mobile-bottom-nav > a::before,
    .woocommerce-account .mobile-bottom-nav > label::before {
        content: '';
        display: block;
        width: 22px;
        height: 22px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

    /* Active/hover state - full opacity */
    .woocommerce-account .mobile-bottom-nav > a.is-active::before,
    .woocommerce-account .mobile-bottom-nav > a:hover::before,
    .woocommerce-account .mobile-bottom-nav > label:hover::before {
        opacity: 1;
    }

    /* Icon mappings - Flaticon webp images */
    .woocommerce-account .mobile-bottom-nav > a[href$="/my-account/"]::before,
    .woocommerce-account .mobile-bottom-nav > a[href*="my-account/?"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/apps.webp');
    }

    .woocommerce-account .mobile-bottom-nav > a[href*="latepoint-bookings"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/calendar-clock.webp');
    }

    .woocommerce-account .mobile-bottom-nav > a[href*="treatment-plans"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/heart.webp');
    }

    .woocommerce-account .mobile-bottom-nav > a[href*="edit-account"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/edit.webp');
    }

    .woocommerce-account .mobile-bottom-nav > label[for="more-menu-toggle"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/menu-dots-vertical.svg');
    }

    /* Hover state - hover:text-slate-600 */
    .woocommerce-account .mobile-bottom-nav > a:hover,
    .woocommerce-account .mobile-bottom-nav > label:hover {
        color: #475569; /* slate-600 */
    }

    /* Active tap state */
    .woocommerce-account .mobile-bottom-nav > a:active,
    .woocommerce-account .mobile-bottom-nav > label:active {
        transform: scale(0.95);
    }

    /* Active page state - text-teal-600 */
    .woocommerce-account .mobile-bottom-nav > a.is-active {
        color: #0d9488; /* teal-600 */
    }
}

/* ============================================
   "More" Menu Overlay (v3.6.0)
   ============================================ */

/* More menu checkbox (visually hidden but accessible) */
@media (max-width: 1023px) {
    .woocommerce-account .more-menu-checkbox {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Backdrop overlay - matching React: bg-slate-900/40 backdrop-blur-sm */
    .woocommerce-account .more-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--mobile-nav-z) - 1);

        /* Hidden by default */
        background: transparent;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease, background 0.2s ease;
    }

    /* Show backdrop when checkbox is checked */
    .woocommerce-account .more-menu-checkbox:checked ~ .more-menu-backdrop {
        /* bg-slate-900/40 = rgba(15, 23, 42, 0.4) */
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px); /* backdrop-blur-sm */
        -webkit-backdrop-filter: blur(4px);
        pointer-events: auto;
        opacity: 1;
        cursor: pointer;
    }

    /* More menu dropdown - matching React panel styling */
    .woocommerce-account .more-menu-dropdown {
        position: fixed;
        /* Position above floating nav: 64px nav + 12px bottom margin + 8px gap */
        bottom: calc(84px + env(safe-area-inset-bottom, 0));
        left: 12px;
        right: 12px;

        /* bg-white rounded-3xl p-6 shadow-2xl */
        background: #ffffff;
        border-radius: 24px; /* rounded-3xl */
        padding: 24px; /* p-6 */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */

        /* Hidden by default */
        opacity: 0;
        transform: translateY(40px);
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

        z-index: calc(var(--mobile-nav-z) + 1);
    }

    /* Show dropdown when checkbox is checked */
    .woocommerce-account .more-menu-checkbox:checked ~ .more-menu-dropdown {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    /* More menu header - text-xs font-black text-slate-400 uppercase tracking-widest mb-4 */
    .woocommerce-account .more-menu-dropdown .more-menu-header {
        font-size: 12px; /* text-xs */
        font-weight: 900; /* font-black */
        color: #94a3b8; /* text-slate-400 */
        text-transform: uppercase;
        letter-spacing: 0.1em; /* tracking-widest */
        margin: 0 0 16px 0; /* mb-4 */
    }

    /* More menu grid - grid-cols-2 gap-3 */
    .woocommerce-account .more-menu-dropdown .more-menu-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* gap-3 */
    }

    /* More menu items - p-4 bg-slate-50 rounded-2xl text-slate-700 font-bold text-sm */
    .woocommerce-account .more-menu-dropdown .more-menu-grid a {
        display: flex;
        align-items: center;
        gap: 12px; /* gap-3 */
        padding: 16px; /* p-4 */
        background: #f8fafc; /* bg-slate-50 */
        color: #334155; /* text-slate-700 */
        text-decoration: none;
        font-size: 14px; /* text-sm */
        font-weight: 700; /* font-bold */
        border-radius: 16px; /* rounded-2xl */
        transition: transform 0.15s ease;
    }

    /* active:scale-95 */
    .woocommerce-account .more-menu-dropdown .more-menu-grid a:active {
        transform: scale(0.95);
    }

    /* More menu icons - Flaticon images */
    .woocommerce-account .more-menu-dropdown .more-menu-grid a::before {
        content: '';
        width: 18px;
        height: 18px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
    }

    /* More menu icon mappings - Flaticon webp images */
    .woocommerce-account .more-menu-dropdown a[href*="treatment-photos"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/camera.webp');
    }

    .woocommerce-account .more-menu-dropdown a[href*="orders"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/shopping-bag.webp');
    }

    .woocommerce-account .more-menu-dropdown a[href*="edit-address"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/marker.webp');
    }

    .woocommerce-account .more-menu-dropdown a[href*="edit-account"]:not(.more-menu-logout)::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/edit.webp');
    }

    /* Add missing Bookings icon in more menu */
    .woocommerce-account .more-menu-dropdown a[href*="latepoint-bookings"]::before {
        background-image: url('https://claudineskincare.com/wp-content/uploads/2025/12/calendar-clock.webp');
    }

    /* Logout button - w-full mt-6 flex items-center justify-center gap-2 p-4 text-red-500 font-bold border-t border-slate-100 */
    .woocommerce-account .more-menu-dropdown a.more-menu-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px; /* gap-2 */
        width: 100%;
        margin-top: 24px; /* mt-6 */
        padding: 16px; /* p-4 */
        color: #ef4444; /* text-red-500 */
        font-weight: 700; /* font-bold */
        text-decoration: none;
        border-top: 1px solid #f1f5f9; /* border-slate-100 */
        background: transparent;
        border-radius: 0;
    }

    .woocommerce-account .more-menu-dropdown a.more-menu-logout::before {
        font-family: bootstrap-icons;
        content: "\f1c3"; /* bi-box-arrow-right (LogOut icon) */
        font-size: 18px;
        color: #ef4444;
    }

    /* More button active state when menu is open - text-teal-600 */
    .woocommerce-account .more-menu-checkbox:checked ~ .mobile-bottom-nav .mobile-nav-more {
        color: #0d9488; /* teal-600 */
    }
}

/* Desktop: Hide mobile navigation elements */
@media (min-width: 1024px) {
    .woocommerce-account .mobile-bottom-nav,
    .woocommerce-account .more-menu-dropdown,
    .woocommerce-account .more-menu-checkbox,
    .woocommerce-account .more-menu-backdrop {
        display: none !important;
    }
}

/* ============================================
   Accessibility & Reduced Motion (v3.6.0)
   ============================================ */

/* Focus states for keyboard navigation */
@media (max-width: 1023px) {
    .woocommerce-account .mobile-bottom-nav > a:focus-visible,
    .woocommerce-account .mobile-bottom-nav > label:focus-visible {
        outline: 2px solid var(--color-teal);
        outline-offset: 2px;
        border-radius: 8px;
    }

    .woocommerce-account .more-menu-dropdown a:focus-visible {
        outline: 2px solid var(--color-teal);
        outline-offset: -2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-account .mobile-bottom-nav {
        animation: none !important;
    }

    .woocommerce-account .more-menu-dropdown {
        transition: opacity 0.1s !important;
        transform: none !important;
    }

    .woocommerce-account .more-menu-backdrop {
        transition: opacity 0.1s !important;
    }

    .woocommerce-account .mobile-bottom-nav > a::before,
    .woocommerce-account .mobile-bottom-nav > label::before {
        transition: none !important;
    }
}

/* Glassmorphism fallback for older browsers */
@supports not (backdrop-filter: blur(16px)) {
    .woocommerce-account .mobile-bottom-nav {
        /* Teal-tinted solid fallback when backdrop-filter not supported */
        background: var(--glass-teal-bg);
        border-color: rgba(100, 197, 178, 0.5);
    }

    .woocommerce-account .more-menu-dropdown {
        background: rgba(255, 255, 255, 0.99);
    }

    .woocommerce-account .more-menu-backdrop {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* ============================================
   v4.2.0: Spinner Animation on Menu Item Tap
   ============================================ */

/* Spinner keyframes animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* When a menu item is clicked, show spinner */
@media (max-width: 1023px) {
    .woocommerce-account .mobile-bottom-nav > a.is-loading::after,
    .woocommerce-account .more-menu-dropdown .more-menu-grid a.is-loading::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(100, 197, 178, 0.3);
        border-top-color: #0d9488; /* teal-600 */
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-left: 6px;
        vertical-align: middle;
    }

    /* Hide the icon when loading */
    .woocommerce-account .mobile-bottom-nav > a.is-loading::before {
        display: none;
    }
}

/* ============================================
   v4.2.0: Margin Fixes (issues.md)
   ============================================ */

/* Remove margin-bottom from entry-content */
.woocommerce-account .entry-content.alignwide.wp-block-post-content {
    margin-bottom: 0 !important;
}

/* Alternative selectors for entry-content */
.woocommerce-account .wp-block-post-content.is-layout-flow {
    margin-bottom: 0 !important;
}

/* ============================================
   v4.2.0: Quote Cards Title Styling (issues.md)
   ============================================ */

.woocommerce-account #quote-cards-title {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
    font-weight: 800;
    letter-spacing: -0.025em !important;
    color: rgb(30 41 59) !important; /* text-slate-800 */
}

/* ============================================
   LatePoint Integration - No Custom Hiding
   ============================================ */

/**
 * v2.0.0: LatePoint customer dashboard displays inline at /my-account/latepoint-bookings/
 *
 * Duplicate UI elements (logout links, welcome messages, navigation) are visible.
 * Pills remain visible alongside LatePoint dashboard content.
 *
 * Future: May add CSS to hide specific duplicate elements if needed.
 */