.zf-otp-input {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.otp-digit {
    width: 3rem;
    height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid var(--zf-input-border, #d1d5db);
    border-radius: 0.5rem;
    background-color: var(--zf-input-bg, #ffffff);
    color: var(--zf-text, #111827);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.otp-digit:focus {
    outline: none;
    border-color: var(--zf-primary, #3b82f6);
    box-shadow: 0 0 0 3px var(--zf-primary-ring, rgba(59, 130, 246, 0.25));
}

.otp-digit:disabled {
    background-color: var(--zf-input-disabled-bg, #f3f4f6);
    color: var(--zf-text-muted, #9ca3af);
    cursor: not-allowed;
}

.otp-digit.invalid {
    border-color: var(--zf-error, #ef4444);
}

.otp-digit.invalid:focus {
    box-shadow: 0 0 0 3px var(--zf-error-ring, rgba(239, 68, 68, 0.25));
}

/* Hide spin buttons for number input */
.otp-digit::-webkit-outer-spin-button,
.otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.otp-digit[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .otp-digit {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .zf-otp-input {
        gap: 0.375rem;
    }
}