/* ============================================================
   ROOM DETAIL — single-column flow
   Layout (per screenshot):
     breadcrumb → title → media → description → booking → facilities
   All values come from utility.css design tokens.
   ============================================================ */
.room-detail {
    background: var(--color-neutral-100);
    padding: var(--space-6) 0 var(--space-12);
    color: var(--color-neutral-800);
}

/* ---------- Breadcrumb ---------- */
.room-detail__breadcrumb {
    margin-bottom: var(--space-5);
}

.room-detail__breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.room-detail__breadcrumb-item,
.room-detail__breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    color: var(--color-neutral-600);
    font-family: var(--font-sora);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.room-detail__breadcrumb-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.room-detail__breadcrumb-item a:hover,
.room-detail__breadcrumb-item a:focus-visible {
    color: var(--a11y-link);
}

.room-detail__breadcrumb-item--current {
    color: var(--color-neutral-900);
    font-weight: var(--font-semibold);
}

.room-detail__breadcrumb-sep i,
.room-detail__breadcrumb-sep i svg {
    width: var(--space-4);
    height: var(--space-4);
}

/* ---------- Title ---------- */
.room-detail__title {
    margin: 0 0 12px;
    color: var(--color-neutral-900);
    font-family: var(--font-cormorant);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: 1.1;
    letter-spacing: 0.01em;
}

/* ---------- Media (single image OR slider) ---------- */
.room-detail__media {
    position: relative;
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-neutral-300);
    border-radius: 0;
    overflow: hidden;
    background: var(--color-neutral-200);
}

.room-detail__figure {
    margin: 0;
}

.room-detail__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background: var(--color-neutral-200);
}

/* No-image placeholder */
.room-detail__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    aspect-ratio: 16 / 7;
    background:
        radial-gradient(120% 120% at 100% 50%,
            var(--primary-dark) 0%,
            var(--primary-darker) 100%),
        var(--primary-darker);
    color: var(--primary-contrast);
    font-family: var(--font-sora);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.room-detail__placeholder svg {
    width: var(--space-12);
    height: var(--space-12);
    stroke: var(--primary-contrast);
}

/* ---------- Slider (multiple images) ---------- */
.room-detail__slider {
    position: relative;
    overflow: hidden;
}

.room-detail__slider .swiper-slide {
    height: auto;
}

/* Nav arrows */
.room-detail__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: var(--space-10);
    height: var(--space-10);
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-neutral-900) 65%, transparent);
    color: var(--primary-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.room-detail__nav:hover,
.room-detail__nav:focus-visible {
    background: var(--color-neutral-900);
    transform: translateY(-50%) scale(1.06);
    outline: none;
}

.room-detail__nav:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-alpha-40);
}

.room-detail__nav svg {
    width: var(--space-5);
    height: var(--space-5);
}

.room-detail__nav--prev {
    left: var(--space-4);
}

.room-detail__nav--next {
    right: var(--space-4);
}

/* Pagination */
.room-detail__pagination {
    position: absolute;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    gap: var(--space-2);
}

.room-detail__pagination .swiper-pagination-bullet {
    width: var(--space-2);
    height: var(--space-2);
    margin: 0 !important;
    background: color-mix(in srgb, var(--primary-contrast) 70%, transparent);
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.room-detail__pagination .swiper-pagination-bullet-active {
    background: var(--primary-solid);
    transform: scale(1.25);
}

/* ---------- Description ---------- */
.room-detail__description {
    margin-bottom: var(--space-6);
    max-width: 100%;
    color: var(--color-neutral-700);
    font-family: var(--font-sora);
    font-size: var(--text-sm);
    line-height: 1.85;
}

.room-detail__description p {
    margin: 0 0 var(--space-3);
}

.room-detail__description p:last-child {
    margin-bottom: 0;
}

.room-detail__description a {
    color: var(--a11y-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.room-detail__description a:hover,
.room-detail__description a:focus-visible {
    color: var(--a11y-link-hover);
}

.room-detail__description ul,
.room-detail__description ol {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-6);
}

/* ---------- Booking widget wrapper ---------- */
.room-detail__booking {
    margin-bottom: var(--space-8);
    padding: var(--space-2) 0 var(--space-3);
}

.room-detail__widget {
    width: 100%;
}

/* Widget shell + utility alignment for quick-book generated markup */
.room-detail__booking .Configure-quickBook-Widget {
    font-family: var(--font-hind);
    color: var(--color-neutral-800);
}

.room-detail__booking input,
.room-detail__booking select,
.room-detail__booking button {
    font-family: inherit;
}

.room-detail__booking input[type="date"],
.room-detail__booking input[type="text"],
.room-detail__booking .hasDatepicker {
    min-height: 2.35rem;
    border: 1px solid var(--color-neutral-500);
    border-radius: 0.2rem;
    padding: 0 var(--space-3);
    background: var(--color-neutral-0);
    color: var(--color-neutral-900);
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Date cards row and compact card look from requested UI */
.room-detail__booking .weekRow,
.room-detail__booking .week-row,
.room-detail__booking .date-row,
.room-detail__booking .day-row,
.room-detail__booking .dates-row,
.room-detail__booking [class*="week"],
.room-detail__booking [class*="dateCardWrap"] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.room-detail__booking .weekRow>*,
.room-detail__booking .week-row>*,
.room-detail__booking .date-row>*,
.room-detail__booking .day-row>*,
.room-detail__booking .dates-row>*,
.room-detail__booking [class*="dayCard"],
.room-detail__booking [class*="dateCard"],
.room-detail__booking [class*="calendarDay"] {
    min-width: 3.9rem;
    border: 1px solid var(--color-neutral-700);
    border-radius: 0.2rem;
    background: var(--color-neutral-0);
    text-align: center;
    padding: 0.35rem 0.3rem 0.2rem;
    line-height: 1.15;
}

.room-detail__booking .active,
.room-detail__booking .is-active,
.room-detail__booking .selected,
.room-detail__booking [aria-selected="true"] {
    background: var(--color-sky-500) !important;
    color: var(--color-neutral-0) !important;
    border-color: var(--color-sky-700) !important;
}

.room-detail__booking [class*="arrow"],
.room-detail__booking [class*="prev"],
.room-detail__booking [class*="next"] {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    border: 0;
    background: var(--color-sky-700);
    color: var(--color-neutral-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.room-detail__booking label,
.room-detail__booking [class*="flexible"],
.room-detail__booking [class*="Flexible"] {
    font-weight: var(--font-semibold);
    color: var(--color-neutral-900);
}

/* ---------- Facilities Offered ---------- */
.room-detail__facilities {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
    border-top: 1px dashed var(--color-neutral-300);
    border-bottom: 1px dashed var(--color-neutral-300);
}

.room-detail__facilities-title {
    margin: 0 0 var(--space-5);
    color: var(--color-neutral-900);
    font-family: var(--font-sora);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
}

.room-detail__facilities-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-3);
}

.room-detail__facility {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    color: var(--color-neutral-800);
    font-family: var(--font-sora);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.room-detail__facility-arrow {
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
    color: var(--primary-dark);
}

.room-detail__facility-text {
    flex: 1;
}

/* ---------- High-contrast tweaks ---------- */
body.high-contrast .room-detail {
    background: var(--color-neutral-0);
    color: var(--color-neutral-950);
}

body.high-contrast .room-detail__nav {
    background: var(--color-neutral-950);
    color: var(--color-neutral-0);
}

body.high-contrast .room-detail__pagination .swiper-pagination-bullet-active {
    background: var(--color-neutral-0);
}

body.high-contrast .room-detail__facility-arrow {
    color: var(--color-neutral-950);
}

body.high-contrast .room-detail__placeholder {
    background: var(--color-neutral-950);
    color: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .room-detail__nav,
    .room-detail__pagination .swiper-pagination-bullet {
        transition: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .room-detail__facilities-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--space-5);
    }

    .room-detail__img,
    .room-detail__placeholder {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .room-detail {
        padding: var(--space-5) 0 var(--space-10);
    }

    .room-detail__title {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-4);
    }

    .room-detail__facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-4);
    }

    .room-detail__booking .weekRow>*,
    .room-detail__booking .week-row>*,
    .room-detail__booking .date-row>*,
    .room-detail__booking .day-row>*,
    .room-detail__booking .dates-row>* {
        min-width: 3.5rem;
    }

    .room-detail__nav {
        width: var(--space-8);
        height: var(--space-8);
    }

    .room-detail__nav--prev {
        left: var(--space-2);
    }

    .room-detail__nav--next {
        right: var(--space-2);
    }

    .room-detail__img,
    .room-detail__placeholder {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 479px) {
    .room-detail__facilities-grid {
        grid-template-columns: 1fr;
    }
}