/* =====================================================
   RANGE SLIDER
   - Usa tokens de main.css / form.css
   - Slider horizontal com bolha (tooltip) de valor
===================================================== */

.range-field {
  display: grid;
  gap: 8px;
}

/* wrapper geral */
.range {
  --range-track-h: 6px;
  --range-thumb-size: 22px;
  --range-bubble-scale: 1;   /* 1 = tamanho normal */

  position: relative;
  width: 100%;
  padding-top: 32px; /* espaço para a bolha */
}

/* Impedir seleção de texto no slider e na bolha */
.range,
.range * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* input base */
.range__input {
  width: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* TRACK (WebKit) */
.range__input::-webkit-slider-runnable-track {
  height: var(--range-track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--primary-500) 0%,
    var(--primary-500) calc(var(--range-progress, 50%) + 0%),
    var(--ink-100)      calc(var(--range-progress, 50%) + 0%),
    var(--ink-100) 100%
  );
}

/* THUMB (WebKit) */
.range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--primary-500);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  margin-top: calc((var(--range-thumb-size) - var(--range-track-h)) / -2);
  cursor: pointer;
}

/* TRACK (Firefox) */
.range__input::-moz-range-track {
  height: var(--range-track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--primary-500) 0%,
    var(--primary-500) calc(var(--range-progress, 50%) + 0%),
    var(--ink-100)      calc(var(--range-progress, 50%) + 0%),
    var(--ink-100) 100%
  );
}

/* THUMB (Firefox) */
.range__input::-moz-range-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--primary-500);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  cursor: pointer;
}

/* Foco acessível */
.range__input:focus-visible {
  outline: none;
}
.range__input:focus-visible::-webkit-slider-thumb,
.range__input:focus-visible::-moz-range-thumb {
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.25),
    0 0 0 4px color-mix(in srgb, var(--primary-500) 28%, transparent);
}

/* Bolha de valor */
.range__bubble {
  position: absolute;
  top: 0;
  left: 50%;                 /* valor default; JS põe px aqui */
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* base mais pequena */
  min-width: 36px;
  padding: 3px 10px;
  border-radius: 10px;

  /* crescimento controlado pela variável (sobretudo em largura) */
  min-width: calc(36px * var(--range-bubble-scale));
  padding-left:  calc(10px * var(--range-bubble-scale));
  padding-right: calc(10px * var(--range-bubble-scale));

  background: var(--surface, #fff);
  color: var(--ink-900);
  font-size: 0.9rem;
  font-weight: 600;

  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.08));
  border: 1px solid var(--border-soft, rgba(2,6,23,.08));

  pointer-events: none;
  white-space: nowrap;
}


.range__bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);

  width: 12px;
  height: 12px;

  border-radius: 3px;
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
}

/* Label min/max */
.range__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-500);
  margin-top: 4px;
}

/* Dark mode ajustes */
:root[data-theme="dark"] .range__bubble {
  background: var(--surface-soft);
  color: var(--ink-600);
}