/* =====================================================
   C.S.S.D.
   CITY SOCIAL SERVICES DEPARTMENT
   FINANCIAL ASSISTANCE AUTHENTICATION
   BLUE GOVERNMENT / FINANCIAL ASSISTANCE THEME
===================================================== */


/* =====================================================
   BODY LOCK
===================================================== */

body.auth-modal-open {
    overflow: hidden;
}


/* =====================================================
   AUTH MODAL
===================================================== */

.auth-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.auth-modal.active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* =====================================================
   OVERLAY
===================================================== */

.auth-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(18, 59, 120, .60);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.auth-modal-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 900px;

    min-height: 540px;

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    overflow: hidden;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 30px 90px
        rgba(20, 48, 80, .25);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .3s ease;
}


.auth-modal.active
.auth-modal-container {
    transform:
        translateY(0)
        scale(1);
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.auth-modal-close {
    position: absolute;

    z-index: 20;

    top: 14px;

    right: 14px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, .14);

    color: #ffffff;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.auth-modal-close:hover {
    background:
        rgba(255, 255, 255, .28);

    transform: rotate(2deg);
}


.auth-modal-close:focus {
    outline: none;
}


.auth-modal-close:focus-visible {
    outline:
        3px solid
        rgba(255, 255, 255, .35);

    outline-offset: 2px;
}


/* =====================================================
   LEFT INFORMATION PANEL
===================================================== */

.auth-modal-info {
    position: relative;

    overflow: hidden;

    padding: 38px;

    background:
        linear-gradient(
            135deg,
            #123b78 0%,
            #173f7a 50%,
            #0d3263 100%
        );

    color: #ffffff;
}


/* =====================================================
   DECORATIVE CIRCLES
===================================================== */

.auth-modal-info::before {
    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -145px;

    right: -130px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);
}


.auth-modal-info::after {
    content: "";

    position: absolute;

    width: 210px;

    height: 210px;

    bottom: -120px;

    left: -105px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .07);
}


/* =====================================================
   AUTH MODAL LOGO
===================================================== */

.auth-modal-logo {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;
}


/* =====================================================
   CSSD PICTURE LOGO
===================================================== */

.auth-logo-icon {
    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    padding: 4px;

    border-radius: 10px;

    background: #ffffff;

    box-sizing: border-box;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .10);
}


.auth-logo-icon img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;
}


/* =====================================================
   CSSD LOGO TEXT
===================================================== */

.auth-logo-text {
    display: flex;

    flex-direction: column;

    line-height: 1.1;

    min-width: 0;
}


.auth-logo-text strong {
    color: #ffffff;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: .2px;
}


.auth-logo-text span {
    margin-top: 5px;

    color: #dbe9ff;

    font-size: 9px;

    font-weight: 500;

    line-height: 1.3;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.auth-modal-info-content {
    position: relative;

    z-index: 2;

    margin-top: 82px;
}


/* =====================================================
   SECTION LABEL
===================================================== */

.auth-modal-label {
    display: block;

    margin-bottom: 13px;

    color: #dbe9ff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


/* =====================================================
   LEFT HEADING
===================================================== */

.auth-modal-info-content h2 {
    max-width: 330px;

    margin:
        0 0 16px;

    color: #ffffff;

    font-size: 34px;

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.auth-modal-info-content h2 span {
    color: #dbe9ff;
}


/* =====================================================
   LEFT DESCRIPTION
===================================================== */

.auth-modal-info-content > p {
    max-width: 315px;

    margin:
        0 0 30px;

    color: #e2ecfa;

    font-size: 10px;

    line-height: 1.8;
}


/* =====================================================
   BENEFITS
===================================================== */

.auth-modal-benefits {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.auth-modal-benefit {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #e8f0fb;

    font-size: 9px;
}


.auth-modal-benefit i {
    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, .13);

    color: #ffffff;

    font-size: 14px;
}


/* =====================================================
   RIGHT FORM SECTION
===================================================== */

.auth-modal-form-section {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 44px 52px;

    overflow-y: auto;

    background: #ffffff;
}


.auth-modal-form-section::-webkit-scrollbar {
    width: 4px;
}


.auth-modal-form-section::-webkit-scrollbar-thumb {
    background: #c8d6e8;

    border-radius: 10px;
}


/* =====================================================
   LOGIN / SIGN UP TABS
===================================================== */

.auth-modal-tabs {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 3px;

    padding: 3px;

    margin-bottom: 25px;

    border-radius: 8px;

    background: #f0f4f9;
}


.auth-modal-tab {
    height: 37px;

    padding: 0;

    border: none;

    border-radius: 6px;

    background: transparent;

    color: #69768d;

    font-family: inherit;

    font-size: 10px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


.auth-modal-tab:hover {
    color: #123f7a;
}


.auth-modal-tab.active {
    background: #ffffff;

    color: #123f7a;

    box-shadow:
        0 2px 8px
        rgba(20, 48, 80, .10);
}


.auth-modal-tab:focus {
    outline: none;
}


.auth-modal-tab:focus-visible {
    outline:
        2px solid
        rgba(45, 97, 181, .25);

    outline-offset: 1px;
}


/* =====================================================
   AUTH FORM
===================================================== */

.auth-modal-form {
    display: none;

    animation:
        authFormAnimation
        .25s ease;
}


.auth-modal-form.active {
    display: block;
}


@keyframes authFormAnimation {

    from {
        opacity: 0;

        transform:
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   FORM HEADING
===================================================== */

.auth-modal-heading {
    margin-bottom: 21px;
}


.auth-modal-heading h2 {
    margin:
        0 0 5px;

    color: #202f48;

    font-size: 26px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.8px;
}


.auth-modal-heading p {
    margin: 0;

    color: #69768d;

    font-size: 9px;

    line-height: 1.5;
}


/* =====================================================
   FORM
===================================================== */

.auth-modal-form form {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;
}


/* =====================================================
   FORM FIELD
===================================================== */

.auth-field {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


/* =====================================================
   FIRST NAME + LAST NAME
   SAME ROW
===================================================== */

.auth-field-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    width: 100%;

    margin: 0;
}


.auth-field-row .auth-field {
    width: 100%;

    min-width: 0;

    margin: 0;
}


.auth-field-row .auth-input {
    width: 100%;
}


.auth-field-row .auth-input input {
    width: 100%;
}


.auth-field label {
    color: #37445a;

    font-size: 9px;

    font-weight: 600;
}


.auth-field-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


/* =====================================================
   FORGOT PASSWORD
===================================================== */

.forgot-password {
    padding: 0;

    border: none;

    background: transparent;

    color: #123f7a;

    font-family: inherit;

    font-size: 8px;

    cursor: pointer;
}


.forgot-password:hover {
    color: #0d3263;

    text-decoration: underline;
}


.forgot-password:focus {
    outline: none;
}


/* =====================================================
   INPUT CONTAINER
===================================================== */

.auth-input {
    position: relative;

    width: 100%;
}


/* =====================================================
   INPUT ICON
===================================================== */

.auth-input > i:first-child {
    position: absolute;

    top: 50%;

    left: 12px;

    z-index: 2;

    transform:
        translateY(-50%);

    color: #8794a8;

    font-size: 15px;

    pointer-events: none;
}


/* =====================================================
   INPUT
===================================================== */

.auth-input input {
    width: 100%;

    height: 41px;

    padding:
        0 39px;

    box-sizing: border-box;

    border:
        1px solid #dce3ec;

    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: #202f48;

    font-family: inherit;

    font-size: 9px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.auth-input input::placeholder {
    color: #9aa6b6;
}


.auth-input input:hover {
    border-color: #c8d3e1;
}


.auth-input input:focus {
    border-color: #2d61b5;

    box-shadow:
        0 0 0 3px
        rgba(45, 97, 181, .10);
}


/* =====================================================
   PASSWORD TOGGLE
===================================================== */

.auth-password-toggle {
    position: absolute;

    top: 50%;

    right: 8px;

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #8794a8;

    cursor: pointer;

    transform:
        translateY(-50%);
}


.auth-password-toggle:hover {
    color: #123f7a;
}


.auth-password-toggle:focus {
    outline: none;
}


/* =====================================================
   CHECKBOX
===================================================== */

.auth-check {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #69768d;

    font-size: 8px;

    cursor: pointer;
}


.auth-check input {
    width: 13px;

    height: 13px;

    margin: 0;

    accent-color: #123f7a;
}


/* =====================================================
   TERMS
===================================================== */

.auth-terms {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    color: #69768d;

    font-size: 8px;

    line-height: 1.6;

    cursor: pointer;
}


.auth-terms input {
    width: 13px;

    height: 13px;

    flex-shrink: 0;

    margin-top: 1px;

    accent-color: #123f7a;
}


.auth-legal-link {
    padding: 0;

    border: none;

    background: transparent;

    color: #123f7a;

    font: inherit;

    font-weight: 600;

    cursor: pointer;
}


.auth-legal-link:hover {
    color: #0d3263;

    text-decoration: underline;
}


.auth-legal-link:focus {
    outline: none;
}


/* =====================================================
   PASSWORD ERROR
===================================================== */

.auth-password-error {
    display: none;

    margin-top: 1px;

    color: #c44747;

    font-size: 8px;
}


.auth-password-error.show {
    display: block;
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.auth-submit-button {
    width: 100%;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 2px;

    padding: 0;

    border: none;

    border-radius: 7px;

    background: #123f7a;

    color: #ffffff;

    font-family: inherit;

    font-size: 10px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.auth-submit-button:hover {
    background: #0d3263;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 17px
        rgba(18, 63, 122, .20);
}


.auth-submit-button:active {
    transform:
        translateY(0);

    box-shadow: none;
}


.auth-submit-button i {
    font-size: 13px;

    transition:
        transform .2s ease;
}


.auth-submit-button:hover i {
    transform:
        translateX(3px);
}


/* =====================================================
   SWITCH TEXT
===================================================== */

.auth-switch-text {
    margin:
        17px 0 0;

    text-align: center;

    color: #69768d;

    font-size: 8px;

    line-height: 1.5;
}


.auth-switch-text button {
    padding: 0;

    border: none;

    background: transparent;

    color: #123f7a;

    font-family: inherit;

    font-size: inherit;

    font-weight: 600;

    cursor: pointer;
}


.auth-switch-text button:hover {
    color: #0d3263;

    text-decoration: underline;
}


/* =====================================================
   SECURITY NOTICE
===================================================== */

.auth-modal-notice {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin-top: 17px;

    padding: 10px;

    border-radius: 7px;

    background: #f3f7fc;

    color: #69768d;

    font-size: 7px;

    line-height: 1.5;
}


.auth-modal-notice i {
    flex-shrink: 0;

    margin-top: 1px;

    color: #123f7a;

    font-size: 12px;
}


/* =====================================================
   LEGAL MODALS
===================================================== */

.legal-modal {
    position: fixed;

    inset: 0;

    z-index: 10001;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.legal-modal.active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* =====================================================
   LEGAL OVERLAY
===================================================== */

.legal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(18, 59, 120, .55);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);
}


/* =====================================================
   LEGAL CONTAINER
===================================================== */

.legal-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 600px;

    max-height: 82vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 25px 60px
        rgba(20, 48, 80, .20);

    transform:
        translateY(12px)
        scale(.98);

    transition:
        transform .25s ease;
}


.legal-modal.active
.legal-container {
    transform:
        translateY(0)
        scale(1);
}


/* =====================================================
   LEGAL HEADER
===================================================== */

.legal-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        20px 23px;

    border-bottom:
        1px solid #e2e8f0;
}


.legal-header span {
    display: block;

    margin-bottom: 4px;

    color: #123f7a;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.legal-header h2 {
    margin: 0;

    color: #202f48;

    font-size: 19px;

    font-weight: 700;
}


/* =====================================================
   LEGAL CLOSE
===================================================== */

.legal-close {
    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border: none;

    border-radius: 7px;

    background: #f0f4f9;

    color: #69768d;

    font-size: 17px;

    cursor: pointer;
}


.legal-close:hover {
    background: #dbe9ff;

    color: #123f7a;
}


/* =====================================================
   LEGAL CONTENT
===================================================== */

.legal-content {
    padding: 23px;

    overflow-y: auto;

    color: #69768d;

    font-size: 9px;

    line-height: 1.8;
}


.legal-content::-webkit-scrollbar {
    width: 4px;
}


.legal-content::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background: #c8d6e8;
}


.legal-date {
    margin:
        0 0 17px;

    color: #123f7a;

    font-size: 8px;

    font-weight: 600;
}


.legal-content h3 {
    margin:
        18px 0 5px;

    color: #202f48;

    font-size: 10px;

    font-weight: 700;
}


.legal-content h3:first-of-type {
    margin-top: 0;
}


.legal-content p {
    margin:
        0 0 6px;
}


/* =====================================================
   LEGAL FOOTER
===================================================== */

.legal-footer {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding:
        13px 23px;

    border-top:
        1px solid #e2e8f0;
}


.legal-understand {
    min-width: 100px;

    height: 35px;

    padding:
        0 15px;

    border: none;

    border-radius: 7px;

    background: #123f7a;

    color: #ffffff;

    font-family: inherit;

    font-size: 9px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.legal-understand:hover {
    background: #0d3263;

    transform:
        translateY(-1px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .auth-modal-container {
        max-width: 850px;
    }


    .auth-modal-form-section {
        padding-left: 40px;

        padding-right: 40px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .auth-modal {
        padding: 12px;
    }


    .auth-modal-container {
        max-width: 430px;

        max-height: 92vh;

        min-height: 0;

        display: block;

        overflow-y: auto;
    }


    .auth-modal-info {
        min-height: 190px;

        padding: 26px;
    }


    /* ---------------------------------------------
       MOBILE CSSD LOGO
    --------------------------------------------- */

    .auth-modal-logo {
        gap: 11px;
    }


    .auth-logo-icon {
        width: 55px;

        height: 55px;

        padding: 3px;

        border-radius: 9px;
    }


    .auth-logo-text strong {
        font-size: 18px;
    }


    .auth-logo-text span {
        font-size: 8px;
    }


    .auth-modal-info-content {
        margin-top: 38px;
    }


    .auth-modal-info-content h2 {
        font-size: 26px;
    }


    .auth-modal-benefits {
        display: none;
    }


    .auth-modal-form-section {
        padding:
            29px
            26px
            31px;

        overflow-y: visible;
    }


    /* ---------------------------------------------
       FIRST NAME + LAST NAME
       STACK ON MOBILE
    --------------------------------------------- */

    .auth-field-row {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .legal-modal {
        padding: 12px;
    }


    .legal-container {
        max-height: 90vh;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .auth-modal {
        padding: 8px;
    }


    .auth-modal-container {
        max-height: 94vh;
    }


    .auth-modal-info {
        min-height: 160px;

        padding: 21px;
    }


    /* ---------------------------------------------
       SMALL MOBILE CSSD LOGO
    --------------------------------------------- */

    .auth-logo-icon {
        width: 48px;

        height: 48px;

        padding: 3px;

        border-radius: 8px;
    }


    .auth-logo-text strong {
        font-size: 17px;
    }


    .auth-logo-text span {
        font-size: 7px;
    }


    .auth-modal-info-content {
        margin-top: 27px;
    }


    .auth-modal-info-content h2 {
        font-size: 23px;
    }


    .auth-modal-form-section {
        padding:
            24px
            21px
            27px;
    }


    .legal-header {
        padding: 17px;
    }


    .legal-content {
        padding: 18px;
    }


    .legal-footer {
        padding:
            12px
            17px;
    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 350px) {

    .auth-modal-info {
        padding: 18px;
    }


    .auth-logo-icon {
        width: 44px;

        height: 44px;
    }


    .auth-logo-text strong {
        font-size: 16px;
    }


    .auth-logo-text span {
        font-size: 7px;
    }


    .auth-modal-info-content h2 {
        font-size: 21px;
    }


    .auth-modal-heading h2 {
        font-size: 20px;
    }

}