.elementor-881 .elementor-element.elementor-element-4f8e466{--display:flex;--margin-top:-2rem;--margin-bottom:-5rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:5rem;--padding-left:0rem;--padding-right:0rem;}.elementor-881 .elementor-element.elementor-element-4f8e466:not(.elementor-motion-effects-element-type-background), .elementor-881 .elementor-element.elementor-element-4f8e466 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-98222e3 );}.elementor-881 .elementor-element.elementor-element-9a58f48{--display:flex;}.elementor-881 .elementor-element.elementor-element-690920e{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-04d926f *//* ====================================================
   WBT Ajax Shop Filter Header Styling
==================================================== */

/* 1. Main Header Container */
#wbt-filter-header {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small mobile screens */
    align-items: center;
    justify-content: space-between;
    background-color: #222222; /* Sleek dark background */
    padding: 15px 25px;
    border-radius: 6px;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 2. Search Box Container */
.wbt-search-box {
    flex: 1;
    max-width: 450px; /* Prevents the search bar from getting too long on wide screens */
    position: relative;
}

/* 3. Search Input Styling */
#wbt_search {
    width: 100%;
    padding: 12px 15px 12px 42px; /* Extra left padding to make room for the SVG icon */
    border: 1px solid #444444;
    border-radius: 4px;
    background-color: #1a1a1a;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.3s ease;
    
    /* Adds a built-in magnifying glass icon to the input */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
}

/* Search Input Focus State */
#wbt_search:focus {
    outline: none;
    border-color: #e43629; /* RLA Brand Red */
    box-shadow: 0 0 0 2px rgba(228, 54, 41, 0.2);
    background-color: #222222;
}

#wbt_search::placeholder {
    color: #999999;
}

/* 4. View Toggle Section */
.wbt-view-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wbt-view-toggle span {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 5px;
}

/* 5. View Toggle Buttons */
.wbt-view-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Resize the SVGs slightly for a cleaner look */
.wbt-view-btn svg {
    width: 22px;
    height: 22px;
    fill: #777777; /* Default inactive color */
    transition: fill 0.3s ease;
}

/* Button Hover State */
.wbt-view-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.wbt-view-btn:hover svg {
    fill: #cccccc;
}

/* Button Active State */
.wbt-view-btn.active svg {
    fill: #e43629; /* RLA Brand Red */
}

/* 6. Mobile Responsiveness */
@media (max-width: 650px) {
    #wbt-filter-header {
        flex-direction: column;
        align-items: stretch; /* Stretches items to full width on mobile */
    }
    
    .wbt-search-box {
        max-width: 100%;
    }
    
    .wbt-view-toggle {
        justify-content: space-between;
        border-top: 1px solid #333;
        padding-top: 12px;
    }
}

.wbt-search-box #wbt_search {
    padding-left: 3.5rem; /* Adjust this value based on the size of your icon */
}

/* ====================================================
   Sidebar Filter Categories Redesign
==================================================== */



/* The new container for each specific category */
.wbt-custom-category {
    background: rgba(0, 0, 0, 0.15); /* Adds a subtle dark box around each category */
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 5px;
}

/* The new subheadings */
.wbt-cat-title {
    color: #ffffff;
    font-size: 15px !important;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 8px;
}

/* Container holding the actual checkboxes */
.wbt-cat-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style the checkbox rows */
.wbt-checkbox {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;
    transition: opacity 0.2s ease;
    margin: 0 !important;
}

.wbt-checkbox:hover {
    opacity: 0.75;
}

/* Style the actual checkbox square */
.wbt-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #222222; /* Makes the checkbox dark grey when ticked */
}/* End custom CSS */