/*=========================================
        TABLETS (1024px)
==========================================*/

@media (max-width:1024px){

    .booking-container{

        grid-template-columns:1fr;

    }

    .sidebar{

        flex-direction:row;
        flex-wrap:wrap;

    }

    .sidebar>div{

        flex:1 1 300px;

    }

}


/*=========================================
        TABLETS (768px)
==========================================*/

@media (max-width:768px){

    .header .container{

        flex-direction:column;
        gap:20px;

    }

    .logo img{

        width:180px;

    }

    .navbar{

        flex-wrap:wrap;
        justify-content:center;
        gap:18px;

    }

    .btn-header{

        width:100%;
        justify-content:center;

    }

    .booking{

        padding:25px 0;

    }

    .booking-content{

        padding:30px;

    }

    .booking-content h1{

        font-size:38px;

    }

    .step-page h2{

        font-size:28px;

    }

    .booking-form{

        grid-template-columns:1fr;

    }

    .resume{

        grid-template-columns:1fr;

    }

}


/*=========================================
        MÓVILES
==========================================*/

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .container{

        width:94%;

    }

    .booking-content{

        padding:22px;

        border-radius:18px;

    }

    .booking-content h1{

        font-size:30px;

        text-align:center;

    }

    .booking-content>p{

        text-align:center;

        font-size:15px;

    }

    .cards-grid{

        grid-template-columns:1fr;

    }

    .therapy-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .therapy-card .icon{

        margin-bottom:10px;

    }

    .branch-card img{

        height:180px;

    }

    .actions{

        flex-direction:column-reverse;

        gap:15px;

    }

    .actions button{

        width:100%;

        justify-content:center;

    }

    .sidebar{

        flex-direction:column;

    }

}


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

@media (max-width:768px){

    .stepper{

        overflow-x:auto;

        justify-content:flex-start;

        gap:15px;

        padding-bottom:10px;

        scrollbar-width:none;

    }

    .stepper::-webkit-scrollbar{

        display:none;

    }

    .line{

        display:none;

    }

    .step{

        min-width:90px;

        flex-shrink:0;

    }

    .step small{

        font-size:.75rem;

    }

}


/*=========================================
        HORARIOS
==========================================*/

@media (max-width:576px){

    .hours{

        justify-content:center;

    }

    .hours button{

        width:95px;

    }

}


/*=========================================
        FORMULARIO
==========================================*/

@media (max-width:576px){

    .booking-form input,
    .booking-form textarea{

        font-size:16px;

    }

}


/*=========================================
        SIDEBAR
==========================================*/

@media (max-width:768px){

    .sidebar i{

        font-size:34px;

    }

    .sidebar h3{

        font-size:20px;

    }

}


/*=========================================
        BOTONES
==========================================*/

@media (max-width:576px){

    #prev,
    #next{

        padding:16px;

    }

}


/*=========================================
        TARJETAS
==========================================*/

@media (max-width:576px){

    .branch-info{

        text-align:center;

    }

    .branch-info button{

        width:100%;

    }

}


/*=========================================
        EFECTO MÓVIL
==========================================*/

@media (hover:none){

    .therapy-card:hover,
    .branch-card:hover{

        transform:none;

    }

}