/* Password fields reserve a left control rail so the eye remains outside the input border. */
.password-control, .password-field { position: relative; display: block; width: 100%; padding-left: 52px; }
.password-control input { padding-right: 17px !important; padding-left: 17px !important; }
.password-field input { padding-right: 12px !important; padding-left: 12px !important; }
.visibility-toggle, .password-visibility { position: absolute; top: 50%; left: 0; right: auto; width: 40px; height: 40px; display: grid; place-items: center; transform: translateY(-50%); color: #e36a6c; border: 1px solid rgba(239, 72, 74, .36); background: rgba(91, 5, 7, .28); transition: color .18s ease, border-color .18s ease, background .18s ease; }
.visibility-toggle:hover, .password-visibility:hover { color: #fff0f0; border-color: var(--bright, var(--red-bright)); background: rgba(190, 13, 16, .4); }
.visibility-toggle svg, .password-visibility svg { width: 19px; height: 19px; }
.eye-closed { display: none; }
.visibility-toggle.is-open .eye-open, .password-visibility.is-visible .eye-open { display: none; }
.visibility-toggle.is-open .eye-closed, .password-visibility.is-visible .eye-closed { display: block; }
.visibility-toggle:focus-visible, .password-visibility:focus-visible { outline: 2px solid var(--bright, var(--red-bright)); outline-offset: 2px; }
#password-check-form .password-field input { width: 100%; height: 46px; color: #fff3f3; border: 1px solid rgba(242,70,70,.4); background: #080303; outline: 0; font: 12px/1 var(--arabic); }
#password-check-form .password-field input:focus { border-color: var(--bright); box-shadow: 0 0 0 3px rgba(227,23,23,.08); }
@media (max-width: 410px) { .password-control, .password-field { padding-left: 50px; } .visibility-toggle, .password-visibility { width: 40px; height: 40px; } }