/* =========================================
   GENERAL / TYPOGRAPHY
   ========================================= */
:root {
    --heading-font: "Inter", "Helvetica Neue", Arial, sans-serif;
    --text-font: "Inter", "Helvetica Neue", Arial, sans-serif;
    --primary-color: #3586BB;
    --text-dark: #222222;
    --text-muted: #686868;
    --border-gray: #cfd3d8;
    --panel-bg: #f5f6f7;
}

body {
    font-family: var(--text-font);
}

/* Apply Inter specifically to Categories / Locations headings/buttons */
.heading-with-icon,
.browse-locationcatpanel .dropbtn > .dropdown-toggle,
.browse-locationcatpanel .location-panel-head h1,
.page-title,
.text-muted-listed {
    font-family: var(--heading-font) !important;
}

/* Page title + subtitle */
.page-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-dark);
}

.page-subtitle {
    font-size: 18px;
    font-weight: 200;
    color: var(--text-muted) !important;
}

/* Sort icon spacing (replaces inline styles) */
.sort-icon {
    margin-top: 8px;
    margin-right: 5px;
}

/* Buttons state for Completed (kept for compatibility) */
.btn-status-completed {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Status buttons (pill style) */
.browse-status-buttons .status-btn {
    border-radius: 30px;
    padding: 0px 14px;
}

    /* Active state (filled primary) */
    .browse-status-buttons .status-btn.active,
    .browse-status-buttons .status-btn.is-active {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color);
        color: #fff;
    }

    /* Normal state (outlined/gray) */
    .browse-status-buttons .status-btn:not(.active):not(.is-active) {
        color: #444444;
        margin-right: 10px;
    }

        .browse-status-buttons .status-btn:not(.active):not(.is-active):hover,
        .browse-status-buttons .status-btn:not(.active):not(.is-active):focus-visible {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color);
            color: #fff;
        }

/* Selects */
.options-custom-select {
    border-radius: 5px !important;
}

/* Muted text used under title */
.text-muted-listed {
    color: var(--text-muted) !important;
}

/* =========================================
   LEFT PANEL (Categories / Locations)
   ========================================= */
@media only screen and (min-width: 691px) {
    .dropbtn {
        display: none !important;
    }
}

.dropList {
    transform: inherit !important;
    top: unset !important;
}

.browse-locationcatpanel .location-panel-head {
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
}

    .browse-locationcatpanel .location-panel-head h1 {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: #222;
        font-size: 20px;
        font-weight: 600;
        line-height: 150%;
        letter-spacing: 0.2px;
        text-transform: capitalize;
        margin: 0;
    }

.browse-locationcatpanel .icon-left {
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* Lists spacing under their headings */
.browse-locationcatpanel .category-panel ul,
.browse-locationcatpanel .locationpanel ul {
    margin-top: .5rem !important;
}

/* ===== Mobile dropdowns (Locations / Categories) ===== */
.locationcategorypanel .awe-dropmenu .dropdown-toggle,
.locationcategorypanel .dropdown .dropdown-toggle,
.browse-locationcatpanel .dropbtn > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--border-gray) !important;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    box-shadow: none !important;
}

    .locationcategorypanel .awe-dropmenu .dropdown-toggle:hover,
    .locationcategorypanel .awe-dropmenu .dropdown-toggle:focus,
    .locationcategorypanel .dropdown .dropdown-toggle:hover,
    .locationcategorypanel .dropdown .dropdown-toggle:focus,
    .browse-locationcatpanel .dropbtn > .dropdown-toggle:hover,
    .browse-locationcatpanel .dropbtn > .dropdown-toggle:focus {
        background-color: var(--panel-bg) !important;
        border-color: var(--border-gray) !important;
        color: #222 !important;
        box-shadow: none !important;
    }

/* Left icon inside the dropdown toggles */
.locationcategorypanel .icon-left,
.browse-locationcatpanel .icon-left {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* Bootstrap caret alignment to the right */
.locationcategorypanel .dropdown-toggle::after,
.browse-locationcatpanel .dropbtn > .dropdown-toggle::after {
    margin-left: auto;
    color: #222;
    opacity: 1;
}

/* Dropdown panel below */
.locationcategorypanel .dropdown-menu,
.browse-locationcatpanel .dropbtn .dropdown-menu {
    width: 100%;
    margin-top: 6px;
    border: 1px solid #e4e7eb;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

/* =========================================
   EMPTY RESULTS BOX
   ========================================= */
.empty-results-box {
    background: #e9ecef;
    padding: 1rem;
    text-align: center;
}