/* Container tweaks */
#sub-step-1 {
    display: inline-block;
    width: 100%;
}

/* Title */
.page-title {
    color: #e5e7eb;
    margin-bottom: 1rem;
}

/* Info panel (dark) */
.registration-instructions {
    background: #0f172a;
    border-left: 5px solid #1976d2;
    border-radius: 8px;
    padding: 18px 22px 18px 18px;
    margin-bottom: 28px;
    color: #cfe3ff;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.05rem;
}
.registration-instructions .instructions-icon {
    color: #60a5fa;
    font-size: 1.25rem;
    margin-top: 2px;
}
.registration-instructions .hint-primary { color: #7db7ff; }
.registration-instructions .hint-warning { color: #f87171; }
.registration-instructions .hint-secondary { color: #cbd5e1; }

/* PIN input */
.input-container { margin-top: 8px; }
.input-label {
    color: #e5e7eb;
    font-weight: 600;
    margin-bottom: 8px;
}
.input-box-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 4px 0;
    flex-wrap: nowrap;
}
.input-box {
    width: 54px;
    height: 60px;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 1px;
    background: #0d1828;
    border: 1px solid #2f3d4f;
    color: #e2e8f0;
    border-radius: 10px;
    outline: none;
    transition: background .25s, border-color .18s, box-shadow .18s, transform .18s;
}
.input-box:focus {
    background: #142437;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}
.input-box.filled {
    background: #142437;
    border-color: #64748b;
}
.input-box.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.30);
}
.input-box.valid {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.30);
}
.error-message2 {
    display: none;
}

/* Suppress the default inline validator message shown to the right of the inputs */
#password + .field-validation-error,
#password + label.error,
.input-icon > #password + .field-validation-error,
.input-icon > #password + label.error,
span[data-valmsg-for="password"] {
    display: none !important;
}

/* Optional: do the same for confirm password if you also route its errors into the hint area */
#confirmPassword + .field-validation-error,
#confirmPassword + label.error,
.input-icon > #confirmPassword + .field-validation-error,
.input-icon > #confirmPassword + label.error,
span[data-valmsg-for="confirmPassword"] {
    display: none !important;
}

/* Subtle pulse when a box is first filled */
.input-box.filled.new-fill {
    animation: pinFilledPulse .35s ease-out;
}
@keyframes pinFilledPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.07); }
    100% { transform: scale(1); }
}

/* Registration code label */
.input-label {
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.input-label i {
    color: #3b82f6;
    font-size: 1.05rem;
}

/* Error message under PIN */
.error-message1 {
    margin-top: 10px;
    font-size: .85rem;
    color: #ef4444;
}

/* Dark form controls (email/password) unchanged unless not already present */
.form-control {
    background: #0d1828;
    border: 1px solid #2f3d4f;
    color: #f1f5f9;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: background .25s, border-color .18s, box-shadow .18s;
}
.form-control:focus {
    background: #142437;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.35);
    outline: none;
}
.form-control.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.30);
}
.form-control.is-valid {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.30);
}

/* Align password + confirm horizontally (if desired) */
.form-group.inline-pw {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.form-group.inline-pw .pw-col {
    flex: 1 1 300px;
    min-width: 260px;
}

/* Disabled anchor fallback */
.is2-disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Lit state when canProceed is true */
.is2-next-active {
    filter: brightness(1.05);
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
}

/* One-shot blink animation when Next becomes enabled */
@keyframes is2Blink {
    0%   { box-shadow: 0 0 0 0 rgba(96,165,250,0.00); }
    25%  { box-shadow: 0 0 0 8px rgba(96,165,250,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(96,165,250,0.00); }
}

.blink-once {
    animation: is2Blink 650ms ease-out 1;
}

/* Hidden utility */
.hidden { display: none !important; }


/*-----------------------------------------------*/

/* Labels smaller + better spacing (email/password only) */
.input-label.input-label--compact {
    font-size: 0.85rem;
    line-height: 1.1;
    color: #a9b7c6;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    padding-top: 1.80rem;
}

/* Input with left icon wrapper */
.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-icon > i {
        position: absolute;
        left: 12px;
        font-size: 0.95rem;
        color: #7b8ba0;
        pointer-events: none;
    }

    .input-icon .form-control {
        padding-left: 40px; /* space for the icon */
    }

/* Wider email/password fields */
.form-control--wide {
    width: 100%;
    max-width: 560px;
}

/* Dark control always dark (idle, focus, typed, and autofill) */
.dark-control.form-control {
    background: #0d1828 !important;
    border: 1px solid #2f3d4f;
    color: #e6eef8;
    border-radius: 8px;
    transition: background .25s, border-color .18s, box-shadow .18s, color .18s;
}

    .dark-control.form-control:focus {
        background: #142437 !important;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.35);
        outline: none;
    }

    .dark-control.form-control::placeholder {
        color: #7f91a6;
    }

    .dark-control.form-control.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239,68,68,.30);
    }

    .dark-control.form-control.is-valid {
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34,197,94,.30);
    }

    /* Autofill override to prevent white background */
    .dark-control.form-control:-webkit-autofill,
    .dark-control.form-control:-webkit-autofill:hover,
    .dark-control.form-control:-webkit-autofill:focus,
    .dark-control.form-control:-webkit-autofill:active {
        -webkit-text-fill-color: #e6eef8 !important;
        box-shadow: 0 0 0px 1000px #142437 inset !important;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: #e6eef8;
    }

/* Icon color on focus */
.input-icon:focus-within > i {
    color: #3b82f6;
}

/* Password hint used as error container */
.password-hint {
    margin-top: 6px;
    color: #8fb2ff;
    font-size: 0.82rem;
    transition: color .25s;
}

.password-hint.pw-error {
    color: #f87171;
    font-weight: 600;
}

.password-hint.pw-error i {
    color: #f87171;
    margin-right: 4px;
}

/* Brief flash animation when error appears */
@keyframes pwBlink {
    0% { background-color: transparent; }
    25% { background-color: rgba(248,113,113,0.15); }
    100% { background-color: transparent; }
}

.pw-error-blink {
    animation: pwBlink .6s ease-out 1;
    border-radius: 4px;
    padding: 2px 4px;
}

/* Hide original unobtrusive error spans for password & confirm to prevent duplicate messages */
.pw-valmsg-hidden.field-validation-error,
.pw-valmsg-hidden.field-validation-valid {
    display: none !important;
}