/* Shared RoomType image gallery/carousel — used on Guest home, all-rooms,
   booking form hero, and mirrored on the Agent Portal search page.
   No external carousel library: plain CSS + static/js/public/room_gallery.js. */
.room-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.room-gallery-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.room-gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
}

.room-gallery-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.room-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(10, 20, 10, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Above any sibling overlay content sharing z-index:2 (e.g. booking_form.html's
       full-height .hero-strip-content), so clicks reach these buttons instead of
       being swallowed by a same-z-index, later-in-DOM transparent layer. */
    z-index: 5;
    transition: background 0.2s ease;
}

.room-gallery-nav:hover {
    background: rgba(10, 20, 10, 0.7);
}

.room-gallery-prev {
    left: 8px;
}

.room-gallery-next {
    right: 8px;
}

.room-gallery-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 5;
}

.room-gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.room-gallery-dot.active {
    background: #fff;
    transform: scale(1.3);
}

.room-gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f4f2;
    color: #9aa79c;
    font-size: 2rem;
}