/* =========================================================
   ListDome — Clear individual dynamic term filters
   Works with single-select and multi-select Bootstrap fields
   ========================================================= */

.custom-search-fields-container.dynamic-fields
.custom-search-field-wrapper
.bootstrap-select {
    width: 100% !important;
}

/* The normal Bootstrap Select button */
.custom-search-fields-container.dynamic-fields
.custom-search-field-wrapper
.bootstrap-select > .dropdown-toggle {
    position: relative !important;
    width: 100% !important;
    padding-right: 76px !important;
}

/* Individual clear control inside the dropdown button */
.custom-search-fields-container.dynamic-fields
.custom-search-field-wrapper
.bootstrap-select > .dropdown-toggle
.listdome-term-field-clear {
    position: absolute !important;
    top: 50% !important;
    right: 39px !important;
    left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #7d4be2 !important;

    font-family: Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;

    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-50%) !important;

    transition:
        opacity 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease !important;

    z-index: 20 !important;
}

/* Show only when the field has an active value */
.custom-search-fields-container.dynamic-fields
.custom-search-field-wrapper
.bootstrap-select > .dropdown-toggle
.listdome-term-field-clear.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Hover and keyboard focus */
.custom-search-fields-container.dynamic-fields
.custom-search-field-wrapper
.bootstrap-select > .dropdown-toggle
.listdome-term-field-clear:hover,
.custom-search-fields-container.dynamic-fields
.custom-search-field-wrapper
.bootstrap-select > .dropdown-toggle
.listdome-term-field-clear:focus {
    background: rgba(125, 75, 226, 0.12) !important;
    color: #7d4be2 !important;
    outline: none !important;
}

/* Mobile touch target */
@media (max-width: 768px) {
    .custom-search-fields-container.dynamic-fields
    .custom-search-field-wrapper
    .bootstrap-select > .dropdown-toggle {
        padding-right: 78px !important;
    }

    .custom-search-fields-container.dynamic-fields
    .custom-search-field-wrapper
    .bootstrap-select > .dropdown-toggle
    .listdome-term-field-clear {
        right: 38px !important;

        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;

        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;

        font-size: 22px !important;
    }
}