/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

    /* Menu Overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9990; /* Below menus (menus have 9999) but above everything else */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        cursor: pointer;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Prevent body scroll when overlay is active */
    body.overlay-active {
        overflow: hidden;
    }
    
    /* Ensure menus appear above overlay */
    .e-n-menu-wrapper {
        position: relative;
        z-index: 10000;
    }
    
    /* Mobile-specific styling */
    @media (max-width: 1024px) {
        .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 80%;
            background: white;
            z-index: 10000;
            overflow-y: auto;
        }
        
        .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper[style*="block"] {
            transform: translateX(0);
        }
    }
}

/* Hover effect for checkbox filter items */
.ue_taxonomy_item:hover {
    cursor: pointer;
}

.ue_taxonomy_item:hover .uc-checkbox-filter_label {
    text-decoration: underline !important;
    color: #333 !important; /* adjust to your desired darker color */
}

.ue_taxonomy_item:hover .uc-checkbox-filter_label::before {
    background-color: #aaa !important;      /* darker checkbox background */
    border-color: #666 !important;          /* darker border if present */
}
.ue_taxonomy_item:hover {
    cursor: pointer;
}
.ue-see-more-button:hover,
.ue-see-less-button:hover {
    text-decoration: underline !important;
}
@media (max-width: 1024px) {
    /* Button styling */
    .ue_taxonomy_item {
        background-color: #f0f0f0;
        border-radius: 30px;
        padding: 8px 16px;
        margin: 4px;
        border: 1px solid #ddd;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    /* Checkbox box */
    .uc-checkbox-filter__checkbox + .uc-checkbox-filter_label::before {
        width: 20px !important;
        height: 20px !important;
        background-color: #fff !important;
        border: 2px solid #999 !important;
        border-radius: 4px !important;
    }
    /* Checkmark – using :checked 
    .uc-checkbox-filter__checkbox:checked + .uc-checkbox-filter_label::after {
        content: "✓" !important;
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: #000 !important;
        font-size: 14px;
        font-weight: bold;
    }*/
    /* Selected button background – using .uc-selected */
    .ue_taxonomy_item.uc-selected {
        background-color: #d9e8ff;
        border-color: #007cba;
    }
    /* Keep checkbox white when selected */
    .ue_taxonomy_item.uc-selected .uc-checkbox-filter__checkbox + .uc-checkbox-filter_label::before {
        background-color: #98D916 !important;
        border-color: #007cba !important;
    }
}
/* Focus indicator for checkbox items */
.ue_taxonomy_item:focus-within {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 30px; /* matches the button shape on mobile */
}
/* Focus for see more/less buttons */
.ue-see-more-button:focus,
.ue-see-less-button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}