.room-details-section {
    background: #faf6ef;
    padding   : 3rem 2rem 5rem;
}

.room-details-container {
    max-width: 860px;
    margin   : 0 auto;
    display  : flex;
    flex-direction: column;
    gap      : 1.5rem;
}

/* ── Gallery ────────────────────────────────────────────────────── */

.room-gallery {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap    : 10px;
}

.gallery-thumbs {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.gallery-thumbs img {
    width        : 100%;
    height       : 115px;
    object-fit   : cover;
    border-radius: 4px;
    cursor       : pointer;
    opacity      : 0.85;
    transition   : opacity 0.2s;
}

.gallery-thumbs img:hover {
    opacity: 1;
}

.gallery-main img {
    width        : 100%;
    height       : 485px;
    object-fit   : cover;
    border-radius: 4px;
    display      : block;
}

/* ── Info Card ──────────────────────────────────────────────────── */

.room-info-card {
    background   : white;
    border-radius: 6px;
    padding      : 1.75rem 2rem;
    box-shadow   : 0 2px 12px rgba(0,0,0,0.06);
}

.room-info-badge {
    display         : inline-block;
    background-color: var(--accent);
    color           : white;
    font-size       : 0.75rem;
    font-weight     : 500;
    padding         : 5px 14px;
    border-radius   : 3px;
    margin-bottom   : 0.75rem;
    letter-spacing  : 0.04em;
}

.room-info-name {
    font-size    : 1.8rem;
    font-weight  : 700;
    color        : var(--ink);
    margin-bottom: 0.4rem;
}

.room-info-address {
    font-size    : 1rem;
    font-weight: bold;
    color        : var(--ink-muted);
    margin-bottom: 1rem;
}

.room-info-address i {
    color      : var(--accent);
    margin-right: 0.35rem;
}

.room-info-pricing-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 1.25rem;
    padding-bottom : 1.25rem;
    border-bottom  : 1px solid var(--border);
}

.room-info-price {
    font-size  : 1.3rem;
    font-weight: 700;
    color      : var(--accent);
}

.room-info-price small {
    font-size  : 0.78rem;
    font-weight: 400;
    color      : var(--ink-muted);
}

.room-info-day-type {
    font-size : 0.82rem;
    color     : var(--ink-muted);
    display   : flex;
    align-items: center;
    gap       : 0.4rem;
}

.room-info-weekend-price {
    font-weight: 600;
    color      : var(--ink);
}

.room-policy-card {
    background   : white;
    border-radius: 6px;
    padding      : 1.75rem 2rem;
    box-shadow   : 0 2px 12px rgba(0,0,0,0.06);
}

.room-policy-header2{
    font-size    : 1rem;
    font-weight  : 500;
    color        : var(--accent);
    margin-bottom: 0.75rem;
}
.room-policy-row {
    display        : flex;
    justify-content: space-between;
    gap            : 2rem;   
    align-items    : center;
    margin-bottom  : 0.75rem;
}
.room-info-tags {
    display  : flex;
    gap      : 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.room-info-tag {
    display       : inline-flex;
    align-items   : center;
    gap           : 0.4rem;
    background    : #f5f0e6;
    border        : 1px solid var(--border);
    border-radius : 3px;
    padding       : 5px 12px;
    font-size     : 0.78rem;
    color         : var(--ink-muted);
}

.room-info-tag i {
    color: var(--accent);
}

.room-info-actions {
    display: flex;
    gap    : 0.75rem;
}

.btn-book-now {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.4rem;
    background     : transparent;
    color          : var(--accent);
    border         : 1px solid var(--accent);
    border-radius  : 3px;
    padding        : 0.6rem 1.5rem;
    font-family    : 'Jost', sans-serif;
    font-size      : 0.72rem;
    font-weight    : 500;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    text-decoration: none;
    cursor         : pointer;
    transition     : background 0.2s, color 0.2s;
}

.btn-book-now:hover {
    background: var(--accent);
    color     : white;
}

.btn-share {
    display       : inline-flex;
    align-items   : center;
    gap           : 0.4rem;
    background    : transparent;
    color         : var(--ink-muted);
    border        : 1px solid var(--border);
    border-radius : 3px;
    padding       : 0.6rem 1.5rem;
    font-family   : 'Jost', sans-serif;
    font-size     : 0.72rem;
    font-weight   : 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor        : pointer;
    transition    : color 0.2s, border-color 0.2s;
}

.btn-share:hover {
    color        : var(--accent);
    border-color : var(--accent);
}

/* ── Section Cards ──────────────────────────────────────────────── */

.room-section-card {
    background   : white;
    border-radius: 6px;
    padding      : 2rem;
    box-shadow   : 0 2px 12px rgba(0,0,0,0.06);
}

.room-section-title {
    font-size    : 1.4rem;
    font-weight  : 700;
    color        : var(--ink);
    margin-bottom: 0.75rem;
}

.room-section-body {
    font-size    : 0.88rem;
    line-height  : 1.75;
    color        : var(--ink-muted);
    margin-bottom: 1.5rem;
}


.amenities-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1rem 1.5rem;
}

.amenity-item-detail {
    display    : flex;
    align-items: center;
    gap        : 0.6rem;
    font-size  : 0.85rem;
    color      : var(--ink);
}

.amenity-item-detail i {
    color    : var(--accent);
    font-size: 1rem;
    width    : 20px;
}

.amenity-badge-icon {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 28px;
    height          : 28px;
    min-width       : 28px;
    background-color: var(--accent);
    border-radius   : 6px;
    color           : white;
    font-size       : 0.85rem;
    font-weight     : 700;
    line-height     : 1;
}

.gallery-thumbs img {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border 0.2s;
    border: 2px solid transparent;
}
.gallery-thumbs img.active,
.gallery-thumbs img:hover {
    opacity: 1;
    border: 2px solid #b5850b;
}


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

    .gallery-thumbs {
        flex-direction: row;
    }

    .gallery-thumbs img {
        height: 80px;
    }

    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}