/* MR number stepper — ITER 290 (BS-paralel)
   ─────────────────────────────────────────────────────────────────
   Mobile-friendly number input with +/- buttons.

   Markup:
     <div class="bs-stepper" data-min="0" data-max="10000" data-step="10" data-value="50">
       <button type="button" class="bs-stepper-btn bs-stepper-dec" aria-label="Azalt">−</button>
       <input class="bs-stepper-input" type="text" inputmode="numeric" value="50">
       <button type="button" class="bs-stepper-btn bs-stepper-inc" aria-label="Arttır">+</button>
     </div>

   Variants:
     .bs-stepper--lg     → larger touch targets (44px)
     .bs-stepper--sm     → compact (32px)
     .bs-stepper--gold   → accent color
     .bs-stepper--block  → full-width
*/

:root {
  --bs-stepper-h: 38px;
  --bs-stepper-btn-w: 38px;
  --bs-stepper-fs: 14px;
  --bs-stepper-bg: rgba(255, 255, 255, 0.05);
  --bs-stepper-border: rgba(255, 255, 255, 0.10);
  --bs-stepper-text: var(--theme-text-primary, #fff);
  --bs-stepper-btn-bg: rgba(255, 255, 255, 0.06);
  --bs-stepper-btn-bg-active: rgba(212, 175, 55, 0.18);
  --bs-stepper-btn-color: var(--theme-text-primary, #fff);
  --bs-stepper-radius: 8px;
}

.bs-stepper {
  display: inline-flex;
  align-items: stretch;
  height: var(--bs-stepper-h);
  background: var(--bs-stepper-bg);
  border: 1px solid var(--bs-stepper-border);
  border-radius: var(--bs-stepper-radius);
  overflow: hidden;
  isolation: isolate;
  font-size: var(--bs-stepper-fs);
}

.bs-stepper-btn {
  width: var(--bs-stepper-btn-w);
  flex: 0 0 auto;
  background: var(--bs-stepper-btn-bg);
  color: var(--bs-stepper-btn-color);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, transform 100ms ease;
  user-select: none;
  touch-action: manipulation;
  outline: none;
}
.bs-stepper-btn:hover,
.bs-stepper-btn:focus-visible {
  background: var(--bs-stepper-btn-bg-active);
  color: #fff;
}
.bs-stepper-btn:active {
  transform: scale(0.96);
}
.bs-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bs-stepper-btn:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.45);
}

.bs-stepper-input {
  flex: 1 1 auto;
  min-width: 60px;
  background: transparent;
  border: 0;
  color: var(--bs-stepper-text);
  text-align: center;
  font-size: var(--bs-stepper-fs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
  /* Hide spinner on number input */
  border-left: 1px solid var(--bs-stepper-border);
  border-right: 1px solid var(--bs-stepper-border);
}
.bs-stepper-input::-webkit-outer-spin-button,
.bs-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bs-stepper-input:focus-visible {
  background: rgba(212, 175, 55, 0.06);
}

/* Suffix label (currency/units) */
.bs-stepper-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  background: var(--bs-stepper-btn-bg);
  border-left: 1px solid var(--bs-stepper-border);
  pointer-events: none;
}

/* Variants */
.bs-stepper--lg {
  --bs-stepper-h: 44px;
  --bs-stepper-btn-w: 44px;
  --bs-stepper-fs: 16px;
}
.bs-stepper--sm {
  --bs-stepper-h: 32px;
  --bs-stepper-btn-w: 32px;
  --bs-stepper-fs: 12px;
}
.bs-stepper--gold {
  --bs-stepper-border: rgba(212, 175, 55, 0.30);
  --bs-stepper-btn-bg-active: rgba(212, 175, 55, 0.28);
}
.bs-stepper--gold .bs-stepper-input {
  color: var(--theme-accent, #d4af37);
}
.bs-stepper--block {
  display: flex;
  width: 100%;
}

/* Loading state — show pulse on input */
.bs-stepper.is-loading .bs-stepper-input {
  animation: bsStepperPulse 1.2s ease-in-out infinite;
}
@keyframes bsStepperPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Quick-amount chip row (often used with stepper for deposit) */
.bs-stepper-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.bs-stepper-quick-chip {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bs-stepper-border);
  color: var(--theme-text-primary, #fff);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.bs-stepper-quick-chip:hover,
.bs-stepper-quick-chip:focus-visible,
.bs-stepper-quick-chip.is-active {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.45);
  color: #fff;
  outline: none;
}

/* Error state */
.bs-stepper.has-error {
  border-color: rgba(255, 70, 70, 0.6);
  animation: bsStepperShake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes bsStepperShake {
  0%, 100%        { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90%  { transform: translateX(-4px); }
  20%, 40%, 60%, 80%       { transform: translateX( 4px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bs-stepper.is-loading .bs-stepper-input,
  .bs-stepper.has-error,
  .bs-stepper-btn,
  .bs-stepper-quick-chip {
    animation: none !important;
    transition: none !important;
  }
}