/* Sirona OTP */

sirona-otp {
    display: block;
}

.sirona-otp__boxes {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: nowrap;
}

.sirona-otp__box {
    width: 3rem;
    height: 3.5rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    border: 1.5px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #1f2937);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    outline: none;
    caret-color: transparent;
    -moz-appearance: textfield;
}

.sirona-otp__box::-webkit-outer-spin-button,
.sirona-otp__box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sirona-otp__box:focus {
    border-color: var(--blueteq-blue, #186fb5);
    box-shadow: 0 0 0 3px rgba(24, 111, 181, 0.18);
    background: var(--input-bg, #ffffff);
}

/* Filled box */
.sirona-otp__box:not(:placeholder-shown),
.sirona-otp__box[value]:not([value=""]) {
    border-color: var(--blueteq-blue, #186fb5);
}

/* All filled */
.sirona-otp--complete .sirona-otp__box {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.05);
}

/* ─── Dark mode ────────────────────────────────────────────────────────────── */

[data-theme="dark"] .sirona-otp__box {
    background: var(--input-bg, #1e293b);
    border-color: var(--input-border, #334155);
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .sirona-otp__box:focus {
    border-color: var(--blueteq-blue, #186fb5);
    box-shadow: 0 0 0 3px rgba(24, 111, 181, 0.25);
    background: var(--input-bg, #1e293b);
}

[data-theme="dark"] .sirona-otp--complete .sirona-otp__box {
    background: rgba(22, 163, 74, 0.12);
    border-color: #16a34a;
}

/* ─── High contrast ────────────────────────────────────────────────────────── */

[data-theme="high-contrast"] .sirona-otp__box {
    border: 2px solid #ffffff;
    border-radius: 0;
    background: #000000;
    color: #ffffff;
}

[data-theme="high-contrast"] .sirona-otp__box:focus {
    outline: 2px solid #ffff00;
    outline-offset: 2px;
    box-shadow: none;
}

/* ─── Validation states ───────────────────────────────────────────────────── */

sirona-otp.invalid .sirona-otp__box {
    border-color: #de1f1f !important;
    background-color: #ffe3e3 !important;
}

sirona-otp.corrected .sirona-otp__box {
    border-color: #0ecc29 !important;
    background-color: #d4ffda !important;
}