/* ==========================================================================
   Premium Red & Blue Theme Colors Override
   ========================================================================== */

:root {
    --primary-red: #c21820;    /* Premium Chili/Crimson Red */
    --hover-red: #a01017;      /* Darker Red for Hover */
    --primary-blue: #0f3b75;   /* Premium Deep Royal Blue */
    --hover-blue: #12488a;     /* Vibrant Blue for Hover */
    --dark-blue: #0a2952;      /* Dark Navy Blue */
    --bg-blue: #eef4fc;        /* Light blue tint background */
    --white: #ffffff;
}

/* ==========================================
   RED NAVBAR & RED MAIN NAVIGATION
   ========================================== */
.header-bottom {
    background-color: var(--primary-red) !important;
}

/* Red Navigation menu links hover / active states */
#mainnav ul.menu > li > a {
    color: var(--white) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#mainnav ul.menu > li:last-child > a {
    border-right: none !important;
}

#mainnav ul.menu > li:hover > a,
#mainnav ul.menu > li.active > a {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

#mainnav ul.menu > li:hover > a:after,
#mainnav ul.menu > li.active > a:after {
    background-color:  var(--white) !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* ALL CATEGORIES Button (Contrasting Deep Blue on Navbar) */
#mega-menu .btn-mega {
    background-color: var(--primary-blue) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
}

#mega-menu .btn-mega:hover {
    background-color: var(--dark-blue) !important;
}


/* ==========================================
   RED ACCENTS (Replacing Yellow/Orange)
   ========================================== */

/* Red Prices */
.sale,
.price ins,
.product-detail .price,
.mp-sale-price,
.box-cart .inner-box .dropdown-box > ul > li .info-product .price,
.box-cart .inner-box .dropdown-box .total span.price,
.flat-highlights .product-list.style1 li .info-product .price .sale {
    color: var(--primary-red) !important;
}

/* Red Badges */
.mp-badge,
.imagebox span.item-new,
.imagebox span.item-sale,
.slider-item.style2 .item-text .content-item .price .sale {
    background-color: var(--primary-red) !important;
    box-shadow: 0 4px 10px rgba(194, 24, 32, 0.2) !important;
}

/* Wishlist Heart & Cart Badges */
#wishlist-count,
#cart-count,
.box-cart .inner-box > a > div.icon-cart span {
    background-color: var(--primary-red) !important;
    color: var(--white) !important;
}

/* Red Buttons */
.mp-btn,
.imagebox .box-bottom .btn-add-cart a,
button, 
input[type="submit"], 
input[type="button"], 
input[type="reset"] {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(194, 24, 32, 0.15) !important;
}

.mp-btn:hover,
.imagebox .box-bottom .btn-add-cart a:hover,
button:hover, 
input[type="submit"]:hover, 
input[type="button"]:hover, 
input[type="reset"]:hover {
    background-color: var(--hover-red) !important;
    border-color: var(--hover-red) !important;
    box-shadow: 0 6px 20px rgba(194, 24, 32, 0.3) !important;
}

/* Red Active Tab Switches */
.product-tab .tab-list li.active {
    background: var(--primary-red) !important;
    color: var(--white) !important;
    border-color: var(--primary-red) !important;
    box-shadow: 0 4px 14px rgba(194, 24, 32, 0.3) !important;
}

/* Red Hover States on Cards / Wishlist Buttons */
.modern-product-card:hover {
    border-color: var(--primary-red) !important;
    box-shadow: 0 12px 30px rgba(194, 24, 32, 0.1) !important;
}

.mp-wishlist-btn:hover {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(194, 24, 32, 0.3) !important;
}

.flat-highlights .product-list.style1 li:hover {
    border-color: var(--primary-red) !important;
    box-shadow: 0 10px 20px rgba(194, 24, 32, 0.08) !important;
}

.flat-iconbox .iconbox:hover {
    border-color: var(--primary-red) !important;
    box-shadow: 0 12px 30px rgba(194, 24, 32, 0.08) !important;
}

.flat-iconbox .iconbox:hover .box-header .image {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}

/* Review Stars on hover list */
.flat-highlights .product-list.style1 li .info-product .queue i {
    color: #ffb400 !important; /* Keep stars gold/amber for high premium quality feel */
}


/* ==========================================
   BLUE ACCENTS (Deep Blue Highlights)
   ========================================== */

/* Search bar button */
.top-search form .btn-search button,
.widget_search form.search-form .search-submit {
    background-color: var(--primary-blue) !important;
}

.top-search form .btn-search button img,
.widget_search form.search-form .search-submit img {
    filter: brightness(0) invert(1) !important;
}

.top-search form .btn-search button:hover {
    background-color: var(--hover-blue) !important;
}

/* Section Subtitles & Decorators */
.modern-section-title .sub-title,
.flat-highlights .flat-row-title h3::after {
    color: var(--primary-blue) !important;
}

.modern-section-title .title-separator {
    background: var(--primary-blue) !important;
}

/* Links Hover Color (Blue) */
a:hover, 
a:focus,
.mp-category a:hover, 
.mp-title a:hover,
.submenu .cat-title, 
.submenu .show a,
.mega-menu > ul.menu > li > a:hover .menu-title,
.drop-menu > .one-third .cat-title,
.drop-menu > .one-third .show a,
.imagebox .box-bottom .compare-wishlist a:hover,
.imagebox.style1.v1 ul.cat-list li a:hover,
.imagebox.style1.v1 .btn-more a,
.flat-highlights .product-list.style1 li:hover .info-product .name a,
.flat-highlights .product-list.style1 li:hover .info-product .btn-add-cart a {
    color: var(--light-blue) !important;
}

/* Hover Border on Cart / Icons */
.box-cart .inner-box > a:hover > div.icon-cart {
    border-color: var(--light-blue) !important;
}

.box-cart .inner-box ul.menu-compare-wishlist li a:hover {
    border-color: var(--light-blue) !important;
}

/* Input Focus border */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus {
    border-color: var(--light-blue) !important;
}

/* Scrollbar hover in special section */
.special-offer-description::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue) !important;
}

/* ==========================================
   PREMIUM SITE TEXT LOGO (THE SOULED MART)
   ========================================== */
.site-text-logo {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 950 !important;
    font-size: 30px !important;
    letter-spacing: -1.2px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
}

.site-text-logo:hover {
    transform: scale(1.03) !important;
}

.site-text-logo .logo-badge {
    background: var(--primary-red) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    margin-right: 2px !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.25) !important;
}

.site-text-logo .logo-word-souled {
    color: var(--primary-blue) !important;
    font-weight: 950 !important;
}

.site-text-logo .logo-word-mart {
    color: #1e293b !important;
    font-weight: 350 !important;
    letter-spacing: -0.5px !important;
}

/* Footer logo specifically has a white text fallback for the dark part */
.logo-ft .site-text-logo .logo-word-mart {
    color: var(--white) !important;
}

/* Responsive logo scaling & layout visibility */
@media (max-width: 767px) {
    .site-text-logo {
        font-size: 22px !important;
        letter-spacing: -0.8px !important;
        gap: 3px !important;
    }
    
    .site-text-logo .logo-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
        border-radius: 4px !important;
        letter-spacing: 0.5px !important;
    }

    /* Force the footer about widget/logo to be visible on mobile */
    footer .widget-about {
        display: block !important;
        margin-bottom: 30px !important;
    }

    footer .col-lg-3, footer .col-md-6 {
        display: block !important;
    }
}

/* ==========================================
   PRODUCT FILTER & SIDEBAR REDESIGN (RED OVERRIDES)
   ========================================== */

/* Sidebar widget title bottom line */
body .sidebar .widget-title::after {
    background: var(--primary-red) !important;
}

/* Sidebar categories list active & hover */
body .sidebar .cat-list li a:hover {
    background: rgba(194, 24, 32, 0.06) !important;
    color: var(--primary-red) !important;
}

body .sidebar .cat-list li.active a,
body .sidebar .cat-list li a.active {
    background: var(--primary-red) !important;
    color: var(--white) !important;
}

body .sidebar .cat-list li a:hover span {
    background: var(--primary-red) !important;
    color: var(--white) !important;
}

body .sidebar .cat-list li.active a span,
body .sidebar .cat-list li a.active span {
    background: var(--white) !important;
    color: var(--primary-red) !important;
}

/* JQuery UI Price Slider */
body #slider-range .ui-slider-range {
    background: var(--primary-red) !important;
}

body #slider-range .ui-slider-handle {
    border-color: var(--primary-red) !important;
}

body #slider-range .ui-slider-handle:hover,
body #slider-range .ui-slider-handle:active {
    background: var(--primary-red) !important;
}

/* Filter by Price button */
body .btn-filter-price {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    box-shadow: 0 4px 12px rgba(194, 24, 32, 0.2) !important;
}

body .btn-filter-price:hover {
    background: var(--hover-red) !important;
    border-color: var(--hover-red) !important;
    box-shadow: 0 6px 20px rgba(194, 24, 32, 0.35) !important;
}

/* ==========================================
   MODERN PRODUCT CARD COLOR OVERRIDES (RED/BLUE)
   ========================================== */

body .modern-product-card:hover {
    border-color: var(--primary-red) !important;
    box-shadow: 0 12px 30px rgba(194, 24, 32, 0.08) !important;
}

/* Card Badge */
body .mp-badge {
    background: var(--primary-red) !important;
    box-shadow: 0 4px 10px rgba(194, 24, 32, 0.2) !important;
}

/* Wishlist Icon Button */
body .mp-wishlist-btn:hover {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(194, 24, 32, 0.3) !important;
}

/* Text links color hover */
body .mp-category a:hover,
body .mp-title a:hover,
body .mp-quickview-btn:hover {
    color: var(--primary-red) !important;
}

/* Sale Price */
body .mp-sale-price {
    color: var(--primary-red) !important;
}

/* Add to Cart button inside modern-product-card */
body .mp-btn {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    box-shadow: 0 4px 12px rgba(194, 24, 32, 0.15) !important;
}

body .mp-btn:hover {
    background: var(--hover-red) !important;
    border-color: var(--hover-red) !important;
    box-shadow: 0 6px 20px rgba(194, 24, 32, 0.35) !important;
}

/* ==========================================
   PREMIUM CUSTOM HEADER TOP (DUAL-TONE SLANTED BAR)
   ========================================== */
.custom-header-top {
    background-color: var(--primary-blue) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
    padding: 0 !important;
}

.custom-header-top .header-top-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 25px !important;
    position: relative !important;
}

.custom-header-top .header-top-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.custom-header-top .top-info-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

.custom-header-top .text-danger-icon {
    color: #ef4444 !important;
    font-size: 13px !important;
}

.custom-header-top .info-label {
    color: #94a3b8 !important;
}

.custom-header-top .info-value {
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

.custom-header-top .info-value:hover {
    color: #ef4444 !important;
}

.custom-header-top .top-bar-sep {
    color: rgba(255, 255, 255, 0.25) !important;
    font-weight: 300 !important;
}

.custom-header-top .flat-support {
    display: inline-flex !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.custom-header-top .flat-support li a {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.custom-header-top .flat-support li a:hover {
    color: #ffffff !important;
}

/* Right Red Slanted Banner Section */
.custom-header-top .header-top-right-red {
    position: relative !important;
    padding: 0 35px 0 45px !important;
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    z-index: 100 !important;
}

.custom-header-top .header-top-right-red::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: var(--primary-red) !important;
    clip-path: polygon(30px 0, 100% 0, 100% 100%, 0% 100%) !important;
    z-index: -1 !important;
    box-shadow: -5px 0 15px rgba(194, 24, 32, 0.4) !important;
}

.custom-header-top .header-top-right-red .flat-unstyled {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.custom-header-top .header-top-right-red .flat-unstyled > li {
    position: relative !important;
    padding: 0 !important;
    border: none !important;
}

.custom-header-top .header-top-right-red .flat-unstyled > li > a {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 40px !important;
}

.custom-header-top .header-top-right-red .flat-unstyled > li > a i {
    font-size: 11px !important;
}

/* Dropdown menu positioning & hover visibility */
.custom-header-top .header-top-right-red .flat-unstyled > li .unstyled {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px !important;
    padding: 8px 0 !important;
    border: 1px solid #e2e8f0 !important;
    z-index: 99999 !important;
    min-width: 150px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    margin-top: 0px !important;
}

.custom-header-top .header-top-right-red .flat-unstyled > li:hover > .unstyled {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.custom-header-top .header-top-right-red .unstyled li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-header-top .header-top-right-red .unstyled li a {
    color: #1e293b !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    display: block !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.custom-header-top .header-top-right-red .unstyled li a:hover {
    background: #f8fafc !important;
    color: #c21820 !important;
}

@media (max-width: 767px) {
    .custom-header-top .header-top-wrapper {
        padding-left: 10px !important;
    }
    .custom-header-top .header-top-right-red::before {
        clip-path: none !important;
    }
    .custom-header-top .header-top-right-red {
        padding: 0 15px !important;
    }
}

/* ==========================================
   EXACT MATCH USER IMAGE: MOBILE RED HEADER & FLOATING BOTTOM NAV
   ========================================== */
@media (max-width: 991px) {
    /* Ultra-Luxury Mobile Dedicated Blue Top Bar */
    .mobile-topbar-blue {
        display: block !important;
        background: linear-gradient(135deg, #061833 0%, #0d2f5e 50%, #071f40 100%) !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid rgba(242, 139, 0, 0.3) !important;
        box-shadow: 0 4px 15px rgba(6, 24, 51, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    /* Hide desktop top bar on mobile */
    .custom-header-top {
        display: none !important;
    }

    /* Solid Vibrant Red Compact Header Bar */
    .header-middle {
        background-color: #c21820 !important; /* Rich Red background */
        padding: 8px 0 10px 0 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
    }

    .header-middle .container {
        padding: 0 12px !important;
    }

    .mobile-red-header-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important; /* Tight, compact gap between rows */
        width: 100% !important;
    }

    /* Row 1: Top Bar inside Red Header */
    .mobile-red-top-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }

    /* Clean Hamburger Menu Button - Subtly compact and smaller than the logo */
    .mobile-white-btn-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        position: relative !important;
        margin: 0 !important;
        padding: 4px 2px !important;
        cursor: pointer !important;
        border: none !important;
        background: transparent !important;
        width: 26px !important;
        height: 24px !important;
        box-shadow: none !important;
        z-index: 10 !important;
    }

    .mobile-white-btn-menu span,
    .mobile-white-btn-menu:before,
    .mobile-white-btn-menu:after {
        background-color: #ffffff !important; /* Crisp white hamburger bars */
        height: 2px !important;
        border-radius: 2px !important;
        width: 100% !important;
        position: relative !important;
        content: '' !important;
        display: block !important;
        transition: all 0.25s ease !important;
    }

    .mobile-white-btn-menu:before {
        top: 0 !important;
    }
    .mobile-white-btn-menu span {
        top: 0 !important;
    }
    .mobile-white-btn-menu:after {
        top: 0 !important;
    }

    /* Prominent, Beautiful Big Logo in Mobile Header */
    .mobile-logo-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 8px !important;
    }

    .mobile-logo-center a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    .mobile-logo-center img {
        height: 48px !important;
        max-height: 50px !important;
        width: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2)) !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-logo-center a:active img {
        transform: scale(0.97) !important;
    }

    .mobile-gold-actions {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .gold-icon-link {
        color: #ffffff !important; /* Pure White color for Wishlist & Cart icons */
        font-size: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        position: relative !important;
    }

    .gold-icon-link:active {
        transform: scale(0.9) !important;
    }

    .mobile-action-badge {
        position: absolute !important;
        top: -6px !important;
        right: -8px !important;
        background: #0a2952 !important; /* Contrasting Deep Navy Badge */
        color: #ffffff !important;
        border: 1.5px solid #ffffff !important;
        border-radius: 50% !important;
        min-width: 17px !important;
        height: 17px !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 2px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    }

    /* ==========================================
       MOBILE OFF-CANVAS NAVIGATION DRAWER & OVERLAY
       ========================================== */
    body.mobile-drawer-open {
        overflow: hidden !important;
    }

    .mobile-drawer-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(5, 11, 24, 0.75) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 999998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .mobile-drawer-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-nav-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 310px !important;
        max-width: 86vw !important;
        background-color: #0b1528 !important; /* Deep luxury navy-slate */
        color: #ffffff !important;
        z-index: 999999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 6px 0 30px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-nav-drawer.active {
        transform: translateX(0) !important;
    }

    /* Drawer Header */
    .drawer-header {
        background: #c21820 !important; /* Crimson Red matching brand header */
        padding: 16px 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .drawer-logo img {
        height: 38px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .drawer-close-btn {
        background: rgba(255, 255, 255, 0.15) !important;
        border: none !important;
        color: #ffffff !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .drawer-close-btn:hover,
    .drawer-close-btn:active {
        background: #ffffff !important;
        color: #c21820 !important;
        transform: scale(1.08) !important;
    }

    /* Drawer Account Box */
    .drawer-account-box {
        background: rgba(255, 255, 255, 0.04) !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .drawer-user-info {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
    }

    .user-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #c21820 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 15px !important;
    }

    .user-details {
        display: flex !important;
        flex-direction: column !important;
    }

    .user-greet {
        font-size: 11px !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .user-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    .drawer-btn-logout {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #f87171 !important;
        background: rgba(239, 68, 68, 0.12) !important;
        border-radius: 20px !important;
        text-decoration: none !important;
    }

    .drawer-guest-actions {
        display: flex !important;
        gap: 10px !important;
    }

    .drawer-btn-login,
    .drawer-btn-register {
        flex: 1 !important;
        text-align: center !important;
        padding: 8px 12px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: all 0.2s ease !important;
    }

    .drawer-btn-login {
        background: #c21820 !important;
        color: #ffffff !important;
    }

    .drawer-btn-register {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* Drawer Menu List */
    .drawer-nav-content {
        flex: 1 !important;
        padding: 10px 0 !important;
    }

    .drawer-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .drawer-menu-list > li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .drawer-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 13px 20px !important;
        color: #e2e8f0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }

    .drawer-link .link-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .drawer-link .menu-icon {
        font-size: 16px !important;
        width: 20px !important;
        text-align: center !important;
        color: #c21820 !important; /* Red icon highlight */
    }

    .drawer-menu-list > li.active > .drawer-link,
    .drawer-link:hover {
        color: #ffffff !important;
        background: rgba(194, 24, 32, 0.15) !important;
        padding-left: 24px !important;
    }

    .accordion-arrow {
        font-size: 12px !important;
        color: #94a3b8 !important;
        transition: transform 0.25s ease !important;
    }

    .drawer-accordion-toggle.open .accordion-arrow {
        transform: rotate(180deg) !important;
        color: #c21820 !important;
    }

    /* Drawer Submenu */
    .drawer-submenu {
        list-style: none !important;
        padding: 6px 0 6px 36px !important;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    }

    .drawer-submenu li {
        margin: 0 !important;
    }

    .drawer-sublink {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 9px 20px 9px 12px !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .drawer-sublink:hover,
    .drawer-sublink:active {
        color: #ffffff !important;
        padding-left: 16px !important;
    }

    .cat-count-badge {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #cbd5e1 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 2px 7px !important;
        border-radius: 12px !important;
    }

    /* Drawer Footer */
    .drawer-footer {
        padding: 16px 20px 25px !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .drawer-contact-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        font-size: 12.5px !important;
        color: #94a3b8 !important;
    }

    .drawer-contact-item i {
        color: #c21820 !important;
        font-size: 13px !important;
        width: 16px !important;
    }

    .drawer-contact-item a {
        color: #cbd5e1 !important;
        text-decoration: none !important;
    }

    .drawer-socials {
        display: flex !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    .drawer-socials a {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .drawer-socials a:hover {
        background: #c21820 !important;
        border-color: #c21820 !important;
        transform: translateY(-2px) !important;
    }

    /* Row 2: White Search Pill Bar */
    .mobile-red-search-bar {
        width: 100% !important;
    }

    .mobile-pill-search-form {
        background: #ffffff !important;
        border-radius: 40px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        padding: 2px 2px 2px 14px !important;
        position: relative !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
    }

    .mobile-cat-select-wrap {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    .cat-label-text {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
    }

    .mobile-hidden-cat-select {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        z-index: 5 !important;
    }

    .mobile-pill-divider {
        color: #cbd5e1 !important;
        margin: 0 8px !important;
        font-weight: 300 !important;
        font-size: 14px !important;
    }

    .mobile-pill-input-box {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-pill-input-box input {
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        font-size: 12.5px !important;
        color: #0f172a !important;
        padding: 0 !important;
        outline: none !important;
    }

    .mobile-pill-input-box input::placeholder {
        color: #64748b !important;
    }

    /* Deep Blue Circular Search Button */
    .mobile-deep-blue-search-btn {
        background: #0f3b75 !important; /* Deep Navy Blue matching reference image */
        color: #ffffff !important;
        border: none !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(15, 59, 117, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .header-bottom {
        display: none !important;
    }

    /* Page bottom padding so content isn't covered by fixed bottom nav */
    body {
        padding-bottom: 65px !important;
    }

    /* FLOATING BOTTOM NAVIGATION BAR (EXACT MATCH TO USER SCREENSHOT - MOBILE ONLY) */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important;
        background-color: #0c2340 !important; /* Deep Navy Blue matching screenshot */
        border-radius: 18px 18px 0 0 !important; /* Rounded top corners matching screenshot */
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        z-index: 99999 !important;
        box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.3) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 0 5px !important;
    }

    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        text-decoration: none !important;
        flex: 1 !important;
        height: 100% !important;
        transition: all 0.2s ease !important;
    }

    .mobile-nav-item i {
        font-size: 19px !important;
        margin-bottom: 3px !important;
        color: #ffffff !important;
        opacity: 0.95 !important;
    }

    .mobile-nav-item span {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.6px !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
    }

    .mobile-nav-item.active,
    .mobile-nav-item:active {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
    }
}

/* Hide Mobile Elements on Desktop/Web Screens (992px and up) */
@media (min-width: 992px) {
    .mobile-bottom-nav,
    .mobile-nav-drawer,
    .mobile-drawer-overlay,
    .mobile-red-header-wrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}