html,
body {
    overflow-x: hidden;
}

@media (max-width: 1024px) {

    .modal {
        max-width: 680px;
        max-height: 95vh;
        justify-content: flex-start;
        /* IMPORTANT */
    }

    .modal-body::before {
        content: unset;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.445);
        z-index: 1;
    }


    .modal-overlay {
        padding: 20px 0;
    }

    .modal-body {
        display: block;
        /* kill flex here */
        overflow-y: auto;
        overflow-x: hidden;
    }

    .modal-step {
        height: auto;
        min-height: unset;
    }

    .step-body {
        padding: 0 20px;
    }

    .number-of-guests {
        flex-wrap: wrap;
    }

    .total-guests-count {
        width: 100%;
    }

    .guests-gender-count-input {
        width: 100%;
    }

    .date-and-time {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .date-input,
    .time-input {
        width: 100%;
    }

    .time-range-container {
        flex-direction: row;
        justify-content: space-between;
        gap: 15px;
    }

    .time-range-container .date-time-picker {
        width: 40%;
    }

    .room-type {
        width: 100%;
    }

    .personal-block {
        flex-direction: column;
        gap: 20px;
    }

    .personal-info-block {
        width: 100%;
    }

    .modal-navigation {
        width: 100%;
        justify-content: space-between;
    }

    .modal-nav-btn {
        flex: 1;
        justify-content: center;
    }

    .reserve-payment {
        flex-direction: column;
        gap: 20px;
    }


    .canvas-wrapper {
        width: 100%;
        display: block;
        /* 🔥 kill flex */
    }

    /* VERY IMPORTANT */
    .canvas-wrapper canvas {
        display: block;
    }

}


/* =========================
   MOBILES (≤ 768px)
========================= */
@media (max-width: 768px) {

    .personal-block {
        width: 100%;
    }

    .gradient-outline-text{
        font-size:25px !important;
    }

    .address_text{
        font-size: 25px;
    }

    #canvas-997 {
        display: none;
    }

    .canvas-wrapper {
        overflow-x: scroll;
    }

    .modal-overlay {
        padding: 20px 0;
    }

    .modal {
        border-radius: 15px;
        max-width: 80% !important;
    }

    .modal-close-btn {
        top: 15px;
        right: 15px;
    }

    .step-body {
        padding: 0 15px;
    }

    .step-header .event-title {
        font-size: 32px;
    }

    .number-of-guests {
        flex-direction: column;
    }

    .date-and-time {
        gap: 20px;
    }

    .checkbox-container {
        gap: 10px;
    }

    .total-order-price {
        font-size: 28px;
    }

    .price-and-breakdown {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .modal-navigation-container {
        margin-bottom: 20px;
    }

    .modal-nav-btn {
        font-size: 16px;
        padding: 10px;
    }

    .personal-info-container {
        padding: 20px;
        gap: 30px;
    }

    .canvas-wrapper {
        height: auto;
        flex-direction: column;
    }
}


/* =========================
   SMALL PHONES (≤ 480px)
========================= */
@media (max-width: 480px) {

    .modal {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 10px;
    }

    .footer-image{
        display: none;
    }

    .step-header .event-title {
        font-size: 24px;
    }

    
    .gradient-outline-text{
        font-size:18px !important;
    }

    label,
    .payment-type-header {
        font-size: 14px;
    }

    
    .vertical-line {
        display: none;
    }

     .horizontal-line {
        display: flex;
        margin: 10px 0;
    }


    .reserve-input {
        font-size: 14px;
        padding: 8px 10px;
    }

    .total-order-price {
        font-size: 24px;
    }

    .first-step {
        flex-direction: column;
    }

    .modal-nav-btn {
        font-size: 14px;
    }

    .price-breakdown {
        font-size: 14px;
    }

    .tooltip-text {
        width: 100px;
        font-size: 10px;
    }
}