/* ==========================================================================
   room-details.css — Room Details Page
   West Home Hotel — matches result.css / book-room.css tokens
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

   #room-details-page {
     --wh-ink: #1B2430;
     --wh-ink-soft: #384254;
     --wh-cream: #FAF7F2;
     --wh-gold: #B8860B;
     --wh-gold-soft: #E8D8A8;
     --wh-muted: #6B7280;
     --wh-border: #E4DFD5;
     --wh-radius: 14px;
     --wh-shadow: 0 6px 24px rgba(27, 36, 48, 0.08);
   
     font-family: 'Inter', sans-serif;
     background: var(--wh-cream);
     padding: 3rem 1.25rem 4rem;
   }
   
   #room-details-page * {
     box-sizing: border-box;
   }
   
   .rd-wrap {
     max-width: 1080px;
     margin: 0 auto;
   }
   
   .rd-loading,
   .rd-empty {
     text-align: center;
     padding: 3rem 1rem;
     color: var(--wh-muted);
   }
   
   .rd-layout {
     display: grid;
     grid-template-columns: 1.4fr 1fr;
     gap: 2rem;
     align-items: start;
   }
   
   /* ---------- Gallery ---------- */
   .rd-gallery-main {
     width: 100%;
     aspect-ratio: 4 / 3;
     border-radius: var(--wh-radius);
     overflow: hidden;
     box-shadow: var(--wh-shadow);
     margin-bottom: 0.75rem;
   }
   
   .rd-gallery-main img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .rd-gallery-thumbs {
     display: flex;
     gap: 0.6rem;
     flex-wrap: wrap;
   }
   
   .rd-gallery-thumbs img {
     width: 84px;
     height: 64px;
     object-fit: cover;
     border-radius: 8px;
     cursor: pointer;
     border: 2px solid transparent;
     transition: border-color 0.2s ease;
   }
   
   .rd-gallery-thumbs img.active,
   .rd-gallery-thumbs img:hover {
     border-color: var(--wh-gold);
   }
   
   /* ---------- Info card ---------- */
   .rd-eyebrow {
     font-size: 0.75rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--wh-gold);
     font-weight: 700;
     margin: 0 0 0.5rem;
   }
   
   .rd-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(1.6rem, 3.2vw, 2.2rem);
     color: var(--wh-ink);
     margin: 0 0 1rem;
   }
   
   .rd-description {
     color: var(--wh-ink-soft);
     line-height: 1.7;
     margin-bottom: 1.5rem;
   }
   
   .rd-meta-row {
     display: flex;
     gap: 1.5rem;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
   }
   
   .rd-meta-item {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.92rem;
     color: var(--wh-ink-soft);
   }
   
   .rd-meta-item i {
     color: var(--wh-gold);
   }
   
   .rd-features-title {
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--wh-muted);
     margin: 0 0 0.75rem;
   }
   
   .rd-features-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.6rem 1.5rem;
     margin-bottom: 2rem;
   }
   
   .rd-feature-item {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     font-size: 0.92rem;
     color: var(--wh-ink-soft);
   }
   
   .rd-feature-item i {
     color: var(--wh-gold);
     width: 18px;
   }
   
   /* ---------- Booking sidebar ---------- */
   .rd-book-card {
     background: #fff;
     border: 1px solid var(--wh-border);
     border-radius: var(--wh-radius);
     box-shadow: var(--wh-shadow);
     padding: 1.75rem;
     position: sticky;
     top: 1.5rem;
   }
   
   .rd-book-price {
     font-family: 'Playfair Display', serif;
     font-size: 2rem;
     font-weight: 700;
     color: var(--wh-ink);
     margin-bottom: 0.15rem;
   }
   
   .rd-book-price span {
     font-family: 'Inter', sans-serif;
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--wh-muted);
   }
   
   .rd-book-note {
     font-size: 0.82rem;
     color: var(--wh-muted);
     margin-bottom: 1.5rem;
   }
   
   .rd-book-btn {
     display: block;
     width: 100%;
     text-align: center;
     background: var(--wh-ink);
     color: #fff;
     border: none;
     padding: 0.9rem 1.5rem;
     border-radius: 9px;
     font-weight: 600;
     font-size: 0.95rem;
     text-decoration: none;
     transition: background 0.2s ease, transform 0.15s ease;
   }
   
   .rd-book-btn:hover {
     background: var(--wh-gold);
     transform: translateY(-1px);
     color: #fff;
   }
   
   .rd-back {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     margin-bottom: 1.5rem;
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--wh-ink-soft);
     text-decoration: none;
   }
   
   .rd-back:hover { color: var(--wh-gold); }
   
   /* ---------- Responsive ---------- */
   @media (max-width: 820px) {
     .rd-layout {
       grid-template-columns: 1fr;
     }
     .rd-book-card {
       position: static;
     }
     .rd-features-grid {
       grid-template-columns: 1fr;
     }
   }