/* Responsive Styles for Login Page */

/* Large Screens (up to 1199px) */
@media (max-width: 1199px) {

    /* Pattern Positioning */
    .login-page-section {

        /* AT Pattern */
        .pattern-at {
            top: 5%;
            left: 0;
        }

        /* Star Bottom Pattern */
        .pattern-star-bottom {
            bottom: -8%;
            left: 5%;
        }

        /* Diamond Pattern */
        .pattern-diamond {
            bottom: 0;
            right: 7%;
        }

        /* Star Top Pattern */
        .pattern-star-top {
            top: 7%;
            right: 2%;
        }
    }

    /* Login Left Section Typography */
    .login-left-section .login-left-content h5 {
        font-size: 18px;
    }
}

/* Medium Screens (up to 991px) */
@media (max-width: 991px) {
    .login-page-section {

        /* Pattern Sizing */
        .pattern-people,
        .pattern-at,
        .pattern-star-bottom,
        .pattern-diamond,
        .pattern-star-top {
            width: 45px;
        }

        /* Pattern Visibility */
        .pattern-global,
        .pattern-people {
            display: none;
        }

        /* Pattern Positioning Adjustments */
        .pattern-at {
            top: 20%;
        }

        .pattern-star-bottom {
            bottom: 4%;
        }

        .pattern-star-top {
            top: 8%;
        }
    }
}

/* Tablet Screens (up to 760px) */
@media (max-width: 760px) {
    .field-container {
        padding: 0 40px;
        gap: 5px 0;
    }
}

/* Mobile Screens (up to 576px) */
@media (max-width: 576px) {

    .login-left-section {
        display: none;
    }

    .login-page-section {
        height: 100%;
    }

    .login-form-section {
        height: 100dvh !important;
    }

    .login-form-section {
        position: relative;
        z-index: 1;
        /* keep form content above the overlay */
    }

    .login-form-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../images/sidebar-pattern.svg') no-repeat center center;
        background-size: cover;
        opacity: 0.03;
        z-index: -1;
    }

    .login-form-section .welcome-title .welcome-back {
        font-size: 30px;
    }


    /* Input Fields */
    #login-email,
    #login-password {
        width: 100%;
        margin: 0;
    }

    .error {
        padding-left: 5px;
    }

    .welcome-title h4 {
        font-size: 16px;
    }

}