/* MetaPi TPMS — shared six-box PIN entry component.
   Progressively enhances any <input class="pin-box"> field (see pin-input.js).
   Used across applicant, candidate, trainer, and admin auth screens —
   one shared implementation instead of a per-portal one-off each. */

.pin-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap;
}

.pin-input-group input {
    width: 48px;
    height: 56px;
    padding: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    -moz-appearance: textfield;
}

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

.pin-input-group input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.pin-input-group input.filled {
    border-color: #93c5fd;
    background: #f0f6ff;
}

.pin-input-group.pin-error input {
    border-color: #dc2626;
    animation: pinShake .32s ease;
}

@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (max-width: 420px) {
    .pin-input-group { gap: 7px; }
    .pin-input-group input { width: 40px; height: 48px; font-size: 20px; }
}