/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ========================================
   APEX GALLERY FILTER - IMPROVED STYLING
   ======================================== */

 


/* Main Headings */
.section-heading-filter {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #2563eb !important;
}

/* Facet Spacing */
.brxe-wpgb-facet {
    margin-bottom: 0px !important;
	width: 100%;
}

 

/* ========================================
   DROPDOWN STYLING
   ======================================== */

.wpgb-select-facet {
    position: relative;
}

.wpgb-select {
    width: 100% !important;
    padding: 14px 40px 14px 16px !important;
    font-size: 15px !important;
    color: #333 !important;
    background: #f8f9fa !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}
.wpgb-facet>fieldset:last-child {margin:0 !important;}

.wpgb-select:hover {
    border-color: #2563eb !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1) !important;
}

.wpgb-select:focus {
    outline: none !important;
    border-color: #2563eb !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Dropdown Arrow */
.wpgb-select-controls {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.wpgb-select-separator {
    display: none !important;
}

.wpgb-select-toggle {
    width: 18px !important;
    height: 18px !important;
    fill: #6b7280 !important;
    transition: transform 0.3s ease, fill 0.3s ease !important;
}

.wpgb-select:hover + .wpgb-select-controls .wpgb-select-toggle {
    fill: #2563eb !important;
}

.wpgb-select:focus + .wpgb-select-controls .wpgb-select-toggle {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ========================================
   CHECKBOX STYLING
   ======================================== */

.wpgb-checkbox-facet ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpgb-checkbox-facet li {
    margin-bottom: 10px !important;
}

.wpgb-checkbox {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    background: #f8f9fa !important;
    border: 2px solid transparent !important;
}

.wpgb-checkbox:hover {
    background: #e5e7eb !important;
    border-color: #2563eb !important;
    transform: translateX(2px);
}

.wpgb-checkbox[aria-pressed="true"] {
    background: #dbeafe !important;
    border-color: #2563eb !important;
}

/* Custom Checkbox Control */
.wpgb-checkbox-control {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    margin-right: 14px !important;
    position: relative !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
    background: white !important;
}

.wpgb-checkbox:hover .wpgb-checkbox-control {
    border-color: #2563eb !important;
    transform: scale(1.05);
}

.wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

/* Checkmark */
.wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control::after {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid white !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

/* Checkbox Label */
.wpgb-checkbox-label {
    font-size: 15px !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    user-select: none !important;
    flex: 1 !important;
}

.wpgb-checkbox-label span {
    color: #9ca3af !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-label {
    color: #1e40af !important;
}

/* ========================================
   SCREEN READER ONLY
   ======================================== */

.wpgb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    #brxe-raebcm {
        padding: 20px;
    }
    
    .section-heading-filter {
        font-size: 12px !important;
    }
    
    .wpgb-select {
        font-size: 14px !important;
        padding: 12px 36px 12px 14px !important;
    }
    
    .wpgb-checkbox {
        padding: 10px 12px !important;
    }
    
    .wpgb-checkbox-label {
        font-size: 14px !important;
    }
}