/* ============================================================
 THUMBNAIL SIZE CONTROL — TAPERED BAR WITH +/- BUTTONS
============================================================ */
#thumbSizeSlider.locked {
  opacity: 0.4;
  pointer-events: none;
}

.thumb-slider-section {
  flex: 0 0 auto;
}

.thumb-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* plus and minus by slider */
.thumb-icon {
  width: 12px;
  text-align: center;
  color: var(--slider-track);
  pointer-events: none;
  user-select: none;
  font-size: 16px;
}

/* Tapered track shape */
.thumb-taper-track {
  position: relative;
  flex: 1;
  height: 15px;
}

/* Hide the native slider */
.thumb-taper-track input[type="range"] {
  width: 100%;
  height: 100%;
  -webkit-appearance: none; /* 🔥 CRITICAL: Required for Edge/Chrome/Safari */
  appearance: none;
  background: transparent;
  position: relative;
  z-index: 5;
}

/* Thumb */
/* WEBKIT (Chrome, Edge, Safari) Desktop */
.thumb-taper-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* 🔥 CRITICAL */
  appearance: none;
  width: 8px;
  height: 25px;
  background: var(--slider-thumb);
  border-radius: 0;
  cursor: ew-resize;
}

/* FIREFOX Desktop */
.thumb-taper-track input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 8px;
  height: 25px;
  background: var(--slider-thumb);
  border: none; /* Firefox adds a grey border by default */
  border-radius: 0;
  cursor: ew-resize;
}

/* =========================================
   MOBILE THUMBS (Must be separated!)
========================================= */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* WEBKIT (Chrome, Edge, Safari) Mobile */
  .thumb-taper-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 44px;
    background: var(--slider-thumb);
    border: 2px solid var(--general-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: ew-resize;
  }

  /* FIREFOX Mobile */
  .thumb-taper-track input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 34px;
    height: 44px;
    background: var(--slider-thumb);
    border: 2px solid var(--general-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: ew-resize;
  }
}

/* Track shape */
.thumb-taper-shape {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: var(--general-white);
  clip-path: polygon(0% 80%, 100% 20%, 100% 100%, 0% 100%);
}