/* =========================================================
   Market UI v2 - Verification Code Component
   Path: public/assets/marketv2/components/verification-code/verification-code.css

   Supports:
   - .m-verification-code
   - legacy .verification-code
   - input + .boxes > span markup
========================================================= */

.m-verification-code,
.verification-code {
    position: relative;
    display: inline-grid;
    min-width: 0;
}

.m-verification-code input,
.verification-code input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: text;
}

.m-verification-code .boxes,
.verification-code .boxes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--m-verification-code-box-size);
    gap: var(--m-verification-code-gap);
    min-width: 0;
}

.m-verification-code .boxes > span,
.verification-code .boxes > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-verification-code-box-size);
    height: var(--m-verification-code-box-size);
    min-width: var(--m-verification-code-box-size);
    border: var(--m-verification-code-border-width) solid var(--m-verification-code-border);
    border-radius: var(--m-verification-code-box-radius);
    background: var(--m-verification-code-bg);
    color: var(--m-verification-code-text-empty);
    font-size: var(--m-verification-code-font-size);
    font-weight: var(--m-verification-code-font-weight);
    line-height: var(--m-verification-code-line-height);
    user-select: none;
    transition:
        background-color var(--m-verification-code-transition-fast),
        border-color var(--m-verification-code-transition-fast),
        color var(--m-verification-code-transition-fast),
        box-shadow var(--m-verification-code-transition-fast),
        transform var(--m-verification-code-transition-fast);
}

.m-verification-code .boxes > span.filled,
.verification-code .boxes > span.filled {
    background: var(--m-verification-code-bg-filled);
    color: var(--m-verification-code-text);
}

.m-verification-code .boxes > span.active,
.verification-code .boxes > span.active,
.m-verification-code:focus-within .boxes > span.active,
.verification-code:focus-within .boxes > span.active {
    background: var(--m-verification-code-bg-active);
    border-color: var(--m-verification-code-border-active);
    color: var(--m-verification-code-text);
    box-shadow: var(--m-verification-code-focus-shadow);
    transform: translateY(-1px);
}

.m-verification-code input:disabled ~ .boxes > span,
.verification-code input:disabled ~ .boxes > span {
    opacity: var(--m-verification-code-disabled-opacity);
}

.verification-code-wrapper,
.m-verification-code-wrapper {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .m-verification-code .boxes > span,
    .verification-code .boxes > span {
        transition: none;
    }
}