/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Fixes to Bootstrap */
@media (min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1488px;
    }
}

:root{
    interpolate-size: allow-keywords;
}

body.wow-booking-steps{
    background-color: #ffffff;

    &.admin-bar .wow-booking-step {
        top: 32px;
    }

    & #wowHeaderMenu{
        display: none;
    }
}



/* Booking Search */
.wow-form_search {

    display: flex;
    flex-direction: column;
    gap: 2rem;

    & .wow-row {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        flex-wrap: wrap;

        &>.form-group {
            display: flex;
            flex-direction: column;
            gap: 0;
            flex: 1 0 120px;

            &:last-child {
                flex: 1;
            }

            &>.form-group-inline {
                display: flex;
                flex-direction: row;
                gap: 0.25rem;
                margin-top: 1rem;
                align-items: center;
            }

            & input[type="checkbox"] + label{
                font-weight: 400;
                line-height: 1;
                margin: 0;
            }

            & label {
                line-height: 1.5rem;
                font-weight: 300;
            }

            & :is(input:not([type="checkbox"]):not([type="radio"]), select, .select2-selection) {
                padding: 0.5rem 0;
                border: 0;
                border-bottom: 1px solid #D3D1CE;
                background-color: transparent;
                font-size: 1rem;
                outline: none;
                font-weight: 500;
                outline: none;
                box-shadow: none;
                height: 2.5rem;
                color: var(--color-300);

                & .select2-selection__rendered {
                    padding-left: 0;
                    color: var(--color-300);
                }
            }
            & :is(input[type="checkbox"], input[type="radio"] ){
                accent-color: var(--color-300);
            }
        }
    }
}

body button.wow-btn-vehicle-book {
	padding: 1rem 1.5rem;
	width: 100%;
	font-size: 1.25rem;
	font-weight: 500;
}


/* Booking steps */
body.admin-bar header.wow-booking-step {
    top: 32px;
}

/* Booking Steps */
body.wow-booking-steps form{
    --aside-width: 576px;

    header.wow-booking-step {
        background-color: var(--color-100);
        padding: 1.5rem 0;
        margin-bottom: 2.5rem;
        position: sticky;
        top: 0;
        z-index: 5;

        & h1 {
            margin: 0;
            font-size: 2rem;
            line-height: 3rem;
            font-weight: 500;

            
            @media screen and (max-width: 768px) {
                font-size: 1.5rem;
                line-height: 2rem;
            }
        }

        & .header-price-actions{
            display: flex;
            flex-direction: row;
            gap: 1.5rem;
            justify-content: space-between;

            @media screen and (max-width: 768px) {
                flex-direction: column;
                justify-content: flex-end;
                gap: 1rem;
            }

            & .header-price{
                display: flex;
                flex-direction: row;
                gap: 0.5rem;
                align-items: center;

                & small{
                    font-size: 0.875rem;
                    line-height: 1.5rem;
                    font-weight: 400;
                    color: var(--color-300);
                }
                & span{
                    font-size: 1.25rem;
                    line-height: 2rem;
                    font-weight: 500;
                    color: var(--color-800);
                }

                & a{
                    font-size: 0.75rem;
                    line-height: 1rem;
                    font-weight: 400;
                    color: var(--color-700);
                    text-decoration: underline;
                }
            }

            & .header-actions{
                display: flex;
                flex-direction: row;
                gap: 0.5rem;

                & button{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 1rem;
                    padding: 0.5rem;
                    font-size: 1rem;
                    line-height: 1.5rem;
                    font-weight: 600;
                    
                    &.btn-outline-dark{
                        background-color: transparent;
                        border: 1px solid var(--color-700);
                        color: var(--color-700);
                        aspect-ratio: 1 / 1;
                    }
                    &[type="submit"]{
                        padding: 0.5rem 1rem 0.5rem 1.5rem;
                        width: 100%;
                        max-width: 13rem;
                        justify-content: space-between;
                    }
                }
            }
        }
    }

    &>.container,
    &>*>.container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;

        --aside-width: 576px;

        @media screen and (max-width: 1024px) {
            --aside-width: 100%;
            gap: 1rem;
        }


        &>main{
            @media screen and (min-width: 1023px) {
                width: calc(100% - var(--aside-width) - 2rem);
            }

            &:has(>*:not(.wow-insurance-plans)) > *{
                max-width: 728px;
            }
        }
        
        /* Booking Sidebar */
        &>aside{
            width: var(--aside-width);
            max-width: 100%;

        }

    }

    
    /* Booking Sidebar */
    & aside.booking-summary-sidebar{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        width: var(--aside-width);
        max-width: 100%;

        &>section{
            background-color: var(--color-100);
            padding: 1.5rem;
            border-radius: 1rem;
            

            & img{
                max-width: 100%;
                height: auto;
                background-color: #ffffff;
                border-radius: 1rem;
            }

            & .vehicle-title-summary{
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 0.5rem;
                color: var(--color-800);
                font-size: 1rem;
                line-height: 1.5rem;
                font-weight: 500;
                height: 100%;

                &>h5{
                    line-height: 2rem;
                    display: flex;
                    flex-direction: column;

                    &>small{
                        font-size: 0.75rem;
                        line-height: 1rem;
                        font-weight: 500;
                    }
                }
            }

            & .booking-pickup-return{
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                &>div{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 1rem;

                    &>span{
                        font-size: 0.875rem;
                        font-weight: 500;
                        color: var(--color-400);
                        background-color: var(--color-200);
                        border-radius: 3rem;
                        padding: 0 1.5rem;
                        line-height: 1.5rem;
                        min-width: 7.5rem;
                        text-align: center;
                    }
                    &>div{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 0.5rem;
                        flex-grow: 1;
                    }

                    & svg{
                        color: var(--color-200);
                    }
                }
            }

            &#table-booking-summary-sidebar{
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                &>h6{
                    border-top: 1px solid var(--color-600);
                    color: var(--color-700);
                    font-size: 1rem;
                    line-height: 1.5rem;
                    font-weight: 400;
                    margin-top: 1rem;
                    padding-top: 1rem;
                        
                    &:has(+ ul:empty),
                    & + ul:empty {
                        display: none !important;
                    }
                }

                &>ul{
                    list-style: none;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;

                    & li{
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: start;
                        color: var(--color-800);
                        font-size: 0.875rem;
                        line-height: 1.5rem;
                        font-weight: 400;
                    }
                }
            }
        }
    }


    /* Insurances */
    & .wow-insurance-plans {
        display: grid;
        gap: 2rem;
        grid-gap: 2rem;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        align-items: end;

        @media screen and (max-width: 768px) {
            display: flex;
            flex-direction: column;
        }

        &>.insurance-plan {
            border: 1px solid var(--color-600);
            padding: 1rem;
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            overflow: hidden;

            &:hover {
                outline: 1px solid var(--color-300);
                outline-offset: 0.5rem;

                & :is([type="radio"], [type="checkbox"]):not(:checked) + label{
                    background: var(--color-1003);
                    color: var(--color-300);
                }
            }

            &[data-highlight]{
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;

                &:before{
                    content: attr(data-highlight);
                    background: var(--color-300);
                    border: 1px solid var(--color-300);
                    color: #fff;
                    text-align: center;
                    padding: 0 0.5rem;
                    margin: -1rem 0 1rem -1rem;
                    width: calc(100% + 2rem);
                }
            }

            &>section {
                margin: 0;
                flex: 1 0;
                align-content: space-between;
                align-items: flex-start;
                
                &>ul {
                    list-style: none;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;

                    &>li {
                        display: flex;
                        flex-direction: row;
                        gap: 0.5rem;
                        align-items: center;
                        font-size: 0.875rem;
                        line-height: 1.5rem;

                        &>span {
                            flex: 1 0;
                        }

                        &:not(.excluded) svg {
                            color: var(--color-200);
                        }

                        &.excluded {
                            color: var(--color-600);
                        }
                    }
                }

                &:first-child {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    gap: 2rem;
                    margin-bottom: 1.5rem;

                    &>.insurance-title {
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;

                        & h5{
                            font-size: 1.5rem;
                            line-height: 2.5rem;
                            font-weight: 500;
                            color: var(--color-800);
                        }

                        & :is(h5, p) {
                            margin: 0;
                        }
                    }

                    &>.insurance-price {
                        display: flex;
                        flex-direction: column;
                        align-items: end;
                        justify-content: center;
                        gap: 0;
                        font-size: 2.5rem;
                        line-height: 4rem;
                        font-weight: 500;
                        color: var(--color-300);
                    }

                    & small {
                        font-size: 0.75rem;
                        line-height: 1rem;
                        font-weight: 400;
                        color: var(--color-700);
                    }
                }

                &:not(:first-child) {
                    border-top: 1px solid var(--color-600);
                    padding-top: 1rem;
                }
            }
        }

        & input:is([type="radio"], [type="checkbox"]) {
            display: none;

            &+label {
                border: 1px solid var(--color-300);
                color: var(--color-300);
                padding: 1rem 1.5rem;
                border-radius: 3rem;
                font-size: 1.25rem;
                line-height: 1.5rem;
                font-weight: 500;
                cursor: pointer;
                display: flex;
                justify-content: center;
                gap: 0.25rem;
                margin: 1.5rem 0;

                &:hover{
                    background: var(--color-1003);
                }

                &::before {
                    content: attr(data-insurance-select);
                }
            }

            &:checked+label {
                background: var(--color-200);
                border-color: var(--color-200);
                color: #ffffff;

                &::before {
                    content: attr(data-insurance-selected);
                }
            }

        }

        & .insurance-plan-base {
            order: 1;
            grid-column: 1/-1;

            & :is([type="radio"], [type="checkbox"]){
                &+label {
                    margin: 0;
                }
            }
        }
    }

    & footer.wow-insurance-plans-footer{
        background-color: var(--color-100);
        padding: 3.5rem 0;
        margin-top: 3.5rem;

        &>.container{
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        & .wow-insurance-plans{
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            align-items: inherit;

            @media screen and (max-width: 768px) {
                display: flex;
                flex-direction: column;
            }
            
            &>.insurance-plan {
                flex-direction: row;
                gap: 1.5rem;
                
                @media screen and (max-width: 768px) {
                    flex-direction: column;
                }

                &>section {
                    &:first-child{
                        flex-wrap: wrap;

                        & > div{
                            flex: 1 1;
                        }
                        & > div.insurance-title{
                            flex-grow: 2;
                        }

                        & > label{
                            flex: 1 0 100%;
                            margin: 0;
                            height: fit-content;
                        }
                    }
                    
                    &:not(:first-child) {
                        border: 0;
                        padding: 0;
                        border-left: 1px solid var(--color-600);
                        padding-left: 1rem;
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        
                        @media screen and (max-width: 768px) {
                            border-left: 0;
                            padding-left: 0;
                            border-top: 1px solid var(--color-600);
                            padding-top: 1rem;
                        }
                    }
                }
            }
        }
    }
    
    & details{
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--color-700);
        border-radius: 1rem;
        padding: 1rem;
        transition: all 0.25s ease-in-out;

        &:hover{
            background-color: var(--color-100);
        }

        &>summary{
            display: flex;
            flex-direction: row;
            gap: 1rem;
            align-items: center;

            &::marker{
                content: none;
            }

            &>svg.arrow{
                transition: all 0.25s ease-in-out;
                transform: rotate(180deg);
            }

            &>section{
                display: flex;
                flex-direction: column;
                gap: 0;
                flex-grow: 1;

                &>h6{
                    color: var(--color-800);
                }

                &>small{
                    font-size: 0.75rem;
                    line-height: 1rem;
                    font-weight: 400;
                    color: var(--color-700);
                    display: flex;
                    flex-direction: row;
                    column-gap: 0.25rem;
                    align-items: center;
                    flex-wrap: wrap;

                    &>span{
                        font-weight: 500;
                        color: var(--color-300);
                    }
                }
            }
        }

        &::details-content{
            overflow: hidden;
            height: 0;
            /* Enable transitioning of `content-visibility` */
            transition: all 0.25s ease-in-out;  
            transition-behavior: allow-discrete;
        }
        
        &>p{
            font-size: 0.75rem;
            line-height: 1rem;
            font-weight: 400;
            color: var(--color-700);
            
            &:last-of-type{
                margin-bottom: 0;
            }
        }

        &[open]{
            &::details-content{
                height: auto;
                padding-top: 1rem;
                margin-top: 1rem;
                border-top: 1px solid var(--color-600);
            }
            
            &>summary {
                & > svg.arrow {
                    transform: rotate(0);
                }
            }

        }
    }

    /* Extras */
    & section.wow-booking-extras {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        &>section{
            display: flex;
            flex-direction: column;
            gap: 1rem;

            &>details{

                &>summary{
                    &>svg:not(.arrow){
                        color: var(--color-300);
                        flex-shrink: 0;
                        padding: 0.25rem;
                        background-color: var(--color-100);
                        border-radius: 0.5rem;
                        width: 2.5rem;
                        height: 2.5rem;
                    }
                    &:has(svg:first-of-type:is(:last-of-type)){
                        margin-left: 3.5rem;
                    }
                }

                &::details-content{
                    margin-left: 3.5rem;
                }
/* 
                &[open]{
                    &::details-content{
                        margin-left: 3.5rem;
                    }
                } */
            }
        }
    }


    /* Customer */
    & section.wow-booking-customer{
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & > h5:not(:first-of-type){
            margin-top: 1.5rem;
        }

        & section.boxed-section{
            border: 1px solid var(--color-600);
            border-radius: 1rem;

            &>.form-group{
                padding: 0.5rem;
                border-bottom: 1px solid var(--color-600);
                margin: 0;
            }
            &>*:not(.form-group){
                padding: 1rem;

                &.form-row{
                    padding-bottom: 0;
                }
            }
        }

        &>section.additional-driver{
            display: flex;
            flex-direction: column;
            gap: 1rem;
            
            &>h6{
                font-size: 1rem;
                line-height: 1.5rem;
                font-weight: 400;
                color: var(--color-800);
            }
        }

        & #bookingPaymentBlock{
            &>div>small{
                display: flex;
                font-size: 0.75rem;
                line-height: 1rem;
                font-weight: 400;
                color: var(--color-700);
                margin-top: 1rem;
                padding-top: 1rem;
                border-top: 1px solid var(--color-600);
            }
        }
    }
}