#reservation-page .general-header {
    background-image: url("/assets/images/bg/pigeon-beach.jpg");
}

.hq-rental-software-integration {
    width        : 100%;
    border-radius: 4px;
    overflow     : hidden;
}

#itinerary-section div.inner,
#vehicle-selection-section div.inner,
#vehicle-add-ons div.inner,
#final-section div.inner {
    padding: 60px var(--general-padding);
}

#itinerary-section div.inner>h1,
#vehicle-selection-section div.inner>h1,
#vehicle-add-ons div.inner>h1,
#final-section div.inner>h1 {
    margin   : 0 0 60px;
    font-size: 26px;
}

.reservation-flow-container {
    display         : flex;
    padding         : 30px;
    gap             : 60px;
    text-align      : left;
    background-color: #fff;
}

.reservation-flow-container>div.left {
    width: 100%;
}

#itinerary-section div.inner div.left {
    width: 100%;
}

#itinerary-section div.inner div.left>div h2 {
    margin   : 0 0 30px;
    font-size: 16px;
}

.main-itinerary-box {
    border       : solid 2px var(--primary);
    padding      : 30px;
    margin-bottom: 30px;
}

.main-itinerary-box h6 {
    font-size: 12px;
    margin   : 0 0 5px;
}

.main-itinerary-box .checkbox-container {
    margin: 10px 0 24px;
}

.main-itinerary-box .custom-select.return {
    margin-bottom: 24px;
}

#reservation-steps {
    background: #fff;
}

#reservation-steps div.inner {
    display        : flex;
    justify-content: space-between;
    gap            : 36px;
    max-width      : var(--max-width);
    width          : 100%;
    flex-direction : row;
    text-align     : left;
    padding        : 60px var(--general-padding);
}

.reservation-step {
    width         : 100%;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    font-size     : 14px;
    font-weight   : 600;
    cursor        : pointer;
}

.reservation-step.active {
    box-shadow: 0 0 12px 9px rgba(var(--primary-rgb-vals), .2);
    transform : scale(1.01);
    cursor    : default;
}

.reservation-step>* {
    width: 100%;
}

.reservation-step .header {
    display   : flex;
    background: #2a404580;
    height    : 54px;
}

.reservation-step.active .header {
    background: var(--black);
    color     : var(--white);
}

.reservation-step .header span {
    min-width       : 54px;
    height          : 54px;
    background-color: var(--black);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--primary);
    font-size       : 20px;
    font-weight     : 800;
    transition      : background-color 0.3s, color 0.3s;
}

.reservation-step .header h2 {
    font-size     : 18px;
    text-transform: capitalize;
    width         : 100%;
    height        : 100%;
    margin        : 0;
    padding-left  : 15px;
    display       : flex;
    align-items   : center;
    transition    : all ease 0.3s;
}

.reservation-step .body {
    background-color: var(--white);
    color           : var(--black);
    padding         : 30px;
    transition      : background-color 0.3s, color 0.3s, height 0.3s, padding 0.3s;
    overflow        : hidden;
    height          : 100%;
}

.reservation-step .body>div {
    margin-bottom: 30px;
}

.reservation-step .body h6 {
    margin   : 0 0 8px;
    font-size: 14px;
}

.reservation-step .body p {
    margin     : 0;
    font-weight: normal;
}

.reservation-step.active .header span {
    /* color: var(--primary); */
    background: var(--primary);
    color     : var(--white);
}

.reservation-step.active .body {
    background: var(--primary);
    color     : var(--white);
}

#reservation-summary {
    max-width: 430px;
    width    : 100%;
    position : relative;
}

.change-car-btn {
    position     : absolute;
    right        : 0;
    font-size    : 12px;
    cursor       : pointer;
    height       : fit-content;
    padding      : 2px 4px;
    border-radius: 4px;
}

#reservation-summary>h5 {
    margin   : 0 0 8px;
    font-size: 16px;
}

#reservation-summary>h6 {
    margin        : 0;
    font-weight   : 400;
    font-size     : 14px;
    line-height   : 22px;
    text-transform: none;
}

#reservation-summary div.car.summary {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    height         : 184px;
    justify-content: center;
    padding        : 12px;
}

#reservation-summary div.car.summary>img {
    height    : 100%;
    width     : 100%;
    object-fit: contain;
}

#reservation-summary div.car.summary>div:first-child {
    width          : 24px;
    height         : 24px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : #ccc;
    color          : #fff;
    font-size      : 30px;
    font-weight    : 400;
    transition     : background-color 0.3s;
    cursor         : pointer;
}

#reservation-summary div.car.summary>div:first-child:hover {
    background-color: #2a4045;
}

#reservation-summary div.car.summary>div:last-child {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    height         : 42px;
    width          : 154px;
    background     : var(--primary);
    border-radius  : 2px;
    cursor         : pointer;
    font-weight    : 800;
    font-size      : 12px;
    text-transform : uppercase;
    margin-top     : 20px;
}

#reservation-summary div.summary h6 {
    margin   : 0 0 12px;
    font-size: 16px;
}

#reservation-summary div.rate.summary,
#reservation-summary div.add-ons.summary {
    margin-bottom: 24px;
}

#reservation-summary div.summary:not(.car)>div {
    display   : flex;
    background: #f4f4f4;
    padding   : 10px 20px;
}

#reservation-summary div.summary:not(.car)>div>span:first-child {
    margin-right: auto;
}

#reservation-summary div.summary:not(.car)>div>span:nth-child(2) {
    margin-right: 100px;
}

#reservation-summary .estimated-total {
    background     : #eee;
    display        : flex;
    align-items    : center;
    height         : 100px;
    padding        : 30px;
    justify-content: space-between;
    font-weight    : 700;
}

.discount-tool-tip {
    background     : var(--black);
    width          : 14px;
    display        : inline-flex;
    height         : 14px;
    border-radius  : 100%;
    color          : var(--white);
    justify-content: center;
    position       : relative;
    top            : 0px;
    font-size      : 11px;
    font-weight    : bold;
    cursor         : pointer;
    margin-left    : 6px;
}

.discount-tool-tip>div {
    background    : var(--primary);
    position      : absolute;
    top           : 24px;
    right         : 0;
    display       : flex;
    flex-direction: column;
    white-space   : nowrap;
    padding       : 24px;
    color         : var(--black);
    font-weight   : 500;
    font-size     : 14px;
    gap           : 4px;
    opacity       : 0;
    pointer-events: none;
    transition    : opacity ease 0.4s;
}

.discount-tool-tip:hover>div {
    opacity       : 1;
    pointer-events: all;
}

#vehicles {
    display       : flex;
    flex-direction: column;
    gap           : 12px;
}

.vehicle-container {
    height          : 220px;
    display         : flex;
    width           : auto;
    padding         : 36px 24px;
    border-radius   : 4px;
    background-color: #fff;
    text-align      : left;
}

.vehicle-container.active {
    background: var(--primary);
    color     : var(--white);
    box-shadow: 0 0 12px 9px rgba(var(--primary-rgb-vals), .2);
}

.vehicle-container img {
    height      : 100%;
    margin-right: 40px;
    width       : 250px;
    object-fit  : cover;
}

.vehicle-container div.center {
    display       : flex;
    flex-direction: column;
}

.vehicle-name {
    margin   : 0;
    font-size: 20px;

}

.vehicle-type {
    font-size: 14px;
}

.vehicle-container div.center>div:last-child {
    display    : flex;
    align-items: center;
    margin     : auto 0;
    gap        : 20px;
}

.vehicle-container div.center>div:last-child>div {
    display       : flex;
    align-items   : center;
    gap           : 4px;
    font-size     : 12px;
    color         : #2a4045;
    text-transform: uppercase;
}

.vehicle-container.active div.center>div:last-child>div {
    color: var(--white);
}

.vehicle-container div.center>div:last-child>div svg {
    width: 20px;
    fill : var(--primary);
}

.vehicle-container div.center>div:last-child>div svg.add-stroke {
    stroke: var(--primary);
}

.vehicle-container.active div.center>div:last-child>div svg {
    fill: var(--white);
}

.vehicle-container div.right {
    margin-left    : auto;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    gap            : 12px;
}

.vehicle-container div.right>div:not(.continue-btn) {
    display    : flex;
    align-items: center;

}

.vehicle-container div.right>span {
    font-size     : 12px;
    border-bottom : dashed 1px var(--grey-dark);
    padding-bottom: 2px;
}

.vehicle-container div.right>div.continue-btn {
    border-radius: 4px;
    width        : 120px;
}

.vehicle-container.active div.right>div.continue-btn {
    background-color: var(--black);
    border-color    : var(--black);
}

.vehicle-container.active div.right>div.continue-btn:hover {
    color: var(--white);
}

.add-on-container {
    margin-bottom: 60px;
}

.add-on-container .top {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    gap            : 24px;
}

.add-on-container .top .left h2 {
    margin   : 0;
    font-size: 14px;
}

.more-add-on-info {
    margin-top : 4px;
    gap        : 4px;
    display    : flex;
    align-items: center;
    cursor     : pointer;
    width      : max-content;
}

.more-add-on-info span {
    font-size     : 11px;
    text-transform: uppercase;
    border-bottom : solid 1px var(--primary);
    font-weight   : 500;
    color         : var(--primary);
}

.more-add-on-info svg {
    width : 14px;
    stroke: var(--primary);
}

.add-on-container.viewing-info svg {
    transform: rotate(180deg);
}

.add-on-btn::before {
    content: "ADD";
}

.add-on-btn.added::before {
    content: "REMOVE";
}

.add-on-btn.added.show-added::before {
    content: "ADDED";
}

.add-on-btn.show-removed::before {
    content: "REMOVED";
}

.add-on-btn {
    min-width      : 90px;
    width          : 90px;
    border         : solid 2px var(--primary);
    border-radius  : 4px;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    text-transform : uppercase;
    font-size      : 12px;
    font-weight    : 700;
    height         : 45px;
    transition     : background-color 0.3s, color 0.3s;
}

.add-on-btn.added {
    background-color: var(--primary);
    color           : var(--white);
}

@media (hover: hover) {
    .add-on-btn:hover {
        background-color: var(--primary);
        color           : var(--white);
    }
}

.add-on-container>p {
    margin-top: 30px;
    font-size : 13px;
    display   : none;
}

.mutiple-input-container {
    display: flex;
    gap    : 30px;
}

#final-details-form {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}

#final-details-form .continue-btn {
    margin-top: 30px;
}

.reset-data {
    display        : flex;
    justify-content: center;
    margin         : 24px auto 0;
    align-items    : center;
    font-weight    : 400;
    font-size      : 18px;
    gap            : 8px;
    cursor         : pointer;
}

.reset-data svg {
    width: 18px;
}


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

    #reservation-steps div.inner {
        flex-direction: column;
        align-items   : center;
        gap           : 0;
    }

    .reservation-step {
        max-width: 580px;
    }

    .reservation-step.active {
        transform : scale(1);
        box-shadow: none;
    }

    .reservation-step.active .body {
        padding-left: 54px;
        height      : auto;
    }

    .reservation-step:not(.active) .body {
        padding: 0;
        height : 0;
    }

    .reservation-flow-container {
        flex-direction: column;
    }

    #reservation-summary {
        max-width: 100%;
    }

}

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

    #reservation-steps div.inner {
        padding: 32px;
    }

    .reservation-step {
        max-width: 100%;
    }

    #vehicles {
        flex-wrap      : wrap;
        flex-direction : row;
        justify-content: center;
    }

    .vehicle-container {
        height        : 450px;
        width         : calc(50% - 6px);
        flex-direction: column;
        text-align    : center;
    }

    .vehicle-container img {
        margin    : auto;
        max-height: 135px;
    }

    .vehicle-container div.center {
        margin-top: 24px;
        gap       : 12px;
    }

    .vehicle-container div.center>div:last-child {
        width          : 100%;
        justify-content: center;
        flex-wrap      : wrap;
        max-width      : 330px;
        margin         : auto;
    }

    .vehicle-container div.right {
        margin: 20px auto 0;
        width : 100%;
    }

    .vehicle-container div.right>div.continue-btn {
        width: 100%;
    }

}

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

    #reservation-steps div.inner {
        padding: 0 32px;
    }

    .reservation-flow-container {
        padding: 12px;
    }

    .vehicle-container {
        width: 100%;
    }

    .mutiple-input-container {
        gap: 12px
    }

    .add-on-container .top {
        gap: 12px;
    }

    .add-on-btn {
        min-width: 70px;
        width    : 70px;
    }
}