/* Jednotná komponenta číselných krokovačů v celém MultiShopu.
   Nativní spinner je vypnutý; všechny číselné inputy i další ovladače používají
   stejný vlastní ovladač + / −, stejnou geometrii a stejný hover/focus stav. */
:root{
  --input-stepper-left:6px;
  --input-stepper-width:14px;
  --input-stepper-height:30px;
  --input-stepper-divider:#cfd8e3;
  --input-stepper-bg:#eef3fb;
  --input-stepper-bg-hover:#e6edf8;
  --input-stepper-bg-active:#dbe7f6;
  --input-stepper-text:var(--text,#1f2937);
  --input-stepper-text-hover:var(--text,#1f2937);
}

.number-input-shell{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
}

.number-input-shell>input[type="number"]{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  direction:ltr;
  unicode-bidi:normal;
  text-align:center!important;
  padding-left:8px!important;
  padding-right:8px!important;
  -moz-appearance:textfield;
  appearance:textfield;
}

.number-input-shell>input[type="number"]::-webkit-inner-spin-button,
.number-input-shell>input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  display:none;
}

.input-stepper-host{position:relative;}
.input-stepper{
  position:absolute;
  left:var(--input-stepper-left);
  top:50%;
  z-index:4;
  display:flex;
  width:var(--input-stepper-width);
  height:var(--input-stepper-height);
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--input-stepper-divider);
  border-radius:999px;
  background:var(--input-stepper-bg);
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .1s ease;
  box-sizing:border-box;
}
.input-stepper-host:hover>.input-stepper,
.input-stepper-host:focus-within>.input-stepper{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.input-stepper-button{
  position:relative;
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--input-stepper-text);
  cursor:pointer;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
}
.input-stepper-button + .input-stepper-button{
  border-top:1px solid var(--input-stepper-divider);
}
.input-stepper-button::before{content:none;}
.input-stepper-glyph{
  display:block;
  font-size:12px;
  font-weight:750;
  line-height:1;
  pointer-events:none;
  user-select:none;
}
.input-stepper-button.is-up .input-stepper-glyph{transform:translateY(-0.5px);}
.input-stepper-button.is-down .input-stepper-glyph{transform:translateY(-1px);}
.input-stepper-button:hover,
.input-stepper-button:focus-visible{
  background:var(--input-stepper-bg-hover);
  color:var(--input-stepper-text-hover);
  outline:none;
}
.input-stepper-button:active{background:var(--input-stepper-bg-active);}
.input-stepper-button:disabled{cursor:default;opacity:.45;}
.number-input-shell:has(>input[type="number"]:disabled)>.input-stepper,
.number-input-shell:has(>input[type="number"]:read-only)>.input-stepper{
  display:none;
}
