/* Reset and Base Styles */
    * {
        box-sizing: border-box;
    }

    /* Base Header Styles */
    .main-header {
        position: fixed !important;
        top: 40px !important; /* Account for top header */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        height: auto !important;
        padding: 0 !important;
        display: block !important;
        border-bottom: none !important;
    }

    /* Desktop Navigation */
    .desktop-nav {
        background: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 10px !important;
        width: 100% !important;
        height: 80px !important;
        margin: 0 !important;
        max-width: none !important;
    }



    @media (max-width: 768px) {
        .top-header {
            height: 35px !important;
        }

        /* Adjust main header position for mobile */
        .main-header {
            top: 35px !important; /* Account for mobile top header */
            overflow: visible !important; /* Allow badge overflow */
        }
    }

    @media (max-width: 480px) {
        .main-header {
            top: 32px !important; /* Account for small mobile top header */
            overflow: visible !important; /* Allow badge overflow */
        }
    }

    /* Logo and links on the left */
    .nav-left {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 60px; /* Space between logo and links */
        order: 1;
    }

    .nav-logo {
        flex: 0 0 auto;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    /* Icons on the right */
    .nav-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        order: 2;
    }

    /* RTL Support - Keep layout same as LTR */
    [dir="rtl"] .desktop-nav,
    .main-header.rtl .desktop-nav {
        direction: ltr !important;
    }

    [dir="rtl"] .nav-left,
    .main-header.rtl .nav-left {
        order: 1 !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 60px !important;
    }

    [dir="rtl"] .nav-right,
    .main-header.rtl .nav-right {
        order: 2 !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
    }

    /* Navigation Links */
    .nav-links a {
        text-decoration: none;
        color: #333;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: color 0.3s ease;
    }

    .nav-links a:hover {
        color: #000;
    }

    /* Icon Links */
    .icon-links {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* Logged out state - only 2 icons */
    .icon-links.logged-out {
        gap: 15px;
    }

    .icon-links a,
    .icon-links button {
        color: #333;
        font-size: 20px;
        transition: color 0.3s ease;
        position: relative;
    }

    .icon-links a:hover,
    .icon-links button:hover {
        color: #000;
    }

    /* RTL Icon Links - Keep them LTR */
    [dir="rtl"] .icon-links,
    .main-header.rtl .icon-links {
        direction: ltr !important;
    }

    /* RTL - maintain same gap for logged out state */
    [dir="rtl"] .icon-links.logged-out {
        gap: 15px;
    }

    /* Language Selector */
    .language-selector {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        margin-left: 20px;
    }

    .main-header.rtl .language-selector {
        margin-left: 0;
        margin-right: 20px;
        direction: ltr;
    }

    .language-selector a {
        text-decoration: none;
        color: #666;
        transition: color 0.3s ease;
    }

    .language-selector .active-lang {
        color: #000;
        font-weight: bold;
    }

    .language-selector .lang-separator {
        color: #999;
    }

    /* Logo Styles */
    .site-logo {
        max-height: 80px;
        width: 120px;
        object-fit: contain;
    }

    .site-logo-mobile,
    .sidenav-logo-img {
        max-height: 40px;
        width: auto;
        object-fit: contain;
    }

    /* Fallback text logo styles */
    .nav-logo .logo-text-shared {
        display: inline-flex;
        gap: 2px;
        font-weight: bold;
        font-size: 40px;
        letter-spacing: 2px;
    }

    .mobile-logo .logo-text-shared,
    .sidenav-logo .logo-text-shared {
        display: inline-flex;
        gap: 2px;
        font-weight: bold;
        font-size: 20px;
        letter-spacing: 2px;
    }

    /* Badge styles moved to cart-badge.css for centralized management */

    /* Mobile Controls */
    .mobile-controls {
        display: none !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 20px !important;
        background: white !important;
        height: 60px !important;
        overflow: visible !important; /* Allow badge to overflow */
        position: relative !important;
    }

    .mobile-logo {
        order: 1;
        flex: 0 0 auto;
    }

    .mobile-header-icons {
        order: 2;
        display: flex;
        align-items: center;
        gap: 15px;
        flex: 0 0 auto;
        position: relative;
        overflow: visible !important; /* Ensure badges aren't clipped */
    }

    /* Ensure mobile cart icon links allow badge overflow */
    .mobile-header-icons a,
    .mobile-header-icons .cart-icon-link {
        position: relative !important;
        overflow: visible !important;
    }

    .hamburger-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: #333;
        cursor: pointer;
        padding: 10px;
    }

    .main-header.rtl .mobile-controls {
        direction: rtl;
    }

    .main-header.rtl .mobile-logo {
        order: 2;
    }

    .main-header.rtl .mobile-header-icons {
        order: 1;
    }

    /* Sidenav Styles */
    .sidenav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1001;
        transition: right 0.3s ease;
        overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        display: none; /* Hide by default */
    }

    /* Only show sidenav on mobile/tablet */
    @media (max-width: 1024px) {
        .sidenav {
            display: block;
            width: 100% !important; /* Full width on mobile */
        }
    }

    .sidenav.rtl {
        right: auto;
        left: -100%;
        width: 100%;
        transition: left 0.3s ease;
        direction: rtl;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidenav.open {
        right: 0;
    }

    .sidenav.rtl.open {
        right: auto;
        left: 0;
    }

    /* Sidenav Header */
    .sidenav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #eee;
    }


    .close-sidenav-btn {
        background: none;
        border: none;
        font-size: 30px;
        color: #333;
        cursor: pointer;
        line-height: 1;
    }

    /* Sidenav Navigation */
    .sidenav nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidenav nav ul li {
        border-bottom: 1px solid #eee;
    }

    .sidenav nav ul li a {
        display: block;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
        transition: background 0.3s ease;
    }

    .sidenav nav ul li a:hover {
        background: #f5f5f5;
    }

    .sidenav nav ul li.divider {
        border-bottom: 2px solid #ddd;
        margin: 10px 0;
    }

    /* Sidenav Icon Links */
    .sidenav-icon-links {
        padding: 20px;
        border-top: 1px solid #eee;
        display: block;
    }

    .sidenav-icon-links a,
    .sidenav-icon-links button {
        display: block;
        padding: 12px 0;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        text-transform: uppercase;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
    }
    
    
    .sidenav-icon-links a:last-child,
    .sidenav-icon-links button:last-child {
        border-bottom: none;
    }
    
    /* Logout button specific styling */
    .sidenav-logout-btn {
        display: block;
        width: 100%;
        padding: 12px 0;
        font-size: 14px;
        color: #333;
        text-transform: uppercase;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .sidenav-logout-btn i {
        display: inline-block !important;
        margin-right: 15px !important;
        margin-left: 0 !important;
        width: 20px !important;
        text-align: center !important;
        font-size: 18px !important;
        vertical-align: middle !important;
    }
    
    .sidenav-logout-btn span {
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    .sidenav.rtl .sidenav-logout-btn {
        text-align: right;
    }
    
    .sidenav.rtl .sidenav-logout-btn i {
        margin-right: 0 !important;
        margin-left: 15px !important;
    }

    /* Ensure ALL icons in sidenav have proper spacing */
    .sidenav-icon-links i,
    .sidenav-icon-links .fas,
    .sidenav-icon-links .far,
    .sidenav-icon-links .fab {
        display: inline-block !important;
        margin-right: 15px !important;
        margin-left: 0 !important;
        width: 20px !important;
        text-align: center !important;
        font-size: 18px !important;
        vertical-align: middle !important;
    }
    
    .sidenav-icon-links .icon-label,
    .sidenav-icon-links span {
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* RTL: Swap margins for ALL icons */
    .sidenav.rtl .sidenav-icon-links i,
    .sidenav.rtl .sidenav-icon-links .fas,
    .sidenav.rtl .sidenav-icon-links .far,
    .sidenav.rtl .sidenav-icon-links .fab {
        margin-right: 0 !important;
        margin-left: 15px !important;
    }

    .sidenav.rtl .sidenav-icon-links a,
    .sidenav.rtl .sidenav-icon-links button {
        text-align: right;
    }

    .sidenav.rtl .sidenav-icon-links i {
        margin-right: 0;
        margin-left: 15px;
    }

    /* Hide cart/wishlist counts in mobile sidenav */
    .sidenav .mobile-cart-badge,
    .sidenav .cart-count-badge,
    .sidenav .wishlist-count-badge {
        display: none !important;
    }
    
    /* Sidenav Language Selector */
    .sidenav-language-selector {
        padding: 20px;
        text-align: center;
        border-top: 1px solid #eee;
    }

    .sidenav-language-selector a {
        color: #666;
        text-decoration: none;
    }

    .sidenav-language-selector .active-lang {
        color: #000;
        font-weight: bold;
    }

    /* Overlay */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .overlay.active {
        display: block;
        opacity: 1;
    }

    /* Search Overlay Styles - NO ANIMATIONS */
    .search-overlay {
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: none;
        align-items: center;
        justify-content: center;
    }

    .search-overlay.active {
        display: flex !important;
    }
    
    /* Ensure consistent sizing across all pages */
    .search-modal {
        margin: auto;
        position: relative;
    }
    
    /* Desktop larger screens */
    @media (min-width: 1400px) {
        .search-modal {
            width: 800px;
            height: 450px;
        }
    }

    .search-modal {
        position: relative;
        background: #ffffff;
        border-radius: 0;
        width: 700px;
        height: 400px;
        padding: 60px 50px;
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.15),
            0 10px 20px rgba(0, 0, 0, 0.1);
        text-align: center;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .search-modal.rtl {
        direction: rtl;
    }

    /* Close Button */
    .search-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        background: #f8f9fa;
        border: none;
        border-radius: 50%;
        font-size: 16px;
        color: #6c757d;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .search-modal.rtl .search-close-btn {
        right: auto;
        left: 20px;
    }

    .search-close-btn:hover {
        background: #e9ecef;
        color: #495057;
    }

    /* Search Icon */
    .search-icon-wrapper {
        margin-bottom: 20px;
    }

    .search-icon {
        font-size: 48px;
        color: #6c757d;
        background: linear-gradient(135deg, #000000 0%, #434343 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Title */
    .search-modal-title {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 35px;
        color: #212529;
        line-height: 1.2;
    }

    /* Form */
    .search-modal-form {
    }

    .search-input-wrapper {
        position: relative;
        margin-bottom: 30px;
    }

    .search-modal-input {
        width: 100%;
        padding: 20px 0;
        font-size: 18px;
        border: none;
        border-bottom: 2px solid #e9ecef;
        background: transparent;
        outline: none;
        color: #212529;
        text-align: left;
    }
    
    .search-modal-input::placeholder {
        text-align: left;
    }
    
    /* RTL support for search modal */
    .search-modal.rtl {
        direction: rtl;
    }
    
    .search-modal.rtl .search-modal-input {
        text-align: right;
        direction: rtl;
    }
    
    .search-modal.rtl .search-modal-input::placeholder {
        text-align: right;
    }
    
    .search-modal.rtl .search-close-btn {
        right: auto;
        left: 20px;
    }
    
    .search-modal.rtl .search-modal-submit {
        flex-direction: row-reverse;
    }
    
    .search-modal.rtl .search-modal-submit i.fa-arrow-right {
        margin-left: 0;
        margin-right: 12px;
    }
    
    /* Change arrow icon to left arrow in RTL */
    .search-modal.rtl .search-modal-submit i.fa-arrow-right:before {
        content: "\f060"; /* fa-arrow-left */
    }

    .search-modal-input::placeholder {
        color: #adb5bd;
        font-weight: 400;
    }

    .search-modal-input:focus {
        border-bottom-color: #000000;
    }

    .search-input-line {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #000000 0%, #434343 100%);
        transform: translateX(-50%);
    }

    .search-modal-input:focus+.search-input-line {
        width: 100%;
    }

    /* Submit Button */
    .search-modal-submit {
        background: linear-gradient(135deg, #000000 0%, #434343 100%);
        color: #ffffff;
        padding: 16px 40px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        border-radius: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .search-modal-submit:hover {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
    }


    /* Responsive Design */
    @media (max-width: 1024px) {
        /* Hide entire desktop nav on mobile */
        header.main-header .desktop-nav,
        header.main-header nav.desktop-nav {
            display: none !important;
            visibility: hidden !important;
        }

        /* Hide desktop nav links specifically */
        .nav-left,
        .nav-right,
        .nav-logo {
            display: none !important;
        }

        header.main-header .mobile-controls {
            display: flex !important;
        }
    }

    /* Desktop specific styles */
    @media (min-width: 769px) {
        header.main-header .mobile-controls {
            display: none !important;
        }

        header.main-header .desktop-nav {
            display: flex !important;
        }
    }

    /* Ensure sidenav and all mobile elements are hidden on large screens */
    @media (min-width: 1025px) {
        .sidenav,
        .overlay,
        .mobile-controls,
        .mobile-logo,
        .mobile-header-icons,
        .hamburger-btn {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Hide mobile cart badge only on desktop */
        .mobile-cart-badge {
            display: none !important;
        }
    }

    /* Tablet view */
    @media (max-width: 768px) {
        /* Ensure desktop nav is hidden in tablet/mobile for both LTR and RTL */
        .desktop-nav,
        [dir="rtl"] .desktop-nav,
        .main-header .desktop-nav,
        [dir="rtl"] .main-header .desktop-nav {
            display: none !important;
        }

        .search-modal {
            width: calc(100vw - 40px);
            max-width: 600px;
            height: 350px;
            padding: 50px 30px;
        }

        .search-modal-title {
            font-size: 24px;
        }

        .search-modal-input {
            font-size: 16px;
            padding: 18px 0;
        }

        .search-icon {
            font-size: 40px;
        }
    }

    /* Mobile view */
    @media (max-width: 480px) {
        /* Ensure desktop nav is hidden in mobile for both LTR and RTL */
        .desktop-nav,
        [dir="rtl"] .desktop-nav,
        .main-header .desktop-nav,
        [dir="rtl"] .main-header .desktop-nav {
            display: none !important;
        }

        .search-modal {
            width: calc(100vw - 30px);
            max-width: 100%;
            height: 320px;
            padding: 40px 20px;
        }

        .search-modal-title {
            font-size: 20px;
            margin-bottom: 25px;
        }

        .search-modal-submit {
            padding: 14px 30px;
            font-size: 14px;
        }
    }




/* Top Header Styles */
.top-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
    background-color: #000 !important;
    color: #fff;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #222;
    display: block !important;
    height: 40px !important;
}

.top-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-header-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 200px;
}

.top-header-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.top-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 100px;
}

.top-header .email-link {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.top-header .email-link:hover {
    opacity: 0.8;
}

.top-header .free-shipping-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-header .social-icons {
    display: flex;
    gap: 15px;
}

.top-header .social-icons a {
    color: #fff;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.top-header .social-icons a:hover {
    transform: translateY(-2px);
}

/* Mobile Responsive - Improved */
@media (max-width: 768px) {
    .top-header {
        font-size: 10px;
        padding: 0 !important; /* Remove all padding */
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-header-container {
        padding: 0 !important; /* Remove all padding */
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center !important; /* Center the content */
        align-items: center;
        max-width: 100%;
    }

    .top-header-center {
        flex: none; /* Don't grow or shrink */
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 100%;
    }

    .top-header .free-shipping-text {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
    }
    
    .top-header-right {
        flex: 0 0 auto; /* Fixed width for social icons */
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }
    
    /* Email - show with full text */
    .top-header .email-link {
        font-size: 9px;
        gap: 4px;
        white-space: nowrap;
    }
    
    .top-header .email-link span {
        display: inline; /* Show email text */
        font-size: 9px;
    }
    
    .top-header .email-link i {
        font-size: 10px;
    }
    
    /* Center shipping text - can expand more */
    .top-header .free-shipping-text {
        font-size: 9px;
        letter-spacing: 0;
        gap: 4px;
        white-space: nowrap;
    }
    
    .top-header .free-shipping-text i {
        font-size: 10px;
    }
    
    /* Social icons - ensure always visible */
    .top-header-right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .top-header .social-icons {
        display: flex !important;
        gap: 8px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .top-header .social-icons a {
        display: block !important;
        font-size: 12px;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff;
    }

    /* Mobile header icons - override Bootstrap default link color */
    .mobile-header-icons a, .mobile-header-icons button {
        color: #333 !important;
        font-size: 20px;
        cursor: pointer;
    }

    .mobile-header-icons a:hover, .mobile-header-icons button:hover {
        color: #000 !important;
    }

    /* Adjust main header position */
    .main-header {
        top: 36px !important;
    }
    
}

/* Small mobile screens */
@media (max-width: 480px) {
    .top-header {
        font-size: 8px;
        padding: 6px 10px; /* Added horizontal padding */
        height: 32px;
    }
    
    .top-header-container {
        padding: 0;
        gap: 5px;
        width: 100%;
    }
    
    /* Maintain balanced flex distribution */
    .top-header-left {
        flex: 0 1 auto;
        display: flex !important;
        min-width: 0;
    }
    
    .top-header-center {
        flex: 1 0 auto;
        display: flex !important;
        padding: 0 3px;
        min-width: 0;
    }
    
    .top-header-right {
        flex: 0 0 auto;
        display: flex !important;
        min-width: 0;
    }
    
    /* Email on very small screens */
    .top-header .email-link {
        font-size: 8px;
    }
    
    .top-header .email-link i {
        font-size: 9px;
    }
    
    .top-header .email-link span {
        font-size: 8px;
        white-space: nowrap;
    }
    
    .top-header .free-shipping-text {
        font-size: 8px;
        gap: 3px;
    }
    
    .top-header .free-shipping-text i {
        font-size: 9px;
    }
    
    .top-header .social-icons {
        display: flex !important;
        gap: 6px;
        visibility: visible !important;
    }
    
    .top-header .social-icons a {
        display: block !important;
        font-size: 10px;
        visibility: visible !important;
        color: #fff !important;
    }
    
    /* Adjust main header for very small screens */
    .main-header {
        top: 32px !important;
    }
    
}

/* RTL Support for Top Header */
[dir="rtl"] .top-header-left {
    justify-content: flex-end;
}

[dir="rtl"] .top-header-right {
    justify-content: flex-start;
}

[dir="rtl"] .top-header .email-link,
[dir="rtl"] .top-header .free-shipping-text {
    flex-direction: row-reverse;
}

/* RTL Mobile Support - Ensure social icons stay visible */
@media (max-width: 768px) {
    [dir="rtl"] .top-header-container {
        direction: rtl;
    }
    
    [dir="rtl"] .top-header-left {
        order: 3;
        justify-content: flex-end;
    }
    
    [dir="rtl"] .top-header-center {
        order: 2;
        direction: rtl;
    }
    
    [dir="rtl"] .top-header-right {
        order: 1;
        justify-content: flex-start;
    }
    
    /* Ensure all sections remain visible in RTL */
    [dir="rtl"] .top-header-left,
    [dir="rtl"] .top-header-center,
    [dir="rtl"] .top-header-right {
        display: flex !important;
        visibility: visible !important;
    }
    
    [dir="rtl"] .top-header .social-icons {
        display: flex !important;
        gap: 5px;
    }
    
    [dir="rtl"] .top-header .social-icons a {
        display: inline-block !important;
        visibility: visible !important;
    }
}

/* ===================================================================
   HEADER LOGOUT FORM AND BUTTON STYLES
   =================================================================== */

/* Logout form - display inline */
.logout-form {
    display: inline !important;
}

/* Logout button - desktop header */
.logout-btn {
    background: none !important;
    border: none !important;
    padding: 10px !important;
    cursor: pointer !important;
}

/* Logout icon - desktop header */
.logout-icon {
    font-size: 22px !important;
}

/* ===================================================================
   FINAL RTL OVERRIDE - Keep header layout consistent across languages
   Must come AFTER all other rules to override rtl.css
   Only apply on desktop screens
   =================================================================== */

@media (min-width: 1025px) {
    /* Force consistent desktop header layout for both RTL and LTR */
    [dir="rtl"] .main-header .desktop-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: ltr !important;
    }

    /* Logo and links ALWAYS on left together */
    [dir="rtl"] .main-header .nav-left,
    [dir="rtl"] .nav-left {
        order: 1 !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 60px !important;
        flex-direction: row !important;
    }

    /* Logo within nav-left */
    [dir="rtl"] .main-header .nav-logo,
    [dir="rtl"] .nav-logo {
        flex: 0 0 auto !important;
        order: unset !important;
    }

    /* Navigation links within nav-left */
    [dir="rtl"] .main-header .nav-links,
    [dir="rtl"] .nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 30px !important;
        flex-direction: row !important;
        order: unset !important;
    }

    /* Icons ALWAYS on right */
    [dir="rtl"] .main-header .nav-right,
    [dir="rtl"] .nav-right {
        order: 2 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-direction: row !important;
    }

    /* Keep icons and language selector in LTR */
    [dir="rtl"] .icon-links,
    [dir="rtl"] .language-selector {
        direction: ltr !important;
        flex-direction: row !important;
    }

    /* Prevent any ul reversal */
    [dir="rtl"] .main-header ul {
        flex-direction: row !important;
    }
}

/* ===================================================================
   CART BADGE STYLES - UNIFIED AND CENTRALIZED IN HEADER CSS
   Badge position is now consistent across all pages
   =================================================================== */

/* Main cart badge styles - Perfect circle with centered count */
.cart-count-badge,
.mobile-cart-badge,
.cart-count,
.mobile-header-icons .cart-count,
.mobile-header-icons .cart-count-badge,
.sidenav-icon-links .cart-count-badge {
    /* Display & Visibility */
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* Dimensions - Perfect circle (same width and height) */
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;

    /* Centering content - PERFECT CENTER */
    align-items: center !important;
    justify-content: center !important;

    /* Appearance */
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 50% !important;

    /* Typography - Perfect centering */
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;

    /* Positioning - better position relative to icon */
    position: absolute !important;
    right: -6px !important;

    /* Other */
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;

    /* Ensure no text alignment issues */
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    vertical-align: baseline !important;
}

/* Ensure parent links have relative positioning - CONSISTENT ACROSS ALL PAGES */
.cart-icon-link,
a:has(.cart-count-badge),
a:has(.mobile-cart-badge) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Fallback for browsers without :has() support */
.icon-links a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hide badge when count is zero */
.cart-count-badge:empty,
.mobile-cart-badge:empty,
.cart-count-badge.hidden,
.mobile-cart-badge.hidden {
    display: none !important;
}

/* For larger numbers (10+), expand width slightly while keeping circular look */
.cart-count-badge:not(:empty),
.mobile-cart-badge:not(:empty) {
    min-width: 18px !important;
    width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure all icons in the header have consistent height */
.icon-links {
    display: flex !important;
    align-items: center !important;
}

.icon-links a {
    position: relative !important;
}

/* Ensure cart icon is always consistent */
.icon-links .fa-shopping-cart {
    display: inline-block !important;
    height: auto !important;
}

/* Cart badge RTL support */
[dir="rtl"] .cart-count-badge,
[dir="rtl"] .mobile-cart-badge,
[dir="rtl"] .cart-count {
    right: auto !important;
    left: 0 !important;
    top: -6px !important;
}

.main-header.rtl .cart-count-badge,
.main-header.rtl .mobile-cart-badge {
    right: auto !important;
    left: 0 !important;
    top: -6px !important;
}

/* Mobile responsive - maintain consistent position */
@media (max-width: 768px) {
    .mobile-cart-badge,
    .sidenav-icon-links .cart-count-badge,
    .mobile-header-icons .cart-count,
    .mobile-header-icons .cart-count-badge {
        /* Ensure visibility on mobile */
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Same size on mobile for consistency */
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;

        /* Positioning for mobile */
        position: absolute !important;
        top: -5px !important;
        right: -10px !important;

        /* Smaller font */
        font-size: 9px !important;
        line-height: 1 !important;

        /* Perfect centering */
        align-items: center !important;
        justify-content: center !important;

        /* Ensure proper z-index on mobile */
        z-index: 100 !important;
    }

    /* Ensure mobile cart icon link has position relative */
    .mobile-header-icons a {
        position: relative !important;
    }

    /* Keep badge circular on mobile for all numbers */
    .mobile-cart-badge:not(:empty),
    .sidenav-icon-links .cart-count-badge:not(:empty) {
        width: 16px !important;
        max-width: 16px !important;
        padding: 0 !important;
    }

    /* RTL on mobile - keep badge on left side for Arabic */
    [dir="rtl"] .mobile-cart-badge,
    [dir="rtl"] .sidenav-icon-links .cart-count-badge,
    [dir="rtl"] .mobile-header-icons .cart-count-badge {
        right: auto !important;
        left: 0 !important;
        top: -5px !important;
    }
}

/* Hide in sidenav when not needed */
.sidenav .mobile-cart-badge.hide-in-sidenav,
.sidenav .cart-count-badge.hide-in-sidenav {
    display: none !important;
}

/* Ensure mobile cart badge shows in mobile header */
@media (max-width: 1024px) {
    .mobile-header-icons .cart-count-badge,
    .mobile-header-icons .mobile-cart-badge,
    .mobile-controls .cart-count-badge,
    .mobile-controls .mobile-cart-badge {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Wishlist badge - same style for consistency */
.wishlist-count-badge {
    /* Same styles as cart badge */
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #dc3545 !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    position: absolute !important;
    right: -8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

/* Wishlist RTL support */
[dir="rtl"] .wishlist-count-badge {
    right: auto !important;
    left: -8px !important;
}

/* Wishlist mobile */
@media (max-width: 768px) {
    .wishlist-count-badge {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        top: -5px !important;
        right: -5px !important;
        font-size: 10px !important;
    }

    [dir="rtl"] .wishlist-count-badge {
        right: auto !important;
        left: -5px !important;
    }
}