.filter-modal-tooltip {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    animation: fadeInFilterModal 0.2s;
    z-index: 1050;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.filter-modal-tooltip::-webkit-scrollbar {
    width: 6px;
}

.filter-modal-tooltip::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.filter-modal-tooltip::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.filter-modal-tooltip::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Scrollbar cho filterModalContent */
#filterModalContent::-webkit-scrollbar {
    width: 6px;
}

#filterModalContent::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#filterModalContent::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#filterModalContent::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

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

/* Đảm bảo modal luôn hiển thị trên cùng */
#filterModalTooltip {
    position: fixed !important;
    z-index: 1050 !important;
}

/* Responsive cho mobile */
@media(max-width: 768px) {
    .filter-modal-tooltip {
        max-width: calc(100vw - 40px) !important;
        max-height: calc(100vh - 40px) !important;
        left: 20px !important;
        right: 20px !important;
    }

    #filterModalTooltip {
        width: calc(100vw - 40px) !important;
    }

    /* Ẩn mũi tên trên mobile */
    #filterModalTooltip .filter-arrow {
        display: none !important;
    }

    /* Điều chỉnh chiều cao filterModalContent trên mobile */
    #filterModalContent {
        max-height: calc(100vh - 200px) !important;
    }
}

/* Vô hiệu hóa tương tác với các phần tử bên ngoài khi modal mở */
body.modal-open {
    pointer-events: none;
}

body.modal-open #filterModalTooltip,
body.modal-open #filterModalOverlay {
    pointer-events: auto !important;
}

/* Ẩn tất cả các phần tử khác khi modal mở */
body.modal-open *:not(#filterModalTooltip):not(#filterModalOverlay):not(#filterModalTooltip *) {
    pointer-events: none !important;
}
#filterModalTooltip {
    overflow: visible !important; /* Đảm bảo modal không che phần nhô ra */
}
#filterModalTooltip .filter-arrow {
    position: absolute;
    top: -12px;
    left: 40px; /* Will be adjusted by JS for perfect alignment if needed */
    width: 24px;
    height: 12px;
    overflow: visible;
    z-index: 1060;
    pointer-events: none;
}
#filterModalTooltip .filter-arrow svg {
    display: block;
}

/* Styling cho filter buttons với Popover */
.filter-attributes .item-attribute button,
.popover-filters {
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #495057;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.filter-attributes .item-attribute button:hover,
.popover-filters:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #212529;
}

.filter-attributes .item-attribute button:focus,
.popover-filters:focus {
    box-shadow: 0 0 0 0.2rem rgba(211, 0, 0, 0.25);
    border-color: #d30000!important;
    outline: 0;
}

/* Styling khi popover đang active */
.popover-filters[aria-describedby] {
    background-color: #ffeaea!important;
    border-color: #d30000!important;
    color: #d30000!important;
}
.btn-danger-filters{
    background-color: #d30000 !important;
    border-color: #d30000 !important;
    color: #fff !important;
}

/* Styling cho filter items khi được chọn (active) */
.filter-attributes label.active,
#filterModalContent label.active {
    border: 2px solid #d30000 !important;
    background-color: #ffeaea !important;
    color: #d30000 !important;
    font-weight: 600;
}

/* Ẩn input checkbox và radio */
.filter-attributes .item-attribute input[type="checkbox"],
.filter-attributes .item-attribute input[type="radio"],
#filterModalContent input[type="checkbox"],
#filterModalContent input[type="radio"] {
    display: none !important;
}

/* Styling cho brand filter items khi active */
.brand-filter-item.active {
    border: 2px solid #d30000 !important;
    background-color: #ffeaea !important;
    color: #d30000 !important;
}

/* Styling cho category filter items khi active */
.filter-attributes a.active {
    border: 2px solid #d30000 !important;
    background-color: #ffeaea !important;
    color: #d30000 !important;
    font-weight: 600;
}

/* Cursor pointer cho các filter items */
.cursor-pointer {
    cursor: pointer !important;
}

.filter-attributes label,
.filter-attributes a,
.brand-filter-item {
    cursor: pointer !important;
    transition: all 0.2s ease-in-out;
}

.filter-attributes label:hover,
.filter-attributes a:hover,
.brand-filter-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Styling cho vùng hiển thị active filters */
.active-filters-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.active-filter-item {
    background: #d30000;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.active-filter-item:hover {
    background: #b30000;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(211, 0, 0, 0.3);
}

.active-filter-item .remove-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.active-filter-item .remove-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.active-filter-item .remove-btn:focus {
    outline: none;
}

/* Styling cho Popover content */
.filter-popover-content {
    min-width: 400px;
    max-width: 500px;
}

.filter-popover-content .filter-popover-item {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0.5rem;
    padding:0;
}

.filter-popover-content .filter-popover-item:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.filter-popover-content .form-check-input:checked + .form-check-label {
    color: #d30000;
    font-weight: 500;
}

.filter-popover-content .form-check-input:checked {
    background-color: #d30000;
    border-color: #d30000;
}

/* Custom Popover styling */
.popover {
    max-width: 500px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.popover-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
}

.popover-body {
    padding: 1rem;
}
/** 
 * Make the entire .filter-popover-item clickable for selection.
 * This ensures clicking anywhere in the item (not just the label) will trigger the checkbox.
 * Works best when JS toggles the checkbox on .filter-popover-item click, but this CSS ensures pointer and highlight.
 */
.filter-popover-item {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.filter-popover-item:active,
.filter-popover-item:focus-within {
    background-color: #ffeaea;
}

.filter-popover-item .form-check-label {
    padding: 0.5rem;
    width: 100%;
    display: block;
    cursor: pointer;
    font-family: 'Bodoni Moda', 'Playfair Display', serif;
}

/* Optional: visually indicate checked state for the whole item */
.filter-popover-item .form-check-input:checked + .form-check-label,
.filter-popover-item .form-check-input:checked ~ .form-check-label {
    background-color: #ffeaea;
    color: #d30000;
    font-weight: 600;
    border-radius: 0.375rem;
}

/* Hide the default checkbox, but keep it accessible */
.filter-popover-item .form-check-input.d-none {
    position: absolute;
    left: -9999px;
}

/* For accessibility: show outline when focused via keyboard */
.filter-popover-item:focus-within {
    outline: 2px solid #d30000;
    outline-offset: 2px;
}

/* Product attributes styling */
.product-attributes {
    border-top: 1px solid #f0f0f0;
    padding-top: 0.5rem;
}

.attribute-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    padding: 0.125rem 0;
}

.attribute-item:last-child {
    margin-bottom: 0;
}

.attribute-item i {
    color: #d30000;
    font-size: 0.6rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.attribute-value {
    color: #495057;
    font-size: 0.75rem;
    font-weight: normal;
    word-break: break-word;
    flex: 1;
}