/**
 * Homexty RealHomes Enhancer — Hierarchy Styles
 *
 * Visual differentiation of hierarchical levels in Bootstrap Select Picker
 * dropdowns, replacing the ugly "- - -" dash pattern with clean CSS styling.
 *
 * HOW IT WORKS:
 *   FunctionOverrides.php adds class="rhe-depth-N" to each <option>.
 *   Bootstrap Select Picker transfers option classes to the rendered <li>.
 *   These rules style each depth level with progressive padding, left-border
 *   color, font weight, and subtle background tint.
 *
 * THEME INTEGRATION:
 *   Uses RealHomes CSS variables (--rh-global-color-primary) to match the
 *   active theme color scheme automatically.
 *
 * @package RealHomesEnhancer
 */

/* ── Base: All depth-tagged items ── */
.bootstrap-select .dropdown-menu li[class*="rhe-depth-"] > a {
    transition: padding-left 0.15s ease, background-color 0.15s ease;
}

/* ── Depth 0: Top-level (Country, Parent Category) ── */
.bootstrap-select .dropdown-menu li.rhe-depth-0 > a {
    padding-left: 12px;
    font-weight: 600;
    color: var(--rh-global-color-headings, #1a1a2e);
}

/* ── Depth 1: First children (Region, Sub-category) ── */
.bootstrap-select .dropdown-menu li.rhe-depth-1 > a {
    padding-left: 26px;
    font-weight: 500;
    border-left: 3px solid var(--rh-global-color-primary, #1db2ff);
    color: var(--rh-global-color-headings, #333);
}

/* ── Depth 2: Second level (City, Sub-sub-category) ── */
.bootstrap-select .dropdown-menu li.rhe-depth-2 > a {
    padding-left: 40px;
    font-weight: 400;
    border-left: 3px solid rgba(var(--rh-global-color-primary-rgb, 29, 178, 255), 0.45);
    color: var(--rh-global-color-text, #555);
    font-size: 0.95em;
}

/* ── Depth 3: Third level (Area, Quartier) ── */
.bootstrap-select .dropdown-menu li.rhe-depth-3 > a {
    padding-left: 54px;
    font-weight: 400;
    border-left: 3px solid rgba(var(--rh-global-color-primary-rgb, 29, 178, 255), 0.25);
    color: var(--rh-global-color-text, #777);
    font-size: 0.92em;
}

/* ── Depth 4+: Deeper levels ── */
.bootstrap-select .dropdown-menu li.rhe-depth-4 > a,
.bootstrap-select .dropdown-menu li.rhe-depth-5 > a {
    padding-left: 66px;
    font-weight: 400;
    border-left: 3px solid rgba(var(--rh-global-color-primary-rgb, 29, 178, 255), 0.15);
    color: var(--rh-global-color-text, #999);
    font-size: 0.9em;
}

/* ── Hover states: Enhance left border on hover ── */
.bootstrap-select .dropdown-menu li[class*="rhe-depth-"]:not(.rhe-depth-0):hover > a {
    border-left-color: var(--rh-global-color-primary, #1db2ff);
    background-color: rgba(var(--rh-global-color-primary-rgb, 29, 178, 255), 0.06);
}

/* ── Selected state ── */
.bootstrap-select .dropdown-menu li[class*="rhe-depth-"].selected > a {
    border-left-color: var(--rh-global-color-primary, #1db2ff) !important;
}

/* ── Small dot indicator: ONLY on items with children ── */
/* The dot signals "this item has sub-items you can drill into" */
.bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-1 > a::before,
.bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-2 > a::before,
.bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-3 > a::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rh-global-color-primary, #1db2ff);
    margin-right: 8px;
    vertical-align: middle;
    opacity: 0.5;
}

.bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-2 > a::before {
    width: 4px;
    height: 4px;
    opacity: 0.35;
}

.bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-3 > a::before {
    width: 3px;
    height: 3px;
    opacity: 0.25;
}

/* ═══════════════════════════════════════════
   SFOI Form Override
   The SFOI form has its own dropdown styling
   with primary-colored background. Adapt.
   ═══════════════════════════════════════════ */

.rh_sfoi_advance_search_form .bootstrap-select .dropdown-menu li.rhe-depth-1 > a,
.rh_sfoi_advance_search_form .bootstrap-select .dropdown-menu li.rhe-depth-2 > a,
.rh_sfoi_advance_search_form .bootstrap-select .dropdown-menu li.rhe-depth-3 > a {
    border-left-color: rgba(255, 255, 255, 0.4);
}

.rh_sfoi_advance_search_form .bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-1 > a::before,
.rh_sfoi_advance_search_form .bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-2 > a::before,
.rh_sfoi_advance_search_form .bootstrap-select .dropdown-menu li.rhe-has-children.rhe-depth-3 > a::before {
    background: rgba(255, 255, 255, 0.7);
}

/* ═══════════════════════════════════════════
   RHEA Elementor Search Form Override
   ═══════════════════════════════════════════ */

.rhea_search_form_wrapper .bootstrap-select .dropdown-menu li.rhe-depth-0 > a {
    font-weight: 600;
}

.rhea_search_form_wrapper .bootstrap-select .dropdown-menu li[class*="rhe-depth-"]:not(.rhe-depth-0) > a {
    border-left: 3px solid var(--rh-global-color-primary, #1db2ff);
}