/* ========================================================================== 
   EWER WEBSITE AUTHENTICATION SURFACE & INPUT-LANE FIX v1.0.81
   Scope: authentication/recovery presentation only.
   ========================================================================== */

:root {
    --ewer-auth-card-surface-v181: rgba(255, 255, 255, 0.86);
    --ewer-auth-control-surface-v181: rgba(255, 255, 255, 0.94);
    --ewer-auth-border-v181: rgba(42, 76, 135, 0.18);
    --ewer-auth-shadow-v181: 0 28px 76px rgba(15, 34, 68, 0.24);
}

/* Every public authentication surface uses one consistent, lightly
   translucent government-grade card treatment. */
#authScreen.auth-experience .auth-card.auth-card-premium,
#verify2faScreen .auth-card,
#forgotPasswordModal .auth-recovery-modal,
#forceUpdatePasswordModal .auth-recovery-modal,
#forceUpdatePasswordModal .auth-required-update-modal {
    background: var(--ewer-auth-card-surface-v181) !important;
    background-image: none !important;
    border: 1px solid var(--ewer-auth-border-v181) !important;
    box-shadow: var(--ewer-auth-shadow-v181) !important;
}

#authScreen.auth-experience .auth-form,
#verify2faScreen form,
#forgotPasswordModal form,
#forceUpdatePasswordModal form,
#forgotPasswordModal .auth-recovery-body,
#forceUpdatePasswordModal .auth-recovery-body {
    background: transparent !important;
}

#authScreen.auth-experience .form-input,
#authScreen.auth-experience .form-select,
#verify2faScreen .form-input,
#forgotPasswordModal .form-input,
#forceUpdatePasswordModal .form-input {
    background: var(--ewer-auth-control-surface-v181) !important;
}

/* Dedicated icon lane. The text cursor can never enter the icon area. */
#authScreen .auth-input-shell,
#verify2faScreen .auth-input-shell,
#forgotPasswordModal .auth-input-shell,
#forceUpdatePasswordModal .auth-input-shell {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
}

#authScreen .auth-input-shell > .auth-input-icon,
#verify2faScreen .auth-input-shell > .auth-input-icon,
#forgotPasswordModal .auth-input-shell > .auth-input-icon,
#forceUpdatePasswordModal .auth-input-shell > .auth-input-icon {
    position: absolute !important;
    inset-inline-start: 0.72rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-width: 2.15rem !important;
    display: grid !important;
    place-items: center !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

#authScreen .auth-input-shell > input.form-input,
#verify2faScreen .auth-input-shell > input.form-input,
#forgotPasswordModal .auth-input-shell > input.form-input,
#forceUpdatePasswordModal .auth-input-shell > input.form-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline-start: 3.65rem !important;
    padding-left: 3.65rem !important;
    text-indent: 0 !important;
}

#authScreen .auth-input-shell.password-wrapper > input.form-input,
#verify2faScreen .auth-input-shell.password-wrapper > input.form-input,
#forgotPasswordModal .auth-input-shell.password-wrapper > input.form-input,
#forceUpdatePasswordModal .auth-input-shell.password-wrapper > input.form-input {
    padding-inline-end: 4rem !important;
    padding-right: 4rem !important;
}

#forgotPasswordModal .auth-recovery-header,
#forceUpdatePasswordModal .auth-recovery-header,
#forgotPasswordModal .auth-recovery-progress,
#forceUpdatePasswordModal .auth-recovery-progress,
#forgotPasswordModal .auth-recovery-footer,
#forceUpdatePasswordModal .auth-recovery-footer {
    background-color: rgba(255, 255, 255, 0.72) !important;
}

html.dark #authScreen.auth-experience .auth-card.auth-card-premium,
body.dark-mode #authScreen.auth-experience .auth-card.auth-card-premium,
html.dark #verify2faScreen .auth-card,
body.dark-mode #verify2faScreen .auth-card,
html.dark #forgotPasswordModal .auth-recovery-modal,
body.dark-mode #forgotPasswordModal .auth-recovery-modal,
html.dark #forceUpdatePasswordModal .auth-recovery-modal,
body.dark-mode #forceUpdatePasswordModal .auth-recovery-modal {
    background: rgba(15, 27, 46, 0.86) !important;
    border-color: rgba(125, 162, 255, 0.20) !important;
}

html.dark #authScreen .form-input,
body.dark-mode #authScreen .form-input,
html.dark #verify2faScreen .form-input,
body.dark-mode #verify2faScreen .form-input,
html.dark #forgotPasswordModal .form-input,
body.dark-mode #forgotPasswordModal .form-input,
html.dark #forceUpdatePasswordModal .form-input,
body.dark-mode #forceUpdatePasswordModal .form-input {
    background: rgba(18, 32, 53, 0.94) !important;
}

@media (max-width: 640px) {
    #forgotPasswordModal .auth-input-shell > input.form-input,
    #forceUpdatePasswordModal .auth-input-shell > input.form-input,
    #authScreen .auth-input-shell > input.form-input,
    #verify2faScreen .auth-input-shell > input.form-input {
        padding-inline-start: 3.55rem !important;
        padding-left: 3.55rem !important;
    }
}