/* ==========================================================
   BORDERPASS
   responsive.css
   Version : 1.1.0
========================================================== */


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

html{
    font-size:15px;
}


body{
    overflow-x:hidden;
}


.container{
    min-width:0;
}


button,
a,
input,
select,
textarea{
    touch-action:
        manipulation;
}


/* ==========================================================
   >= 360px
========================================================== */

@media(min-width:360px){

    html{
        font-size:16px;
    }

}


/* ==========================================================
   >= 390px
========================================================== */

@media(min-width:390px){

    .container{
        padding-inline:
            1.1rem;
    }

}


/* ==========================================================
   >= 414px
========================================================== */

@media(min-width:414px){

    .hero-buttons{
        width:100%;
    }

}


/* ==========================================================
   >= 480px
========================================================== */

@media(min-width:480px){

    .auth-card{
        max-width:430px;
    }

}


/* ==========================================================
   >= 576px
========================================================== */

@media(min-width:576px){

    .container{
        padding-inline:
            1.3rem;
    }

}


/* ==========================================================
   >= 640px
========================================================== */

@media(min-width:640px){

    .hero-buttons{
        flex-direction:row;

        justify-content:center;
    }

}


/* ==========================================================
   >= 768px
========================================================== */

@media(min-width:768px){

    .features{
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .auth-card{
        max-width:460px;
    }

}


/* ==========================================================
   MOBILE + TABLET NAVIGATION
========================================================== */

@media(max-width:991px){

    .main-nav>ul>li:last-child{
        margin-bottom:.5rem;
    }


    .main-nav
    .user-menu-toggle{

        justify-content:
            space-between;
    }


    .main-nav
    .user-dropdown.show{

        display:block;
    }


    .main-nav
    .user-dropdown:not(.show){

        display:none;
    }


    .main-nav
    .user-dropdown li{

        border-bottom:
            1px solid
            #edf2f7;
    }


    .main-nav
    .user-dropdown li:last-child{

        border-bottom:0;
    }


    .modal-box{
        max-height:
            calc(
                100dvh
                - 2rem
            );

        overflow-y:auto;
    }


    .modal-actions{
        flex-wrap:wrap;
    }


    .modal-actions
    .btn{

        min-width:140px;
    }

}


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

@media(max-width:575px){

    .main-content > .container{
        padding-inline:.75rem;
    }


    .card{
        padding:1.15rem;

        border-radius:14px;
    }


    .btn{
        min-height:52px;

        padding-inline:1rem;
    }


    .form-input{
        height:52px;
    }


    .auth-wrapper{
        min-height:auto;

        align-items:flex-start;

        padding-block:
            .85rem
            1.5rem;
    }


    .auth-card{
        max-width:none;

        padding:1.25rem;
    }


    .auth-title{
        margin-bottom:1.25rem;

        font-size:clamp(1.45rem,7vw,1.75rem);
    }


    .auth-card .form{
        gap:1rem;
    }


    .auth-card .form-label{
        font-size:1rem;
    }


    .auth-card .form-input,
    .auth-card input[type="text"],
    .auth-card input[type="tel"],
    .auth-card input[type="password"],
    .auth-card select{
        min-height:52px;

        font-size:16px;
    }


    .auth-card .password-toggle{
        width:44px;

        height:44px;

        display:inline-flex;

        align-items:center;

        justify-content:center;
    }


    .auth-footer{
        margin-top:1.25rem;

        font-size:.95rem;
    }


    .auth-footer a{
        display:inline-block;

        min-height:44px;

        padding:.55rem .25rem;

        color:var(--primary);

        font-weight:700;
    }


    .table-wrapper{
        margin-inline:
            -.25rem;

        padding-inline:
            .25rem;
    }


    .modal-overlay{
        padding:.65rem;
    }


    .modal-header,
    .modal-body,
    .modal-actions{

        padding:1rem;
    }


    .modal-actions{
        flex-direction:
            column;
    }


    .modal-actions
    .btn{

        width:100%;
    }

}


/* ==========================================================
   >= 820px
========================================================== */

@media(min-width:820px){

    .container{
        padding-inline:
            1.5rem;
    }

}


/* ==========================================================
   >= 992px
========================================================== */

@media(min-width:992px){

    .features{
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .home-quick-access{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(
                    235px,
                    1fr
                )
            );
    }


    .hero{
        padding:
            4.25rem
            0;
    }

}


/* ==========================================================
   >= 1200px
========================================================== */

@media(min-width:1200px){

    .container{
        padding-inline:
            2rem;
    }

}


/* ==========================================================
   >= 1400px
========================================================== */

@media(min-width:1400px){

    .container{
        max-width:1360px;
    }

}


/* ==========================================================
   >= 1600px
========================================================== */

@media(min-width:1600px){

    html{
        font-size:17px;
    }

}


/* ==========================================================
   >= 1920px
========================================================== */

@media(min-width:1920px){

    .container{
        max-width:1500px;
    }

}


/* ==========================================================
   SHORT SCREEN
========================================================== */

@media(max-height:700px){

    .auth-wrapper{
        align-items:flex-start;

        padding-top:2rem;

        padding-bottom:2rem;
    }

}


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

@media(
    orientation:landscape
)
and
(
    max-width:900px
){

    .hero{
        padding:
            1.5rem
            0;
    }


    .main-nav{
        width:
            min(
                72vw,
                390px
            );
    }

}


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

@media(
    prefers-reduced-motion:reduce
){

    *{
        animation:
            none
            !important;

        transition:
            none
            !important;

        scroll-behavior:
            auto
            !important;
    }

}