/* Rooms pages (rooms.php + room.php)
   Keeps existing site theme; adds only page-specific layout.
*/

.page-hero{
  padding: calc(var(--header-h) + 46px) 0 34px;
}

.page-hero .crumbs{
  display:flex;
  gap:8px;
  align-items:center;
  color: rgba(255,255,255,.86);
  font-size: 14px;
}

.page-hero .crumbs a{ color: rgba(255,255,255,.92); }
.page-hero .crumbs a:hover{ color: #fff; }

.page-hero .page-title{
  margin: 14px 0 8px;
  font-family: var(--sec-title-font);
  color: #fff;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  letter-spacing: -.02em;
}

.page-hero .page-subtitle{
  margin: 0;
  max-width: 850px;
  color: rgba(255,255,255,.84);
  font-size: 1.05rem;
}

.page-hero .hero-shell{
  background: linear-gradient(135deg, rgba(0,0,0,.58), rgba(0,0,0,.26));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-md);
}

.rooms-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 980px){
  .rooms-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .rooms-grid{ grid-template-columns: 1fr; }
}

.room-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}

.room-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.room-card .room-media{
  position: relative;
  height: 210px;
  background: rgba(0,0,0,.05);
}

.room-card .room-media img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.room-card .price-pill{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  font-weight: 650;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

.room-card .room-body{
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.room-card h3{
  margin: 0;
  font-family: var(--font-display);
  color: var(--secondary-color);
  font-size: 1.25rem;
  letter-spacing: -.01em;
}

.room-card .room-sub{
  margin: 0;
  color: var(--sec-desc-color);
  font-size: 0.98rem;
}

.room-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(44,62,80,.06);
  border: 1px solid rgba(44,62,80,.10);
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 600;
}

.room-actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
  align-items:center;
}

.room-actions .btn{ width: 100%; }

.section-block{ padding: 54px 0; }

.amenities-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .amenities-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .amenities-grid{ grid-template-columns: 1fr; }
}

.amenity-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display:flex;
  gap: 12px;
}

.amenity-card i{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(74,135,232,.12);
  border: 1px solid rgba(74,135,232,.20);
  color: var(--secondary-color);
}

.amenity-card .a-title{
  font-weight: 750;
  color: var(--secondary-color);
  margin: 0;
}

.amenity-card .a-desc{ margin: 2px 0 0; color: var(--sec-desc-color); font-size: .92rem; }

/* Room detail */
.room-detail-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
}
@media (max-width: 980px){
  .room-detail-grid{ grid-template-columns: 1fr; }
}

.room-detail-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}

.room-detail-hero{
  position: relative;
  height: 320px;
  background: rgba(0,0,0,.06);
}

.room-detail-hero img{ width:100%; height:100%; object-fit: cover; }

.room-detail-hero .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 10%, rgba(0,0,0,.55) 92%);
}

.room-detail-hero .hero-text{
  position:absolute; left: 18px; right: 18px; bottom: 16px;
  color:#fff;
}

.room-detail-hero .hero-text h1{ margin:0; font-family: var(--font-display); font-size: 2.1rem; }
.room-detail-hero .hero-text p{ margin:6px 0 0; color: rgba(255,255,255,.86); }

.room-detail-body{ padding: 18px; }
.room-detail-body .lead{ color: var(--sec-desc-color); }

.gallery-mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 560px){
  .gallery-mini{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gallery-mini .gallery-item{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--border);
}

.gallery-mini .gallery-item img{ width:100%; height: 180px; object-fit: cover; }

.sidebar-box{
  position: sticky;
  top: calc(var(--header-h) + 18px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px;
}

.sidebar-box .mini-title{ font-weight: 800; margin: 0 0 8px; color: var(--secondary-color); }

.sidebar-box .mini-text{ margin:0; color: var(--sec-desc-color); }


/* Filters */
.rooms-filters{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 18px;
  align-items:center;
  justify-content: space-between;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rooms-filters .filter-group{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}
.rooms-filters .filter-label{
  font-weight: 700;
  color: var(--secondary-color);
  margin-right: 4px;
  font-size: 13px;
  opacity: .9;
}
button.chip{
  border: 1px solid rgba(44,62,80,.14);
  background: rgba(44,62,80,.06);
  color: var(--secondary-color);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
button.chip.active{
  background: rgba(192,154,83,.18);
  border-color: rgba(192,154,83,.35);
}

/* Policies */
.policies-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .policies-grid{ grid-template-columns: 1fr; }
}
.policy-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.policy-card .p-title{
  font-weight: 800;
  color: var(--secondary-color);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.policy-card .p-text{
  color: var(--sec-desc-color);
  font-size: .95rem;
}

/* Homepage + room cards refresh */
.room-card{
  border-radius: 24px;
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}
.room-card .room-media{
  height: 240px;
}
.room-card .room-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.42) 100%);
  pointer-events:none;
}
.room-card .room-media img{
  transition: transform .4s ease;
}
.room-card:hover .room-media img{
  transform: scale(1.04);
}
.room-card .price-pill{
  bottom: 16px;
  left: 16px;
  background: rgba(255,255,255,.88);
  color: var(--secondary-color);
  border-color: rgba(255,255,255,.4);
}
.room-card .room-body{
  padding: 20px;
  gap: 12px;
}
.room-card h3{
  font-size: 1.4rem;
}
.room-description{
  min-height: 3.4em;
}
.room-feature-list{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.room-feature-tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(192,154,83,.10);
  border: 1px solid rgba(192,154,83,.18);
  color: #8c6a2d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.room-meta{
  gap: 10px;
}
.pill{
  padding: 9px 12px;
}
.room-actions{
  gap: 12px;
  flex-wrap: wrap;
}
.room-actions .btn{
  width: auto;
  min-width: 160px;
}
.room-inline-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary-color);
}
.room-inline-link i{
  font-size: 12px;
}
.room-inline-link:hover{
  color: var(--primary-color);
}

@media (max-width: 720px){
  .room-card .room-media{ height: 220px; }
  .room-actions .btn,
  .room-inline-link{ width: 100%; justify-content: center; }
}


.hero-highlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 760px){
  .hero-highlights{ grid-template-columns: 1fr; }
}
.hero-highlight{
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(12px);
}
.hero-highlight i{ color: #f2d39b; }

.rooms-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,241,233,.96));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 760px){
  .rooms-toolbar{ flex-direction: column; align-items: stretch; }
}
.toolbar-kicker{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.rooms-summary{
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-weight: 700;
  color: var(--secondary-color);
}
.rooms-summary-count{ color: var(--primary-color); }
.toolbar-actions{ display:flex; gap: 10px; }

.room-card .room-media{
  height: 236px;
}
.room-card .room-media::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22));
  pointer-events: none;
}
.room-card .room-body{
  gap: 12px;
}
.room-kicker{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--primary-color);
}
.room-card .room-sub{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.room-footer{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.room-feature-inline{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: var(--sec-desc-color);
}
.room-feature-inline i{ color: var(--primary-color); }
.room-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 640px){
  .room-actions{ grid-template-columns: 1fr; }
}
.room-actions .btn{
  width: 100%;
  justify-content: center;
}

.detail-hero-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.detail-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 700;
}
.detail-badge.is-accent{
  background: rgba(192,154,83,.22);
  border-color: rgba(242,211,155,.35);
}

.detail-overview-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 18px 0 20px;
}
@media (max-width: 980px){
  .detail-overview-grid{ grid-template-columns: 1fr; }
}
.detail-overview-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,238,.98));
  border: 1px solid var(--border);
}
.detail-overview-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(192,154,83,.12);
  border: 1px solid rgba(192,154,83,.2);
  color: var(--primary-color);
  flex: 0 0 auto;
}
.detail-overview-title{
  margin: 1px 0 4px;
  font-weight: 800;
  color: var(--secondary-color);
}
.detail-overview-text{
  margin: 0;
  font-size: .94rem;
  color: var(--sec-desc-color);
}

.sidebar-booking-card,
.sidebar-benefits,
.sidebar-support-card{
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(44,62,80,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,238,.98));
}
.sidebar-benefits,
.sidebar-support-card{
  margin-top: 14px;
}
.sidebar-benefit-item,
.sidebar-contact-line{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--sec-desc-color);
  font-size: .95rem;
}
.sidebar-benefit-item + .sidebar-benefit-item,
.sidebar-contact-line + .sidebar-contact-line{
  margin-top: 10px;
}
.sidebar-benefit-item i,
.sidebar-contact-line i{
  color: var(--primary-color);
  margin-top: 3px;
}
.sidebar-policy-list{
  margin: 0;
  padding-left: 18px;
  color: var(--sec-desc-color);
  font-size: 13px;
}
.sidebar-policy-list li + li{ margin-top: 7px; }


/* Step 3: inner-page consistency */
.page-hero{
  padding: calc(var(--header-h) + 58px) 0 42px;
}
.page-hero .hero-shell{
  border-radius: 28px;
  box-shadow: 0 24px 54px rgba(15,23,42,.16);
}
.rooms-toolbar,
.rooms-filters,
.room-detail-card,
.sidebar-box,
.policy-card,
.amenity-card{
  box-shadow: 0 20px 42px rgba(15,23,42,.06);
}
.room-detail-card, .sidebar-box{
  border-radius: 24px;
}
.room-detail-body{
  padding: 24px;
}
.room-detail-body p:not(.lead),
.policy-card .p-text,
.amenity-card .a-desc{
  line-height: 1.8;
}
.sidebar-box{
  top: calc(var(--header-h) + 28px);
}
.footer-grid .footer-col:first-child .dynamic-footer-about{
  max-width: 40ch;
  line-height: 1.9;
}
@media (max-width: 760px){
  .page-hero{ padding: calc(var(--header-h) + 42px) 0 34px; }
  .room-detail-body{ padding: 20px; }
}

/* Step 10: rooms/detail premium polish */
.room-card,
.room-detail-card,
.sidebar-box,
.policy-card,
.amenity-card,
.gallery-mini .gallery-item{
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

.room-card::before,
.room-detail-card::before,
.sidebar-box::before,
.policy-card::before,
.amenity-card::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(224,191,131,0), rgba(224,191,131,.6), rgba(224,191,131,0));
  opacity: .8;
}

.room-card,
.room-detail-card,
.sidebar-box,
.policy-card,
.amenity-card{
  position: relative;
  overflow: hidden;
}

.room-card:hover,
.room-detail-card:hover,
.sidebar-box:hover,
.policy-card:hover,
.amenity-card:hover,
.gallery-mini .gallery-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 58px rgba(15,23,42,.12);
  border-color: rgba(163,111,42,.16);
}

.room-card .price-pill{
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.room-card .room-media img,
.room-detail-hero img,
.gallery-mini .gallery-item img{
  transition: transform .42s ease, filter .32s ease;
}
.room-card:hover .room-media img,
.room-detail-card:hover .room-detail-hero img,
.gallery-mini .gallery-item:hover img{
  transform: scale(1.045);
  filter: saturate(1.05);
}

.rooms-filters,
.rooms-toolbar{
  box-shadow: 0 20px 42px rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.08);
}

button.chip{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
button.chip:hover,
button.chip.active{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(15,23,42,.08);
}

.sidebar-booking-card .btn-primary,
.room-actions .btn-primary{
  box-shadow: 0 18px 34px rgba(163,111,42,.24);
}