/* Hardcoded colors and values */
    .customer-blue { background-color: #3e637f; }
    .customer-blue-dark { color: #2e4f69; }
    .customer-border { border-color: #e6e6e6; }
    .customer-shadow { box-shadow: 0 8px 30px rgba(34,34,34,0.12); }
    .radius { border-radius: 8px; }

    /* Big header area */
.customer-filter-hero {
	display: flex;
	justify-content: center;
}
.customer-filter-inner {
	width: 100%;
	text-align: center;
	background: #3e637f;
	padding: 30px;
	margin-bottom: 30px;
}

.customer-filter-title {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.2px;
	margin-bottom: 20px;
}

.customer-filter-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	padding-left: 50px;
	padding-right: 50px;
}

    .customer-filter-drop {
      position:relative;
      display:inline-block;
      z-index:50;
    }
.customer-filter-toggle {
	border: 0 !important;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all .16s;
	font-weight: 400;
	background: transparent !important;
}
    .customer-filter-toggle:hover {
        background:transparent;
        transform:none;
        border: 0 !important;
    }

    .customer-filter-drop.customer-open .customer-filter-toggle,
    .customer-filter-drop.customer-selected .customer-filter-toggle {
        background:#3e637f;
        color:#fff;
    }

    .customer-filter-drop.customer-open .customer-filter-caret,
    .customer-filter-drop.customer-selected .customer-filter-caret {
        border-right-color:#fff;
        border-bottom-color:#fff;
    }

.customer-filter-caret {
	width: 8px;
	height: 8px;
	display: inline-block;
	transform: rotate(45deg);
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	margin-left: 4px;
	margin-top: 2px;
}

    .customer-filter-menu {
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      top:calc(100% + 12px);
      min-width:240px;
      max-width:360px;
      background:#fff;
      border-radius:8px;
      box-shadow:0 8px 30px rgba(34,34,34,0.12);
      border:1px solid #e6e6e6;
      padding:16px;
      display:none;
      opacity:0;
      pointer-events:none;
      transition: all 220ms cubic-bezier(.2,.9,.2,1);
      z-index: 100;
    }

    .customer-filter-menu:before {
      content:'';
      position:absolute;
      top:-8px;
      left:50%;
      transform:translateX(-50%) rotate(45deg);
      width:16px; height:16px;
      background:#fff;
      border-left:1px solid #e6e6e6;
      border-top:1px solid #e6e6e6;
      box-shadow:inherit;
    }

    .customer-filter-drop.customer-open .customer-filter-menu {
      display:block;
      opacity:1;
      pointer-events:auto;
      transform: translate(-50%, 6px);
    }

.customer-filter-heading {
	font-weight: 700;
	color: #2e4f69;
	font-size: 13px;
	margin-bottom: 10px;
	text-transform: capitalize;
	text-align: left;
}

    .customer-filter-row {
      display:flex;
      gap:8px;
      margin-bottom:10px;
      align-items:center;
    }
    .customer-select {
      flex:1;
      padding:10px 12px;
      border-radius:6px;
      border:1px solid #d8d8d8;
      font-size:14px;
      cursor:pointer;
      background-color: transparent;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%233e637f" d="M8 12.5l-6-6h12z"/></svg>');
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px; 
    }

    .customer-options {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .customer-option {
      padding:8px 14px;
      border-radius:20px;
      background:#f2f2f2;
      border:1px solid transparent;
      cursor:pointer;
      font-size:14px;
      transition:all .16s;
    }
    .customer-option:hover { background:#e6e6e6; transform:translateY(-1px); }
    .customer-option.customer-selected {
      background:#3e637f;
      color:#fff;
      border-color: rgba(0,0,0,0.04);
      box-shadow: 0 2px 8px rgba(46,79,105,0.2);
    }

    .customer-checkbox-list {
      max-height:260px;
      overflow-y:auto;
      padding-right:8px;
    }

    .customer-checkbox-item {
      display:flex;
      gap:10px;
      align-items:center;
      padding:8px 4px;
      border-bottom:1px dashed #f0f0f0;
      cursor:pointer;
    }
    .customer-checkbox-item:last-child { border-bottom:0; }

    .customer-checkbox-item input[type="checkbox"]{
      min-width:16px; min-height:16px;
      accent-color: #3e637f;
      cursor:pointer;
    }
.customer-checkbox-label {
	font-size: 13px;
	color: #263238;
	cursor: pointer;
	font-weight: 400;
	margin-top: 5px;
}
.clear_filter_action {
	display: flex;
	align-items: center;
	margin-left: 10px;
}
#customer-more-apply {
	padding: 4px 20px;
	border-radius: 6px;
	font-weight: 600;
	transition: all .16s;
	background: #fff !important;
	color: #3e637f !important;
	font-size: 13px;
}
.filter_UP {
	margin-top: -70vh;
	position: relative;
	z-index: 1;
}

.main_filter_section {
	display: flex;
	width: 100%;
	gap: 5px;
	align-items: center;
}
.es-title {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5em;
	color: #263238;
	margin-bottom: .4em;
}
.es-total {
	font-weight: 700;
	font-size: 15px;
	color: #78909c;
	line-height: 1.71em;
	display: block;
	margin-bottom: 30px;
}
.filter_UP .mvc-listings-grid-wrapper {
	padding: 0 !important;
}
.toggel_mobile_action {
	background: #fff;
	padding: 10px 20px;
	border-radius: 4px;
}

















@media (max-width:991px){
.clear_filter_action {
	margin-left: 0;
}  
.filter_UP {
	margin-top: -100px;
	position: relative;
	z-index: 1;
}
.main_filter_section {
	flex-direction: column;
	background: #152046;
  margin-top: 30px;
  padding: 20px;
  border-radius: 4px;
}
    .customer-filter-title{ font-size:22px; padding:20px;}
    
    .customer-filter-menu { 
        left:10px; 
        transform: translateX(0);
        min-width:220px; 
        right:10px; 
    }
    .customer-filter-menu:before{ 
        left:36px; 
        transform:rotate(45deg); 
    }
    .customer-filter-bar{ gap:10px; padding:8px; }
    .customer-filter-toggle{ font-size:13px; padding:7px 14px; }

.customer-filter-title {
	font-size: 22px;
	padding: 20px;
	margin: 0;
}
.customer-filter-inner {
	padding: 0 30px 20px;
	margin-bottom: 30px;
}

    .customer-filter-bar{ 
        border-radius:12px; 
        padding:8px; 
        flex-direction:column; 
        align-items:stretch; 
        gap: 8px; 
    }

    /* 2. Ensure the dropdown container has a high Z-index when open */
    .customer-filter-drop { 
        width:100%; 
        /* The relative positioning of the drop is fine, but we need high z-index for the open menu */
        z-index: 50; /* Base Z-index */
    }
    .customer-filter-drop.customer-open {
        z-index: 100; /* CRUCIAL: Must be higher than the other buttons/drops that follow it */
    }
    
    /* 3. Make toggle buttons full width and style */
    .customer-filter-toggle { 
        width:100%; 
        justify-content:space-between; 
        padding: 10px 16px; 
    }

    /* 4. Dropdown menu positioning for stacked view */
    .customer-filter-menu { 
        position: absolute;
        width: 100%; /* Full width of container minus filter-bar padding (8px left + 8px right) */
        left: 0 !important; /* Start from the filter bar's inner edge (8px padding) */
        right: 0 !important; 
        
        /* FIX: Adjust top position. top:100% is based on the full-width button height. 
           We need to push it down past the button's height plus the gap. */
        top: calc(100% + 10px); /* Adjust to fall below the button and prevent hiding */
        
        transform: none !important; /* Remove translateX centering */
        max-width: none;
        
        /* Ensure the open menu is visually above the following buttons */
        z-index: 101; 
    }
    
    /* FIX: Active state adjustment for the new top property */
    .customer-filter-drop.customer-open .customer-filter-menu {
        transform: none !important; /* Override the desktop transform: translate(-50%, 6px) */
        top: calc(100% + 6px); /* Final position just below the button (100%) plus a small offset (6px) */
    }

    /* 5. Adjust the pointer to be centered above the full-width menu */
    .customer-filter-menu:before{ 
        left:50%; 
        transform:translateX(-50%) rotate(45deg); 
    }
    
    /* Fix for "More Filters" which had inline style */
    .customer-filter-drop[data-name="more"] .customer-filter-menu {
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
    }

    .customer-option{ font-size:13px; padding:8px 14px; }
}