/*
|--------------------------------------------------------------------------
| BOX OFFICE CINE VERSE
| BOOKING PAGE SHELL
|--------------------------------------------------------------------------
| The detailed booking component styling lives in booking.blade.php.
| This file controls only the page width and responsive shell.
|--------------------------------------------------------------------------
*/

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| APPLICATION SHELL
|--------------------------------------------------------------------------
*/

.app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.booking-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 28px 55px;
    overflow-x: visible;
}

/*
|--------------------------------------------------------------------------
| TOP BOOKING HEADER
|--------------------------------------------------------------------------
*/

.booking-header {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 22px;
    padding: 30px 0 17px;
    box-sizing: border-box;
    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| BOOKING STEPS
|--------------------------------------------------------------------------
*/

.booking-steps {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 22px;
    box-sizing: border-box;
    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| MAIN BOOKING CARDS
|--------------------------------------------------------------------------
*/

.booking-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 14px;
    padding: 18px;
    box-sizing: border-box;
    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| MOVIE GRID
|--------------------------------------------------------------------------
*/

.movie-selection {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| MOVIE CARDS
|--------------------------------------------------------------------------
*/

.booking-movie {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.booking-movie-info {
    min-width: 0;
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| BOOKING SUMMARY
|--------------------------------------------------------------------------
*/

#selectionSummary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| ACTUAL SELECT SEATS BUTTON
|--------------------------------------------------------------------------
*/

#continueToSeats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 145px;
    flex-shrink: 0;
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| BOOKING FOOTER / ACTION ROW
|--------------------------------------------------------------------------
*/

.booking-footer {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| MEDIA
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .booking-main {
        padding-left: 20px;
        padding-right: 20px;
    }

}

@media (max-width: 700px) {

    .booking-header {
        padding-top: 25px;
    }

    .booking-card {
        margin-bottom: 14px;
    }

    .booking-footer {
        flex-wrap: wrap;
    }

    #continueToSeats {
        min-width: 145px;
    }

}

@media (max-width: 500px) {

    .booking-main {
        padding-left: 14px;
        padding-right: 14px;
    }

    .booking-header {
        padding-top: 20px;
    }

    .booking-card {
        padding: 13px;
    }

    .booking-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #continueToSeats {
        width: 100%;
        min-width: 0;
    }

}