/* Clearer facade, neutral fields, and an accessible password visibility icon. */
.citizen-auth-visual-overlay {
    background:
        linear-gradient(90deg, rgba(0, 30, 65, .90) 0%, rgba(0, 46, 93, .64) 28%, rgba(0, 62, 108, .24) 52%, rgba(0, 62, 108, .06) 78%, transparent 100%),
        linear-gradient(0deg, rgba(0, 30, 65, .52) 0%, transparent 43%);
}

.citizen-auth-visual > img { object-position: 62% center; }

/* Center the shared sign-in/register message and keep it legible over the photo. */
.citizen-auth-visual-copy {
    top: 50%;
    bottom: auto;
    left: clamp(28px, 4vw, 58px);
    width: min(370px, calc(100% - 116px));
    padding: 34px 32px 31px;
    border: 1px solid #174f7e;
    border-radius: 6px;
    background: rgba(0, 47, 93, .76);
    box-shadow: 0 22px 52px rgba(0, 20, 45, .34);
    transform: translateY(-50%);
}

.citizen-auth-visual-copy p,
.citizen-auth-visual-copy h2,
.citizen-auth-visual-copy a {
    text-shadow: none;
}

.citizen-auth-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.citizen-auth-identity .citizen-auth-seal {
    width: 76px;
    height: 76px;
    padding: 5px;
    border: 0;
    box-shadow: 0 8px 20px rgba(0, 20, 45, .24);
}

.citizen-auth-identity .citizen-auth-wordmark {
    width: min(215px, calc(100% - 92px));
    height: 78px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 3px 8px rgba(0, 20, 45, .28));
}

.citizen-auth-visual-copy p { margin-top: 28px; color: #ffd055; letter-spacing: .16em; }
.citizen-auth-visual-copy a { font-weight: 700; border-bottom-color: #8eb4d0; }
.citizen-auth-visual-copy a:hover,
.citizen-auth-visual-copy a:focus-visible { color: #ffd055; border-bottom-color: #ffd055; }

.citizen-auth-visual-copy h2 {
    font-size: clamp(1.85rem, 2.75vw, 2.65rem);
    line-height: 1.12;
}

.citizen-auth-field input:hover,
.citizen-auth-field select:hover,
.citizen-auth-field input:focus,
.citizen-auth-field select:focus {
    background: #fff;
}

.citizen-auth-field input:hover,
.citizen-auth-field select:hover {
    border-color: var(--auth-line);
    box-shadow: none;
}

.citizen-auth-field input:focus,
.citizen-auth-field select:focus {
    border-color: var(--auth-navy);
    box-shadow: none;
}

.citizen-password-toggle:hover,
.citizen-password-toggle:focus-visible {
    background: transparent;
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

.citizen-password-toggle svg {
    display: block !important;
    width: 21px;
    height: 21px;
    margin: auto;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.citizen-password-toggle .eye-closed { display: none !important; }
.citizen-password-toggle.is-visible .eye-open { display: none !important; }
.citizen-password-toggle.is-visible .eye-closed { display: block !important; }