/* MSMC Price Filter - Universal Native Style */

.msmc-price-filter-wrapper {
  margin-bottom: 20px;
  position: relative;
  font-family: inherit;
  background: var(--msmc-filter-container-bg, transparent);
  padding: var(--msmc-filter-container-padding, 0);
  border-radius: 8px; /* Optional default */
  display: flex !important; /* Force flex to ensure order works */
  flex-direction: column;
  justify-content: center; /* Center content vertically if height is fixed */
}

.msmc-filter-title {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--msmc-filter-text, inherit);
    display: var(--msmc-filter-display-title, block);
    order: 1; /* Title first */
}

/* --- STRICT LAYOUT CONTROL (Addon-Style) --- */
.msmc-filter-label-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0; /* Reset */
    pointer-events: none; /* Let clicks pass if needed */
    position: relative;
    z-index: 5;
}

/* Position: Above */
.msmc-label-pos-above {
    margin-bottom: 2px; /* Tight spacing to slider */
    margin-top: 0;
    order: 2; 
}

/* Position: Below */
.msmc-label-pos-below {
    margin-top: 2px; /* Tight spacing to slider */
    margin-bottom: 0;
    order: 4; 
}

/* Label styling (Static) */
.msmc-label-static-min,
.msmc-label-static-max {
    font-size: var(--msmc-filter-label-font-size, 14px);
    color: var(--msmc-filter-text-color, #333);
    font-weight: 500;
    /* Ensure no wrapping */
    white-space: nowrap;
}

/* Slider Track */
.msmc-price-filter-wrapper .msmc-price-slider {
  order: 3;
  margin-bottom: 0; /* Remove old margin, controlled by gaps/order */
  background: var(--msmc-filter-track, #e8ebe6);
  border-radius: var(--msmc-filter-track-radius, 10px);
  height: var(--msmc-filter-track-height, 6px);
  position: relative;
  border: none;
  width: 100%; /* Ensure full width */
  padding: 20px 0; /* Space for handles */
}

/* ==========================================================================
   Native HTML5 Range Slider Styles
   ========================================================================== */

/* Track Background */
.msmc-price-slider__track {
    position: absolute;
    width: 100%;
    height: var(--msmc-filter-track-height, 6px);
    background: var(--msmc-filter-track, #e8ebe6);
    border-radius: var(--msmc-filter-track-radius, 10px);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Active Range Fill */
.msmc-price-slider__track__range {
    position: absolute;
    height: 100%;
    background: var(--msmc-filter-range, #697861);
    border-radius: var(--msmc-filter-track-radius, 10px);
    transition: left 0.15s ease, width 0.15s ease;
}

/* Range Input Base Styles */
.msmc-price-slider__input {
    position: absolute;
    width: 100%;
    height: var(--msmc-filter-track-height, 6px);
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}

/* WebKit (Chrome, Safari, Edge) Thumb */
.msmc-price-slider__input::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    width: var(--msmc-filter-handle-size, 16px);
    height: var(--msmc-filter-handle-size, 16px);
    background: var(--msmc-filter-handle, #697861);
    border-radius: var(--msmc-filter-handle-radius, 50%);
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Firefox Thumb */
.msmc-price-slider__input::-moz-range-thumb {
    pointer-events: all;
    width: var(--msmc-filter-handle-size, 16px);
    height: var(--msmc-filter-handle-size, 16px);
    background: var(--msmc-filter-handle, #697861);
    border: none;
    border-radius: var(--msmc-filter-handle-radius, 50%);
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover States */
.msmc-price-slider__input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.msmc-price-slider__input::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Active States */
.msmc-price-slider__input:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.15);
}

.msmc-price-slider__input:active::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.15);
}

/* Focus States */
.msmc-price-slider__input:focus {
    outline: none;
}

.msmc-price-slider__input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(105, 120, 97, 0.25);
}

.msmc-price-slider__input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(105, 120, 97, 0.25);
}

/* Remove default track styling */
.msmc-price-slider__input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    border: none;
}

.msmc-price-slider__input::-moz-range-track {
    background: transparent;
    border: none;
}

/* Layer the inputs correctly */
.msmc-price-slider__input--min {
    z-index: 3;
}

.msmc-price-slider__input--max {
    z-index: 4;
}

/* ==========================================================================
   jQuery UI Slider Styles (Legacy - kept for backwards compatibility)
   ========================================================================== */

.msmc-price-filter-wrapper .ui-slider-range {
  background: var(--msmc-filter-range, #697861);
  border-radius: var(--msmc-filter-track-radius, 10px);
  position: absolute;
  height: 100%;
  display: block;
}

.msmc-price-filter-wrapper .ui-slider-handle {
  background: var(--msmc-filter-handle, #697861);
  border-radius: var(--msmc-filter-handle-radius, 50%);
  width: var(--msmc-filter-handle-size, 16px);
  height: var(--msmc-filter-handle-size, 16px);
  top: calc(50% - (var(--msmc-filter-handle-size, 16px) / 2));
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: absolute;
  z-index: 2;
  margin-left: calc(var(--msmc-filter-handle-size, 16px) / -2);
  overflow: visible !important; /* Ensure bubbles/arrows extend outside */
}

/* Floating Bubbles */
.msmc-filter-bubble {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--msmc-filter-bubble-bg, #274C4F);
    color: var(--msmc-filter-bubble-text, #fff);
    padding: var(--msmc-filter-bubble-padding, 5px 10px);
    border-radius: var(--msmc-filter-bubble-radius, 4px);
    font-size: var(--msmc-filter-bubble-font-size, 12px);
    border: var(--msmc-filter-border-width, 0px) solid var(--msmc-filter-border-color, transparent);
    white-space: nowrap;
    opacity: 1;
    transition: bottom 0.2s;
    pointer-events: none;
    line-height: 1.2;
    z-index: 100; /* Ensure above other elements */
}

/* Arrow */
.msmc-filter-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--msmc-filter-bubble-bg, #274C4F) transparent transparent transparent;
}

/* Show on hover or active */
.ui-slider-handle:hover .msmc-filter-bubble,
.ui-slider-handle.ui-state-active .msmc-filter-bubble,
.msmc-price-filter-wrapper:hover .msmc-filter-bubble {
    /* opacity: 1; */
    bottom: 140%; /* Slight lift on hover */
}

/* Inputs & Button */
.msmc-price-inputs {
    display: var(--msmc-filter-display-inputs, flex);
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    order: 5; /* After everything */
    margin-top: 15px;
}

.msmc-price-inputs input[type="number"] {
    width: 45%; 
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

.msmc-filter-submit {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background-color: var(--msmc-filter-accent, #274C4F);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    order: 6; 
}
.msmc-filter-submit:hover {
    opacity: 0.9;
}


/* Floating Joined Label */
.msmc-label-floating-joined {
    position: absolute;
    top: -45px; /* Adjust based on bubble height */
    left: 50%;
    transform: translateX(-50%);
    background: var(--msmc-filter-bubble-bg, #274C4F);
    color: var(--msmc-filter-bubble-text, #fff);
    padding: var(--msmc-filter-bubble-padding, 5px 10px);
    border-radius: var(--msmc-filter-bubble-radius, 4px);
    font-size: var(--msmc-filter-bubble-font-size, 12px);
    border: var(--msmc-filter-border-width, 0px) solid var(--msmc-filter-border-color, transparent);
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    font-weight: 500;
    pointer-events: none;
}

/* Arrow for joined */
.msmc-label-floating-joined::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--msmc-filter-bubble-bg, #274C4F) transparent transparent transparent;
}


/* Below (Centered) Label */
.msmc-label-joined {
    margin-top: 15px; 
    text-align: center; 
    color: var(--msmc-filter-text-color, #333); 
    font-size: var(--msmc-filter-label-font-size, 14px);
    font-weight: 500;
    position: static; 
    display: block;
    order: 4; 
}