/* ============================================
   RANGE SLIDER - FULL CSS
   ============================================ */

/* ============================================
   VARIABLES
   ============================================ */
:root {
  /* Colors */
  --slider-background: #e6e6e6;
  --slider-fill-color: #156C8C;
  --slider-handle-color: #156C8C;
  --slider-handle-hover-color: #1E7ABF;
  --slider-handle-active-color: #0D4E6A;
  --slider-shadow-color: rgba(0, 0, 0, 0.3);
  --slider-focus-shadow: rgba(0,0,0,0.25);

  /* Horizontal Slider */
  --slider-horizontal-height: 10px;
  --slider-horizontal-width: 84%;
  --slider-value-width-horizontal: 14%;
  --slider-value-margin-horizontal: 2%;

  /* Vertical Slider */
  --slider-vertical-width: 20px;
  --slider-vertical-min-height: 150px;
  --slider-value-width-vertical: 150px;
  --slider-value-margin-vertical: 15px;

  /* Handle */
  --slider-handle-width: 18px;
  --slider-handle-height: 18px;

  /* Effects */
  --slider-disabled-opacity: 0.4;
  --slider-border-radius: 6px;
	
/* Bubble */
  --slider-bubble-bg: #156C8C;
  --slider-bubble-color: #fff;
  --slider-bubble-padding: 2px 6px;
  --slider-bubble-radius: 4px;
  --slider-bubble-font-size: 12px;
  --slider-bubble-offset: -28px; /* distance above handle */

}

/* ============================================
   WRAPPER FOR FLEX LAYOUT
   ============================================ */
.rangeslider-wrapper {
  display: inline-flex;
  align-items: center;
}

.rangeslider-wrapper.horizontal {
  flex-direction: row; /* horizontal: input beside slider */
}

.rangeslider-wrapper.vertical {
  flex-direction: column; /* vertical: input under slider */
  align-items: center;
}

/* ============================================
   NUMBER INPUT WIDTH / MARGIN
   ============================================ */
.rangeslider_value-horizontal {
  width: var(--slider-value-width-horizontal) !important;
  margin-right: var(--slider-value-margin-horizontal);
  margin-top: 0;
}

.rangeslider_value-vertical {
  width: var(--slider-value-width-vertical) !important;
  margin-top: var(--slider-value-margin-vertical);
  margin-right: var(--slider-value-margin-vertical);	
  margin-left: 0;
  top: calc(-0.5 * var(--slider-vertical-min-height));
  position: relative;
}

/* ============================================
   BASE SLIDER
   ============================================ */
.rangeslider {
  position: relative;
  display: inline-block;
  background: var(--slider-background);
  box-shadow: inset 0 1px 3px var(--slider-shadow-color);
  border-radius: var(--slider-border-radius);
}

.rangeslider__fill {
  position: absolute;
  background: var(--slider-fill-color);
  box-shadow: inset 0 1px 3px var(--slider-shadow-color);
  border-radius: var(--slider-border-radius);
  transition: all 0.2s ease;
}

.rangeslider--disabled {
  opacity: var(--slider-disabled-opacity);
  pointer-events: none;
}

/* ============================================
   HANDLE (CSS ONLY)
   ============================================ */
.rangeslider__handle {
  position: absolute;
  cursor: pointer;
  width: var(--slider-handle-width);
  height: var(--slider-handle-height);
  background: var(--slider-handle-color);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px var(--slider-shadow-color);
  transition: all 0.2s ease;
}

.rangeslider__handle:hover {
  background: var(--slider-handle-hover-color);
  box-shadow: 0 4px 8px var(--slider-shadow-color);
}

.rangeslider__handle:active,
.rangeslider--active .rangeslider__handle {
  background: var(--slider-handle-active-color);
  transform: scale(1.1);
}

/* ============================================
   HORIZONTAL SLIDER
   ============================================ */
.rangeslider--horizontal {
  height: var(--slider-horizontal-height);
  width: var(--slider-horizontal-width);
}

.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: var(--slider-horizontal-height);
}

.rangeslider--horizontal .rangeslider__handle {
  top: 50%;
  transform: translateY(-50%);
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

/* ============================================
   VERTICAL SLIDER
   ============================================ */
.rangeslider--vertical {
  width: var(--slider-vertical-width);
  min-height: var(--slider-vertical-min-height);
  max-height: 100%;
  height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider--vertical .rangeslider__handle {
  left: 50%;
  transform: translateX(-50%);
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

/* ============================================
   HIDE NATIVE INPUT
   ============================================ */
input[type="range"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
}

/* ============================================
   FOCUS STATE
   ============================================ */
input[type="range"]:focus + .rangeslider .rangeslider__handle {
  box-shadow: 0 0 8px var(--slider-focus-shadow);
}

/* The slider itself is focusable (keyboard control) */
.rangeslider:focus {
  outline: none;
}

.rangeslider:focus .rangeslider__handle {
  box-shadow: 0 0 8px var(--slider-focus-shadow);
}

.rangeslider:focus-visible .rangeslider__handle {
  box-shadow: 0 0 0 3px var(--slider-focus-shadow);
}

/* ============================================
   BUBBLE ABOVE HANDLE
   ============================================ */

/* Bubble wrapper inside handle */
.rangeslider__handle .rangeslider-bubble {
    position: absolute;
    top: var(--slider-bubble-offset);
    left: 50%;
    transform: translateX(-50%);
    background: var(--slider-bubble-bg);
    color: var(--slider-bubble-color);
    padding: var(--slider-bubble-padding);
    border-radius: var(--slider-bubble-radius);
    font-size: var(--slider-bubble-font-size);
    white-space: nowrap;
    pointer-events: none;
    transition: transform 0.15s ease; /* optional smooth scaling */
}