.language-dropdown-container {
            position: relative;
        }

        /* SIMPLE LANGUAGE DROPDOWN - No complex z-index logic */
        .language-dropdown-container {
            position: relative;
        }

        .language-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: -90px !important; /* Shift left to prevent overflow */
            right: auto !important;
            background: white !important;
            border: 1px solid #ddd !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            min-width: 200px !important;
            max-width: 300px !important;
            margin-top: 8px !important;
            z-index: 10000 !important;
            display: none !important;
            /* FORCE CONTENT TO BE VISIBLE */
            width: auto !important;
            height: auto !important;
            overflow: visible !important;
            white-space: nowrap !important;
            /* PREVENT AFFECTING DOCUMENT FLOW */
            float: none !important;
            clear: none !important;
            position: absolute !important;
        }

        /* Ensure the dropdown container doesn't expand when dropdown is shown */
        .language-dropdown-container {
            position: relative !important;
            overflow: visible !important;
            height: auto !important;
        }

        /* The dropdown should not affect parent container height */
        .language-dropdown-container:hover,
        .language-dropdown-container:focus,
        .language-dropdown-container:active {
            height: auto !important;
            overflow: visible !important;
        }

        /* Force the dropdown to show when it has display: block */
        .language-dropdown[style*="display: block"] {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: absolute !important;
        }

        .language-dropdown ul {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: 50px !important;
            background: white !important;
            position: relative !important;
        }

        .language-dropdown ul li {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: 40px !important;
            border-bottom: 1px solid #f0f0f0 !important;
            background: white !important;
            overflow: visible !important;
            position: relative !important;
        }

        .language-dropdown ul li:last-child {
            border-bottom: none !important;
        }

        .language-dropdown ul li.divider {
            height: 1px !important;
            background: #ddd !important;
            margin: 5px 0 !important;
            border: none !important;
        }

        .language-dropdown ul li a {
            display: block !important;
            padding: 12px 16px !important;
            color: #333 !important;
            text-decoration: none !important;
            background: white !important;
            transition: background-color 0.2s ease !important;
            width: 100% !important;
            height: auto !important;
            min-height: 40px !important;
            box-sizing: border-box !important;
            line-height: 1.4 !important;
            position: relative !important;
        }

        .language-dropdown ul li a:hover {
            background-color: #f8f9fa !important;
            color: #1e7e34 !important;
        }

        .language-dropdown ul li a.active {
            background-color: #1e7e34 !important;
            color: white !important;
        }

        /* RTL support - align to right edge of button */
        html[dir="rtl"] .language-dropdown {
            left: auto !important;
            right: -90px !important; /* Shift right to prevent overflow in RTL */
        }

        .language-selector {
            padding: 15px;
        }

        .language-selector p {
            margin-bottom: 10px;
            font-weight: 600;
        }

        .btn-warning {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #155724;
        }

        /* SmartMenus dropdown styles - HOVER BASED */
        .sm.pixelstrap.sm-horizontal ul {
            display: none;
            position: absolute;
            z-index: 9999;
            background: var(--theme-secondary-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            min-width: 200px;
        }

        .sm.pixelstrap.sm-horizontal li {
            position: relative;
        }

        /* Hover behavior for all menu items */
        .sm.pixelstrap.sm-horizontal li:hover > ul {
            display: block !important;
        }

        /* Second level and deeper */
        .sm.pixelstrap.sm-horizontal ul ul {
            top: 0;
            left: 100%;
            margin-left: 0;
        }

        /* Click-to-open support: when JS adds .click-open we force display block.
           This coexists with hover behavior so both hover and click work. */
        .sm.pixelstrap.sm-horizontal li.click-open > ul {
            display: block !important;
        }

        /* Make parent anchors indicate they control submenus */
        .sm.pixelstrap.sm-horizontal li > a.has-submenu { cursor: pointer; }

        /* RTL: flip SmartMenus submenus so nested menus open to the left and align text */
        html[dir="rtl"] .sm.pixelstrap.sm-horizontal {
            direction: rtl;
        }
        html[dir="rtl"] .sm.pixelstrap.sm-horizontal li > a {
            text-align: right;
        }
        html[dir="rtl"] .sm.pixelstrap.sm-horizontal ul ul {
            left: auto !important;
            right: 100% !important; /* open to the left in RTL */
            text-align: right;
        }
        html[dir="rtl"] .sm.pixelstrap.sm-horizontal ul ul ul {
            left: auto !important;
            right: 100% !important;
        }

        /* Sidenav / burger menu overlay styles - ensures it expands over the page */
        #mySidenav {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0; /* for LTR; JS will handle RTL if needed by flipping with inline style */
            width: 0;
            height: 100%;
            z-index: 2147483646 !important; /* above overlay and most content */
            overflow-x: hidden;
            transition: width 0.28s ease;
            background: linear-gradient(180deg, var(--theme-color-1-start, #C2A85E) 0%, var(--theme-color-1-end, #7A5F2B) 100%);
            box-shadow: 0 12px 32px rgba(0,0,0,0.45);
            will-change: width;
        }

        /* When opened from RTL locale the inline style can set right:0 instead of left:0 */
        .sidenav .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.45);
            z-index: 11040; /* below the sidenav */
            display: none;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease;
        }

        /* Visible overlay */
        .sidenav-open .sidebar-overlay {
            display: block;
            opacity: 1;
            pointer-events: auto;
        }

        /* Ensure the burger button is above the overlay but below the sidenav.
           Sidenav uses z-index: 10650, so set burger slightly lower so the menu can overlay it. */
        #burger-btn {
            z-index: 10 !important;
            position: relative !important;
        }
        #burger-btn.open { transform: rotate(90deg); }

        /* Simple language dropdown container */
        .language-dropdown-container {
            position: relative;
        }

        /* Logo specific styling: target the img with class "logo" and the wrapper .logo-link */
        .logo, .logo-link {
            position: relative !important;
            z-index: 1003 !important;
            display: inline-block;
        }

        /* Enlarge header logo slightly and keep it responsive. Use high specificity to override vendor styles. */
        .logo-link img.logo, img.logo {
            max-height: 74px !important; /* increased from typical ~35-64 */
            width: auto !important;
            height: auto !important;
            display: inline-block !important;
        }

        /* Slightly larger on large screens */
        @media (min-width: 1200px) {
            .logo-link img.logo, img.logo { max-height: 92px !important; }
        }

        /* Smaller on small screens to avoid header overflow */
        @media (max-width: 576px) {
            .logo-link img.logo, img.logo { max-height: 56px !important; }
        }

        /* Language selector highest priority */
        .language-selector, .language-btn {
            z-index: 1004 !important;
            position: relative !important;
        }

        /* Specific targeting for clickable header elements only */
        .navbar-brand, .menu-left, .menu-right {
            position: relative;
            z-index: 9991001 !important;
        }

        /* Make sure only interactive elements get higher z-index */
        .dropdown-toggle, .btn, .nav-link {
            position: relative;
            z-index: 1002 !important;
        }

    /* Sidenav content styling to match site theme */
    #mySidenav {
        /* keep previous layout rules */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0; /* inner padding applied to nav */
        /* Use a dark themed gradient to match header */
        background: linear-gradient(180deg, var(--theme-color-1-start, #C2A85E) 0%, var(--theme-color-1-end, #7A5F2B) 100%);
        color: #ffffff;
    }

    #mySidenav nav {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem 1.5rem;
        background: transparent; /* ensure gradient from parent is visible */
    }

    /* Style the top back control inside the sidenav */
    .sidebar-back {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #fff;
        padding: 0.75rem 0.5rem;
        cursor: pointer;
    }

    /* Nav list styles */
    #mySidenav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #mySidenav ul li {
        margin-bottom: 0.35rem;
    }

    #mySidenav ul li a {
        display: block;
        color: rgba(255,255,255,0.95);
        text-decoration: none;
        padding: 0.6rem 0.4rem;
        border-radius: 6px;
        transition: background 0.15s ease, color 0.15s ease;
    }

    #mySidenav ul li a:hover {
        background: rgba(255,255,255,0.06);
        color: #fff;
        text-decoration: none;
    }

    /* Burger dropdown block items: ensure submenu entries are full-width,
       tappable rows and don't render inline or side-by-side. */
    #mySidenav .sidenav-submenu li,
    #mySidenav .sidenav-submenu li a,
    #mySidenav nav ul li > ul > li,
    #mySidenav nav ul li > ul > li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.5rem 0.6rem !important;
        color: rgba(255,255,255,0.95) !important;
        text-decoration: none !important;
    }

    /* subtle separator between dropdown rows */
    #mySidenav .sidenav-submenu li + li a,
    #mySidenav nav ul li > ul > li + li a {
        border-top: 1px solid rgba(255,255,255,0.04) !important;
    }

    /* Sidenav structured sections */
    .sidenav-header { padding: 1rem 1.5rem; }
    .sidenav-section { padding: 0.5rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
    .sidenav-section h6 { margin:0 0 0.5rem; font-size:0.85rem; color: rgba(255,255,255,0.95); text-transform:uppercase; letter-spacing: .06em; }
    .sidenav-links a { display:block; padding:0.45rem 0.4rem; color: rgba(255,255,255,0.95); }
    .sidenav-item { position: relative; }
    .sidenav-submenu { display:none; padding-left:0.8rem; margin-top:0.35rem; }
    .sidenav-item.open > .sidenav-submenu { display:block; }
    .sidenav-item > a { cursor:pointer; }
    .sidenav-item > a:after { content: '\203A'; float: right; opacity: 0.6; transform-origin: center; transition: transform .18s ease; }
    .sidenav-item.open > a:after { transform: rotate(90deg); }

    /* RTL overrides: force the sidenav to the right and flip submenu chevrons/padding */
    html[dir="rtl"] #mySidenav { left: auto !important; right: 0 !important; }
    html[dir="rtl"] .sidebar-overlay { left: auto !important; right: 0 !important; }

    /* Flip the submenu chevron and its placement for RTL */
    html[dir="rtl"] .sidenav-item > a:after {
        content: '\2039'; /* single left-pointing angle */
        float: left;
    }

    /* Reverse the rotation direction so the open state points the right way in RTL */
    html[dir="rtl"] .sidenav-item.open > a:after {
        transform: rotate(-90deg);
    }

    /* Make nested submenus align from the right and use right-padding in RTL */
    html[dir="rtl"] .sidenav-submenu {
        padding-left: 0 !important;
        padding-right: 0.8rem !important;
        text-align: right;
    }

    /* Ensure the sidenav nav area uses RTL direction so text and nested components render correctly */
    html[dir="rtl"] #mySidenav nav {
        direction: rtl;
    }

    /* Make nested submenu blocks align correctly when they are deeper levels */
    html[dir="rtl"] .sidenav-item .sidenav-submenu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Position deeper (second-level) submenus absolutely so they can open sideways.
       First-level submenus remain in-flow (block under the parent). */
    .sidenav-submenu .sidenav-submenu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        min-width: auto !important;
        background: transparent !important;
        z-index: 9999999 !important;
        box-shadow: none !important;
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
        margin-top: 0.25rem !important;
    }

    /* RTL: keep the same stacked flow and right alignment */
    html[dir="rtl"] .sidenav-submenu .sidenav-submenu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        padding-left: 0 !important;
        padding-right: 0.8rem !important;
        text-align: right;
    }

    /* Mobile / small-screen fix: stacked flow for nested submenus to avoid overlap */
    @media (max-width: 992px) {
        /* Make deeper submenus flow under their parent as regular block lists */
        .sidenav-submenu .sidenav-submenu {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            min-width: auto !important;
            box-shadow: none !important;
            background: transparent !important;
            padding-left: 0.8rem !important;
            padding-right: 0.8rem !important;
            margin-top: 0.25rem !important;
        }

        /* Ensure nested submenu items remain visible and aligned */
        .sidenav-submenu .sidenav-submenu li a {
            display: block !important;
            padding: 0.5rem 0.6rem !important;
            background: transparent !important;
            color: rgba(255,255,255,0.95) !important;
        }

        /* RTL: adjust nested padding so items align to the right */
        html[dir="rtl"] .sidenav-submenu .sidenav-submenu {
            padding-left: 0 !important;
            padding-right: 0.8rem !important;
            text-align: right;
        }
    }

    /* Ensure nav area scrolls and has padding */
    #mySidenav nav {
        padding: 1.25rem 1.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* Overlay visibility */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.45);
        z-index: 90640; /* below the sidenav */
        display: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .sidenav-open .sidebar-overlay {
        display: block;
        opacity: 1;
    }

    /* Links and back control */
    #mySidenav a, #mySidenav .sidebar-back, #mySidenav .caption-content {
        color: #ffffff !important;
    }

    #mySidenav ul { list-style: none; padding: 0; margin: 0; }
    #mySidenav ul li { margin-bottom: 0.4rem; }

    #mySidenav ul li a {
        display: block;
        color: rgba(255,255,255,0.95) !important;
        text-decoration: none;
        padding: 0.6rem 0.4rem;
        border-radius: 6px;
    }

    #mySidenav ul li a:hover {
        background: rgba(255,255,255,0.06);
        color: #fff !important;
    }

    /* Ensure burger button remains on top of most header elements but below the sidenav overlay */
    #burger-btn { z-index: 10 !important; }

    /* Responsive width enforcement when open */
    .sidenav-open #mySidenav { /* width is still controlled by inline styles set by JS */ }

    @media (max-width: 576px) {
        .sidenav-open #mySidenav { width: 100% !important; }
    }

    /* Ensure the sidenav container and its nav keep the dark gradient and white text */
    #mySidenav, #mySidenav nav {
        background: linear-gradient(180deg, var(--theme-color-1-start, #5d7227) 0%, var(--theme-color-1-end, #7A5F2B) 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
    }

    /* Avoid an overly-broad rule that made the entire sidenav transparent. Instead only
       target common components that can introduce white blocks (cards, panels, dropdowns, etc.).
       This preserves the sidenav's gradient background while preventing inner white boxes. */
    #mySidenav .card,
    #mySidenav .panel,
    #mySidenav .caption-content,
    #mySidenav .dropdown-menu,
    #mySidenav .bg-white,
    #mySidenav .bg-light,
    #mySidenav .list-group,
    #mySidenav .modal-content {
        background: transparent !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    /* Keep a targeted rule for any utility classes starting with bg-* that may appear inside the sidenav */
    #mySidenav [class*="bg-"] { background-color: transparent !important; }

    /* Ensure overlay covers page content and is beneath the menu */
    .sidebar-overlay { z-index: 15040 !important; }
    #mySidenav { z-index: 15050 !important; }

    
   
        /* Sidenav translate container */
        .sidenav-translate {
            padding: 0.5rem 0;
        }

        /* Translate widget is now a simple button in header and sidenav that redirects to English. */

        /* Ensure translate section fits with sidenav theme */
        #mySidenav .sidenav-section h6 {
            color: rgba(255,255,255,0.95) !important;
        }
    
   

    
        .main-search-section {
            border-bottom: 2px solid rgba(0,0,0,0.05);
            position: relative;
            z-index: 1;
        }

        .main-search-form {
            position: relative;
            z-index: 2;
        }

        .main-search-form .form-control-lg {
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
            font-weight: 500;
            position: relative;
            z-index: 3;
            pointer-events: auto;
        }

        .main-search-form .form-control-lg:focus {
            border-color: var(--theme-color-1-start, #C2A85E);
            box-shadow: 0 0 0 0.2rem rgba(194, 168, 94, 0.25);
            outline: none;
        }

        .main-search-form .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .filter-dropdown {
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0,0,0,0.1);
            animation: fadeSlideDown 0.3s ease-out;
        }

        @keyframes fadeSlideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .filter-dropdown .form-select {
            border: 1px solid #e9ecef;
            transition: border-color 0.2s ease;
        }

        .filter-dropdown .form-select:focus {
            border-color: var(--theme-color-1-start, #C2A85E);
            box-shadow: 0 0 0 0.1rem rgba(194, 168, 94, 0.25);
        }

        /* RTL Support for Main Search */
        html[dir="rtl"] .main-search-form .input-group .form-control {
            border-radius: 0 12px 12px 0;
        }

        html[dir="rtl"] .main-search-form .input-group .btn:last-child {
            border-radius: 12px 0 0 12px;
        }

        html[dir="rtl"] .filter-dropdown {
            left: auto;
            right: 0;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .main-search-section {
                display: none !important;
            }
        }

        /* Filter indicator animation */
        .filter-indicator {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        /* Compatibility styles for old search references */
        .header-search-container, .header-search-group {
            display: none !important;
        }

        /* Ensure no overlays block the search section */
        .main-search-section * {
            pointer-events: auto !important;
        }

        /* Force the search input to be interactive */
        .main-search-form input[type="text"] {
            pointer-events: auto !important;
            user-select: auto !important;
            -webkit-user-select: auto !important;
            -moz-user-select: auto !important;
            -ms-user-select: auto !important;
        }

        /* Debug styles removed: keep spacing tweaks but remove red debug border */
        .main-search-section {
            border: none !important;
            /* Use unified background inherited from new combined rule */
            position: relative !important;
            z-index: 1 !important;
            margin-top: 0 !important; /* Remove gap so it attaches to header */
            margin-bottom: -60px !important; /* Maintain previous pull but slightly less aggressive */
            clear: both !important;
            padding: 16px 0 24px 0 !important; /* Balanced padding */
        }
        
        /* Ensure header stays above everything */
        header, .header, .header * {
            position: relative !important;
            z-index: 10 !important;
        }
        
        /* More specific header element z-index fixes */
        .logo-menu-part, .navbar-brand, .language-dropdown, .hamburger-menu,
        .desktop-search-toggle, .mobile-menu-toggle {
            z-index: 15 !important;
            position: relative !important;
        }

        /* Translate button responsive tweaks: show full label on desktop, icon-only on mobile */
        .top-translate-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
        .top-translate-btn i { line-height: 1; }
        .top-translate-btn .translate-label { display: inline-block; }

        /* Google icon sizing for translate button */
        .translate-icon { font-size: 1.05rem; color: #DB4437; }

        @media (max-width: 991.98px) {
            /* mobile: hide text, show only icon, tighten padding */
            .top-translate-btn { padding: 0.35rem 0.45rem !important; width: 40px; height: 40px; display: inline-flex; justify-content: center; }
            .top-translate-btn .translate-label { display: none !important; }
            .top-translate-btn i { margin: 0 !important; }
        }
  
        
        /* Reuse filter card styling if not already present */
        .filter-card {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-65%);
            /* Adjusted to move it more inside the page */
            z-index: 1050;
            width: 380px;
            max-width: calc(100vw - 2rem);
            margin-top: 0.4rem;
            animation: fadeSlide 0.18s ease-out;
        }

        @keyframes fadeSlide {
            from {
                opacity: 0;
                transform: translateY(-6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* RTL override: keep the filter card aligned relative to the toggle in RTL layouts
       and mirror the translate so it stays on-screen instead of off the left edge. */
        html[dir="rtl"] .filter-card {
            left: auto;
            right: 50%;
            transform: translateX(65%);
        }

        /* Mobile/small-screen: make the filter card full-width and anchored to the viewport so
       it won't overflow horizontally in either direction. */
        @media (max-width: 576px) {
            .filter-card {
                left: 0 !important;
                right: 0 !important;
                transform: translateX(0) !important;
                width: 100% !important;
                max-width: 100% !important;
                margin-top: 0.25rem;
                box-sizing: border-box;
                padding: 0.5rem;
            }
        }

        /* Mobile Filter Actions - Enhanced Implementation */
        .mobile-filter-card .mobile-filter-actions {
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
            gap: 1rem !important;
            margin-top: 1.5rem !important;
            padding-top: 1rem !important;
            border-top: 1px solid #e9ecef !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
            position: relative !important;
            z-index: 10 !important;
        }

        /* RTL: align buttons to the left in RTL layouts */
        html[dir="rtl"] .mobile-filter-card .mobile-filter-actions {
            justify-content: flex-start !important;
        }

        /* Button styling with Bootstrap integration */
        /* Shift the action buttons to the left (LTR) and keep explicit control for RTL */
        .mobile-filter-card .mobile-filter-actions {
            justify-content: flex-start !important;
            gap: 0.5rem !important;
        }

        /* Smaller button appearance */
        .mobile-filter-card .mobile-filter-actions .btn {
            display: inline-block !important;
            padding: 0.38rem 0.7rem !important;
            /* reduced vertical/horizontal padding */
            font-size: 0.82rem !important;
            /* slightly smaller text */
            border-radius: 6px !important;
            min-width: 88px !important;
            /* smaller minimum width */
            font-weight: 500 !important;
            text-align: center !important;
            vertical-align: middle !important;
            cursor: pointer !important;
            border: 1px solid transparent !important;
            line-height: 1.3 !important;
            text-decoration: none !important;
            transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out, border-color 0.12s ease-in-out !important;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
            pointer-events: auto !important;
            position: relative !important;
            z-index: 100 !important;
        }

        /* Specific button colors (preserve appearance but scaled) */
        .mobile-filter-card .mobile-filter-actions .btn-success {
            background-color: #198754 !important;
            border-color: #198754 !important;
            color: #fff !important;
            padding: 0.38rem 0.7rem !important;
            font-size: 0.82rem !important;
        }

        .mobile-filter-card .mobile-filter-actions .btn-success:hover {
            background-color: #157347 !important;
            border-color: #146c43 !important;
            color: #fff !important;
        }

        .mobile-filter-card .mobile-filter-actions .btn-outline-secondary {
            background-color: transparent !important;
            border-color: #6c757d !important;
            color: #6c757d !important;
            padding: 0.32rem 0.66rem !important;
            font-size: 0.82rem !important;
            min-width: 72px !important;
        }

        .mobile-filter-card .mobile-filter-actions .btn-outline-secondary:hover {
            background-color: #6c757d !important;
            border-color: #6c757d !important;
            color: #fff !important;
        }

        /* Force override any conflicting styles and ensure clickability */
        .mobile-filter-card .mobile-filter-actions>* {
            margin-bottom: 0 !important;
            float: none !important;
            position: static !important;
            pointer-events: auto !important;
            line-height: 1.3 !important;
        }

        /* Ensure the mobile filter card remains interactive */
        .mobile-filter-card {
            pointer-events: auto !important;
            position: relative !important;
            z-index: 1 !important;
        }

        /* Mobile overlay and filter card styling */
        #search-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            display: none;
            overflow-y: auto;
            z-index: 10800;
        }

        #search-overlay .overlay-content {
            max-width: 560px;
            margin: 4rem auto 3rem;
        }

        .mobile-filter-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
            padding: 1.5rem;
            position: relative;
            border: 2px solid transparent;
            background-clip: padding-box;
            max-width: 100%;
            margin: 0 auto;
        }

        .mobile-filter-card:before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            padding: 2px;
            background: linear-gradient(135deg, var(--theme-color-1-start, #C2A85E), var(--theme-color-1-end, #7A5F2B));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        html[dir="rtl"] .mobile-filter-card {
            text-align: right;
        }

        .closebtn {
            font-size: 2.2rem;
            font-weight: 300;
            position: fixed;
            top: 1.15rem;
            right: 1.1rem;
            cursor: pointer;
            color: #fff;
            line-height: 1;
            z-index: 10900;
        }

        html[dir="rtl"] .closebtn {
            right: auto;
            left: 1.1rem;
        }

        #search-overlay::-webkit-scrollbar {
            width: 10px;
        }

        #search-overlay::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        #search-overlay::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.25);
            border-radius: 20px;
        }

        #search-overlay::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.35);
        }

   /* Colored placeholder that fills the image box. Uses theme variable when available. */
        .img-placeholder {
            display: block;
            /* behave like an image */
            width: 100%;
            height: 100%;
            min-height: 180px;
            /* makes card look balanced */
            box-sizing: border-box;
            overflow: hidden;
            background: linear-gradient(180deg, var(--theme-color-1-start, #C2A85E) 0%, var(--theme-color-1-end, #7A5F2B) 100%);
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        /* Hide the emoji/icon so the placeholder is a clean colored block. Screen-reader text is preserved separately. */
        .img-placeholder .placeholder-icon {
            display: none !important;
        }

        .img-placeholder .placeholder-text {
            display: none;
        }

        /* Ensure utility/image classes still act like images when applied */
        .img-placeholder.card-img-top {
            display: block;
        }

        .img-placeholder.img-fluid {
            max-width: 100%;
            height: auto;
        }