/* All Rooms Continuous Scroll Layout */

.allRoomsContainer {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(15px, 2.5vw, 25px) clamp(10px, 2vw, 15px);
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

/* Main heading styling */
.allRoomsContainer h1.leoxTitle {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  color: rgb(1, 75, 66);
  margin: clamp(30px, 5vw, 50px) 0 clamp(25px, 4vw, 40px) 0;
  text-align: center;
  letter-spacing: clamp(0.5px, 0.1vw, 1px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.roomSectionTitle {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: rgb(1, 75, 66);
  margin: clamp(40px, 6vw, 60px) 0 clamp(30px, 4vw, 40px) 0;
  padding-bottom: 15px;
  border-bottom: 3px solid rgba(1, 75, 66, 0.25);
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.roomSection {
  margin-bottom: clamp(50px, 8vw, 80px);
  padding: clamp(25px, 4vw, 40px) clamp(20px, 3vw, 30px);
  border-radius: clamp(12px, 2vw, 18px);
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
}

.roomSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(242, 187, 44, 0.5),
    transparent
  );
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.roomSection:hover {
  transform: translateY(-4px);
}

.roomSection:hover::before {
  opacity: 0.6;
  height: 4px;
}

.roomSection:last-of-type {
  border-bottom: none;
}

/* Subtle refined pastel backgrounds for each room type */
.roomType-WER {
  background: linear-gradient(135deg, #f0f7ff 0%, #f8fbff 100%);
}

.roomType-LSR {
  background: linear-gradient(135deg, #fff5f7 0%, #fffafb 100%);
}

.roomType-LVR {
  background: linear-gradient(135deg, #f5f9f6 0%, #fafbfa 100%);
}

.roomType-PSR {
  background: linear-gradient(135deg, #f0fafb 0%, #f8fcfd 100%);
}

.roomType-SSR {
  background: linear-gradient(135deg, #f8f5fa 0%, #fcfbfd 100%);
}

.roomType-OBS {
  background: linear-gradient(135deg, #fffaf5 0%, #fffdfa 100%);
}

.roomType-TBS {
  background: linear-gradient(135deg, #fef7f9 0%, #fffbfc 100%);
}

.roomType-SIR {
  background: linear-gradient(135deg, #f5f9f6 0%, #fafbfa 100%);
}

.roomType-FAR {
  background: linear-gradient(135deg, #fffef5 0%, #fffefb 100%);
}

.roomType-SPR {
  background: linear-gradient(135deg, #f0f9fc 0%, #f8fbfd 100%);
}

.roomType-QVR {
  background: linear-gradient(135deg, #f7f5fa 0%, #fbfafc 100%);
}

.roomType-RBS {
  background: linear-gradient(135deg, #f0f7f6 0%, #f8fbfa 100%);
}

/* Room Type Name - displayed above first image with harmonious colors */
.roomTypeName {
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
  margin: 0 0 clamp(25px, 4vw, 35px) 0;
  padding: clamp(14px, 2.5vw, 20px) clamp(18px, 3vw, 28px);
  text-align: center;
  letter-spacing: clamp(0.5px, 0.1vw, 1.5px);
  position: relative;
  z-index: 2;
}

/* Harmonious colors for each room type name matching pastel backgrounds */
.roomType-WER .roomTypeName {
  color: #1565c0;
}

.roomType-LSR .roomTypeName {
  color: #c2185b;
}

.roomType-LVR .roomTypeName {
  color: #2e7d32;
}

.roomType-PSR .roomTypeName {
  color: #00838f;
}

.roomType-SSR .roomTypeName {
  color: #7b1fa2;
}

.roomType-OBS .roomTypeName {
  color: #e65100;
}

.roomType-TBS .roomTypeName {
  color: #ad1457;
}

.roomType-SIR .roomTypeName {
  color: #33691e;
}

.roomType-FAR .roomTypeName {
  color: #f57f17;
}

.roomType-SPR .roomTypeName {
  color: #0277bd;
}

.roomType-QVR .roomTypeName {
  color: #6a1b9a;
}

.roomType-RBS .roomTypeName {
  color: #00695c;
}

/* Convert slideshow containers to static image galleries */
.allRoomsContainer .WatersEdgeRooms-slideshow,
.allRoomsContainer .LagoonSideRooms-slideshow,
.allRoomsContainer .LagoonViewRooms-slideshow,
.allRoomsContainer .PoolsideRooms-slideshow,
.allRoomsContainer .SuperSaverRooms-slideshow,
.allRoomsContainer .OneBedroomRooms-slideshow,
.allRoomsContainer .TwoBedroomRooms-slideshow,
.allRoomsContainer .SpaRooms-slideshow,
.allRoomsContainer .FamilyRooms-slideshow,
.allRoomsContainer .SmokingRooms-slideshow,
.allRoomsContainer .QuantumVillaRooms-slideshow,
.allRoomsContainer .RiverboatRooms-slideshow {
  display: block;
  position: relative;
  margin-bottom: 30px;
}

/* Hide cycle pager and caption */
.allRoomsContainer .cycle-pager,
.allRoomsContainer .cycle-caption {
  display: none !important;
}

/* Display all images in slideshow as static vertical stack */
.allRoomsContainer .WatersEdgeRooms-slideshow img,
.allRoomsContainer .LagoonSideRooms-slideshow img,
.allRoomsContainer .LagoonViewRooms-slideshow img,
.allRoomsContainer .PoolsideRooms-slideshow img,
.allRoomsContainer .SuperSaverRooms-slideshow img,
.allRoomsContainer .OneBedroomRooms-slideshow img,
.allRoomsContainer .TwoBedroomRooms-slideshow img,
.allRoomsContainer .SpaRooms-slideshow img,
.allRoomsContainer .FamilyRooms-slideshow img,
.allRoomsContainer .SmokingRooms-slideshow img,
.allRoomsContainer .QuantumVillaRooms-slideshow img,
.allRoomsContainer .RiverboatRooms-slideshow img {
  display: block !important;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto 20px auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

/* Ensure slideshow containers don't hide content */
.allRoomsContainer .WatersEdgeRooms-slideshow,
.allRoomsContainer .LagoonSideRooms-slideshow,
.allRoomsContainer .LagoonViewRooms-slideshow,
.allRoomsContainer .PoolsideRooms-slideshow,
.allRoomsContainer .SuperSaverRooms-slideshow,
.allRoomsContainer .OneBedroomRooms-slideshow,
.allRoomsContainer .TwoBedroomRooms-slideshow,
.allRoomsContainer .SpaRooms-slideshow,
.allRoomsContainer .FamilyRooms-slideshow,
.allRoomsContainer .SmokingRooms-slideshow,
.allRoomsContainer .QuantumVillaRooms-slideshow,
.allRoomsContainer .RiverboatRooms-slideshow {
  overflow: visible !important;
  height: auto !important;
}

/* Room layout adjustments for all-rooms page */
.allRoomsContainer .room {
  display: flex;
  flex-direction: column;
  gap: clamp(25px, 4vw, 35px);
  margin-bottom: 0;
  padding: clamp(18px, 3vw, 25px);
  border-radius: clamp(10px, 1.5vw, 14px);
}

.allRoomsContainer .roomDesc {
  width: 100%;
}

.allRoomsContainer .roomBedandPrice {
  width: 100%;
}

/* Override any Cycle2 hiding of images */
.allRoomsContainer .cycle-slide {
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
}

.allRoomsContainer .cycle-slideshow {
  overflow: visible !important;
}

/* Ensure proper spacing with responsive fonts */
.allRoomsContainer .roomSection .leoxTitle1 {
  margin-top: clamp(20px, 3vw, 30px);
  margin-bottom: clamp(15px, 2.5vw, 20px);
  padding: clamp(10px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
  background: rgba(255, 255, 255, 0.85);
  border-left: clamp(3px, 0.5vw, 5px) solid rgba(1, 75, 66, 0.35);
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 600;
  color: rgb(1, 75, 66);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.allRoomsContainer .roomSection .iJustify {
  margin-bottom: clamp(20px, 3vw, 28px);
  line-height: 1.75;
  font-size: clamp(14px, 2vw, 16px);
  color: #2c3e50;
  padding: 0 clamp(5px, 1vw, 10px);
  text-align: justify;
}

/* Mobile-first responsive design - phones up to 480px (iPhone 14 Pro Max is 430px) */
@media only screen and (max-width: 480px) {
  .allRoomsContainer {
    padding: 10px 0;
    margin: 0;
  }

  .roomSectionTitle {
    font-size: 24px;
    margin: 40px 10px 30px 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .roomSection {
    margin-bottom: 60px;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 0;
    border-radius: 0;
  }

  .allRoomsContainer .room {
    gap: 20px;
    padding: 12px 10px;
    border-radius: 10px;
  }

  .roomTypeName {
    font-size: clamp(18px, 3vw, 24px);
    padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
    margin-bottom: clamp(18px, 3vw, 25px);
    border-radius: clamp(8px, 1.2vw, 12px);
    margin-left: 10px;
    margin-right: 10px;
  }

  .allRoomsContainer .roomAction {
    text-align: center;
    margin: 20px 0 15px 0;
    padding: 12px 10px;
  }
}

/* Small mobile devices (180px and up) - fallback for very small screens */
@media only screen and (min-width: 180px) {
  .allRoomsContainer {
    padding: 10px 0;
  }

  .roomSectionTitle {
    font-size: 24px;
    margin: 40px 10px 30px 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .roomSection {
    margin-bottom: 60px;
    margin-left: 0;
    margin-right: 0;
    padding: 25px 0;
    border-radius: 0;
  }

  .allRoomsContainer .room {
    gap: 20px;
    padding: 15px 10px;
    border-radius: 10px;
  }

  .roomTypeName {
    font-size: clamp(20px, 3.2vw, 26px);
    padding: clamp(12px, 2.2vw, 16px) clamp(14px, 2.8vw, 20px);
    margin-bottom: clamp(20px, 3.5vw, 28px);
    border-radius: clamp(9px, 1.3vw, 12px);
    margin-left: 10px;
    margin-right: 10px;
  }

  .allRoomsContainer .roomAction {
    text-align: center;
    margin: 20px 0 15px 0;
    padding: 15px 10px;
  }
}

@media only screen and (min-width: 768px) {
  .allRoomsContainer {
    padding: 20px 15px;
  }

  .roomSectionTitle {
    font-size: 28px;
    margin: 50px 0 35px 0;
  }

  .roomSection {
    margin-bottom: 70px;
    padding: 35px 25px;
    border-radius: 14px;
  }

  .allRoomsContainer .room {
    padding: 25px;
    border-radius: 12px;
  }

  .roomTypeName {
    font-size: clamp(24px, 3.5vw, 30px);
    padding: clamp(16px, 2.5vw, 20px) clamp(20px, 3vw, 28px);
    margin-bottom: clamp(25px, 4vw, 35px);
    border-radius: clamp(11px, 1.5vw, 14px);
  }
}

@media only screen and (min-width: 1024px) {
  .allRoomsContainer .room {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .allRoomsContainer .roomDesc {
    flex: 1 1 60%;
    max-width: 60%;
  }

  .allRoomsContainer .roomBedandPrice {
    flex: 1 1 40%;
    max-width: 40%;
  }

  .roomSectionTitle {
    font-size: 32px;
    text-align: left;
    padding-left: 20px;
  }
}

@media only screen and (min-width: 1200px) {
  .allRoomsContainer {
    padding: 30px 20px;
  }

  .roomSection {
    margin-bottom: 80px;
    padding-bottom: 40px;
  }
}

/* Ensure images don't break layout */
.allRoomsContainer img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Room action buttons - matching waters-edge-room page style */
.allRoomsContainer .roomAction {
  text-align: center;
  margin: clamp(20px, 3vw, 28px) 0 clamp(12px, 2vw, 18px) 0;
  padding: clamp(12px, 2vw, 18px) clamp(15px, 2.5vw, 22px);
  background: rgba(255, 255, 255, 0.85);
  border-radius: clamp(10px, 1.5vw, 12px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure all roomAction divs are visible */
.allRoomsContainer .roomBedandPrice .roomAction {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0;
  box-shadow: none;
}

/* Style the "I'll Book This Room" button to match waters-edge-room page */
.allRoomsContainer .roomAction a.ui-btn,
.allRoomsContainer .roomAction a.reserveThisRoom {
  color: teal !important;
  font: bold clamp(12px, 1.8vw, 15px) Arial;
  text-shadow: none;
  background-color: transparent;
  border: none;
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.26);
  border-radius: 0;
  padding-left: clamp(30px, 4vw, 38px);
  transition: background-color 1s;
  -moz-transition: background-color 1s;
  -o-transition: background-color 1s;
  -webkit-transition: background-color 1s;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}

.allRoomsContainer .roomAction a.ui-btn:hover {
  text-shadow: none;
  background-color: transparent;
  -webkit-box-shadow: 0 2px 5px 1px rgba(1, 75, 66, 0.5);
  box-shadow: 0 2px 5px 1px rgba(1, 75, 66, 0.5);
  background-color: #58faac;
  color: rgb(1, 75, 66) !important;
}

.allRoomsContainer .roomAction a.ui-btn:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.allRoomsContainer .roomAction .ui-btn-icon-left {
  padding-left: 2em;
}

.allRoomsContainer .roomAction .ui-btn-icon-left:after {
  background-color: teal;
  border-radius: 3px;
  left: 5px;
}

/* Pricing section styling */
.allRoomsContainer .roomPrice {
  margin-top: clamp(18px, 3vw, 25px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: clamp(10px, 1.5vw, 12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.allRoomsContainer .roomPrice .rateLabel {
  font-size: clamp(13px, 1.8vw, 15px);
}

.allRoomsContainer .roomPrice .ratePrice {
  font-size: clamp(16px, 2.2vw, 20px);
}

/* Bed configuration list styling */
.allRoomsContainer .roomBed {
  margin-bottom: clamp(18px, 3vw, 25px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: clamp(10px, 1.5vw, 12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.allRoomsContainer .roomBed ul[data-role="listview"] {
  font-size: clamp(13px, 1.8vw, 15px);
}

.allRoomsContainer .roomBed li[data-role="list-divider"] {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
}

/* Enhance image gallery styling within pastel backgrounds */
.allRoomsContainer .roomSection .WatersEdgeRooms-slideshow img,
.allRoomsContainer .roomSection .LagoonSideRooms-slideshow img,
.allRoomsContainer .roomSection .LagoonViewRooms-slideshow img,
.allRoomsContainer .roomSection .PoolsideRooms-slideshow img,
.allRoomsContainer .roomSection .SuperSaverRooms-slideshow img,
.allRoomsContainer .roomSection .OneBedroomRooms-slideshow img,
.allRoomsContainer .roomSection .TwoBedroomRooms-slideshow img,
.allRoomsContainer .roomSection .SpaRooms-slideshow img,
.allRoomsContainer .roomSection .FamilyRooms-slideshow img,
.allRoomsContainer .roomSection .SmokingRooms-slideshow img,
.allRoomsContainer .roomSection .QuantumVillaRooms-slideshow img,
.allRoomsContainer .roomSection .RiverboatRooms-slideshow img {
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}