/* ==========================================================================
   Morong Municipal Health Management System
   Authentication UI — Phase 2 / Portion 1
   Intended path: /assets/css/modules/auth/auth.css

   Covers:
   - app/Views/auth/index.php
   - app/Views/auth/forgot_password.php
   - app/Views/auth/verify_otp.php
   - legacy auth markup using .login-container / .login-box

   Load after Bootstrap and core theme styles.
   ========================================================================== */

:root {
    --auth-navy: #183b73;
    --auth-navy-deep: #102b50;
    --auth-blue: #2f6fa7;
    --auth-blue-hover: #255b8b;
    --auth-green: #16845b;
    --auth-green-dark: #106b49;
    --auth-gold: #d9ad16;
    --auth-red: #c93a3a;

    --auth-text: #253649;
    --auth-text-strong: #16283a;
    --auth-muted: #66788a;

    --auth-surface: rgba(255, 255, 255, 0.96);
    --auth-surface-solid: #ffffff;
    --auth-soft: #f4f8fb;
    --auth-border: #dbe6ef;

    --auth-radius-sm: 10px;
    --auth-radius: 14px;
    --auth-radius-lg: 22px;

    --auth-shadow:
        0 24px 60px rgba(8, 30, 52, 0.22),
        0 6px 20px rgba(8, 30, 52, 0.10);

    --auth-focus: 0 0 0 4px rgba(47, 111, 167, 0.16);
    --auth-transition: 180ms ease;
}


/* ==========================================================================
   AUTH PAGE SHELL
   ========================================================================== */

html {
    min-height: 100%;
    background: var(--auth-navy-deep);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: clamp(18px, 3vw, 34px);
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: var(--auth-text);

    background:
        linear-gradient(115deg,
            rgba(13, 43, 75, 0.82) 0%,
            rgba(24, 59, 115, 0.62) 42%,
            rgba(22, 132, 91, 0.34) 100%
        ),
        url('/assets/background-login.jpg?v=20260830-2') center center / cover no-repeat fixed;

    background-color: var(--auth-navy-deep);
    overflow-x: hidden;
}

/* subtle civic-light wash that keeps the municipal photo visible */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.10), transparent 34%),
        linear-gradient(to bottom, rgba(6, 26, 47, 0.02), rgba(6, 26, 47, 0.18));
    z-index: 0;
}

/* Keep auth content above the page treatment */
body > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   SHARED AUTH CARD
   ========================================================================== */

.login-card,
.forgot-card,
.glass-card,
.login-box {
    position: relative;
    width: min(100%, 460px);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.35rem);

    background: var(--auth-surface);
    color: var(--auth-text);
    border: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: var(--auth-radius-lg);
    box-shadow: var(--auth-shadow);

    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);

    overflow: hidden;
}

/* Forgot-password / OTP pages need slightly more room for guidance content. */
.forgot-card,
.glass-card {
    width: min(100%, 520px);
}

/* municipal identity line */
.login-card::before,
.forgot-card::before,
.glass-card::before,
.login-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--auth-navy) 0%,
        var(--auth-blue) 42%,
        var(--auth-green) 74%,
        var(--auth-gold) 100%
    );
}

/* Remove decorative "floating card" hover motion on transactional screens. */
.login-card:hover,
.forgot-card:hover,
.glass-card:hover,
.login-box:hover {
    transform: none;
}


/* ==========================================================================
   LEGACY WRAPPER COMPATIBILITY
   ========================================================================== */

.login-container {
    width: 100%;
    min-height: calc(100vh - 40px);
    min-height: calc(100dvh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.login-box {
    text-align: left;
}


/* ==========================================================================
   BRAND / LOGO
   ========================================================================== */

.logo-wrapper,
.login-box .logo {
    text-align: center;
    margin-bottom: 1.65rem;
}

.logo-wrapper img,
.login-box .logo img,
.logo img {
    width: clamp(72px, 14vw, 90px);
    max-width: 90px;
    height: auto;
    margin-bottom: 0.55rem;
    object-fit: contain;

    background: #fff;
    border: 1px solid rgba(24, 59, 115, 0.10);
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 7px 18px rgba(17, 48, 76, 0.12);
    filter: none;
}

.logo-wrapper h2,
.login-box h2 {
    margin: 0.4rem 0 0;
    color: var(--auth-text-strong);
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.025em;
    text-shadow: none;
}

/* Optional supporting line if present in markup. */
.logo-wrapper p,
.auth-subtitle {
    margin: 0.5rem auto 0;
    max-width: 34rem;
    color: var(--auth-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form-label,
#branch-select label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--auth-text-strong);
    font-size: 0.88rem;
    font-weight: 650;
    text-shadow: none;
}

.form-label .required-star {
    color: var(--auth-red);
    margin-left: 2px;
}

.form-control,
.form-select,
.login-box input,
.login-box select {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0.72rem 0.9rem;

    color: var(--auth-text-strong);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;

    background: #fff;
    border: 1px solid #cfdce7;
    border-radius: var(--auth-radius-sm);
    box-shadow: none;

    transition:
        border-color var(--auth-transition),
        box-shadow var(--auth-transition),
        background-color var(--auth-transition);
}

.form-control:hover,
.form-select:hover,
.login-box input:hover,
.login-box select:hover {
    border-color: #abc1d4;
}

.form-control:focus,
.form-select:focus,
.login-box input:focus,
.login-box select:focus {
    outline: none;
    color: var(--auth-text-strong);
    background: #fff;
    border-color: var(--auth-blue);
    box-shadow: var(--auth-focus);
}

.form-control::placeholder,
.login-box input::placeholder {
    color: #8a9aaa;
    font-weight: 400;
}

.form-control:disabled,
.form-select:disabled,
.login-box input:disabled,
.login-box select:disabled {
    background: #edf2f6;
    color: #788897;
    cursor: not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text-strong);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-out;
}


/* ==========================================================================
   PASSWORD FIELD / VISIBILITY TOGGLE
   ========================================================================== */

.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--auth-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    line-height: 1;

    transition:
        color var(--auth-transition),
        background-color var(--auth-transition);
}

.password-toggle:hover {
    color: var(--auth-navy);
    background: #edf4f9;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--auth-blue);
    outline-offset: 2px;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary-custom,
.login-box button[type="submit"] {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    color: #fff;
    background: var(--auth-blue);
    border: 1px solid var(--auth-blue);
    border-radius: var(--auth-radius-sm);

    font: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(47, 111, 167, 0.18);
    transition:
        background-color var(--auth-transition),
        border-color var(--auth-transition),
        box-shadow var(--auth-transition),
        transform var(--auth-transition);
}

.btn-primary-custom:hover,
.login-box button[type="submit"]:hover {
    color: #fff;
    background: var(--auth-blue-hover);
    border-color: var(--auth-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(47, 111, 167, 0.24);
}

.btn-primary-custom:active,
.login-box button[type="submit"]:active {
    transform: translateY(0);
}

.btn-primary-custom:disabled,
.btn-primary-custom.disabled,
.login-box button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn-primary-custom .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.btn-secondary-custom,
.btn-outline-light-custom {
    min-height: 44px;
    padding: 0.68rem 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    color: var(--auth-navy);
    background: #fff;
    border: 1px solid #c9d7e3;
    border-radius: var(--auth-radius-sm);

    font: inherit;
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;

    transition:
        color var(--auth-transition),
        background-color var(--auth-transition),
        border-color var(--auth-transition);
}

.btn-secondary-custom:hover,
.btn-outline-light-custom:hover {
    color: var(--auth-navy-deep);
    background: #edf4f9;
    border-color: #aac0d3;
}

/* Legacy non-submit secondary button */
.login-box button[type="button"] {
    width: 100%;
    min-height: 44px;
    padding: 0.68rem 1rem;
    margin: 0;

    color: #fff;
    background: var(--auth-green);
    border: 1px solid var(--auth-green);
    border-radius: var(--auth-radius-sm);

    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.login-box button[type="button"]:hover {
    background: var(--auth-green-dark);
    border-color: var(--auth-green-dark);
}


/* ==========================================================================
   REMEMBER ME
   ========================================================================== */

.form-check {
    min-height: 1.25rem;
}

.form-check-label {
    color: var(--auth-text);
    font-size: 0.88rem;
    font-weight: 500;
}

.form-check-input {
    border-color: #aebfce;
}

.form-check-input:checked {
    background-color: var(--auth-green);
    border-color: var(--auth-green);
}

.form-check-input:focus {
    border-color: var(--auth-blue);
    box-shadow: var(--auth-focus);
}


/* ==========================================================================
   LINKS / SMALL ACTIONS
   ========================================================================== */

.forgot-link a,
.back-link,
.footer-links a,
.login-box a {
    color: var(--auth-blue);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    text-shadow: none;

    transition:
        color var(--auth-transition),
        text-decoration-color var(--auth-transition);
}

.forgot-link a:hover,
.back-link:hover,
.footer-links a:hover,
.login-box a:hover {
    color: var(--auth-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: none;
}

.back-link i {
    margin-right: 6px;
}

.footer-links {
    margin-top: 1.35rem;
    text-align: center;
    color: var(--auth-muted);
    font-size: 0.8rem;
}

.footer-links a {
    margin: 0 7px;
}

.footer-links .separator {
    color: #b7c5d0;
}


/* ==========================================================================
   FORGOT-PASSWORD GUIDANCE
   ========================================================================== */

.guidelines-box {
    margin-bottom: 1.35rem;
    padding: 1rem 1.05rem;

    background: #edf5fb;
    border: 1px solid #d7e7f3;
    border-left: 4px solid var(--auth-blue);
    border-radius: var(--auth-radius);

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.guidelines-box h5 {
    margin: 0 0 0.7rem;
    color: var(--auth-navy);
    font-size: 0.92rem;
    font-weight: 700;
}

.guidelines-box h5 i {
    margin-right: 0.45rem;
    color: var(--auth-blue);
}

.guideline-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 0.22rem 0;

    color: #455b70;
    font-size: 0.84rem;
    line-height: 1.45;
}

.guideline-item i {
    width: 18px;
    flex: 0 0 18px;
    margin-top: 0.12rem;
    color: var(--auth-blue);
    text-align: center;
}

.help-text {
    margin-top: 0.7rem;
    padding-top: 0.7rem;

    color: var(--auth-muted);
    border-top: 1px solid #d8e4ed;

    font-size: 0.78rem;
    line-height: 1.5;
}

.help-text i {
    margin-right: 6px;
    color: #9b7600;
}


/* ==========================================================================
   OTP / PASSWORD REQUIREMENTS
   ========================================================================== */

.requirements-list {
    list-style: none;
    margin: 0.5rem 0 0.65rem;
    padding: 0;
}

.requirements-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 0.18rem 0;

    color: var(--auth-muted);
    font-size: 0.79rem;
    line-height: 1.4;

    transition: color var(--auth-transition);
}

.requirements-list li i {
    width: 16px;
    margin-top: 0.12rem;
    flex: 0 0 16px;
    text-align: center;
}

.requirements-list li.met,
.requirements-list li.met i {
    color: var(--auth-green);
}

.requirements-list li.unmet,
.requirements-list li.unmet i {
    color: #8091a1;
}

.timer-display,
.otp-expiry-display,
.match-indicator {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.timer-display {
    color: #8b6a00;
}

.otp-expiry-display,
.match-indicator.match {
    color: var(--auth-green);
}

.otp-expiry-display.expired,
.match-indicator.no-match {
    color: var(--auth-red);
}

/* Keeps Bootstrap input groups usable with OTP/resend controls. */
.otp-input-group .input-group {
    align-items: stretch;
}

.otp-input-group .input-group .form-control {
    min-width: 0;
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-custom,
.alert-success-custom,
.alert-info-custom {
    padding: 0.85rem 1rem;
    border-radius: var(--auth-radius-sm);
    border: 1px solid transparent;
    font-size: 0.86rem;
    font-weight: 550;
    line-height: 1.45;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.alert-custom {
    color: #7c1e1e;
    background: #fff0f0;
    border-color: #f1c6c6;
}

.alert-success-custom {
    color: #0d6543;
    background: #edf9f4;
    border-color: #c5ead9;
}

.alert-info-custom {
    color: #174f78;
    background: #eef6fb;
    border-color: #cce2f1;
}

.alert .btn-close {
    filter: none;
    opacity: 0.62;
}

.alert .btn-close:hover {
    opacity: 1;
}


/* ==========================================================================
   LEGACY FORGOT FORM
   ========================================================================== */

#forgot-form {
    margin-top: 1rem;
    padding: 1rem;

    background: var(--auth-soft);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
}

p[style*="color:red"] {
    margin-top: 0.9rem;
    padding: 0.75rem 0.85rem;

    color: #7c1e1e !important;
    background: #fff0f0;
    border: 1px solid #f1c6c6;
    border-left: 4px solid var(--auth-red);
    border-radius: var(--auth-radius-sm);

    font-size: 0.84rem;
    text-shadow: none;
}


/* ==========================================================================
   AUTH INFORMATION / POLICY MODALS
   ========================================================================== */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;

    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 24px);

    background: rgba(7, 25, 43, 0.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity var(--auth-transition);
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-container {
    width: min(100%, 680px);
    max-height: min(88dvh, 760px);
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #fff;
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(5, 24, 42, 0.28);

    animation: authModalIn 180ms ease-out;
}

@keyframes authModalIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header-custom {
    position: sticky;
    top: 0;
    z-index: 2;

    min-height: 66px;
    padding: 1rem 1.25rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    color: #fff;
    border-radius: 20px 20px 0 0;
}

.modal-header-custom.warning {
    background: var(--auth-red);
}

.modal-header-custom.privacy {
    background: var(--auth-navy);
}

.modal-header-custom.success {
    background: var(--auth-green);
}

.modal-header-custom h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;

    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.modal-header-custom h2 i {
    font-size: 1.15rem;
}

.modal-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;

    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;

    transition:
        background-color var(--auth-transition),
        transform var(--auth-transition);
}

.modal-close:hover {
    background: rgba(255,255,255,0.24);
    transform: none;
}

.modal-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.modal-body-custom {
    padding: clamp(1.15rem, 3vw, 1.7rem);
    overflow-y: auto;

    color: var(--auth-text);
    background: #fff;
    line-height: 1.6;
    overscroll-behavior: contain;
}

.modal-body-custom h3 {
    margin: 1.35rem 0 0.65rem;
    padding-left: 0.75rem;

    color: var(--auth-navy);
    border-left: 3px solid var(--auth-blue);

    font-size: 1rem;
    font-weight: 700;
}

.modal-body-custom h3:first-of-type {
    margin-top: 0;
}

.modal-body-custom p,
.modal-body-custom li {
    color: #3c5267;
}

.modal-body-custom p {
    margin-bottom: 0.9rem;
}

.modal-body-custom ul {
    margin-bottom: 1rem;
    padding-left: 1.3rem;
}

.modal-body-custom li {
    margin-bottom: 0.45rem;
}

.warning-box,
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;

    margin: 1rem 0;
    padding: 0.9rem 1rem;

    border-radius: var(--auth-radius);
}

.warning-box {
    color: #705500;
    background: #fff9e8;
    border: 1px solid #f1df9a;
    border-left: 4px solid var(--auth-gold);
}

.warning-box i {
    color: #a57d00;
    font-size: 1.2rem;
}

.warning-box strong {
    color: #6e5400;
}

.info-box {
    color: #31556f;
    background: #eef6fb;
    border: 1px solid #d4e7f3;
    border-left: 4px solid var(--auth-blue);
}

.info-box i {
    color: var(--auth-blue);
    font-size: 1.15rem;
}

.success-checkmark {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--auth-green);
    background: #edf9f4;
    border: 1px solid #c5ead9;
    border-radius: 50%;

    font-size: 2.15rem;
}

.modal-footer-custom {
    padding: 0.95rem 1.25rem 1.2rem;

    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;

    background: #f7fafc;
    border-top: 1px solid var(--auth-border);
    border-radius: 0 0 20px 20px;
}

.btn-modal {
    min-height: 42px;
    padding: 0.62rem 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    border: 1px solid transparent;
    border-radius: var(--auth-radius-sm);

    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;

    transition:
        background-color var(--auth-transition),
        border-color var(--auth-transition),
        transform var(--auth-transition),
        box-shadow var(--auth-transition);
}

.btn-acknowledge {
    color: #fff;
    background: var(--auth-green);
    border-color: var(--auth-green);
}

.btn-acknowledge:hover {
    background: var(--auth-green-dark);
    border-color: var(--auth-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(22, 132, 91, 0.18);
}

.btn-understand {
    color: #fff;
    background: var(--auth-blue);
    border-color: var(--auth-blue);
}

.btn-understand:hover {
    background: var(--auth-blue-hover);
    border-color: var(--auth-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(47, 111, 167, 0.18);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn-primary-custom:focus-visible,
.btn-secondary-custom:focus-visible,
.btn-outline-light-custom:focus-visible,
.btn-modal:focus-visible {
    outline: 3px solid rgba(47, 111, 167, 0.45);
    outline-offset: 2px;
}

::selection {
    color: #fff;
    background: var(--auth-navy);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    body {
        padding:
            max(14px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(14px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));

        background-attachment: scroll;
        background-position: 58% center;
    }

    .login-container {
        min-height: 100%;
    }

    .login-card,
    .forgot-card,
    .glass-card,
    .login-box {
        width: 100%;
        padding: 1.35rem 1.05rem 1.2rem;
        border-radius: 18px;
    }

    .logo-wrapper,
    .login-box .logo {
        margin-bottom: 1.3rem;
    }

    .guidelines-box {
        padding: 0.9rem;
    }

    .guideline-item {
        font-size: 0.8rem;
    }

    .otp-input-group .input-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .otp-input-group .input-group .btn {
        width: 100%;
        margin: 0;
    }

    .modal-container {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
    }

    .modal-header-custom {
        min-height: 60px;
        padding: 0.85rem 1rem;
        border-radius: 16px 16px 0 0;
    }

    .modal-header-custom h2 {
        font-size: 1rem;
    }

    .modal-body-custom {
        padding: 1rem;
    }

    .modal-footer-custom {
        flex-direction: column-reverse;
        padding: 0.85rem 1rem 1rem;
        border-radius: 0 0 16px 16px;
    }

    .btn-modal {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .footer-links .separator {
        display: none;
    }

    .footer-links a {
        display: block;
        margin: 0.4rem 0;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   LOGIN VIEW SEMANTIC HELPERS
   ========================================================================== */

.auth-critical-note {
    margin-top: 1.15rem;
    padding: 0.8rem 0.9rem;
    color: #7c1e1e;
    background: #fff0f0;
    border: 1px solid #f1c6c6;
    border-left: 4px solid var(--auth-red);
    border-radius: var(--auth-radius-sm);
    font-weight: 650;
}

.auth-modal-lead {
    margin-bottom: 1rem;
    color: var(--auth-text-strong) !important;
    font-size: 1rem;
    font-weight: 650;
}

.auth-last-updated {
    margin-top: 1.15rem;
    color: var(--auth-muted) !important;
    font-size: 0.82rem;
    font-style: italic;
}

/* aria-hidden is updated by the existing modal JavaScript when enhanced later.
   Do not use [aria-hidden="true"] { display:none } here because the current
   JavaScript already controls visibility through .active. */