body {
    background-color: white;
}

main {
    background-color: white;
    width: min(1320px, 95vw);
    max-width: calc(var(--body-max-width) - 30px);
    gap: 1rem !important;
    margin-inline: auto;
    margin-top: calc(var(--header-height) + 1rem) !important;
}

.title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: black;
}

/* history links */
.history-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.villa-single__breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.villa-single__breadcrumb-bar .history-links {
    flex: 1;
    min-width: 0;
}

.villa-single__breadcrumb-bar .villa-tabs__icons-container {
    flex-shrink: 0;
}

.villa-main-container > * {
    width: 50%;
}

.villa-main-container > .row.w-100,
.villa-main-container > .villa-single__content-row {
    width: 100%;
    flex: 0 0 100%;
}

.villa-single__content-row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
}

.villa-single__main {
    min-width: 0;
}

.villa-single__booking {
    width: 320px;
    max-width: 100%;
}

.history-link {
    font-size: var(--fs-xs);
    color: rgb(153, 153, 153);
    font-weight: 600;
}

.history-links .link-icon svg path {
    fill: rgb(153, 153, 153);
}

.history-link:nth-last-child(1) {
    color: black;
}

.modal-container {
    position: fixed;
    left: 50%;
    top: 50%;
    max-width: 80vw;
    max-height: 80dvh;
    background-color: white;
    transform: translate(-50%, -50%);
    border-radius: min(1rem, 1vw);

    pointer-events: none;
    transition: 0.3s;
    opacity: 0;
    z-index: -1;
}

.pswp {
    z-index: 99999999 !important;
}

.pswp .pswp__hide-on-close {
    opacity: 1 !important;
}

.modal-under-layer {
    background-color: rgba(0, 0, 0, 0.305);
    backdrop-filter: blur(2px);
    left: 0;
    top: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 10;

    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.modal-under-layer.active {
    opacity: 1;
    pointer-events: auto;
    transition: 0.2s;
}

body:has(.modal-container.active) {
    overflow: hidden;
}

.close-modal-trigger.corner {
    position: absolute;
    left: 1rem;
    top: 1rem;
    cursor: pointer;
    z-index: 1;
}

.close-modal-trigger.corner svg path {
    stroke: black;
}

#villaSingle {
    --villa-sticky-tabs-height: 0px;
    --villa-section-scroll-gap: 12px;
}

#villaSingle .hotel-observer-section {
    scroll-margin-top: calc(
        var(--header-height, 60px) + var(--villa-sticky-tabs-height, 0px) + var(--villa-section-scroll-gap)
    );
}


/* comments (villa single) */
.hotel__comments-container {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
    gap: 1rem;
    width: 100%;
}

.hotel__comments-container .comment-form {
    border: 1px solid #dddddd;
    padding: 1rem;
    border-radius: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: calc(var(--fs-sm) - 0.05rem);
    line-height: 1.6;
}

.comment-alert--success {
    background: rgba(17, 185, 95, 0.1);
    color: #0f8f4a;
    border: 1px solid rgba(17, 185, 95, 0.35);
}

.comment-alert--error {
    background: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* VILLA MAIN CONTAINER */
.villa-main-container {
    display: flex;
    flex-wrap: wrap;
}

.villa__title-container {
    display: block;
}

.villa__title-main {
    flex: 1;
    min-width: 0;
}

.villa__title-heading {
    margin: 0 0 0.5rem;
    line-height: 1.55;
    color: var(--text-dark);
}

.villa__title-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.villa__title-rating-star {
    line-height: 0;
}

.villa__title-star-icon {
    display: block;
}

.villa__title-rating-meta {
    color: var(--text-muted);
}

.villa__title-bookings-badge {
    background-color: var(--bg-muted);
    color: var(--text-dark, #374151);
}

.villa__title-location {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--text-light);
    line-height: 1.65;
}

.villa__title-location-icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 0.1rem;
    color: var(--text-muted);
}

.villa__highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.villa__highlight {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.villa__highlight-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.villa__highlight-icon svg {
    display: block;
}

.villa__highlight-icon--blue {
    background-color: #e8f1ff;
    color: #2f6fed;
}

.villa__highlight-icon--purple {
    background-color: #f1ebff;
    color: #7b4fd6;
}

.villa__highlight-icon--green {
    background-color: #e8f5ec;
    color: #1f7a45;
}

.villa__highlight-icon--teal {
    background-color: #e3f6f8;
    color: #0d8f9b;
}

.villa__highlight-copy {
    min-width: 0;
}

.villa__highlight-label {
    color: var(--text-dark);
    line-height: 1.45;
}

.villa__highlight-value {
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.15rem;
}


.villa__about-title {
    color: var(--text-dark);
    margin-bottom: 0.85rem;
}

.villa__about-wrap {
    gap: 0.25rem;
}

.villa__about-text {
    line-height: 1.75;
    color: var(--text-light);
}

.villa__about-toggle {
    width: 100%;
    cursor: pointer;
    box-shadow: 0 -10px 40px 15px white;
}

.villa__about-toggle.is-expanded {
    box-shadow: none;
}

.villa__about-toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.35s ease;
}

.villa__about-toggle.is-expanded .villa__about-toggle-icon {
    transform: rotate(180deg);
}


.villa__facilities-title {
    color: var(--text-dark);
}

.villa__facilities-link {
    cursor: pointer;
    white-space: nowrap;
}

.villa__facilities-link-icon {
    flex-shrink: 0;
}

.villa__facilities-grid {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
}

.villa__facilities-item {
    min-height: auto;
}

.villa__facilities-label {
    color: var(--text-light);
    line-height: 1.5;
    min-width: 0;
}

.villa__facilities-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5c6b7a;
}

.villa__facilities-icon svg {
    display: block;
}

.villa__stay-timing-title {
    color: var(--text-dark);
}

.villa__stay-timing-grid {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
}

.villa__stay-timing-box {
    border: 1px solid #e8eaef;
    border-radius: 16px;
    padding: 1.2rem 1.35rem;
    background-color: #fff;
    box-shadow: none;
}

.villa__stay-timing-label {
    color: var(--text-dark);
    line-height: 1.5;
    text-align: center;
}

.villa__stay-timing-clock {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.villa__stay-timing-clock__svg {
    display: block;
    width: 4rem;
    height: 4rem;
}

.villa__stay-timing-clock__time {
    fill: #1a1a1a;
    font-weight: 700;
    font-family: inherit;
}

.villa__cancellation-policy-header {
    row-gap: 0.75rem;
}

.villa__cancellation-policy-title {
    color: var(--text-dark);
}

.villa__cancellation-policy-text {
    color: var(--text-light);
    line-height: 1.75;
}

.villa__stay-rules-status--success {
    color: #3cb878;
}

.villa__stay-rules-status--danger {
    color: #e25555;
}

.villa__stay-rules-status--warning {
    color: #e8943a;
}

.villa__trust-item {
    border-radius: 14px;
    padding: 0.65rem 0.75rem;
    min-height: 3.25rem;
}

.villa__trust-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
}

.villa__trust-icon svg {
    display: block;
}

.villa__trust-text {
    line-height: 1.45;
    text-align: end;
    min-width: 0;
}

.villa__trust-item--purple {
    background-color: #f4f0ff;
    color: #5f4db3;
}

.villa__trust-item--purple .villa__trust-icon {
    background-color: #e7ddff;
    color: #5f4db3;
}

.villa__trust-item--orange {
    background-color: #fff6ee;
    color: #b8652d;
}

.villa__trust-item--orange .villa__trust-icon {
    background-color: #ffe8d6;
    color: #b8652d;
}

.villa__trust-item--blue {
    background-color: #eef6ff;
    color: #2f6fc9;
}

.villa__trust-item--blue .villa__trust-icon {
    background-color: #dcecff;
    color: #2f6fc9;
}

.villa__trust-item--green {
    background-color: #edf8f1;
    color: #1f7a45;
}

.villa__trust-item--green .villa__trust-icon {
    background-color: #d9f0e2;
    color: #1f7a45;
}

@media (max-width: 992px) {
    .history-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .history-link {
        font-size: calc(var(--fs-md) - 0.1rem);
    }

    .villa__tabs-container {
        width: 100%;
    }

    .villa-main-container {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .villa-single__content-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .villa-single__booking {
        width: 100%;
        display: contents;
    }

    .villa__highlights {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .villa__stay-timing-box {
        padding: 1rem 0.5rem;
    }

    .villa__stay-timing-clock__svg {
        width: 3.25rem;
        height: 3.25rem;
    }
}