/* Replix Captions — spring sliders + animated checkboxes (ui-fx) */

/* ── Spring slider ── */
.spring-slider {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 28px;
  touch-action: none;
  user-select: none;
}

.spring-slider--zoom {
  flex: none;
  width: 80px;
  min-height: 24px;
}

.spring-slider--volume {
  width: 0;
  opacity: 0;
  flex: none;
  min-height: 20px;
  transition: width 0.15s ease, opacity 0.15s ease;
}

@media (pointer: fine) {
  .volume-group:hover .spring-slider--volume {
    width: 60px;
    opacity: 1;
  }
}

/* Visual track — sits behind thumb (native input track is transparent) */
.ss-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  height: 3px;
  margin: 0;
  border-radius: 2px;
  background: #333;
  pointer-events: none;
  transform: translateY(-50%);
}

.spring-slider--volume .ss-track {
  background: rgba(255, 255, 255, 0.16);
}

.spring-slider input[type="range"] {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  cursor: pointer;
  background: transparent !important;
}

/* Style-row / mobile: slim invisible native track (hit target only) */
.style-row .spring-slider input[type="range"],
.mobile-style-row .spring-slider input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  outline: none;
}

.spring-slider--zoom input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  outline: none;
}

.spring-slider--volume input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  outline: none;
}

/* Hide native thumbs — custom .ss-thumb draws instead */
.spring-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: transparent;
  border: none;
  border-radius: 2px;
}

.spring-slider input[type="range"]::-moz-range-track {
  height: 3px;
  background: transparent;
  border: none;
  border-radius: 2px;
}

.spring-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  opacity: 0;
  cursor: pointer;
}

.spring-slider--zoom input[type="range"]::-webkit-slider-thumb,
.spring-slider--volume input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
}

.spring-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}

.spring-slider--zoom input[type="range"]::-moz-range-thumb,
.spring-slider--volume input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
}

.ss-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: left, transform;
}

.spring-slider--zoom .ss-thumb,
.spring-slider--volume .ss-thumb {
  width: 10px;
  height: 10px;
  background: #f5f5f5;
}

.spring-slider--zoom .ss-thumb {
  background: #888;
}

.spring-slider.dragging .ss-thumb {
  transform: translate(-50%, -50%) scale(1.25);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spring-slider:not(.dragging) .ss-thumb {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Animated checkbox ── */
.cb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  vertical-align: middle;
}

.cb--checkout {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.cb input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  accent-color: transparent;
}

.cb-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.cb--checkout .cb-box {
  width: 18px;
  height: 18px;
}

.cb-box[data-state="checked"] {
  background: #fff;
  border-color: #fff;
}

.cb-box[data-state="indeterminate"] {
  background: #fff;
  border-color: #fff;
}

.cb-mark {
  width: 12px;
  height: 12px;
  color: #111;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}

.cb-box[data-state="checked"] .cb-mark,
.cb-box[data-state="indeterminate"] .cb-mark {
  opacity: 1;
  transform: scale(1);
}

.cb-mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.3s ease-out 0.04s;
}

.cb-box[data-state="checked"] .cb-mark path,
.cb-box[data-state="indeterminate"] .cb-mark path {
  stroke-dashoffset: 0;
}

.cb-box[data-state="unchecked"] .cb-mark {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.cb-box[data-state="unchecked"] .cb-mark path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.15s ease-out;
}

.cb.pressing .cb-box {
  transform: scale(0.92);
}

.checkout-consent .cb input[type="checkbox"] {
  width: 100%;
  height: 100%;
}

/* Override legacy checkout native checkbox sizing */
.checkout-consent input[type="checkbox"].ui-fx-native {
  width: 100%;
  height: 100%;
}

/* Stable width so digits don't jump/chop while gliding */
.style-val,
.mobile-style-val {
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}

/* ── Number ticker (odometer roll) ── */
.nt {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: var(--nt-h, 1.1em);
}

.nt-glyphs {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.nt-prefix,
.nt-suffix,
.nt-static {
  display: inline-block;
  line-height: var(--nt-h, 1.1em);
}

.nt-digit {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: var(--nt-h, 1.1em);
  width: 1ch;
  min-width: 1ch;
  vertical-align: middle;
  text-align: center;
}

.nt-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.nt-cell {
  display: block;
  height: var(--nt-h, 1.1em);
  line-height: var(--nt-h, 1.1em);
  width: 1ch;
  min-width: 1ch;
  text-align: center;
}

.nt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pricing page: digits sit beside currency span */
.plan-price-digits {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.plan-price-digits .nt {
  align-items: center;
}

/* Editor plans modal: suffix matches legacy small */
.plans-card-price {
  position: relative;
}

.plans-card-price .nt-suffix {
  font-size: 14px;
  font-weight: 500;
  color: #888;
  margin-left: 1px;
}

.checkout-modal-price .nt-suffix {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.export-offer-price .nt {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .ss-thumb,
  .spring-slider.dragging .ss-thumb,
  .spring-slider:not(.dragging) .ss-thumb,
  .cb-box,
  .cb-mark,
  .cb-mark path,
  .cb.pressing .cb-box {
    transition: none !important;
  }

  .spring-slider.dragging .ss-thumb {
    transform: translate(-50%, -50%);
  }

  .nt-track {
    transition: none !important;
  }
}