.cb--reservation .reservation-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 96%;
    max-width: 1300px;
    margin: 40px 0;
}

.cb--reservation .reservation-details .confirmation,
.cb--reservation .reservation-details .support {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px 0;
    color: var(--cb-color-3);
}
.cb--reservation .reservation-details .confirmation {
    gap: 20px 0;
    padding: 25px;
    box-sizing: border-box;
    border-style: solid;
    border-width: .5px;
    border-color: var(--cb-color-2-lighter);
    border-radius: var(--cb-border-radius-large);
    background-color: var(--cb-white);
}

@container cb--reservation (max-width: 1000px) {
    .cb--reservation .reservation-details {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .cb--reservation .reservation-details .support {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }
}


/* ------------------------------- */
/* ----------- booking ----------- */
/* ------------------------------- */

.cb--reservation .reservation-details .information {
    display: flex;
    flex-direction: row;
}
.cb--reservation .reservation-details .vehicle {
    flex: .25;
}
.cb--reservation .reservation-details .holder {
    flex: .75;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 15px 0;
}

.cb--reservation .reservation-details h1 {
    font-size: var(--font-size-largest);
}

.cb--reservation .reservation-details .vehicle img {
    width: 95%;
    max-width: 180px;
}

.cb--reservation .reservation-details .text {
    font-size: var(--font-size-small);
    line-height: 1.25rem;
}

.cb--reservation .reservation-details .booking-data {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin: 10px 0;
    padding: 20px;
    border-radius: var(--cb-border-radius-medium);
    background-color: var(--cb-color-2-lightest);
}
.cb--reservation .reservation-details .booking-data * {
    font-size: var(--font-size-small);
}
.cb--reservation .reservation-details .booking-data .data-point {
    display: flex;
    flex-direction: row;
    gap: 0 10px;
}
.cb--reservation .reservation-details .booking-data .data-point span {
    font-weight: bold;
}

.cb--reservation .reservation-details .shopping-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin: 30px 0 0;
    gap: 20px 0;
}
.cb--reservation .reservation-details .shopping-list .meeting span,
.cb--reservation .reservation-details .shopping-list .list-item {
    font-size: var(--font-size-small);
}

.cb--reservation .reservation-details .shopping-list .meeting {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 5px 0;
}
.cb--reservation .reservation-details .shopping-list .meeting div {
    font-weight: bold;
}

.cb--reservation .reservation-details .list-items,
.cb--reservation .reservation-details .list-total {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px 0;
    margin-top: -10px;
}
.cb--reservation .reservation-details .list-items {
    padding-bottom: 10px;
    border-style: solid;
    border-width: 0 0 1px;
    border-color: var(--cb-grey-lighter);
}
.cb--reservation .reservation-details .list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cb--reservation .reservation-details .list-item .data {
    text-align: right;
}

.cb--reservation .reservation-details .list-item.payment-online,
.cb--reservation .reservation-details .list-item.payment-local {
    font-weight: bold;
}

.cb--reservation .cancellation {
    color: var(--cb-cta-btn-color-1);
    font-size: var(--font-size-smaller);
}

@container cb--reservation (max-width: 600px) {
    .cb--reservation .reservation-details .vehicle {
        display: none;
        flex: 0;
    }
    .cb--reservation .reservation-details .holder {
        flex: 1;
    }
}


/* ------------------------------- */
/* ----------- actions ----------- */
/* ------------------------------- */

.cb--reservation .actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
}
.cb--reservation .reservation-details .actions {
    justify-content: space-between;
    margin: 10px 0;
}
.cb--reservation .cancel-confirmation .actions {
    justify-content: flex-end;
    margin: 30px 0;
}

.cb--reservation .actions .button {
    flex: 0 0 calc(50% - 5px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
    border-style: solid;
    border-width: .5px;
    border-color: var(--cb-cta-btn-color-1);
    border-radius: var(--cb-border-radius-medium);
    background-color: var(--cb-white);
    color: var(--cb-cta-btn-color-1);
    font-size: var(--font-size-small);
    font-weight: bold;
    text-align: center;
    user-select: none;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cb--reservation .actions .button:hover {
    border-color: var(--cb-cta-btn-color-1-dark);
    background-color: var(--cb-cta-btn-color-1-lighter);
    color: var(--cb-cta-btn-color-1-dark);
}
.cb--reservation .actions .button.main {
    border-color: var(--cb-cta-btn-color-1);
    background-color: var(--cb-cta-btn-color-1);
    color: var(--cb-white);
}
.cb--reservation .actions .button.main:hover {
    border-color: var(--cb-cta-btn-color-1-dark);
    background-color: var(--cb-cta-btn-color-1-dark);
    color: var(--cb-white);
}
.cb--reservation .actions .button.cancel {
    border-color: var(--cb-error-color);
    background-color: var(--cb-white);
    color: var(--cb-error-color);
}
.cb--reservation .actions .button.cancel:hover {
    border-color: var(--cb-error-color-dark);
    background-color: var(--cb-error-color-lightest);
    color: var(--cb-error-color-dark);
}
.cb--reservation .actions .button.close {
    border-color: var(--cb-grey-extra-light);
    background-color: var(--cb-grey-extra-light);
    color: var(--cb-color-3);
}
.cb--reservation .actions .button.close:hover {
    border-color: var(--cb-grey-lightest);
    background-color: var(--cb-grey-lightest);
    color: var(--cb-color-3);
}
.cb--reservation .actions .button .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-width: 2px;
    border-top: 2px solid transparent !important;
    border-radius: 50%;
    vertical-align: middle;
    animation: button-spin 1s linear infinite;
}
.cb--reservation .actions .button .spinner {
    border-color: var(--cb-white);
}
.cb--reservation .actions .button.cancel .spinner {
    border-color: var(--cb-error-color);
}
@keyframes button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cb--reservation .actions .button.disabled .button-text {
    display: none;
}
.cb--reservation .actions .button.disabled .spinner {
    display: flex;
}

@container cb--reservation (max-width: 700px) {
    .cb--reservation .reservation-details .actions {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
    }
    .cb--reservation .reservation-details .actions .button {
        flex: 0 0 calc(33.3% - 10px);
    }
}


/* ------------------------------- */
/* ----------- support ----------- */
/* ------------------------------- */

.cb--reservation .reservation-details .form-navigation {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px 0;
    padding: 25px;
    min-width: 310px;
    box-sizing: border-box;
    border-radius: var(--cb-border-radius-large);
    background-color: var(--cb-white);
    color: var(--cb-color-3);
}
.cb--reservation .reservation-details .form-navigation .text {
    font-size: var(--font-size-small);
}
.cb--reservation .reservation-details .form-navigation .change-booking {
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: .5px;
    border-color: var(--cb-color-3);
    border-radius: var(--cb-border-radius-medium);
    background-color: var(--cb-color-3);
    color: var(--cb-white);
    font-size: var(--font-size-small);
    font-weight: bold;
    text-align: center;
    user-select: none;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cb--reservation .reservation-details .form-navigation .change-booking:hover {
    border-color: var(--cb-color-3-dark);
    background-color: var(--cb-color-3-lightest);
    color: var(--cb-color-3-dark);
}

.cb--reservation .reservation-details .service {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px 0;
    padding: 25px;
    min-width: 310px;
    box-sizing: border-box;
    border-radius: var(--cb-border-radius-large);
    background-color: var(--cb-color-1);
    color: var(--cb-color-3);
}
.cb--reservation .reservation-details .service .topics a {
    display: block;
    margin: 5px 0;
    color: var(--cb-color-3);
    font-size: var(--font-size-small);
    outline: none;
    cursor: pointer;
    transition: color .2s ease;
}
.cb--reservation .reservation-details .service .topics a:hover {
    color: var(--cb-color-3-lighter);
}