/* ------------------------------- */
/* ------------- link ------------ */
/* ------------------------------- */

.cb--results-page .link {
    color: var(--cb-link-color-1);
    text-decoration: underline;
    cursor: pointer;
    transition: color .2s ease;
}
.cb--results-page .link:hover {
    color: var(--cb-link-color-1-dark);
}

/* ------------------------------- */
/* ------- custom checkbox ------- */
/* ------------------------------- */

.cb--checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.cb--checkbox > div {
    font-size: var(--font-size-small);
}
.cb--checkbox > input {
    display: none;
}
.cb--checkbox > span {
    position: relative;
    display: flex;
    flex: 0 0 15px;
    margin-right: 5px;
    width: 15px;
    height: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--cb-grey-lighter);
    border-radius: var(--cb-border-radius-mini);
    background-color: var(--cb-white);
    transition: all 0.3s ease;
}
.cb--checkbox.radio > span {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border-width: 2px;
    border-color: var(--cb-color-3);
}
.cb--checkbox > input:checked + span {
    background-color: var(--cb-color-3);
    border-color: var(--cb-color-3);
}
.cb--checkbox.radio > input:checked + span {
    background-color: var(--cb-white);
    border-color: var(--cb-color-3);
}
.cb--checkbox > input:checked + span::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 3.5px;
    height: 7.5px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: var(--cb-white);
    transform: rotate(45deg);
}
.cb--checkbox.radio > input:checked + span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    border-style: solid;
    border-width: 0;
    border-radius: 50%;
    background-color: var(--cb-color-3);
    transform: translate(-50%, -50%);
}
.cb--checkbox:hover > span {
    border-color: var(--cb-color-3);
}
.cb--checkbox > input:focus + span {
    outline: 2px solid var(--cb-color-3);
    outline-offset: 2px;
}


/* ------------------------------- */
/* -------- custom toggle -------- */
/* ------------------------------- */

.cb--toggle {
    position: relative;
    width: 45px;
    height: 28px;
}
.cb--toggle input {
    display: none;
}
.cb--toggle label {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: var(--cb-grey-extra-lighter);
    cursor: pointer;
    transition: background 0.3s;
}
.cb--toggle label::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cb-white);
    color: var(--cb-white);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    transition: 0.3s;
}
.cb--toggle input:checked + label {
    background-color: #009e73;
}
.cb--toggle input:checked + label::after {
    left: calc(100% - 24px);
    color: #009e73;
}


/* ------------------------------- */
/* ------- custom dropdown ------- */
/* ------------------------------- */

.dropdown-available svg {
    width: 10px;
    fill: var(--cb-color-3);
}
.cb--dropdown {
    position: absolute;
    z-index: 5;
    display: none;
    flex-direction: column;
    max-height: 250px;
    width: 100%;
    max-width: 100%;
    padding: 7.5px 0;
    overflow-y: scroll;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 8px -1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 8px -1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 8px -1px rgba(0,0,0,0.5);
    border-radius: var(--cb-border-radius-medium);
    background-color: var(--cb-white);
}
.cb--dropdown::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.cb--dropdown::-webkit-scrollbar-thumb {
    background: var(--cb-grey-lightest);
    border-radius: 3px;
}
.cb--dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.cb--dropdown::-webkit-scrollbar-button {
    display: none;
}
.cb--dropdown > .cb--dropdown-option {
    color: var(--cb-color-3);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background-color .2s ease;
}
.cb--dropdown > .cb--dropdown-option:first-child {
    padding: 0 10px 10px;
}
.cb--dropdown > .cb--dropdown-option:last-child {
    padding: 10px 10px 0;
}
.cb--dropdown > .cb--dropdown-option:not(:first-child):not(:last-child) {
    padding: 10px;
}
.cb--dropdown > .cb--dropdown-option:hover,
.cb--dropdown > .cb--dropdown-option.active {
    background-color: var(--cb-color-2-lightest);
    font-weight: bold;
}

/* ------------------------------- */
/* ---------- tool tip ----------- */
/* ------------------------------- */

.cb--tool-tip {
    z-index: 10;
    position: fixed;
    display: none;
    top: unset;
    left: unset;
    max-width: min(280px, calc(100vw - 32px));
    padding: 7.5px;
    border-radius: var(--cb-border-radius-small);
    background-color: var(--cb-color-3);
    color: var(--cb-white);
    font-size: var(--font-size-smaller);
}
.cb--tool-tip .pointer {
    position: absolute;
    width: 0;
    height: 0;
}


/* ------------------------------- */
/* ------ information sign ------- */
/* ------------------------------- */

.cb--main .info-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
}


/* ------------------------------- */
/* ------------ modal ------------ */
/* ------------------------------- */

.cb--modal {
    z-index: 9;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
}
.cb--modal .holder {
    overflow-y: scroll;
    max-width: 700px;
    max-height: 90vh;
    padding: 35px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--cb-grey-light);
    border-radius: var(--cb-border-radius-large);
    background-color: var(--cb-white);
    scrollbar-width: thin; /* FF */
    scrollbar-color: #999 transparent; /* FF */
}
.cb--modal .holder::-webkit-scrollbar {
    width: 6px;
}
.cb--modal .holder::-webkit-scrollbar-track {
    background: transparent;
}
.cb--modal .holder::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 3px;
}
.cb--modal .holder::-webkit-scrollbar-button {
    display: none;
    height: 0;
}
.cb--modal .content {
    margin: 0 0 25px;
}
.cb--modal .content > * {
    flex: 0 0 100%;
    color: var(--cb-color-3);
}
.cb--modal .content .title {
    margin: -10px 0 15px;
    font-size: var(--font-size-largest);
    font-weight: bold;
}
.cb--modal .content .sub-title {
    margin: 15px 0 0;
    font-size: var(--font-size-medium-small);
    font-weight: bold;
}
.cb--modal .content h4 {
    margin: 15px 0 10px;
}
.cb--modal .content h5 {
    margin: 10px 0 0;
    font-size: var(--font-size-small);
}
.cb--modal .content .text {
    margin: 4px 0;
    font-size: var(--font-size-small);
    line-height: 1.25rem;
}
.cb--modal .content table {
    width: 100%;
    margin: 15px 0;
    border-collapse: collapse;
    border-style: solid;
    border-color: var(--cb-color-3);
    border-width: 1px;
}
.cb--modal .content table th {
    padding: 10px;
    border-style: solid;
    border-color: var(--cb-color-3);
    border-width: 1px;
    font-size: var(--font-size-smaller);
    font-weight: bold;
    text-align: left;
}
.cb--modal .content table td {
    padding: 10px;
    border-style: solid;
    border-color: var(--cb-color-3);
    border-width: 1px;
    font-size: var(--font-size-smaller);
}

/* A legal document arrives as CMS markup - headings, paragraphs and lists - rather than the
   .title / .sub-title / .text divs every other modal builds, so the tags need their own mapping
   onto the same type scale. Scoped to the modifier on purpose: the rental agent's terms render
   h4 and h5 into this very container and must keep the styling they already have. */
.cb--modal.legal-document .content h1 {
    display: none;
}
.cb--modal.legal-document .content h2 {
    margin: 20px 0 5px;
    font-size: var(--font-size-medium-small);
    font-weight: bold;
}
.cb--modal.legal-document .content h3,
.cb--modal.legal-document .content h4,
.cb--modal.legal-document .content h5,
.cb--modal.legal-document .content h6 {
    margin: 15px 0 3px;
    font-size: var(--font-size-small);
    font-weight: bold;
}
.cb--modal.legal-document .content p {
    margin: 4px 0;
    font-size: var(--font-size-small);
    line-height: 1.25rem;
    overflow-wrap: break-word;
}
.cb--modal.legal-document .content ul,
.cb--modal.legal-document .content ol {
    margin: 8px 0;
    padding-left: 20px;
    box-sizing: border-box;
}
.cb--modal.legal-document .content li {
    margin: 5px 0;
    font-size: var(--font-size-small);
    line-height: 1.25rem;
    overflow-wrap: break-word;
}
.cb--modal.legal-document .content li ul,
.cb--modal.legal-document .content li ol {
    margin: 5px 0;
}
.cb--modal.legal-document .content a {
    color: var(--cb-color-3-light);
    text-decoration: underline;
}
.cb--modal.legal-document .content a:hover {
    color: var(--cb-color-3);
}
.cb--modal .close:has(svg.close) {
    justify-content: flex-end;
    margin: 0 0;
}

/* the legal-document bar. .holder is the scroll container, so the bar sticks to the top of it while
   the document scrolls underneath.

   The holder gives up its top padding and the bar supplies that spacing as its own instead. It must
   not be done with a negative top margin: a sticky box is constrained by its *margin* box, so a
   -35px top margin parks the bar 35px below the top edge and leaves exactly that much of a gap for
   the text to scroll through. The side bleed is safe as a negative margin, with width: auto so the
   box stretches rather than shifting. Both track the holder's padding at every breakpoint below. */
.cb--modal.legal-document .holder {
    padding-top: 0;
}
.cb--modal.legal-document .close:has(svg.close) {
    z-index: 12;
    position: sticky;
    top: 0;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 20px;
    width: auto;
    margin: 0 -35px;
    padding: 35px 35px 15px;
    background-color: var(--cb-white);
}
.cb--modal .legal-bar {
    display: none;
}
.cb--modal.legal-document .legal-bar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 3px 0;
    min-width: 0;
}
.cb--modal .legal-bar .document-title {
    font-size: var(--font-size-medium-small);
    font-weight: bold;
    color: var(--cb-color-3);
}
/* The title is the trigger's own text, and some triggers read mid-sentence - the reservation page
   links "our Privacy Policy" after an ampersand, lowercase in every language. As a heading it wants
   a capital, and only the first letter can be touched without mangling the rest. */
.cb--modal .legal-bar .document-title::first-letter {
    text-transform: uppercase;
}
.cb--modal .legal-bar .document-link {
    font-size: var(--font-size-smaller);
    color: var(--cb-color-3-light);
    text-decoration: underline;
}
.cb--modal .legal-bar .document-link:hover {
    color: var(--cb-color-3);
}
.cb--modal svg.close {
    z-index: 11;
    width: 15px;
    fill: var(--cb-grey-dark);
    cursor: pointer;
}
.cb--modal svg.close:hover {
    fill: var(--cb-grey-light);
}
.cb--modal .close .btn {
    padding: 12.5px 20px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--cb-color-3-light);
    border-radius: var(--cb-border-radius-medium);
    background-color: var(--cb-white);
    color: var(--cb-color-3-light);
    font-size: var(--font-size-smaller);
    font-weight: bold;
    cursor: pointer;
    transition: background-color .2s ease;
}
.cb--modal .close .btn:hover {
    background-color: var(--cb-color-3-extra-lightest);
}
.cb--modal .modal-loader {
    position: relative;
    align-self: center;
    margin: 100px 0;
}

@container cb--body (max-width: 900px) {
    .cb--modal {
        padding: 15px;
    }
    .cb--modal .holder {
        padding: 35px 25px;
    }
    .cb--modal.legal-document .close:has(svg.close) {
        margin: 0 -25px;
        padding: 35px 25px 15px;
    }
}
@container cb--body (max-width: 575px) {
    .cb--modal {
        padding: 10px;
    }
    .cb--modal .holder {
        padding: 30px 20px;
    }
    .cb--modal.legal-document .close:has(svg.close) {
        margin: 0 -20px;
        padding: 30px 20px 15px;
    }
}


/* ------------------------------- */
/* ------ notification modal ----- */
/* ------------------------------- */

.cb--notification-modal {
    z-index: 9;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
}
.cb--notification-modal .holder {
    overflow-y: scroll;
    max-height: 90vh;
    max-width: 750px;
    scrollbar-width: thin; /* FF */
    scrollbar-color: #999 transparent; /* FF */
}
.cb--notification-modal .holder::-webkit-scrollbar {
    width: 6px;
}
.cb--notification-modal .holder::-webkit-scrollbar-track {
    background: transparent;
}
.cb--notification-modal .holder::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 3px;
}
.cb--notification-modal .holder::-webkit-scrollbar-button {
    display: none;
    height: 0;
}
.cb--main .notification .text {
    line-height: 1.25rem;
}


/* ------------------------------- */
/* ------- highlight error ------- */
/* ------------------------------- */

.cb--highlight-error {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 0 8px;
    width: 100%;
    margin: 5px 0 5px;
}
div:has(.error) + .cb--highlight-error,
label.error + .cb--highlight-error,
input.error ~ .cb--highlight-error {
    display: flex;
}
.cb--highlight-error .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: var(--cb-error-color);
    color: var(--cb-white);
    font-size: var(--font-size-smallest);
    font-weight: bold;
}
.cb--highlight-error .text {
    color: var(--cb-error-color);
    font-size: var(--font-size-smaller);
}


/* ------------------------------- */
/* ------- ratings overview ------ */
/* ------------------------------- */

.cb--rating {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0 5px;
    font-size: var(--font-size-smaller);
}
.cb--rating .score {
    padding: 2.5px 5px;
    border-radius: var(--cb-border-radius-mini);
    background-color: var(--cb-color-2-dark);
    color: var(--cb-white);
    font-weight: bold;
}
.cb--rating .compliment {
    color: var(--cb-grey-light);
}
.cb--rating svg.dot {
    width: 12px;
}
.cb--rating svg.dot path {
    fill: var(--cb-grey-light);
}
.cb--rating .review-amount {
    color: var(--cb-grey-light);
}


/* ------------------------------- */
/* ------- notification div ------ */
/* ------------------------------- */

.cb--main .notification {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-style: solid;
    border-width: 2px;
    border-radius: var(--cb-border-radius-large);
}
.cb--main .general-notification {
    background-color: var(--cb-color-2-lightest);
    border-color: var(--cb-color-2-lighter);
}
.cb--main .error-notification {
    background-color: var(--cb-error-color-lightest);
    border-color: var(--cb-error-color);
}
.cb--main .notification .title {
    margin: 0 0 10px;
    color: var(--cb-color-3);
    font-size: var(--font-size-large);
    font-weight: bold;
}
.cb--main .notification .text {
    margin: 0 0 30px;
    color: var(--cb-color-3);
    font-size: var(--font-size-small);
}
.cb--main .notification .actions {
    display: flex;
    flex-direction: row;
    gap: 0 15px;
}
.cb--main .notification .action {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7.5px 15px;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--cb-border-radius-small);
    font-size: var(--font-size-small);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: color .2s linear, background-color .2s linear, border-color .2s linear;
}
.cb--main .general-notification .action {
    border-color: var(--cb-cta-btn-color-1);
    background-color: var(--cb-white);
    color: var(--cb-cta-btn-color-1);
}
.cb--main .general-notification .action:hover {
    border-color: var(--cb-cta-btn-color-1-dark);
    color: var(--cb-cta-btn-color-1-dark);
}
.cb--main .general-notification .action.main {
    background-color: var(--cb-cta-btn-color-1);
    color: var(--cb-white);
}
.cb--main .general-notification .action.main:hover {
    background-color: var(--cb-cta-btn-color-1-dark);
    color: var(--cb-white);
}
.cb--main .error-notification .action {
    border-color: var(--cb-error-color);
    background-color: var(--cb-white);
    color: var(--cb-error-color);
}
.cb--main .error-notification .action:hover {
    border-color: var(--cb-error-color-dark);
    color: var(--cb-error-color-dark);
}
.cb--main .error-notification .action.main {
    background-color: var(--cb-error-color);
    color: var(--cb-white);
}
.cb--main .error-notification .action.main:hover {
    background-color: var(--cb-error-color-dark);
    color: var(--cb-white);
}
.cb--main .notification .close {
    position: absolute;
    display: none;
    top: 20px;
    right: 20px;
    width: 15px;
    fill: var(--cb-grey-dark);
    cursor: pointer;
}
.cb--main .notification .close:hover {
    fill: var(--cb-grey-light);
}
.cb--main .notification.show-close .close {
    display: block;
}


/* ------------------------------- */
/* ------- notification div ------ */
/* ------------------------------- */

.cb--main .general-loader {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side, var(--cb-color-3) 90%, var(--cb-color-3-transparent-100));
    background: 
        var(--_g) 0%   50%,
        var(--_g) 50%  50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: general-loader 1s infinite linear;
}
@keyframes general-loader {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}