﻿/* ============================================================================
/* BOOKING LIST
/* ============================================================================ */

/*.activities-booking-list {
    display: block;
    text-decoration: none!important;
    color: inherit!important;
    background-color: #efefef;
    margin-bottom: 10px;
    }

    .activities-booking-list__image {
        overflow: hidden;
        }
        
        .activities-booking-list .activities-booking-list__image img {
            transition: transform .2s;
            }

        .activities-booking-list:hover .activities-booking-list__image img {
            transform: scale(1.1);
            }

    .activities-booking-list__content {
        padding: 10px;
        }
    
    .activities-booking-list__button {
        display: inline-block;
        background-color: var(--primary-color);
        color: var(--primary-color-text);
        padding: 10px;
        margin: 0px 10px 10px 10px;
        text-align: center;
        width: calc(100% - 20px);
        }

        .activities-booking-list:hover .activities-booking-list__button { background-color: var(--primary-color-hover); }*/

/* remove the activities- from booking-list if possible */

.booking-list,
.activities-booking-list {
    display: flex;
    margin-bottom: 10px;
    background-color: #efefef;
    text-decoration: none!important;
    color: inherit!important;
    background-color: var(--fill-color);
    color: var(--fill-color-text)!important;
    }
    
    .booking-list__image,
    .activities-booking-list__image {
        width: 110px;
        display: block;
        overflow: hidden;
        }
        
        .booking-list__image img,
        .activities-booking-list__image img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform .2s;
            }

        .booking-list:hover .booking-list__image img,
        .activities-booking-list:hover .activities-booking-list__image img {
            transform: scale(1.1);
            }

    .booking-list__content,
    .activities-booking-list__content {
        flex: 1;
        display: flex;
        }

        .booking-list__content__text,
        .activities-booking-list__content__text {
            padding: 10px;
            flex: 1;
            align-self: center;
            }
    
        .booking-list__content__button,
        .activities-booking-list__content__button {
            width: 20px;
            background-color: var(--primary-color);
            color: var(--primary-color-text)!important;
            display: flex;
            align-items: center;
            justify-content: center;
            }

/* ============================================================================
/* BOOKING DETAILS
/* ============================================================================ */

.activities-booking-view {
    background-color: red;
}

.booking-details {
    
    }

    .booking-details__title {
        font-size: 30px;
        margin-bottom: 15px;
        }

    .booking-details__overview {
        margin-bottom: 20px;
        overflow: auto;
        }

        .booking-details__overview__image {
            float: left;
            width: 300px;
            }

        .booking-details__overview__description {
            padding-left: 20px;
            overflow: auto !important;
            max-width: 700px;
            }

            @media screen and (max-width: 767px) {
                .booking-details__overview__image {
                    float: none;
                    width: 100%;
                    margin-bottom: 10px;
                    }

                .booking-details__overview__description {
                    float: none;
                    padding: 0;
                    }
            }

    .booking-details__where-and-when {
        margin-bottom: 10px;
        }

    .booking-details__contact-information {
        margin-bottom: 20px;
        }

    .booking-details__tickets {
        }

    .booking-details__tickets__title {
        font-size: 22px;
        margin-bottom: 15px;
        }

    .booking-details__tickets__list {
        width: 100%;
        text-align: left;
        table-layout: fixed;
        border-collapse: collapse;
        }

        .booking-details__tickets__list tr {
            border: 1px solid #efefef;
            }

        .booking-details__tickets__list th, .booking-details__tickets__list td {
            word-wrap: break-word;
            width: 100%;
            }

@media screen and (min-width: 768px) {
    .booking-details__tickets__list td.booking-details__tickets__list__count {
        padding: 10px;
        text-align: center;
        width: 120px;
        }

    .booking-details__tickets__list td.booking-details__tickets__list__reference {
        padding: 10px;
        }

    .booking-details__tickets__list td.booking-details__tickets__list__download {
        padding: 10px;
        width: 250px;
        }
}

@media screen and (max-width: 767px) {
    /*.booking-details__tickets__list tbody, .booking-details__tickets__list thead { float: left; } //jsfiddle.net/uzsw7s4o/ /**/
    .booking-details__tickets__list thead {
        min-width: 120px
        }

    .booking-details__tickets__list td, .booking-details__tickets__list th {
        display: block;
        width: 100% !important;
        }

        .booking-details__tickets__list td.booking-details__tickets__list__count {
            padding: 10px 10px 0px 10px;
            }

        .booking-details__tickets__list td.booking-details__tickets__list__reference {
            padding: 0px 10px 0px 10px;
            }

        .booking-details__tickets__list td.booking-details__tickets__list__download {
            padding: 10px;
            width: 250px;
            }
}