/* OTP-06: código único de 6 números, seis caixas com leitura centralizada. */
.c4-otp-six {
    position:relative; box-sizing:border-box; width:100%; max-width:320px;
    margin-inline:auto; min-width:0; height:52px; flex:0 0 auto;
    border:0; background:transparent; isolation:isolate;
}
.c4-otp-cells {
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
    gap:clamp(4px,1.8vw,8px); width:100%; height:100%; pointer-events:none;
}
.c4-otp-slot {
    display:flex; align-items:center; justify-content:center; min-width:0;
    border:1.5px solid #D7D7D7; border-radius:10px;
    background:#FFFFFF; color:#6F5D45; font-family:inherit;
    font-size:clamp(18px,5vw,23px); font-weight:700; line-height:1;
    font-variant-numeric:tabular-nums; transition:border-color 120ms ease,background-color 120ms ease;
}
.c4-otp-slot.c4-otp-filled {border-color:#AB9070; background:#FBF8F3; color:#6F5D45;}
.c4-otp-six.c4-otp-focused .c4-otp-slot.c4-otp-next {
    border-color:#AB9070; box-shadow:inset 0 0 0 0.5px #AB9070;
}
.c4-otp-native-input, #input-otp-code.c4-otp-native-input {
    position:absolute !important; inset:0 !important; z-index:1 !important;
    display:block !important; box-sizing:border-box !important;
    width:100% !important; max-width:none !important; height:100% !important;
    min-height:0 !important; margin:0 !important; padding:0 !important;
    border:0 !important; border-radius:0 !important; background:transparent !important;
    box-shadow:none !important; outline:none !important;
    font-size:16px !important; letter-spacing:normal !important;
    color:transparent !important; caret-color:transparent !important;
    opacity:0.015 !important; cursor:text; -webkit-appearance:none;
}
.c4-otp-native-input:focus {outline:none !important;box-shadow:none !important;}
.c4-otp-native-input::placeholder {color:transparent !important;}
html.dark .c4-otp-slot, .dark .c4-otp-slot {
    background:#141414; border-color:#666666; color:#E9D5B8;
}
html.dark .c4-otp-slot.c4-otp-filled, .dark .c4-otp-slot.c4-otp-filled {
    background:#252016; border-color:#B69C78; color:#E9D5B8;
}
@media (max-width:340px) {
    .c4-otp-six {height:46px;max-width:280px;}
    .c4-otp-slot {border-radius:8px;}
}
@media (prefers-reduced-motion:reduce) {.c4-otp-slot {transition:none;}}