/* ==========================================================================
   QuantityStepper — Tickchak Design System
   Figma: 3551:17628
   Props:
     canDecrement (variant: false/true) — controls minus button enabled state
     canIncrement (variant: true/false) — controls plus button enabled state
     isFocused    (boolean)             — counter gets white fill when true
   Usage:
     <div class="qty [is-focus]">
       <button class="qty__btn qty__plus" [disabled]>+</button>
       <div class="qty__count">0</div>  (or <input class="qty__count">)
       <button class="qty__btn qty__minus" [disabled]>−</button>
     </div>
   RTL: first child = right visually. Order [plus, count, minus] → visual + 0 −.
   ========================================================================== */

.qty{
  width:124px;height:44px;
  padding:0 8px;
  background:var(--tl-color-bg-surface-inv);
  border-radius:999px;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}

.qty__btn{
  width:32px;height:32px;
  border:none;border-radius:100px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.qty__btn:not(:disabled){
  background:#fff !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.qty__btn:disabled{
  background:rgba(0,0,0,0.05);
  box-shadow:none;cursor:default;
}
.qty__btn:disabled img{filter:brightness(0) invert(0.7);}
.qty__btn img{width:16px;height:16px;display:block;pointer-events:none;}

.qty__count{
  flex:1;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Google Sans','Rubik','Inter',sans-serif;font-weight:700;font-size:16px;line-height:24px;
  color:var(--tl-color-text-inverse-default);
  border-radius:4px;
  border:1px solid var(--tl-color-border-inverse-subtle);
  background:transparent;
  transition:background .15s;
}
/* Input variant — for editable counter */
input.qty__count{
  width:100%;text-align:center;outline:none;
  -moz-appearance:textfield;
}
input.qty__count::-webkit-outer-spin-button,
input.qty__count::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Focus state — isFocused=true → white bg overlay */
.qty.is-focus .qty__count{background:var(--tl-color-bg-baseAlt);}

/* ==========================================================================
   direction=vertical — 48px wide, stretches to parent height
   Figma: stepper 48×128, VERTICAL, space-between, padding space-sm (8px)
   DOM order: minus, count, plus. Visual (column-reverse): plus on TOP, minus on BOTTOM.
   ========================================================================== */
.qty--vertical{
  width:48px;height:auto;
  flex-direction:column-reverse;
  align-self:stretch;
  justify-content:space-between;
  padding:var(--space-sm,8px);
  border-radius:0;
  background:var(--tl-color-bg-surface-inv,rgba(0,0,0,0.05));
  box-sizing:border-box;
}
.qty--vertical .qty__count{
  flex:none;
  width:28px;height:32px;
  font-family:'Inter',sans-serif;
  letter-spacing:-0.3px;
  border-radius:var(--border-radius-sm,4px);
  border:1px solid var(--tl-color-border-inverse-subtle,rgba(0,0,0,0.1));
}
.qty--vertical.is-focus .qty__count{
  background:var(--tl-color-bg-baseAlt,#fff);
}