/* =========================
   ROOMS — BOUTIQUE HOTEL PREMIUM (COMPLETE)
   Header left alone (contact-header/title/subtitle not touched)
   Paste into: css/room.css
   ========================= */

   :root{
    --brand:#0a8cff;
    --ink:#0f172a;
    --muted:#64748b;
  
    --card:#ffffff;
    --stroke:rgba(15,23,42,.08);
    --stroke2:rgba(15,23,42,.06);
  
    --shadow: 0 18px 60px rgba(2,6,23,.08);
    --shadow-soft: 0 10px 26px rgba(2,6,23,.06);
  
    --radius: 26px;
  }
  
  /* ===== Section shell ===== */
  .rooms-section{
    background: #fff;
  }
  
  .rooms-section .container{
    max-width: 1200px;
  }
  
  /* ===== Premium Tabs (segmented control) ===== */
  .rooms-tabs.premium-tabs{
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  
    padding: 10px;
    margin: 18px auto 10px;
  
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
  
    background: rgba(255,255,255,.70);
    border: 1px solid var(--stroke);
    box-shadow: 0 14px 40px rgba(2,6,23,.06);
    backdrop-filter: blur(10px);
  }
  
  .rooms-tab.tab-btn{
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(15,23,42,.72);
  
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .01em;
    font-size: 14px;
  
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  
  .rooms-tab.tab-btn:hover{
    transform: translateY(-1px);
    color: rgba(15,23,42,.92);
    background: rgba(10,140,255,.08);
    border-color: rgba(10,140,255,.18);
  }
  
  .rooms-tab.is-active{
    background: var(--brand);
    color: #fff;
    box-shadow: 0 14px 34px rgba(10,140,255,.22);
  }
  
  /* Divider line (subtle) */
  .rooms-line{
    height: 1px;
    margin: 14px 0 26px;
    background: linear-gradient(90deg,
      rgba(15,23,42,0),
      rgba(15,23,42,.10),
      rgba(15,23,42,0));
  }
  
  /* Panels toggling */
  .rooms-panel{ display:none; }
  .rooms-panel.is-active{ display:block; }
  
  /* ===== Room Card (boutique) ===== */
  .room-card{
    border-radius: var(--radius);
    border: 1px solid rgba(10,140,255,.16);
    background: rgba(255,255,255,.94);
  
    box-shadow:
      0 20px 70px rgba(2,6,23,.08),
      0 8px 26px rgba(2,6,23,.06);
  
    overflow: hidden;
    padding: 22px;
    margin: 0 auto 24px;
  
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  
  .room-card:hover{
    transform: translateY(-4px);
    border-color: rgba(10,140,255,.26);
    box-shadow:
      0 30px 100px rgba(2,6,23,.10),
      0 10px 30px rgba(2,6,23,.07);
  }
  
  /* ===== Head (name + rate pill) ===== */
  .room-card__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
  }
  
  .room-card__name{
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  
  /* Boutique rate pill */
  .room-card__price{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  
    padding: 10px 14px;
    border-radius: 999px;
  
    background: linear-gradient(180deg, rgba(10,140,255,.12), rgba(10,140,255,.08));
    border: 1px solid rgba(10,140,255,.18);
    box-shadow: 0 12px 30px rgba(10,140,255,.10);
  }
  
  .room-card__amount{
    font-size: 22px;
    font-weight: 950;
    color: var(--brand);
    letter-spacing: -0.01em;
  }
  
  .room-card__unit{
    font-size: 12.5px;
    color: rgba(15,23,42,.75);
    font-weight: 800;
  }
  
  /* ===== Gallery layout (equal tiles) ===== */
  .room-card__media{
    display: grid;
    grid-template-columns: 1fr 1fr; /* ✅ equal width tiles */
    gap: 14px;
    align-items: stretch;
  
    height: clamp(360px, 34vw, 480px); /* ✅ consistent height */
  }
  
  /* Shared media tiles */
  .room-media{
    border-radius: 22px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--stroke2);
    box-shadow: 0 14px 34px rgba(2,6,23,.06);
    position: relative;
    height: 100%;
  }
  
  /* Make carousel stack fill height */
  .room-media--carousel .carousel,
  .room-media--carousel .carousel-inner,
  .room-media--carousel .carousel-item{
    height: 100%;
  }
  
  /* Images fill the tile */
  .room-media img,
  .room-media--carousel .carousel-item img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  
    transform: scale(1.02);
    transition: transform .55s ease;
  }
  
  /* Boutique hover zoom */
  .room-card:hover .room-media img,
  .room-card:hover .room-media--carousel .carousel-item img{
    transform: scale(1.06);
  }
  
  /* ===== Premium gradient overlay for depth ===== */
  .room-media::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,
        rgba(2,6,23,.10) 0%,
        rgba(2,6,23,0) 32%,
        rgba(2,6,23,.18) 100%);
    opacity: .45;
    transition: opacity .35s ease;
  }
  
  .room-card:hover .room-media::after{
    opacity: .60;
  }
  
  /* ===== Gallery labels (CSS-only, no HTML changes) ===== */
  /* Left tile label */
  .room-media--carousel::before{
    /* content:"Suite Gallery"; */
    position:absolute;
    left: 14px;
    top: 14px;
    z-index: 3;
  
    padding: 7px 10px;
    border-radius: 999px;
  
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  
    color: rgba(255,255,255,.95);
    background: rgba(15,23,42,.38);
    border: 1px solid rgba(255,255,255,.18);
  
    backdrop-filter: blur(10px);
  }
  
  /* Right tile label */
  .room-media--static::before{
    /* content:"Bathroom"; */
    position:absolute;
    left: 14px;
    top: 14px;
    z-index: 3;
  
    padding: 7px 10px;
    border-radius: 999px;
  
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  
    color: rgba(255,255,255,.95);
    background: rgba(15,23,42,.34);
    border: 1px solid rgba(255,255,255,.18);
  
    backdrop-filter: blur(10px);
  }
  
  /* ===== Carousel controls (glass circles + white arrow hover + zoom) ===== */
  .room-media--carousel .carousel-control-prev,
  .room-media--carousel .carousel-control-next{
    width: 16%;
    opacity: 1;
  }
  
  .room-media--carousel .carousel-control-prev-icon,
  .room-media--carousel .carousel-control-next-icon{
    background-color: rgba(255,255,255,.78) !important;
    border-radius: 999px;
  
    padding: 18px;
    background-size: 55% 55%;
  
    box-shadow: 0 14px 34px rgba(2,6,23,.12);
    border: 1px solid rgba(15,23,42,.08);
  
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, filter .25s ease;
  
    /* approximate brand tint for default */
    filter: invert(26%) sepia(97%) saturate(2387%) hue-rotate(190deg) brightness(101%) contrast(97%);
  }
  
  /* Hover: blue bg + white arrow + zoom */
  .room-media--carousel .carousel-control-prev:hover .carousel-control-prev-icon,
  .room-media--carousel .carousel-control-next:hover .carousel-control-next-icon{
    background-color: var(--brand);
    transform: scale(1.14);
  
    filter: brightness(0) invert(1);
    box-shadow: 0 16px 40px rgba(10,140,255,.35);
  }
  
  /* ===== CTA (center + boutique button) ===== */
  .room-card__cta{
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }
  
  .room-card__cta .btn.primary{
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 950;
    letter-spacing: .01em;
  
    box-shadow: 0 16px 40px rgba(10,140,255,.22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  
  .room-card__cta .btn.primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 20px 52px rgba(10,140,255,.30);
    filter: brightness(.98);
  }
  
  /* ===== Mobile ===== */
/* =========================
   BOUTIQUE MOBILE WRAP
   ========================= */
   @media (max-width: 992px){

    .rooms-section{
      /* background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
      ); */
    }
  
  
    .room-card{
      max-width: 720px;      /* keeps it centered and premium */
      margin: 0 auto 28px;   /* center card */
      padding: 18px;
      border-radius: 28px;
    }
  
  }
  
  /* ✅ EXTRA: phones only = even taller */
  @media (max-width: 576px){
    .room-media{
      height: clamp(420px, 62vh, 620px);
    }
  }

  /* ===== Boutique Carousel Arrows ===== */

/* =========================
   ROOM CAROUSEL ARROWS
   Match HOME slider behavior
   ========================= */

/* Base button container */
/* =========================
   Room carousel arrows — match Home
   ========================= */

/* Default: light circle + BLUE arrow */
/* =========================
   ROOM CAROUSEL ARROWS
   Blue arrow default
   Blue background on hover
   ========================= */

/* Default state */
.room-media--carousel .carousel-control-prev-icon,
.room-media--carousel .carousel-control-next-icon{
  width: 46px;
  height: 46px;

  border-radius: 50%;
  background-color: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);

  background-size: 55% 55%;

  /* Force arrow to brand blue */
  filter: invert(39%) sepia(96%) saturate(2056%) hue-rotate(192deg) brightness(97%) contrast(101%);

  transition:
    transform .25s ease,
    background-color .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* Hover state */
.room-media--carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.room-media--carousel .carousel-control-next:hover .carousel-control-next-icon{
  background-color: var(--brand);
  transform: scale(1.12);

  /* arrow white */
  filter: brightness(0) invert(1);

  box-shadow: 0 16px 40px rgba(10,140,255,.35);
}

/* =========================
   Shared boutique arrows
   ========================= */

   .activities-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
  
    width: 52px;
    height: 52px;
  
    border-radius: 50%;
    border: none;
  
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    background: rgba(255,255,255,.85);
    color: var(--brand);
  
    box-shadow: 0 10px 26px rgba(2,6,23,.10);
    cursor: pointer;
  
    transition:
      background .25s ease,
      color .25s ease,
      transform .25s ease,
      box-shadow .25s ease;
  }
  
  .activities-arrow--left{
    left: 20px;
  }
  
  .activities-arrow--right{
    right: 20px;
  }
  
  /* Hover */
  .activities-arrow:hover{
    background: var(--brand);
    color: #ffffff;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 16px 40px rgba(10,140,255,.35);
  }

  /* Ensure the booking slideshow card has no padding + images can fill */
.booking-media-card{
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}

/* Make carousel + slides + image fill the card */
.booking-media-card .carousel,
.booking-media-card .carousel-inner,
.booking-media-card .carousel-item{
  height: 100%;
}

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

/* ✅ Make the booking carousel a fixed/taller height on small screens */
/* =========================
   BOOKING CAROUSEL — Mobile height fix (REPLACE your 2 blocks with this)
   ========================= */
   @media (max-width: 576px){

    /* Force the whole media card to be tall */
    .booking-media-card{
      padding: 0;
      overflow: hidden;
      border-radius: 22px;
      height: clamp(420px, 62vh, 640px);  /* ✅ taller on phones */
    }
  
    /* Make carousel fill the card */
    #bookingCarousel,
    .booking-media-card .carousel,
    .booking-media-card .carousel-inner,
    .booking-media-card .carousel-item{
      height: 100% !important;
    }
  
    /* Image fills the slide */
    .booking-media-card .carousel-item img{
      width: 100%;
      height: 100% !important;
      object-fit: cover;
      display: block;
    }
  
    /* Optional: make arrows a bit smaller on mobile */
    #bookingCarousel .activities-arrow{
      width: 44px;
      height: 44px;
      font-size: 22px;
    }
  }

  /* === Room card gallery layout === */
.room-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* ✅ Mobile: stack images */
@media (max-width: 480px){
  .room-gallery{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.room-gallery .media{
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;       /* ✅ keeps consistent shape */
  position: relative;
}

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

.room-card{
  padding: 22px;
  border-radius: 26px;
}

@media (max-width: 480px){
  .room-card{
    padding: 14px;
    border-radius: 20px;
  }
}

.room-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; /* ✅ important */
}

.price-pill{
  white-space: nowrap;
}

@media (max-width: 480px){
  .price-pill{
    margin-left: auto;     /* keeps it to the right when it wraps */
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 999px;
  }
}

.rooms-tabs{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.rooms-tabs::-webkit-scrollbar{ height: 0; }
.rooms-tab{ flex: 0 0 auto; }

/* =========================================================
   ROOMS — Mobile: stack media (carousel on top, static below)
   ========================================================= */

   @media (max-width: 576px){

    /* 1) Stack (1 column) */
    .room-card__media{
      grid-template-columns: 1fr !important;
      height: auto !important;         /* ✅ stop forcing a single tall shared height */
      gap: 12px;
    }
  
    /* 2) Each tile gets its own nice height */
    .room-card__media .room-media{
      height: clamp(260px, 46vh, 420px) !important;
      border-radius: 18px;
    }
  
    /* 3) Ensure carousel fills the tile */
    .room-media--carousel .carousel,
    .room-media--carousel .carousel-inner,
    .room-media--carousel .carousel-item{
      height: 100% !important;
    }
  
    /* 4) Images fill correctly */
    .room-card__media img,
    .room-media--carousel .carousel-item img{
      width: 100%;
      height: 100% !important;
      object-fit: cover;
      display: block;
    }
  
    /* Optional: slightly smaller labels on mobile */
    .room-media--carousel::before,
    .room-media--static::before{
      font-size: 11px;
      padding: 6px 9px;
      left: 12px;
      top: 12px;
    }
  }

  .room-media--carousel .carousel,
  .room-media--carousel .carousel img{
    cursor: pointer;
  }

  .activities-arrow.activities-arrow--left{
    margin-left: 10px !important;
  }

  .activities-arrow.activities-arrow--right{
    margin-right: 10px !important;
  }