/*
 * EzyTransfers CHBS mobile vehicle-card fix v4
 *
 * Works from CHBS's own measured-width class as well as the browser viewport.
 * Intended for the existing customised CHBS.BookingForm.class.php markup.
 */

/* -------------------------------------------------------------------------
   CHBS narrow-form layout
   CHBS adds .chbs-widthlt-768 according to the actual booking-form container.
   ------------------------------------------------------------------------- */

body .chbs-main.chbs-widthlt-768 .chbs-vehicle {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 18px !important;
}

body .chbs-main.chbs-widthlt-768 .chbs-vehicle .chbs-vehicle-image,
body .chbs-main.chbs-widthlt-768 .chbs-vehicle .chbs-vehicle-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

body .chbs-main.chbs-widthlt-768 .chbs-vehicle .chbs-vehicle-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    align-content: start !important;
}

/* CHBS intentionally makes the header transparent to the grid. */
body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-header {
    display: contents !important;
}

/* Vehicle name + the custom private/shared subtitle. */
body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-header > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}

body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-header > span em {
    display: inline-block !important;
    margin-top: 3px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

/* Price plus the custom availability / travel-time information. */
body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-price {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.5 !important;
}

body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-price > span {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
    white-space: normal !important;
}

body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-price > span > span {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: normal !important;
}

/*
 * public.css sets both of these to display:contents !important.
 * On mobile we deliberately make them real boxes so their contents no longer
 * fight the name/price for the same grid cells.
 */
body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-meta {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: stretch !important;
}

body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-meta > div {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
}

/* SELECT button: full-width row below the vehicle information. */
body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-header >
.chbs-button.chbs-button-style-2 {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 2px 0 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
}

/* Expandable CHBS description always comes last. */
body .chbs-main.chbs-widthlt-768
.chbs-vehicle .chbs-vehicle-content > .chbs-vehicle-content-description {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* -------------------------------------------------------------------------
   Viewport fallback
   Covers mobile emulators before/while CHBS JavaScript assigns width classes.
   ------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

    body .chbs-main .chbs-vehicle {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 18px !important;
    }

    body .chbs-main .chbs-vehicle .chbs-vehicle-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto auto !important;
        column-gap: 0 !important;
        row-gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-header {
        display: contents !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-header > span {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        text-align: left !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-price {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        display: block !important;
        align-items: initial !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-meta {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-meta > div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-header >
    .chbs-button.chbs-button-style-2 {
        grid-column: 1 !important;
        grid-row: 4 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    body .chbs-main .chbs-vehicle
    .chbs-vehicle-content > .chbs-vehicle-content-description {
        grid-column: 1 !important;
        grid-row: 5 !important;
        width: 100% !important;
    }

    body .chbs-main .chbs-vehicle .chbs-vehicle-image,
    body .chbs-main .chbs-vehicle .chbs-vehicle-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}