/* WC Kalkulator – Stepper ilości kont */

/* ---- Twarde wygaszenie natywnych strzałek number ----
   Motyw / WC Kalkulator celują w input z wysoką specyficznością,
   dlatego tutaj używamy !important oraz display:none na pseudo-elementach. */
.wck-stepper input[type=number] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.wck-stepper input[type=number]::-webkit-outer-spin-button,
.wck-stepper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    margin: 0 !important;
}

/* ---- Kontener steppera ---- */
.wck-stepper {
    display: flex !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- Pole liczbowe pomiędzy przyciskami ---- */
.wck-stepper input[type=number] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    text-align: center;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    position: relative;
    z-index: 1;
}

/* ---- Przyciski +/- ----
   Krytyczne właściwości wizualne z !important, żeby wygrać z motywem
   (który zwykle mocno stylizuje .woocommerce button / .button). */
.wck-stepper button.wck-stepper__btn {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    min-height: 44px;          /* wygodny cel dotyku na iOS */
    height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    cursor: pointer;
    border: 1px solid #c3ccd6 !important;
    background: #eef1f4 !important;
    background-image: none !important;
    color: #14202e !important;
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-transform: none !important;
    letter-spacing: 0 !important;
    touch-action: manipulation;   /* brak opóźnienia 300ms i zoomu na tap (iOS) */
    transition: background-color .15s ease;
}

.wck-stepper button.wck-stepper__btn span {
    pointer-events: none;
    display: block;
    line-height: 1;
}

.wck-stepper button.wck-stepper__minus {
    border-radius: 6px 0 0 6px !important;
}
.wck-stepper button.wck-stepper__plus {
    border-radius: 0 6px 6px 0 !important;
}

.wck-stepper button.wck-stepper__btn:hover:not(:disabled) {
    background: #e0e5ea !important;
}
.wck-stepper button.wck-stepper__btn:active:not(:disabled) {
    background: #d2d9e0 !important;
}
.wck-stepper button.wck-stepper__btn:disabled {
    opacity: .4 !important;
    cursor: not-allowed;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .wck-stepper input[type=number] {
        min-height: 44px;
        font-size: 16px;   /* 16px zapobiega auto-zoomowi iOS przy focusie */
    }
    .wck-stepper button.wck-stepper__btn {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
    }
}