/* ═══════════════════════════════════════════════════════════
   Stepper — numeric quantity control (− value +)

   A compact "remove / add" control for quantities: seat counts in a
   pricing configurator, line quantities in a cart, anything countable.
   Render the value as static text (.tn-stepper-value) or an editable
   field (.tn-stepper-input). Disable the minus at the floor (e.g. 0).
   ═══════════════════════════════════════════════════════════ */

.tn-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    overflow: hidden;
    background: var(--tn-bg-card);
}

.tn-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: var(--tn-bg-card);
    color: var(--tn-text-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-stepper-btn:hover:not(:disabled) {
    background: var(--tn-bg-hover);
    color: var(--tn-accent);
}

.tn-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tn-stepper-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--tn-accent);
}

.tn-stepper-value,
.tn-stepper-input {
    min-width: 44px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    border-left: 1px solid var(--tn-border);
    border-right: 1px solid var(--tn-border);
    font-family: inherit;
    font-size: var(--tn-font-size-base);
    font-weight: 600;
    color: var(--tn-text-primary);
    font-variant-numeric: tabular-nums;
    background: var(--tn-bg-card);
}

/* Editable field variant — strip the native number spinners */
.tn-stepper-input {
    width: 48px;
    -moz-appearance: textfield;
}

.tn-stepper-input::-webkit-outer-spin-button,
.tn-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tn-stepper-input:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--tn-accent);
}

/* ── Small variant — for inline use in tight cart rows ── */
.tn-stepper--sm .tn-stepper-btn {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
}

.tn-stepper--sm .tn-stepper-value,
.tn-stepper--sm .tn-stepper-input {
    min-width: 34px;
    font-size: var(--tn-font-size-sm);
}

/* Comfortable touch targets on phones */
@media (max-width: 640px) {
    .tn-stepper-btn {
        width: 44px;
        height: 44px;
    }
}