/*
 * rooms.css — "Rooms & villas" cards + the inline booking panel
 * (public_html/pages/property.php, the only page that loads this file)
 *
 * Loaded after stays.css. The card rules are scoped to .stays-rooms /
 * .room-card* / .room-stat*, the panel rules to .room-card__booking /
 * .room-book*, so the two files cannot collide.
 * The card is a plain Bootstrap column child: photos on top (with thumbnail
 * strip), then the body, then the action row. A booking panel opens at the
 * foot of the card, under the button that requested it, so the request is
 * sent for the category the visitor is looking at.
 */

/* ── Section shell ─────────────────────────────────────────── */
.stays-rooms {
    background: linear-gradient(180deg, #f5fbfc 0%, #ffffff 60%);
}

.stays-rooms__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.room-stat {
    flex: 1 1 150px;
    background: #ffffff;
    border: 1px solid var(--bs-border-color, #e2e8ee);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04);
}

.room-stat__value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent, #007c91);
}

.room-stat__label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7c93;
}

/* ── Card ──────────────────────────────────────────────────── */
.room-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--bs-border-color, #e2e8ee);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(16, 42, 67, 0.05);
    scroll-margin-top: 110px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.room-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 42, 67, 0.12);
}

/* Set by the inline script on the card whose booking panel is open. */
.room-card.is-open {
    border-color: var(--accent, #007c91);
    box-shadow: 0 0 0 2px rgba(0, 124, 145, 0.18), 0 12px 28px rgba(16, 42, 67, 0.12);
}

/* ── Visual (photo + badges) ───────────────────────────────── */
.room-card__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #dff3f7, #eef7f9);
}

.room-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.room-card__badges {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: calc(100% - 1.5rem);
}

.room-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #10304a;
    font-size: 0.74rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.room-card__chip i {
    color: var(--accent, #007c91);
    font-size: 0.7rem;
}

.room-card__chip--pool {
    background: rgba(0, 124, 145, 0.92);
    color: #ffffff;
}

.room-card__chip--pool i {
    color: #ffffff;
}

.room-card__chip--adults {
    background: rgba(227, 122, 74, 0.92);
    color: #ffffff;
}

.room-card__chip--adults i {
    color: #ffffff;
}

/* ── Thumbnail strip ───────────────────────────────────────── */
.room-card__thumbs {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 0.6rem 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.room-card__thumb {
    flex: 0 0 62px;
    height: 46px;
    padding: 0;
    background: #eef4f6;
    border: 2px solid transparent;
    border-radius: 0.55rem;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.room-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-card__thumb:hover {
    opacity: 1;
}

.room-card__thumb.is-active {
    border-color: var(--accent, #007c91);
    opacity: 1;
}

.room-card__thumb:focus-visible {
    outline: 2px solid var(--accent, #007c91);
    outline-offset: 1px;
}

/* ── Body ──────────────────────────────────────────────────── */
.room-card__title {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.room-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    color: #6b7c93;
}

.room-card__facts i {
    margin-right: 0.35rem;
    color: var(--accent, #007c91);
}

.room-card__summary {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #4a5a6a;
}

.room-card__highlights-head {
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #007c91);
}

.room-card__highlights {
    display: grid;
    gap: 0.3rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.room-card__highlights li {
    display: flex;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: #33475b;
}

.room-card__highlights i {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--accent, #007c91);
}

/* ── Actions ───────────────────────────────────────────────── */
.room-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid #eef2f6;
}

.room-card__actions .btn {
    flex: 1 1 auto;
}

/* ── Occupancy icons (one per sleeping place) ──────────────── */
.room-card__occ {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.room-card__occ i {
    margin-right: 0;
    font-size: 0.72rem;
    color: #4f8a94;
}

@media (max-width: 575.98px) {
    .room-card__visual {
        aspect-ratio: 4 / 3;
    }

    .room-stat {
        flex: 1 1 45%;
    }

    .room-card__actions .btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-card,
    .room-card__thumb {
        transition: none;
    }

    .room-card:hover {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ROOM BOOKING PANEL — the request form inside the card
   (public_html/pages/property.php: .room-card__booking > .room-book)

   One panel per card, hidden until that card's "Book this …" button
   opens it, so the request is made for the category in front of the
   visitor. The guest selects are rebuilt for the category by the
   inline script (data-guests), the field sizing matches the site's
   other forms, and the success block replaces the form once the
   request is with our team.
   ═══════════════════════════════════════════════════════════════ */

.room-card__booking {
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef2f6;
    animation: room-book-in 0.22s ease;
}

/* A column child of .room-card, so a display rule would beat the hidden
   attribute — "closed" has to mean closed. */
.room-card__booking[hidden] {
    display: none;
}

@keyframes room-book-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.room-book {
    padding: 0.9rem 1rem 1.1rem;
    border: 1px solid #d9eaf0;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f5fbfd 0%, #ffffff 60%);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(16, 42, 67, 0.04);
}

.room-book__head {
    display: flex;
    flex-wrap: wrap;
    /* Centred, not baseline-aligned: the pill and the 34px close control are very
       different heights, and baseline alignment floated the cross off the title. */
    align-items: center;
    gap: 0.35rem 0.6rem;
    /* The close control is pinned to this corner (see .room-book__close), so the
       head keeps its column free: one button width plus one column gap — exactly
       the room the button took while it was still in the flow. Title and pill
       therefore wrap at the same card widths as before, but the cross never
       wraps onto the pill's line on the way down to mobile. */
    position: relative;
    min-height: calc(34px + 0.55rem); /* button height + the padding below it */
    padding-right: calc(34px + 0.6rem);
    margin-bottom: 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed #dcebf0;
}

.room-book__title {
    font-size: 0.95rem;
    color: #10304a;
}

/* The category's occupancy rule, straight from the fact sheet. */
.room-book__rule {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 124, 145, 0.09);
    color: #0b5f6d;
    font-size: 0.74rem;
    font-weight: 600;
}

/* A control, not a hairline: a 34px circular hit area, a cross that reads at a
   glance, a teal wash on hover and an accent ring for keyboard focus. */
.room-book__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Out of the flow and pinned to the head's top-right corner, so the control
       holds its place at every card width instead of wrapping down onto the
       pill's line (laptops around 1280) and back up to the title at 1440+. */
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d5e3ea;
    border-radius: 50%;
    background: #ffffff;
    color: #3d5468;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06);
    transition:
        color 0.18s var(--ease-out, ease),
        background 0.18s var(--ease-out, ease),
        border-color 0.18s var(--ease-out, ease),
        box-shadow 0.18s var(--ease-out, ease),
        transform 0.18s var(--ease-out, ease);
}

.room-book__close:hover,
.room-book__close:focus-visible {
    border-color: var(--accent, #007c91);
    background: rgba(0, 124, 145, 0.09);
    color: var(--accent, #007c91);
}

/* The ring replaces the UA outline so the focus cue follows the circle. */
.room-book__close:focus-visible {
    outline: none;
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06),
                0 0 0 3px var(--accent-glow, rgba(0, 124, 145, 0.20));
}

.room-book__close:active {
    transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .room-book__close,
    .room-book__close:active {
        transition: none;
        transform: none;
    }
}

/* What the island fixes for every booking (its holiday plan, its transfer). */
.room-book__fixed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
}

.room-book__alert {
    margin-bottom: 0.6rem;
}

.room-book__success {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.8rem;
    background: #e8f6ef;
    color: #14603f;
}

.room-book__success-icon {
    margin-top: 0.1rem;
    font-size: 1.05rem;
    color: #1c9c63;
}

.room-book__form .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #3d5468;
}

/* form-control-sm is only ~31px tall — too thin next to these labels. */
.room-book__form .form-control-sm,
.room-book__form .form-select-sm {
    min-height: 2.5rem;
    font-size: 0.88rem;
}

.room-book__form .form-select-sm {
    padding-right: 2.2rem;
}

@media (max-width: 400px) {
    .room-book {
        padding: 0.8rem;
    }
}