/* Intentionally empty — Sailing theme provides the styling. */
.eydt-room-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.eydt-room-search .eydt-field { display: flex; flex-direction: column; }
.eydt-search-results .eydt-no-results { font-style: italic; }

/* "Ab"-prefix mirrors the typographic styling of Sailing's .unit ("Nacht") but
   without the leading "/" pseudo-element that .unit carries. */
.rooms .hb_room .price_value .from-prefix,
.price-single .price_value .from-prefix {
    color: var(--thim_font_title-color);
    font-size: var(--thim_font_body-font-size);
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: lowercase;
}

/* Full-card link wrapper: behave like the previous container, inherit colour and don't underline. */
.rooms .hb_room .eydt-room-link,
.rooms .hb_room .eydt-room-link:hover,
.rooms .hb_room .eydt-room-link:focus,
.rooms .hb_room .eydt-room-link:visited {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Sailing's `.rooms .hb_room .summary { cursor:default }` would otherwise win
   over the link wrapper, so re-assert pointer inside our wrapper. */
.rooms .hb_room .eydt-room-link .summary,
.rooms .hb_room .eydt-room-link .summary * {
    cursor: pointer;
}

/* Equal-height card grid: stretch every card to the tallest one's height. */
ul.rooms.eydt-rooms,
ul.rooms.tp-hotel-booking {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Mobile + portrait tablet: one card per row, full width. The template ships
   Bootstrap classes (col-xs-6, col-sm-6) that would otherwise force a 2-up
   layout where titles wrap and overlap into neighbouring columns. */
@media (max-width: 991px) {
    ul.rooms.eydt-rooms > li.hb_room,
    ul.rooms.tp-hotel-booking > li.hb_room,
    .rooms.hb_room > li.hb_room,
    .hb_archive_room ul.rooms > li.hb_room {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}
ul.rooms.eydt-rooms > li.hb_room,
ul.rooms.tp-hotel-booking > li.hb_room {
    display: flex;
    align-items: stretch;
}
ul.rooms.eydt-rooms > li.hb_room > .eydt-room-link,
ul.rooms.tp-hotel-booking > li.hb_room > .eydt-room-link { width: 100%; }
ul.rooms.eydt-rooms .hb_room .summary,
ul.rooms.tp-hotel-booking .hb_room .summary {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
ul.rooms.eydt-rooms .hb_room .content-room,
ul.rooms.tp-hotel-booking .hb_room .content-room {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Push the footer to the bottom so all price/CTA rows align across cards. */
ul.rooms.eydt-rooms .hb_room .content-room .footer-content-room,
ul.rooms.tp-hotel-booking .hb_room .content-room .footer-content-room {
    margin-top: auto;
}

/* Let the description fill the available space so cards reach equal height
   through content growth rather than just bottom-anchored footer. */
ul.rooms.eydt-rooms .hb_room .content-room > .description,
ul.rooms.tp-hotel-booking .hb_room .content-room > .description {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Keep the icon row pinned at the bottom of the description block. */
ul.rooms.eydt-rooms .hb_room .content-room > .description > .information_services,
ul.rooms.tp-hotel-booking .hb_room .content-room > .description > .information_services {
    margin-top: auto;
}

/* Highlight room-type tags in red so they pop visually like a label. */
.rooms .hb_room .summary .room-types span[rel="tag"] {
    color: #b00;
}

/* Spacing for the icon row under the description. */
.rooms .hb_room .summary .description .information_services ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 10px 0 20px;
}
.rooms .hb_room .summary .description .information_services ul li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
}
.rooms .hb_room .summary .description .information_services ul li i {
    margin-right: 6px;
}

/* Visible separator between room-detail values and the static icon row. */
.rooms .hb_room .summary .description .information_services ul li.eydt-room-detail-last {
    padding-right: 16px;
    border-right: 1px solid var(--thim_body_border_color, #ddd);
    margin-right: 8px;
}

/* Unified 16:9 thumbnail area, regardless of source image aspect ratio. */
.rooms .hb_room .media.eydt-media-16x9 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f3f3;
}
.rooms .hb_room .media.eydt-media-16x9 img,
.rooms .hb_room .media.eydt-media-16x9 .eydt-media-placeholder,
.rooms .hb_room .media.eydt-media-16x9 .eydt-media-placeholder svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rooms .hb_room .media.eydt-media-16x9 .eydt-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaeaea;
}
.rooms .hb_room .media.eydt-media-16x9 .eydt-media-placeholder svg {
    width: 60%;
    height: 60%;
    inset: 20%;
    object-fit: contain;
}

/* Single-room gallery: force 16:9 ratio on every slide (main slider + thumbnail carousel).
 * !important is required because wp-rocket's "remove unused css" + the Sailing theme inline
 * critical-CSS pipeline can strip or override our rules for logged-in / cached visitors. */
#hb_room_images #slider .slides > li,
#hb_room_images #carousel .slides > li,
.hb_single_room #hb_room_images #slider .slides > li,
.hb_single_room #hb_room_images #carousel .slides > li {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #f3f3f3 !important;
}
/* Flexslider's `asNavFor` carousel renders the last slide narrower so the total
 * width fits the viewport. Override the per-slide inline width so every thumb
 * has the same dimensions. */
#hb_room_images #carousel .slides > li,
.hb_single_room #hb_room_images #carousel .slides > li {
    width: 160px !important;
    margin-right: 10px !important;
}
#hb_room_images #slider .slides > li img,
#hb_room_images #carousel .slides > li img,
.hb_single_room #hb_room_images #slider .slides > li img,
.hb_single_room #hb_room_images #carousel .slides > li img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/*
 * Flexslider prev/next arrow icons. Sailing's style.css ships a flex-direction-nav rule
 * targeting `font-family: FontAwesome` (FA4) but only FA5 ("Font Awesome 5 Free") is
 * loaded as @font-face, and a sibling rule in the same stylesheet zeroes out `content`.
 * Override with higher specificity and FA5 Solid metadata so the chevrons actually render.
 */
#hb_room_images .flexslider .flex-direction-nav a {
    overflow: visible;
}
#hb_room_images .flexslider .flex-direction-nav a::before {
    font-family: "Font Awesome 5 Free", FontAwesome, sans-serif;
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0;
    color: inherit;
}
#hb_room_images .flexslider .flex-direction-nav .flex-prev::before,
.hb_single_room .hb_room_gallery .flex-direction-nav .flex-prev::before,
.hb_single_room .hb_room_gallery .flex-direction-nav a.flex-prev::before {
    content: "\f104";
}
#hb_room_images .flexslider .flex-direction-nav .flex-next::before,
.hb_single_room .hb_room_gallery .flex-direction-nav .flex-next::before,
.hb_single_room .hb_room_gallery .flex-direction-nav a.flex-next::before {
    content: "\f105";
}
/* Hide the literal "Previous"/"Next" link text behind the icon. */
#hb_room_images .flexslider .flex-direction-nav a {
    font-size: 0;
    line-height: 0;
    text-indent: 0;
}
#hb_room_images .flexslider .flex-direction-nav a::before {
    font-size: 22px;
    line-height: 44px;
}
/* Always show the controls; default theme hides them with opacity:0 until hover. */
#hb_room_images .flexslider .flex-direction-nav .flex-prev,
#hb_room_images .flexslider .flex-direction-nav .flex-next {
    opacity: 1;
}
#hb_room_images #slider .flex-direction-nav .flex-prev { left: 12px; }
#hb_room_images #slider .flex-direction-nav .flex-next { right: 12px; }

/*
 * Mobile sticky CTA on single-room pages. Hidden on tablets in landscape and
 * desktop (>= 992 px) — Sailing's left sidebar shows the booking sidebar there.
 *
 * The button sits in the lower-right corner above the theme's #back-to-top
 * widget (~70px tall incl. spacing), leaving the bottom-left thim-core
 * cookie-consent badge unobstructed.
 */
.eydt-mobile-cta { display: none; }

@media (max-width: 991px) {
    .eydt-mobile-cta {
        position: fixed;
        right: 12px;
        bottom: calc(80px + env(safe-area-inset-bottom));
        left: auto;
        width: 25%;
        min-width: 140px;
        max-width: 220px;
        z-index: 1000;
        display: flex;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    /* Price is shown at the top of the page; the floating CTA only needs the
       action button so the cookie-consent badge bottom-left stays clear. */
    .eydt-mobile-cta__price { display: none; }
    /* Override Sailing's .hb_btn defaults. Background and white label mirror
       the desktop CTA button (VC button_6a184adb69a73 → #eeb902 on white). */
    .eydt-mobile-cta__btn,
    .eydt-mobile-cta__btn:link,
    .eydt-mobile-cta__btn:visited {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 16px;
        white-space: nowrap;
        text-align: center;
        background-color: #eeb902;
        color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    .eydt-mobile-cta__btn:hover,
    .eydt-mobile-cta__btn:focus,
    .eydt-mobile-cta__btn:active {
        background-color: #eeb902;
        color: #fff;
        filter: brightness(1.05);
    }
    /* Reserve room at the bottom of the page so the floating button doesn't
       cover trailing content (incl. safe-area on iOS). */
    body.single-eydt_room {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}