/* CSS Específico para el Flujo de Booking 
   Diseño step-by-step y modales a pantalla completa
*/

/* Reglas aplicables SOLO a móvil para que el modal se haga pantalla completa */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        margin: 0;
        max-width: none;
        height: 100%;
    }
    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
    }
}

/* Evitar scroll del body cuando modal de agenda está abierto */
.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}

/* Transiciones de paso a paso */
.booking-step {
    display: none;
}
.booking-step.active {
    display: block;
    opacity: 1;
    -webkit-animation: fadeSlideUp 0.3s ease forwards;
    animation: fadeSlideUp 0.3s ease forwards;
}

@-webkit-keyframes fadeSlideUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Checkmark UI de éxito */
#step-5 i.fa-check-circle {
    -webkit-animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@-webkit-keyframes popIn {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}