@charset "UTF-8";
:root {
  --black: 0 0 0 /* #000000 */;
  --blue-1: 31 90 155 /* #1f5a9b */;
  --blue-2: 3 61 125 /* #033d7d */;
  --green: 16 214 31 /* #10d61f */;
  --red: 255 86 88 /* #ff5658 */;
  --white: 255 255 255 /* #ffffff */;
  --text: 68 68 68 /* #444444 */;
  --gray: 245 245 245 /* #f5f5f5 */;
  --transparent: 0 0 0 0 /* #00000000 */;
  --slate-50: 248 250 252 /* #f8fafc */;
  --slate-100: 241 245 249 /* #f1f5f9 */;
  --slate-200: 226 232 240 /* #e2e8f0 */;
  --slate-300: 202 213 226 /* #cad5e2 */;
  --slate-400: 144 161 185 /* #90a1b9 */;
  --slate-500: 98 116 142 /* #62748e */;
  --slate-600: 69 85 108 /* #45556c */;
  --slate-700: 49 65 88 /* #314158 */;
  --slate-800: 29 41 61 /* #1d293d */;
  --slate-900: 15 23 43 /* #0f172b */;
  --slate-950: 2 6 24 /* #020618 */;
  --gray-50: rgb(249 250 251) /* #f9fafb */;
  --gray-100: rgb(243 244 246) /* #f3f4f6 */;
  --gray-200: rgb(229 231 235) /* #e5e7eb */;
  --gray-300: rgb(209 213 220) /* #d1d5dc */;
  --gray-400: rgb(153 161 175) /* #99a1af */;
  --gray-500: rgb(106 114 130) /* #6a7282 */;
  --gray-600: rgb(74 85 101) /* #4a5565 */;
  --gray-700: rgb(54 65 83) /* #364553 */;
  --gray-800: rgb(30 41 57) /* #1e2939 */;
  --gray-900: rgb(16 24 40) /* #101828 */;
  --gray-950: rgb(3 7 18) /* #030712 */;
  --zinc-50: rgb(250 250 250) /* #fafafa */;
  --zinc-100: rgb(244 244 245) /* #f4f4f5 */;
  --zinc-200: rgb(228 228 231) /* #e4e4e7 */;
  --zinc-300: rgb(212 212 216) /* #d4d4d8 */;
  --zinc-400: rgb(159 159 169) /* #9f9fa3 */;
  --zinc-500: rgb(113 113 123) /* #71717b */;
  --zinc-600: rgb(82 82 92) /* #52525c */;
  --zinc-700: rgb(63 63 71) /* #3f3f47 */;
  --zinc-800: rgb(39 39 42) /* #27272a */;
  --zinc-900: rgb(24 24 27) /* #18181b */;
  --zinc-950: rgb(9 9 11) /* #09090b */;
  --neutral-50: rgb(250 250 250) /* #fafafa */;
  --neutral-100: rgb(245 245 245) /* #f5f5f5 */;
  --neutral-200: rgb(229 229 229) /* #e5e5e5 */;
  --neutral-300: rgb(212 212 212) /* #d4d4d4 */;
  --neutral-400: rgb(161 161 161) /* #a1a1a1 */;
  --neutral-500: rgb(115 115 115) /* #737373 */;
  --neutral-600: rgb(82 82 82) /* #525252 */;
  --neutral-700: rgb(64 64 64) /* #404040 */;
  --neutral-800: rgb(38 38 38) /* #262626 */;
  --neutral-900: rgb(23 23 23) /* #171717 */;
  --neutral-950: rgb(10 10 10) /* #0a0a0a */;
  --stone-50: rgb(250 250 249) /* #faf9f9 */;
  --stone-100: rgb(245 245 244) /* #f5f5f4 */;
  --stone-200: rgb(231 229 228) /* #e5e5e4 */;
  --stone-300: rgb(214 211 209) /* #d3d3d1 */;
  --stone-400: rgb(166 160 155) /* #a6a09b */;
  --stone-500: rgb(121 113 107) /* #797173 */;
  --stone-600: rgb(87 83 77) /* #575353 */;
  --stone-700: rgb(68 64 59) /* #44403b */;
  --stone-800: rgb(41 37 36) /* #292524 */;
  --stone-900: rgb(28 25 23) /* #1c1917 */;
  --stone-950: rgb(12 10 9) /* #0a0909 */;
  --red-50: rgb(254 242 242) /* #fef2f2 */;
  --red-100: rgb(255 226 226) /* #ffe2e2 */;
  --red-200: rgb(255 201 201) /* #ffc9c9 */;
  --red-300: rgb(255 162 162) /* #ffa2a2 */;
  --red-400: rgb(255 100 103) /* #ff6467 */;
  --red-500: rgb(251 44 54) /* #fb2c36 */;
  --red-600: rgb(231 0 11) /* #e7000b */;
  --red-700: rgb(193 0 7) /* #c10007 */;
  --red-800: rgb(159 7 18) /* #9f0712 */;
  --red-900: rgb(130 24 26) /* #821a1a */;
  --red-950: rgb(70 8 9) /* #460809 */;
  --orange-50: rgb(255 251 235) /* #fffbeb */;
  --orange-100: rgb(254 243 198) /* #fef3c6 */;
  --orange-200: rgb(254 230 133) /* #fee685 */;
  --orange-300: rgb(255 210 48) /* #ffd630 */;
  --orange-400: rgb(255 185 0) /* #ffb900 */;
  --orange-500: rgb(254 154 0) /* #fea000 */;
  --orange-600: rgb(225 113 0) /* #e17100 */;
  --orange-700: rgb(187 77 0) /* #bb4d00 */;
  --orange-800: rgb(151 60 0) /* #973c00 */;
  --orange-900: rgb(123 51 6) /* #7b3306 */;
  --orange-950: rgb(70 25 1) /* #461901 */;
  --yellow-50: rgb(254 252 232) /* #fffee8 */;
  --yellow-100: rgb(254 249 194) /* #fff7c2 */;
  --yellow-200: rgb(255 240 133) /* #fff085 */;
  --yellow-300: rgb(255 223 32) /* #ffdfe0 */;
  --yellow-400: rgb(253 199 0) /* #fdc700 */;
  --yellow-500: rgb(240 177 0) /* #f0b100 */;
  --yellow-600: rgb(208 135 0) /* #d08700 */;
  --yellow-700: rgb(166 95 0) /* #a65f00 */;
  --yellow-800: rgb(137 75 0) /* #894b00 */;
  --yellow-900: rgb(115 62 10) /* #733e0a */;
  --yellow-950: rgb(67 32 4) /* #432004 */;
  --lime-50: rgb(247 254 231) /* #f7ffe7 */;
  --lime-100: rgb(236 252 202) /* #ecfc8a */;
  --lime-200: rgb(216 249 153) /* #d8f99d */;
}

@font-face {
  font-family: "spa";
  src: url("../font/fonts/spa.eot?n3ado1");
  src: url("../font/fonts/spa.eot?n3ado1#iefix") format("embedded-opentype"), url("../font/fonts/spa.ttf?n3ado1") format("truetype"), url("../font/fonts/spa.woff?n3ado1") format("woff"), url("../font/fonts/spa.svg?n3ado1#spa") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "spa" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-destination:before {
  content: "\e97a";
}

.ico-booking:before {
  content: "\e97b";
}

.ico-business-trip:before {
  content: "\e97c";
}

.ico-telephone-call:before {
  content: "\e978";
}

.ico-little-kid:before {
  content: "\e979";
}

.ico-arrow-right-angular:before {
  content: "\e977";
}

.ico-wheelchair:before {
  content: "\e976";
}

.ico-luggage:before {
  content: "\e970";
}

.ico-cash-back:before {
  content: "\e971";
}

.ico-lounge:before {
  content: "\e972";
}

.ico-exchange:before {
  content: "\e973";
}

.ico-valet-parking:before {
  content: "\e974";
}

.ico-other:before {
  content: "\e975";
}

.ico-tick:before {
  content: "\e968";
}

.ico-best-price-thumb:before {
  content: "\e969";
}

.ico-call-support:before {
  content: "\e96a";
}

.ico-feedback:before {
  content: "\e96b";
}

.ico-food-tray:before {
  content: "\e96c";
}

.ico-seat:before {
  content: "\e96d";
}

.ico-more:before {
  content: "\e96e";
}

.ico-refresh:before {
  content: "\e96f";
}

.ico-plane-fly .path1:before {
  content: "\e953";
  color: rgb(176, 213, 248);
}

.ico-plane-fly .path2:before {
  content: "\e967";
  margin-left: -1.5em;
  color: rgb(3, 61, 125);
}

.ico-round-rip:before {
  content: "\e966";
}

.ico-clock .path1:before {
  content: "\e95a";
  color: rgb(3, 61, 125);
}

.ico-clock .path2:before {
  content: "\e95b";
  margin-left: -0.9287109375em;
  color: rgb(245, 245, 245);
}

.ico-clock .path3:before {
  content: "\e95c";
  margin-left: -0.9287109375em;
  color: rgb(176, 213, 248);
}

.ico-clock .path4:before {
  content: "\e95d";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path5:before {
  content: "\e95f";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path6:before {
  content: "\e960";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path7:before {
  content: "\e961";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path8:before {
  content: "\e962";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path9:before {
  content: "\e963";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path10:before {
  content: "\e964";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-clock .path11:before {
  content: "\e965";
  margin-left: -0.9287109375em;
  color: rgb(3, 61, 125);
}

.ico-discount:before {
  content: "\e941";
}

.ico-moon:before {
  content: "\e956";
}

.ico-cloudy:before {
  content: "\e957";
}

.ico-brightness:before {
  content: "\e958";
}

.ico-cloudy-night:before {
  content: "\e959";
}

.ico-lightning:before {
  content: "\e95e";
}

.ico-down-arrow:before {
  content: "\e93e";
}

.ico-bag:before {
  content: "\e942";
}

.ico-plane-from-to:before {
  content: "\e952";
}

.ico-take-off-plane:before {
  content: "\e954";
}

.ico-upgrade:before {
  content: "\e955";
}

.ico-circle-arrow-left:before {
  content: "\e950";
}

.ico-circle-arrow-right:before {
  content: "\e951";
}

.ico-check-sucess .path1:before {
  content: "\e94c";
  color: rgb(0, 0, 0);
}

.ico-check-sucess .path2:before {
  content: "\e94d";
  margin-left: -0.9736328125em;
  color: rgb(6, 171, 42);
}

.ico-check-sucess .path3:before {
  content: "\e94e";
  margin-left: -0.9736328125em;
  color: rgb(255, 255, 255);
}

.ico-download-circle:before {
  content: "\e94f";
}

.ico-star-padlock:before {
  content: "\e94b";
}

.ico-businessman:before {
  content: "\e94a";
}

.ico-time-outline:before {
  content: "\e949";
}

.ico-door:before {
  content: "\e948";
}

.ico-grid:before {
  content: "\e946";
}

.ico-list:before {
  content: "\e947";
}

.ico-edit-search:before {
  content: "\e945";
}

.ico-sorting:before {
  content: "\e944";
}

.ico-filter:before {
  content: "\e943";
}

.ico-arrow-down:before {
  content: "\e93f";
}

.ico-arrow-up:before {
  content: "\e940";
}

.ico-map-list:before {
  content: "\e93d";
}

.ico-view-list:before {
  content: "\e93c";
  color: #fff;
}

.ico-star-outline:before {
  content: "\e93a";
  color: #eee;
}

.ico-star-fill:before {
  content: "\e93b";
}

.ico-bed-1:before {
  content: "\e938";
}

.ico-suite:before {
  content: "\e939";
}

.ico-home:before {
  content: "\e937";
}

.ico-prev:before {
  content: "\e91b";
}

.ico-next:before {
  content: "\e935";
}

.ico-minus-circle:before {
  content: "\e90f";
}

.ico-star:before {
  content: "\e90e";
}

.ico-plane-globe:before {
  content: "\e900";
}

.ico-passport:before {
  content: "\e901";
}

.ico-user-info:before {
  content: "\e902";
}

.ico-close:before {
  content: "\e903";
}

.ico-check:before {
  content: "\e904";
}

.ico-add-circle:before {
  content: "\e905";
}

.ico-delete:before {
  content: "\e906";
}

.ico-calendar-outline:before {
  content: "\e907";
}

.ico-logout:before {
  content: "\e908";
}

.ico-settings:before {
  content: "\e909";
}

.ico-airplane:before {
  content: "\e90a";
}

.ico-user-outline:before {
  content: "\e90b";
}

.ico-eye:before {
  content: "\e90c";
}

.ico-padlock:before {
  content: "\e90d";
}

.ico-mail-outline:before {
  content: "\e910";
}

.ico-email:before {
  content: "\e911";
}

.ico-arrow-right-up:before {
  content: "\e912";
}

.ico-clear:before {
  content: "\e913";
}

.ico-landing:before {
  content: "\e914";
}

.ico-take-off:before {
  content: "\e915";
}

.ico-slider:before {
  content: "\e916";
}

.ico-location-pin:before {
  content: "\e917";
}

.ico-cart:before {
  content: "\e918";
}

.ico-heart:before {
  content: "\e919";
}

.ico-globe:before {
  content: "\e91a";
}

.ico-arrowright:before {
  content: "\e91c";
}

.ico-group:before {
  content: "\e91d";
}

.ico-time:before {
  content: "\e91e";
}

.ico-save:before {
  content: "\e91f";
}

.ico-building:before {
  content: "\e920";
}

.ico-verified:before {
  content: "\e921";
}

.ico-support:before {
  content: "\e922";
}

.ico-guide:before {
  content: "\e923";
}

.ico-book .path1:before {
  content: "\e924";
  color: rgb(0, 0, 0);
}

.ico-book .path2:before {
  content: "\e925";
  margin-left: -1.2861328125em;
  color: rgb(0, 0, 0);
}

.ico-book .path3:before {
  content: "\e926";
  margin-left: -1.2861328125em;
  color: rgb(0, 0, 0);
}

.ico-book .path4:before {
  content: "\e927";
  margin-left: -1.2861328125em;
  color: rgb(255, 255, 255);
}

.ico-book .path5:before {
  content: "\e928";
  margin-left: -1.2861328125em;
  color: rgb(255, 255, 255);
}

.ico-book .path6:before {
  content: "\e929";
  margin-left: -1.2861328125em;
  color: rgb(255, 255, 255);
}

.ico-book .path7:before {
  content: "\e92a";
  margin-left: -1.2861328125em;
  color: rgb(255, 255, 255);
}

.ico-book .path8:before {
  content: "\e92b";
  margin-left: -1.2861328125em;
  color: rgb(255, 255, 255);
}

.ico-book .path9:before {
  content: "\e92c";
  margin-left: -1.2861328125em;
  color: rgb(0, 0, 0);
}

.ico-book .path10:before {
  content: "\e92d";
  margin-left: -1.2861328125em;
  color: rgb(0, 0, 0);
}

.ico-book .path11:before {
  content: "\e92e";
  margin-left: -1.2861328125em;
  color: rgb(0, 0, 0);
}

.ico-search:before {
  content: "\e92f";
}

.ico-user:before {
  content: "\e930";
}

.ico-calender:before {
  content: "\e931";
}

.ico-map:before {
  content: "\e932";
}

.ico-holiday:before {
  content: "\e933";
}

.ico-plane:before {
  content: "\e934";
}

.ico-bed:before {
  content: "\e936";
}

#hotel-map-modal .map-location-pin {
  position: relative;
  z-index: 10;
}
#hotel-map-modal .map-location-pin:hover {
  z-index: 20;
}
#hotel-map-modal:not(.hidden) {
  animation: fadeIn 0.3s ease-out;
}
#hotel-map-modal .map-background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#hotel-map-modal #hotel-map-search-results .map-search-result {
  border-bottom: 1px solid #f3f4f6;
}
#hotel-map-modal #hotel-map-search-results .map-search-result:last-child {
  border-bottom: none;
}
#hotel-map-modal #hotel-map-search-results .map-search-result:hover {
  background-color: #f9fafb;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  #hotel-map-modal .map-location-pin div:first-child {
    width: 8px;
    height: 8px;
  }
  #hotel-map-modal #hotel-map-search {
    font-size: 16px;
  }
}
/* Mobile Destination Modal Styles */
#destination-modal,
#flight-destination-modal {
  backdrop-filter: blur(4px);
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#mobile-destination-search,
#mobile-flight-search {
  font-size: 16px; /* Prevent zoom on iOS */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ALL DROPDOWN CONTAINERS - UNIVERSAL FIX */
#destinationDropdown,
#holidayDestinationDropdown,
#goingFromDropdown,
#goingToDropdown,
#all-classes-dropdown,
#travellersDropdownFlight {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* FLIGHT SPECIFIC DROPDOWN CONSTRAINTS */
#all-classes-dropdown {
  max-width: 200px !important;
  min-width: 150px !important;
}

#travellersDropdownFlight {
  max-width: 320px !important;
  min-width: 280px !important;
}

.destination-item {
  transition: all 0.2s ease;
}

.destination-item:hover {
  background-color: #f9fafb !important;
}

.destination-item.bg-blue-50 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
}

.destination-item .flex-shrink-0 .bg-gray-400 {
  background-color: #9ca3af;
}

/* Desktop "Select from map" styling */
#destinationDropdown .hover\\:bg-blue-50:hover,
#holidayDestinationDropdown .hover\\:bg-blue-50:hover {
  background-color: #eff6ff !important;
}

#destinationDropdown .text-blue-600,
#holidayDestinationDropdown .text-blue-600 {
  color: #2563eb !important;
}

/* RESET ALL DROPDOWN STYLING - COMPREHENSIVE FIX */
/* Flight destination dropdown styling - FIXED VERSION */
#goingFromDropdown,
#goingToDropdown {
  /* Basic positioning */
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 100% !important;
  /* Width constraints */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* Reset transforms */
  transform: none !important;
  /* Overflow handling */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* Box model */
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Max height */
  max-height: 300px !important;
}

/* COMPREHENSIVE FLIGHT SEARCH CONSTRAINTS */
/* Main flight search container */
#flight-tab {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#flight-tab .search-form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* All flex containers in flight search */
#flight-tab .flex {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Form groups */
.form-group {
  position: relative !important;
  overflow: visible !important;
  min-width: 0 !important;
  flex: 1 !important;
  /* max-width: 100% !important; */
  box-sizing: border-box !important;
}

.form-group .relative {
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Flight dropdown content constraints */
#goingFromDropdown .flight-destination-item,
#goingToDropdown .flight-destination-item {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#goingFromDropdown .flight-destination-item > div,
#goingToDropdown .flight-destination-item > div {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Flight form container constraints */
#flight-tab .search-form {
  /* Removed overflow-x: hidden to prevent cutting off elements */
}

/* Flight destination modal specific styling */
#flight-destination-modal {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  position: fixed !important;
}

/* Target only the modal content, not other elements */
#flight-destination-modal > div {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure flight form groups don't cause overflow */
.search-form .form-group {
  min-width: 0;
  overflow: hidden;
}

/* Flight tab specific container constraints */
#flight-tab .flex {
  min-width: 0;
}

#flight-tab .form-group {
  min-width: 0;
  flex: 1;
}

/* Ensure flight dropdown content doesn't overflow */
.flight-destination-item {
  max-width: 100%;
  overflow: hidden;
}

.flight-destination-item .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ADVANCED FILTERS POPOVER CONSTRAINTS */
/* Toggle button styling */
#advance-filters-toggle {
  transition: all 0.2s ease;
}

#advance-filters-toggle:hover {
  opacity: 0.8;
}

/* Mobile modal width constraints - only for modals */
@media (max-width: 1023px) {
  #destination-modal,
  #flight-destination-modal {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    position: fixed !important;
    inset: 0 !important;
  }
  /* Only apply overflow hidden to the modal containers themselves */
  #destination-modal,
  #flight-destination-modal {
    overflow-x: hidden !important;
  }
  #destination-modal > div,
  #flight-destination-modal > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Popover constraints on mobile */
}
/* Hide desktop dropdowns on mobile */
@media (max-width: 1023px) {
  #destinationDropdown,
  #holidayDestinationDropdown,
  #goingFromDropdown,
  #goingToDropdown {
    display: none !important;
  }
  /* Make destination inputs readonly on mobile to prevent keyboard */
  #destinationInput,
  #holidayDestinationInput,
  #goingFromInput,
  #goingToInput {
    cursor: pointer;
    caret-color: transparent;
  }
}
.shadow-light {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
}

/* Enhanced Hotel Gallery Styles */
.hotel-gallery {
  /* Ensure consistent spacing and alignment */
}
.hotel-gallery .group {
  position: relative;
  overflow: hidden;
}
.hotel-gallery {
  /* Smooth image scaling on hover */
}
.hotel-gallery img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotel-gallery {
  /* Enhanced shadow effects */
}
.hotel-gallery .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.hotel-gallery .hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.hotel-gallery {
  /* Mobile optimizations */
}
@media (max-width: 768px) {
  .hotel-gallery {
    gap: 0.5rem;
  }
  .hotel-gallery .rounded-lg {
    border-radius: 0.5rem;
  }
}
.hotel-gallery {
  /* Desktop optimizations */
}
@media (min-width: 1024px) {
  .hotel-gallery {
    gap: 0.75rem;
  }
  .hotel-gallery .lg\:rounded-xl {
    border-radius: 0.75rem;
  }
}

/* Lightbox enhancements */
.lightbox-modal {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Smooth thumbnail scrolling */
#lightbox-thumbnails {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#lightbox-thumbnails::-webkit-scrollbar {
  height: 4px;
}

#lightbox-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

#lightbox-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

#lightbox-thumbnails::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Loading animation improvements */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Responsive image gallery grid adjustments */
@media (max-width: 640px) {
  .hotel-gallery {
    grid-template-columns: 1fr;
    height: auto !important;
  }
  .hotel-gallery .lg\:col-span-2 {
    grid-column: span 1;
    height: 250px;
  }
  .hotel-gallery .lg\:col-span-2:last-child {
    height: auto;
  }
  .hotel-gallery .lg\:col-span-2:last-child .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 200px;
  }
}
.flatpickr-calendar {
  background-color: #ffffff; /* bg-white */
  border: 1px solid #e5e7eb; /* border-gray-200 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.flatpickr-months {
  color: #03307D; /* text-primary */
  font-family: "Inter", sans-serif; /* font-heading */
  font-weight: 700; /* font-bold */
}

.flatpickr-current-month {
  color: #03307D; /* text-primary */
}

.flatpickr-day {
  color: #111827; /* text-dark-900 */
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem; /* rounded-md */
  transition: all 0.2s;
}

.flatpickr-day:hover {
  background-color: #D5EAFF; /* bg-primary-100 */
  color: #03307D; /* text-primary */
}

.flatpickr-day.today {
  border: 1px solid #03307D; /* border-primary */
  color: #03307D; /* text-primary */
  font-weight: 700; /* font-bold */
}

.flatpickr-day.selected {
  background-color: #03307D !important; /* bg-primary */
  color: #ffffff; /* text-white */
  font-weight: 700; /* font-bold */
  border-radius: 0 5px 5px 0 !important;
}

.flatpickr-day.disabled {
  color: #9ca3af; /* text-gray-400 */
  cursor: not-allowed;
}

.flatpickr-day.hidden {
  visibility: hidden;
  display: flex;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #d1d5db; /* text-gray-300 */
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-weight: 600 !important;
}

.flatpickr-time {
  border-top: 1px solid #e5e7eb; /* border-gray-200 */
  padding: 0.5rem; /* p-2 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-time input {
  background-color: #ffffff; /* bg-white */
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  color: #111827; /* text-dark-900 */
}

.flatpickr-time input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #D5EAFF; /* ring-2 ring-primary-300 */
}

.flatpickr-time .flatpickr-am-pm {
  background-color: #10D61F; /* bg-secondary */
  color: #ffffff; /* text-white */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem; /* ml-2 */
  cursor: pointer;
}

.flatpickr-day.inRange {
  background-color: #D5EAFF !important; /* bg-primary-200 */
  color: #03307D; /* text-primary */
  box-shadow: -5px 0 0 #D5EAFF, -5px 0 0 #D5EAFF;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.endRange.endRange {
  position: relative;
  background-color: #03307D !important; /* bg-primary */
  color: #ffffff; /* text-white */
  font-weight: 700;
  box-shadow: -5px 0 0 #D5EAFF, 0px 0 0 #D5EAFF;
}

/* Mobile-only Flatpickr styling */
@media (max-width: 1023px) {
  /* make calendar full width */
  .flatpickr-calendar {
    width: 100% !important;
    max-width: none !important;
  }
  /* make days container flexible */
  .flatpickr-days, .flatpickr-rContainer {
    width: 100% !important;
  }
  .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* 7 equal columns */
    justify-content: stretch !important;
  }
  .flatpickr-day.inRange {
    background-color: #D5EAFF !important; /* bg-primary-200 */
    color: #03307D; /* text-primary */
    box-shadow: -5px 0 0 #D5EAFF, 8px 0 0 #D5EAFF;
  }
}
@media (max-width: 768px) {
  .search-container.research:not(.active) {
    display: none;
  }
}

/* Hotel List Page Styles */
/* jQuery UI Slider customization to match the design */
.ui-slider.ui-slider-horizontal {
  height: 8px;
  background: #EEEEEE;
  border: none;
  border-radius: 2px;
  position: relative;
}

.ui-slider .ui-slider-range {
  background: #10D61F;
  border-radius: 2px;
  height: 8px;
}

.ui-slider .ui-slider-handle {
  width: 20px;
  height: 20px;
  box-shadow: 2.14px 2.85px 2.85px 0px rgba(131, 131, 131, 0.1411764706);
  background: #10D61F;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  top: -7px;
  margin-left: -8px;
  border: 7.13px solid white;
}

.ui-slider .ui-slider-handle:hover {
  transform: scale(1.25);
  transition: transform 0.2s ease;
}

.ui-slider .ui-slider-handle:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.ui-slider .ui-slider-handle:active {
  transform: scale(1.1);
}

/* Specific styling for price range slider */
#price-range-slider {
  height: 8px;
  background: #EEEEEE;
  border: none;
  border-radius: 2px;
  position: relative;
}

#price-range-slider .ui-slider-range {
  background: #10D61F;
  border-radius: 2px;
  height: 8px;
}

#price-range-slider .ui-slider-handle {
  width: 20px;
  height: 20px;
  box-shadow: 2.14px 2.85px 2.85px 0px rgba(131, 131, 131, 0.1411764706);
  background: #10D61F;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  top: -7px;
  margin-left: -8px;
  border: 7.13px solid white;
}

#price-range-slider .ui-slider-handle:hover {
  transform: scale(1.25);
  transition: transform 0.2s ease;
}

#price-range-slider .ui-slider-handle:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

#price-range-slider .ui-slider-handle:active {
  transform: scale(1.1);
}

/* Value labels positioning */
[id$=-left-value] {
  position: absolute;
  top: -30px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

[id$=-right-value] {
  position: absolute;
  top: -30px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

/* Legacy support for static IDs */
#left-value {
  position: absolute;
  top: -30px;
  font-weight: 500;
  color: #374151;
  transform: translateX(-40%);
  white-space: nowrap;
}

#right-value {
  position: absolute;
  top: -30px;
  font-weight: 500;
  color: #374151;
  transform: translateX(-60%);
  white-space: nowrap;
}

/* Price scale ticks below slider */
[id$=-price-scale], #price-scale {
  position: relative;
  width: 100%;
  height: 8px;
  opacity: 0.4;
}

/* Legacy CSS gradient approach (fallback) */
#price-scale {
  background-image: repeating-linear-gradient(to right, transparent, transparent 2%, #757575 2%, #757575 2.2%, transparent 2.2%, transparent 4%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#price-scale::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(to right, #757575 0px, #757575 1px, transparent 1px, transparent 5.167px);
  opacity: 0.14;
}

#price-range-slider .ui-slider-handle:active {
  transform: scale(1.1);
}

/* Value labels positioning */
#left-value, #right-value {
  position: absolute;
  top: -30px;
  font-weight: 500;
  color: #374151;
}

/* Price scale ticks below slider */
#price-scale {
  background-image: repeating-linear-gradient(to right, transparent, transparent 2%, #757575 2%, #757575 2.2%, transparent 2.2%, transparent 4%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#price-scale::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(to right, #757575 0px, #757575 1px, transparent 1px, transparent 5.167px);
  opacity: 0.14;
}

/* Hotel filters styling */
.hotel-filters .filter-section {
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem;
}
.hotel-filters .filter-section:last-child {
  border-bottom: none;
}
.hotel-filters .filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.hotel-filters .filter-header h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}
.hotel-filters .filter-header button {
  color: #9ca3af;
  transition: color 0.2s ease;
}
.hotel-filters .filter-header button:hover {
  color: #6b7280;
}
.hotel-filters .filter-header button i {
  font-size: 0.875rem;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
.hotel-filters .filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
}
.hotel-filters .filter-option:hover {
  background-color: #f9fafb;
}
.hotel-filters .filter-option .option-content {
  display: flex;
  align-items: center;
}
.hotel-filters .filter-option .option-content input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  accent-color: #10D61F;
  border: 1px solid #EEEEEE;
  border-radius: 0.25rem;
}
.hotel-filters .filter-option .option-content input[type=checkbox]:focus {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5);
}
.hotel-filters .filter-option .option-content span {
  font-size: 0.875rem;
  color: #374151;
}
.hotel-filters .filter-option .option-count {
  font-size: 0.75rem;
  color: #9ca3af;
}
.hotel-filters .star-rating-container {
  display: flex;
  gap: 0.5rem;
}
.hotel-filters #star-rating-content {
  display: flex !important;
  gap: 8px !important;
}
.hotel-filters #star-rating-content label.cursor-pointer {
  flex: 1;
}
.hotel-filters #star-rating-content label.cursor-pointer div.border {
  width: 100% !important;
  min-height: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  gap: 6px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background-color: white !important;
  transition: all 0.2s ease !important;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
}
.hotel-filters #star-rating-content label.cursor-pointer div.border:hover {
  border-color: var(--color-secondary, #6366f1) !important;
  background-color: #f9fafb !important;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(99, 102, 241, 0.3);
}
.hotel-filters #star-rating-content label.cursor-pointer div.border div.flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.hotel-filters #star-rating-content label.cursor-pointer div.border div.flex span {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  line-height: 1 !important;
}
.hotel-filters #star-rating-content label.cursor-pointer div.border div.flex i.ico-star-fill {
  color: #fbbf24 !important;
  font-size: 14px !important;
}
.hotel-filters #star-rating-content label.cursor-pointer div.border > span:last-child {
  font-size: 12px !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.hotel-filters #star-rating-content label.cursor-pointer input:checked + div {
  border-color: var(--color-secondary, #6366f1) !important;
  background-color: var(--color-secondary, #6366f1) !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px 2px rgba(99, 102, 241, 0.2) !important;
}
.hotel-filters #star-rating-content label.cursor-pointer input:checked + div span {
  color: white !important;
}
.hotel-filters #star-rating-content label.cursor-pointer input:checked + div div.flex span {
  color: white !important;
}
.hotel-filters #star-rating-content label.cursor-pointer input:checked + div i.ico-star-fill {
  color: white !important;
}
.hotel-filters #star-rating-content label.cursor-pointer input:focus,
.hotel-filters #star-rating-content label.cursor-pointer input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.toggle-switch div[class*=w-11][class*=h-6] {
  width: 64px !important;
  height: 36px !important;
  background-color: #f1f5f9 !important;
  border: none !important;
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.81px rgba(0, 0, 0, 0.04);
}
.toggle-switch div[class*=w-11][class*=h-6]::after {
  background-color: white !important;
  border: none !important;
  box-shadow: 0px 2.42px 0.81px 0px rgba(0, 0, 0, 0.06), 0px 2.42px 6.45px 0px rgba(0, 0, 0, 0.15), 0px 0px 0px 0.81px rgba(0, 0, 0, 0.04) !important;
  width: 32px !important;
  height: 32px !important;
  top: 2px !important;
  left: 2px !important;
}
.toggle-switch div[class*=w-11][class*=h-6].peer-checked\:bg-secondary {
  background-color: var(--color-secondary, #6366f1) !important;
}
.toggle-switch div[class*=w-11][class*=h-6].peer-checked\:bg-secondary::after {
  transform: translateX(30px) !important;
}
.toggle-switch div[class*=w-11][class*=h-6].peer-focus\:ring-secondary, .toggle-switch div[class*=w-11][class*=h-6]:focus, .toggle-switch div[class*=w-11][class*=h-6]:focus-visible, .toggle-switch div[class*=w-11][class*=h-6]:focus-within {
  outline: none !important;
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.81px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
}
.toggle-switch div[class*=w-11][class*=h-6]:active, .toggle-switch div[class*=w-11][class*=h-6].peer:active {
  outline: none !important;
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.81px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  transform: none !important;
}
.toggle-switch input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
  margin: 0;
  outline: none !important;
  border: none !important;
}
.toggle-switch input[type=checkbox]:focus, .toggle-switch input[type=checkbox]:focus-visible, .toggle-switch input[type=checkbox]:focus-within, .toggle-switch input[type=checkbox]:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.toggle-switch input[type=checkbox]::-moz-focus-inner {
  border: 0 !important;
  outline: none !important;
}

@media screen and (max-width: 780px) {
  .glightbox-clean .gnext {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 40px;
    height: 50px;
  }
  .glightbox-clean .gprev {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 40px;
    height: 50px;
  }
}
.custom-radio {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #BDBDBD;
  border-radius: 50%;
  background-color: white;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  outline: none;
  box-shadow: none;
}
.custom-radio:focus {
  outline: none;
  box-shadow: none;
}
.custom-radio:checked {
  border-color: #BDBDBD;
  background-color: white;
}
.custom-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: #1F5A9B;
  border-radius: 50%;
}
.custom-radio:hover {
  border-color: #BDBDBD;
}

/* Home hero + search-section (snippets/home.html); source of truth: snippets/css/home.css */
/* Hero title: single line above search area; teal/green to match search card */
.home-hero-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  background: rgba(5, 113, 104, 0.7);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Red circle + white heart asset; wrap for spacing (margin-inline) and glow in LTR/RTL */
.home-hero-heart-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-inline: 0.35rem;
  line-height: 0;
  flex-shrink: 0;
}

.home-hero-heart-wrap .home-hero-title-icon {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 6px rgba(255, 86, 88, 0.45));
}

@media (min-width: 640px) {
  .home-hero-title {
    font-size: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .home-hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .home-hero-heart-wrap .home-hero-title-icon {
    width: 40px;
    height: 40px;
  }
  .home-hero-heart-wrap {
    margin-inline: 0.5rem;
  }
}
.home-hero-title-accent {
  color: #fff;
}

/* Hero + search: headline lives inside .home-search-section (same band as search on index home). */
.hero-section {
  min-height: 360px;
}

/* Center headline vertically in hero when search is below */
.home-hero-grid {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.home-hero-headline {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  z-index: 6;
}

/* Dedicated search band below hero (oldworking search-section) */
.home-search-section {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  background: linear-gradient(to top, #f3f9ff 50%, #ffffff 50%);
  min-height: 4.5rem;
}

.home-search-section-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .home-search-section-container {
    max-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.home-search-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
}

.home-search-wrap .home-search-inner {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.home-search-wrap .search-container.search-area {
  width: 100%;
  max-width: none;
}

.home-search-wrap #tabs-content > div.tab-content[id$="-tab"],
.search-container.search-area #tabs-content > div.tab-content[id$="-tab"] {
  display: block !important;
}

.home-search-tab-loading {
  min-height: 120px;
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .hero-section {
    min-height: 420px;
  }
  .home-hero-grid {
    min-height: 420px;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    min-height: 480px;
  }
  .home-hero-grid {
    min-height: 480px;
  }
}

/*
 * ─── Desktop only (≥1024px): hero + search unity plan — NOT for mobile/tablet ───
 * Index route only: every selector includes .home-root. Does not touch @media (max-width: 1023px).
 */
@media (min-width: 1024px) {
  .home-root .home-hero-grid {
    justify-content: flex-end;
  }

  /* Let Tailwind `.container` control max-width; only tweak vertical spacing */
  .home-root .hero-section > .container {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  }

  .home-root .home-search-section {
    padding-top: 0;
    /* Default gradient uses #fff on top half — reads as a strip above the card on desktop */
    background: #f3f9ff;
  }

  /* Kill Tailwind py-3 on index home desktop — otherwise padding-top exposes white/mint above .search-area */
  .home-root .home-search-wrap .spa-search-root {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-root .home-hero-headline {
    width: 100%;
    max-width: none;
  }

  /* Solid primary-650 — same as .bg-primary-650 on .search-area */
  .home-root .home-hero-headline .home-hero-title {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    white-space: normal;
    border-radius: 1.5rem 1.5rem 0 0;
    background: rgb(0, 146, 149);
    padding: clamp(1rem, 2.2vw, 1.75rem) 1rem;
  }

  .home-root .home-search-wrap .search-container.search-area:not(.research) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/*
 * ─── Mobile / tablet only (≤1023px): hero band + search card layout ───
 * Desktop unity rules above do NOT apply here. Bottom-fill: .spa-search-root + form h-full overrides at end of this block.
 */
@media (max-width: 1023px) {
  .hero-section {
    background-image: none !important;
    background-color: rgb(5, 113, 104);
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .home-hero-grid {
    min-height: 0;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .hero-section > .container {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .home-hero-headline {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  .home-hero-headline .home-hero-title {
    white-space: normal;
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border-radius: 0.75rem;
    margin: 0;
    text-align: center;
    background: transparent;
  }
  html[dir=rtl] .home-hero-headline .home-hero-title {
    text-align: center;
  }
  .home-search-section {
    background: #e8f7f4;
    padding-top: 0 !important;
    /* No bottom padding — was a mint strip between teal card and Recent Searches */
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
  }
  .home-search-section .home-search-section-container,
  .home-search-section .home-search-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .home-search-wrap {
    display: block;
  }
  .home-search-wrap > * {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Mobile index: bottom fill — no extra padding under teal .search-area */
  .home-search-wrap .spa-search-root {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .home-search-wrap .home-search-inner,
  .home-search-wrap .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .home-search-wrap .search-container.search-area {
    width: 100% !important;
    max-width: none !important;
  }
  .home-search-wrap .search-container.search-area:not(.research) {
    border-radius: 0 !important;
  }
  .home-search-wrap #desktop-hotel-search-form .grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .home-search-wrap #desktop-hotel-search-form .grid > .form-group:nth-child(1) {
    grid-column: 1/-1;
  }
  .home-search-wrap #desktop-hotel-search-form .grid > .form-group:nth-child(4) {
    grid-column: 1/-1;
  }
  .home-search-wrap #desktop-hotel-search-form .form-group.flex.flex-col > div:last-child {
    width: 100%;
    margin-top: 0.5rem;
  }
  /* Hotel search submit: do not restyle here — snippet uses dev h-[36px] / rounded-md / bg-secondary */

  /* Mobile index: bottom fill inside card — drop h-full stretch */
  .home-search-wrap #desktop-hotel-search-form > .flex.flex-col.h-full {
    height: auto !important;
    min-height: 0 !important;
  }
  .home-search-wrap #desktop-hotel-search-form .grid > .form-group.flex.flex-col.h-full {
    height: auto !important;
    min-height: 0 !important;
  }
  .home-search-wrap #desktop-hotel-search-form .grid > .form-group.flex.flex-col > div.w-full.h-full {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Nested panel template uses .recent-searches-section.py-2 — kills gap under search on home mobile */
  .home-root .recent-searches-section .recent-searches-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 520px) {
  .home-hero-headline .home-hero-title {
    font-size: 1.125rem;
  }
  .home-hero-heart-wrap .home-hero-title-icon {
    width: 24px;
    height: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLASS MODERN — Design Tokens (proposal-3)
   Override these on :root (or a wrapper class) to re-skin the theme.
   Used by: hgm-header, hgm-footer, recent-searches glass cards.
   The original desktop glass hero (below) still uses literal values for
   safety; migrate selectively after visual validation.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Navy palette (proposal-3 hero gradient stops) */
  --hgm-navy-900: #041830;
  --hgm-navy-800: #062a5c;
  --hgm-navy-700: #073060;
  --hgm-navy-600: #0a3d7a;
  --hgm-navy-500: #031f50;
  --hgm-navy-base: #0d1f40;

  /* Green accent (CTAs, highlight, badge dot) */
  --hgm-green: #10D61F;
  --hgm-green-dark: #0ab518;
  --hgm-green-light: #6ef77a;
  --hgm-green-glow: rgba(16, 214, 31, 0.4);
  --hgm-green-soft: rgba(16, 214, 31, 0.15);

  /* Glass surface (translucent white over navy) */
  --hgm-glass-bg: rgba(255, 255, 255, 0.11);
  --hgm-glass-border: rgba(255, 255, 255, 0.22);
  --hgm-glass-shadow: 0 8px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --hgm-glass-shadow-mobile: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --hgm-glass-blur: blur(24px) saturate(1.8);

  /* Pill / icon-button surface */
  --hgm-pill-bg: rgba(255, 255, 255, 0.06);
  --hgm-pill-bg-hover: rgba(255, 255, 255, 0.12);
  --hgm-pill-border: rgba(255, 255, 255, 0.08);
  --hgm-pill-border-hover: rgba(255, 255, 255, 0.18);

  /* Whites for text on navy */
  --hgm-text-strong: #ffffff;
  --hgm-text-soft: rgba(255, 255, 255, 0.85);
  --hgm-text-muted: rgba(255, 255, 255, 0.65);
  --hgm-text-faint: rgba(255, 255, 255, 0.45);
  --hgm-text-label: rgba(255, 255, 255, 0.5);

  /* Recent search cards (white surface section) */
  --hgm-card-bg: #f9fafb;
  --hgm-card-border: #e5e7eb;
  --hgm-card-bg-hover: #eff6ff;
  --hgm-badge-bg: #dbeafe;
  --hgm-badge-text: #1e40af;

  /* Published alahlla.com brand (primary-650 + deep teal) */
  --aat-teal: #009295;
  --aat-teal-deep: #057168;
  --aat-mint-band: #e8f7f4;

  /* Header/footer shell — same as Tailwind `bg-primary-dark` (default_from_dev_SPA_2026-04-10 header-static / footer) */
  --hgm-header-footer-bg: rgb(0, 47, 52);
  --hgm-header-footer-bg-deep: rgb(0, 35, 40);
}


/* ═══════════════════════════════════════════════════════════════
   GLASS MODERN HERO  —  Desktop only (≥ 1024 px)
   All rules scoped under .home-root.hero-glass-mode so mobile is untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes (global; browser ignores inside @media) ──────── */
@keyframes hgmBlob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-22px) scale(1.06); }
}
/* UI refinement (Phase 2.2): smoother pill-dot pulse — asymmetric keyframes
   give an organic "breath" rather than a metronome bounce. The dot brightens
   and grows over a longer rise (60% of the cycle) and falls back faster.
   The ring at 60% adds a subtle glow that fades, suggesting "live signal"
   without the harshness of a hard scale jump. */
@keyframes hgmPillPulse {
  0%   { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 rgba(16,214,31,.55); }
  60%  { opacity: .55; transform: scale(1.35); box-shadow: 0 0 0 6px rgba(16,214,31,0); }
  100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 rgba(16,214,31,0); }
}

/* ── Hide glass elements on mobile (shown only in desktop block) */
.hgm-blob,
.hgm-dots,
.hgm-pill,
.hgm-stats-strip { display: none; }

/* ─────────────────────────────────── DESKTOP ≥ 1024 px ────── */
@media (min-width: 1024px) {

  /* Root: position context for absolutely-placed blobs.
     CRITICAL: use `overflow-x: clip` (not `hidden`). Per CSS 2.1, setting
     overflow-x: hidden with overflow-y: visible forces overflow-y to
     compute as `auto`, turning .home-root into a scroll container that
       1. traps wheel events (page won't scroll when cursor is over hero)
       2. visually clips descendant popovers (Rooms & Adults dropdown).
     `overflow-x: clip` is a CSS Level 3 value that clips without forcing
     the other axis, letting overflow-y stay `visible`. */
  .home-root.hero-glass-mode {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Rooms & Adults popover — cap height to fit viewport so items are
     never cut off below the fold, and size it wider than the button
     so counters + labels are comfortable to read. */
  /* Rooms & Adults popover (#dropdown) — desktop sizing & z-index.
     Selector uses body:has(.home-root.hero-glass-mode) so the rule keeps
     matching after the popover is teleported to <body> on open (the
     teleport is required to escape the .tab-content backdrop-filter
     stacking context — see search-hotel_postScript.js). z-index: 1000
     puts it above the navy header (z:100) and the active tab (z:7). */
  body:has(.home-root.hero-glass-mode) #dropdown {
    min-width: 260px !important;
    max-width: 300px !important;
    z-index: 1000 !important;
  }
  body:has(.home-root.hero-glass-mode) #dropdown > div {
    max-height: min(400px, calc(100vh - 220px)) !important;
  }

  /* Unified wash on .home-search-section (hero + search + stats strip — ::before fills this one block) */
  .home-root.hero-glass-mode:not(.is-teal-search) .home-search-section {
    position: relative;
    z-index: 3;
    background: none !important;
    background-image: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-section {
    position: relative;
    z-index: 3;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  /* Proposal hero-bg: 160deg + two radials (RTL = mirrored hotspot positions) */
  .home-root.hero-glass-mode:not(.is-teal-search) .home-search-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Layered: dot pattern (top) + two radials + linear navy base (bottom).
       First comma layer paints on top, so dots render over the navy gradient. */
    background-image:
      radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px),
      radial-gradient(ellipse 80% 60% at 20% 50%, #0a3d7a 0%, transparent 60%),
      radial-gradient(ellipse 70% 80% at 80% 30%, #062a5c 0%, transparent 55%),
      linear-gradient(160deg, #041830 0%, #073060 40%, #031f50 100%);
    background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, center, center, center;
  }
  html[dir="ltr"] .home-root.hero-glass-mode:not(.is-teal-search) .home-search-section::before {
    background-image:
      radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px),
      radial-gradient(ellipse 80% 60% at 80% 50%, #0a3d7a 0%, transparent 60%),
      radial-gradient(ellipse 70% 80% at 20% 30%, #062a5c 0%, transparent 55%),
      linear-gradient(160deg, #041830 0%, #073060 40%, #031f50 100%);
    background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, center, center, center;
  }
  /* The separate .hgm-dots DOM element is hidden behind .home-search-section (z:3)
     because root stacking context paints dots (z:2) below the section. Hide it to
     avoid any half-render, since the section ::before now carries the dot pattern. */
  .home-root.hero-glass-mode .hgm-dots { display: none !important; }

  /* Hero: transparent on glass desktop — paint from .home-search-section::before */
  .home-root.hero-glass-mode:not(.is-teal-search) .hero-section,
  html[dir="rtl"] .home-root.hero-glass-mode:not(.is-teal-search) .hero-section,
  html[dir="ltr"] .home-root.hero-glass-mode:not(.is-teal-search) .hero-section {
    position: relative;
    z-index: 1;
    background: none !important;
    background-image: none !important;
  }
  .home-root.hero-glass-mode.is-teal-search .hero-section,
  html[dir="rtl"] .home-root.hero-glass-mode.is-teal-search .hero-section,
  html[dir="ltr"] .home-root.hero-glass-mode.is-teal-search .hero-section {
    position: relative;
    z-index: 1;
    background-size: cover !important;
    background-position: center !important;
  }

  /* ── Hero: content-driven height (no tall empty band above search — ss2) ── */
  .home-root.hero-glass-mode:not(.is-teal-search) .hero-section,
  .home-root.hero-glass-mode:not(.is-teal-search) .home-hero-grid {
    min-height: 0 !important;
  }
  .home-root.hero-glass-mode .hero-section > .container {
    width: 100%;
    max-width: min(1120px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1rem, 4vw, 2rem) !important;
    padding-right: clamp(1rem, 4vw, 2rem) !important;
    padding-top: clamp(0.75rem, 2vw, 1.25rem) !important;
    padding-bottom: clamp(0.25rem, 1vw, 0.5rem) !important;
    box-sizing: border-box !important;
  }
  .home-root.hero-glass-mode .home-hero-grid {
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: clamp(0.25rem, 1.5vw, 0.5rem);
    padding-bottom: clamp(0.125rem, 1vw, 0.25rem);
  }

  /* ── Wider layout for glass mode (headline + search aligned) ── */
  /* z-index:4 so the full search subtree (including typeahead + rooms popover overflow)
     decisively paints above the stats strip (z:0) that is a DOM sibling inside .home-search-section. */
  .home-root.hero-glass-mode .home-search-section-container {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: min(1200px, 100%) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .search-container.search-area {
    max-width: none !important;
  }

  /* ── Animated colour blobs ───────────────────────────────── */
  .hgm-blob {
    display: block;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
    z-index: 1;
    animation: hgmBlob 9s ease-in-out infinite;
  }
  /* Blobs: closer to proposal-2 sizes + ss2 bottom-corner green glow (RTL default) */
  .hgm-blob-1 {
    width: 380px;
    height: 380px;
    background: rgba(26, 136, 200, 0.34);
    top: -90px;
    right: -70px;
    animation-delay: 0s;
  }
  .hgm-blob-2 {
    width: 300px;
    height: 300px;
    background: rgba(16, 214, 31, 0.24);
    top: auto;
    bottom: -72px;
    left: 8%;
    right: auto;
    animation-delay: -3.5s;
  }
  .hgm-blob-3 {
    width: 240px;
    height: 240px;
    background: rgba(107, 63, 160, 0.2);
    top: 38%;
    left: 52%;
    animation-delay: -6s;
  }
  /* LTR: mirror proposal blob-1 left, green glow bottom-right */
  html[dir="ltr"] .home-root.hero-glass-mode .hgm-blob-1 {
    right: auto;
    left: -72px;
  }
  html[dir="ltr"] .home-root.hero-glass-mode .hgm-blob-2 {
    left: auto;
    right: 10%;
    bottom: -72px;
    top: auto;
  }
  html[dir="ltr"] .home-root.hero-glass-mode .hgm-blob-3 {
    left: auto;
    right: 58%;
  }

  /* ── Dot grid overlay — full .home-root height (proposal .hero-dots uses inset: 0) ── */
  .hgm-dots {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 2;
  }

  /* ── Hero headline: raise above blobs (centered LTR + RTL — proposal 2) ── */
  .home-root.hero-glass-mode .home-hero-headline {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.2vw, 10px);
    width: 100%;
    max-width: min(1120px, 100%);
    margin-left: auto;
    margin-right: auto;
    /* UI refinement: tighter headline→search spacing for a more integrated hero rhythm. */
    margin-bottom: clamp(0.5rem, 1.25vw, 1.25rem);
    padding-inline: clamp(0, 1vw, 0.5rem);
    box-sizing: border-box;
  }

  /* Override teal title-bar with transparent glass headline */
  .home-root.hero-glass-mode .home-hero-headline .home-hero-title {
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: clamp(1.65rem, 2.2vw + 1rem, 3.25rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-shadow: 0 2px clamp(20px, 4vw, 40px) rgba(0,0,0,.5);
    text-align: center !important;
    width: 100%;
    max-width: 56rem;
    white-space: normal;
  }

  /* Proposal 2: green highlight word + underline */
  .home-root.hero-glass-mode .home-hero-headline .home-hero-highlight {
    position: relative;
    display: inline-block;
    color: #10D61F !important;
    margin-inline: 0.2em;
  }
  /* UI refinement: thinner, lower-contrast underline offset just below the
     descenders — reads as a premium accent rather than a highlight-marker bar. */
  .home-root.hero-glass-mode .home-hero-headline .home-hero-highlight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, rgba(16,214,31,0) 0%, #10D61F 20%, #6ef77a 50%, #10D61F 80%, rgba(16,214,31,0) 100%);
    border-radius: 2px;
    opacity: 0.55;
  }

  .home-root.hero-glass-mode .home-hero-headline .home-hero-sub {
    margin: 0;
    max-width: min(56rem, 100%);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    font-size: clamp(15px, 0.35vw + 14px, 17px);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    text-wrap: balance;
  }

  /* UI refinement (Phase 1.2): Arabic hero start-alignment.
     RTL reads right-to-left, so a centered headline feels disconnected from
     the search card below (which uses logical start alignment). Pin headline
     + sub to the start edge so the visual eye-line tracks the same axis. */
  html[dir="rtl"] .home-root.hero-glass-mode .home-hero-headline {
    align-items: flex-start;
  }
  html[dir="rtl"] .home-root.hero-glass-mode .home-hero-headline .home-hero-title {
    text-align: start !important;
  }
  html[dir="rtl"] .home-root.hero-glass-mode .home-hero-headline .home-hero-sub {
    text-align: start;
  }
  html[dir="rtl"] .home-root.hero-glass-mode .home-hero-headline .hgm-pill {
    align-self: flex-start;
  }

  /* ── Pill / live-deals badge ─────────────────────────────── */
  .hgm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(16,214,31,.14);
    border: 1px solid rgba(16,214,31,.38);
    border-radius: 50px;
    padding: 5px clamp(12px, 2.5vw, 16px);
    color: rgba(195,255,200,.95);
    font-size: clamp(12px, 0.25vw + 11px, 13px);
    font-weight: 600;
    position: relative;
    z-index: 5;
  }
  .hgm-pill-dot {
    width: 8px; height: 8px;
    background: #10D61F;
    border-radius: 50%;
    flex-shrink: 0;
    /* UI refinement (Phase 2.2): slower cadence + cubic-bezier ease for a
       breath-like rhythm. The 2.6s loop reads as "alive" not "blinking". */
    animation: hgmPillPulse 2.6s cubic-bezier(.45, .05, .25, 1) infinite;
  }
  /* Respect users who prefer reduced motion — pause the pill pulse entirely */
  @media (prefers-reduced-motion: reduce) {
    .hgm-pill-dot { animation: none !important; box-shadow: none !important; }
  }

  /* ── Tab row: sits above glass card (proposal 2) ───────── */
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex {
    border: none !important;
    border-bottom: none !important;
    position: relative;
    z-index: 6;
    gap: 4px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    justify-content: flex-start;
    list-style: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  /* RTL: pack toward main-start (physical right) so first tab (Hotel) meets the panel’s square top-right corner — matches proposal-2-glass-modern.html */
  html[dir="rtl"] .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex {
    justify-content: flex-start;
  }
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex > li {
    flex: 0 0 auto;
  }
  /* Tabs match proposal .tab: top + L + R borders, no bottom; active brightens border-color
     and uses margin-bottom:-1px to overlap the shell's top edge. */
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex li button.tab {
    background: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(12px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding-bottom: 11px !important;
    color: rgba(255,255,255,.65) !important;
    opacity: 1 !important;
    transition: background .2s, color .2s;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex li button.tab:hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex li button.tab[aria-selected="true"] {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-bottom: none !important;
    position: relative;
    z-index: 7 !important;
    margin-bottom: -1px !important;
  }

  /* ── Outer shell: transparent; glass on .hgm-glass-shell (phase 2) ── */
  .home-root.hero-glass-mode .home-search-wrap .search-container.search-area:not(.research) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 4;
  }
  /* Shell wrapper: transparent pass-through. Glass moved to #tabs-content > .tab-content
     so the card's top border lives *between* the tabs row and the fields panel — matches
     proposal-2 structure where .tabs-row and .search-glass are siblings (tabs NOT inside glass). */
  .home-root.hero-glass-mode .home-search-wrap .search-container.search-area:not(.research) .hgm-glass-shell {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Only strip border/shadow on the wrap when the element is NOT also .hgm-glass-shell
     (research/edit mode). Otherwise this would override the shell's full glass border. */
  .home-root.hero-glass-mode .home-search-wrap .search-container.search-area:not(.research) .hgm-glass-shell-wrap:not(.hgm-glass-shell) {
    display: block;
    min-width: 0;
    border: none !important;
    box-shadow: none !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .search-container.search-area:not(.research) .hgm-glass-shell-wrap.hgm-glass-shell {
    display: block;
    min-width: 0;
  }
  /* Inner panel = proposal .search-glass: glass lives here (not on the outer wrap).
     RTL default: first tab on the right → square top-right corner (0 on that corner). */
  .home-root.hero-glass-mode .home-search-wrap .search-container.search-area:not(.research) #tabs-content > div.tab-content {
    position: relative;
    background-color: rgba(255,255,255,.11) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 8px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15) !important;
    border-radius: 16px 0 16px 16px !important;
    padding: clamp(18px, 2vw, 24px) clamp(20px, 2.5vw, 28px) !important;
    margin-top: 0;
    box-sizing: border-box;
  }
  /* LTR: first tab on the left → square top-left corner */
  html[dir="ltr"] .home-root.hero-glass-mode .home-search-wrap .search-container.search-area:not(.research) #tabs-content > div.tab-content {
    border-radius: 0 16px 16px 16px !important;
  }

  /* Hotel desktop row: wider destination + dates + last cell (rooms + CTA); matches proposal proportions */
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) {
    display: grid !important;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) !important;
    gap: clamp(8px, 1.2vw, 12px) !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) > .form-group {
    min-width: 0;
  }
  /* Last column: rooms + search CTA — prevent flex children forcing horizontal overflow */
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) > .hgm-rooms-search-row {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) > .hgm-rooms-search-row > div:first-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) > .hgm-rooms-search-row > div:last-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  /* ── Form labels: visible + multilingual (Twig/Vue translate); wrap long AR text ── */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) label {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 7px 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 0 !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: start !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* ── Form field inputs — proposal .sg-input, refined to a lighter 1px border
     for a cleaner modern look. Text, placeholder, and icons stay whitish — the
     field itself never highlights; only the CTA and subtle focus ring use green. */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 10px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    color: #fff !important;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
  }
  /* Belt-and-braces text-color override for date inputs (flatpickr altInput).
     The altInput inherits the original input's class list, which includes the
     Tailwind `text-black` utility. The rule above already wins by !important,
     but we add a more specific selector that targets `input.form-field-base`
     and the `.text-black.form-field-base` combo directly so the white color
     can never be undone by future Tailwind utilities or arbitrary class
     reordering. Scoped to glass mode only. */
  .home-root.hero-glass-mode input.form-field-base,
  .home-root.hero-glass-mode input.flatpickr-input.form-field-base,
  .home-root.hero-glass-mode .text-black.form-field-base,
  .home-root.hero-glass-mode .form-field-base.text-black {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .home-root.hero-glass-mode input.form-field-base::placeholder,
  .home-root.hero-glass-mode input.flatpickr-input.form-field-base::placeholder {
    color: rgba(255,255,255,.4) !important;
    -webkit-text-fill-color: rgba(255,255,255,.4) !important;
  }
  /* UI refinement: subtler focus ring — still green (the single accent) but
     2px ring at lower alpha so focus reads as a gentle lift rather than a glow. */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base:focus,
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base:focus-within {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(16,214,31,.45) !important;
    box-shadow: 0 0 0 2px rgba(16,214,31,.10) !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base::placeholder {
    color: rgba(255,255,255,.4) !important;
  }

  /* UI refinement (Phase 2.1): keyboard-visible focus ring on form fields +
     tab buttons. Mouse clicks won't trigger this (focus-visible spec); only
     Tab/Enter keyboard nav shows the ring, so it doesn't add visual noise
     for pointer users. The ring is built from the brand green at low alpha
     so it reads as part of the system, not an OS default outline. */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base:focus-visible {
    outline: none !important;
    border-color: rgba(16,214,31,.65) !important;
    box-shadow: 0 0 0 3px rgba(16,214,31,.20), inset 0 0 0 1px rgba(16,214,31,.12) !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex li button.tab:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16,214,31,.30) !important;
  }

  /* UI refinement (Phase 1.6): Destination is the primary search intent —
     elevate the first field with a slightly brighter glass surface + inset
     highlight so the eye naturally lands there first. Stays neutral on color
     (no green) so it doesn't compete with the CTA. */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .hgm-hotel-search-grid > .form-group:first-child .form-field-base,
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) #hotel-tab .grid > .form-group:first-child .form-field-base,
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) #flight-tab .grid > .form-group:first-child .form-field-base {
    background: rgba(255,255,255,.11) !important;
    border-color: rgba(255,255,255,.2) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  /* ── Popover internals (Rooms & Adults #dropdown) must NOT inherit glass styling ──
     The popover's own container is bg-white; internal counter buttons use plain Tailwind
     (bg-white border-gray-300 / bg-gray-100). Explicit overrides guard against any
     cascading white text / backdrop-filter leakage from the glass scope.
     Selector uses body:has(.home-root.hero-glass-mode) so it survives the
     teleport-to-body that escapes the .tab-content stacking context. */
  body:has(.home-root.hero-glass-mode) #dropdown {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgb(55, 65, 81) !important; /* gray-700 */
  }
  body:has(.home-root.hero-glass-mode) #dropdown * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body:has(.home-root.hero-glass-mode) #dropdown span {
    color: inherit !important;
  }
  body:has(.home-root.hero-glass-mode) #dropdown .text-gray-700 {
    color: rgb(55, 65, 81) !important;
  }
  body:has(.home-root.hero-glass-mode) #dropdown .text-black {
    color: #000 !important;
  }
  body:has(.home-root.hero-glass-mode) #dropdown .text-dark-100 {
    color: rgba(17, 24, 39, 0.7) !important;
  }
  body:has(.home-root.hero-glass-mode) #dropdown button {
    min-height: auto !important;
  }

  /* Icons (calendar, location, user) inside glass card */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-group .text-primary {
    color: rgba(255,255,255,.75) !important;
  }
  /* Chevron SVG strokes inside form fields */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base path {
    stroke: rgba(255,255,255,.5) !important;
  }

  /* ── Search submit: ss2 cyan tile (global rules); glass — focus ring only ── */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .self-end.flex.items-end > button[type="button"].hgm-hotel-search-submit:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 4px rgba(4, 200, 214, 0.45) !important;
  }
  /* Spinner color follows markup (dev: text-black on bg-secondary overlay) */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .self-end.flex.items-end > button[type="button"].hgm-hotel-search-submit .animate-spin {
    color: rgb(15, 23, 42) !important;
  }
  /* Mobile only: ensure "Search" label stays visible in glass (snippet: span lg:hidden) */
  @media (max-width: 1023px) {
    .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .self-end.flex.items-end > button span.ml-2 {
      display: inline !important;
    }
  }

  /* ── Tab row refinements: larger, more prominent ─────────── */
  .home-root.hero-glass-mode .home-search-wrap .tabs-container.flex li button.tab {
    padding: clamp(8px, 1vw, 10px) clamp(14px, 2.2vw, 28px) clamp(9px, 1vw, 11px) !important;
    font-size: clamp(13px, 0.35vw + 12px, 15px) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    gap: 8px !important;
  }

  /* ── Stats strip (inside .home-search-section) ──────────────
     UI refinement: tighter top gap + no top border so the strip reads as a
     continuation of the hero rather than a separate block. z-index:0 so the
     search container (z:4) + its dropdowns paint above. */
  .home-root.hero-glass-mode .hgm-stats-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0;
    background: transparent;
    margin-top: clamp(14px, 2.2vw, 22px);
    padding: clamp(10px, 1.8vw, 14px) clamp(12px, 3vw, 24px);
    border-top: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .hgm-stats-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: clamp(12px, 2vw, 16px);
    column-gap: 0;
    max-width: min(1040px, 100%);
    width: 100%;
    min-width: 0;
  }
  .hgm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: min(140px, 45%);
    max-width: 100%;
    padding: 0 clamp(12px, 3.5vw, 40px);
    box-sizing: border-box;
    /* UI refinement (Phase 2.4): use position:relative so dividers can be
       drawn as ::before pseudo-elements, vertically centered, with a fixed
       height — this gives perfectly symmetric dividers that don't depend on
       the surrounding flex height. flex: 1 1 0 (instead of 1 1 auto) makes
       all 4 stats take equal width regardless of label length, eliminating
       the visual drift where "Hero Destinations" used more horizontal space. */
    position: relative;
  }
  /* UI refinement (Phase 2.4): symmetric dividers — fixed 28px height,
     perfectly centered vertically, drawn as ::before so the stat itself
     can stay flex-column without the divider stretching. */
  .hgm-stat + .hgm-stat::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
  }
  /* UI refinement: more prominent numbers + quieter labels — stronger
     hierarchy without adding extra contrast elsewhere in the strip. */
  .hgm-stat-number {
    font-size: clamp(22px, 1.6vw + 13px, 32px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .hgm-stat-number span { color: #10D61F; font-weight: 800; }
  .hgm-stat-label {
    font-size: clamp(10px, 0.18vw + 9px, 11px);
    color: rgba(255,255,255,.42);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 100%;
    padding-inline: 2px;
    text-transform: uppercase;
  }

  /* ── Recent searches: flat navy band matching the glass header (not teal home) ── */
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section {
    position: relative;
    z-index: 4;
    overflow: hidden;
    background: var(--hgm-navy-base) !important;
    background-color: var(--hgm-navy-base) !important;
    padding-top: clamp(28px, 4vw, 40px) !important;
    padding-bottom: clamp(32px, 5vw, 48px) !important;
  }
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section::before {
    content: none !important;
  }
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section > * {
    position: relative;
    z-index: 1;
  }
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .container {
    max-width: min(1200px, 100%);
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
  }
  /* Section title — white on navy */
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(18px, 1.2vw + 12px, 22px) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
  }
}

/* ── Published alahlla.com home (teal hero + search + mint recent) — desktop ── */
@media (min-width: 1024px) {
  .home-root.hero-glass-mode.is-teal-search .hgm-blob {
    display: none !important;
  }

  .home-root.hero-glass-mode.is-teal-search .home-search-section {
    background: #f3f9ff !important;
    background-color: #f3f9ff !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-section::before {
    content: none !important;
    display: none !important;
  }

  .home-root.hero-glass-mode.is-teal-search .hero-section,
  .home-root.hero-glass-mode.is-teal-search .home-hero-grid {
    min-height: 480px !important;
  }

  .home-root.hero-glass-mode.is-teal-search .home-hero-headline .home-hero-title {
    background: transparent !important;
    color: #0f172a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 14px rgba(255, 255, 255, 0.75) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-hero-headline .home-hero-highlight {
    color: var(--aat-teal) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-hero-headline .home-hero-highlight::after {
    background: linear-gradient(90deg, rgba(0, 146, 149, 0) 0%, var(--aat-teal) 35%, #2dd4bf 50%, var(--aat-teal) 65%, rgba(0, 146, 149, 0) 100%) !important;
    opacity: 0.4 !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-hero-headline .home-hero-sub {
    color: #475569 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  }
  .home-root.hero-glass-mode.is-teal-search .hgm-pill {
    background: rgba(209, 250, 229, 0.95) !important;
    border: 1px solid rgba(5, 150, 105, 0.35) !important;
    color: #065f46 !important;
  }
  .home-root.hero-glass-mode.is-teal-search .hgm-pill-dot {
    background: var(--aat-teal) !important;
  }
  html[dir="rtl"] .home-root.hero-glass-mode.is-teal-search .home-hero-headline {
    align-items: center !important;
  }
  html[dir="rtl"] .home-root.hero-glass-mode.is-teal-search .home-hero-headline .home-hero-title {
    text-align: center !important;
  }
  html[dir="rtl"] .home-root.hero-glass-mode.is-teal-search .home-hero-headline .home-hero-sub {
    text-align: center !important;
  }
  html[dir="rtl"] .home-root.hero-glass-mode.is-teal-search .home-hero-headline .hgm-pill {
    align-self: center !important;
  }

  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container.search-area:not(.research) {
    background: var(--aat-teal) !important;
    background-color: var(--aat-teal) !important;
    padding: 1.5rem !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 4px 28px rgba(0, 100, 102, 0.28) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap #tabs-content > div.tab-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px 0 16px 16px !important;
  }
  html[dir="ltr"] .home-root.hero-glass-mode.is-teal-search .home-search-wrap #tabs-content > div.tab-content {
    border-radius: 0 16px 16px 16px !important;
  }

  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .tabs-container.flex li button.tab {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .tabs-container.flex li button.tab:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .tabs-container.flex li button.tab[aria-selected="true"] {
    background: #ffffff !important;
    color: var(--aat-teal) !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 -3px 0 #fdc700 !important;
  }

  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) label {
    color: #64748b !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .form-field-base {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .home-root.hero-glass-mode.is-teal-search input.form-field-base,
  .home-root.hero-glass-mode.is-teal-search input.flatpickr-input.form-field-base,
  .home-root.hero-glass-mode.is-teal-search .text-black.form-field-base,
  .home-root.hero-glass-mode.is-teal-search .form-field-base.text-black {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
  }
  .home-root.hero-glass-mode.is-teal-search input.form-field-base::placeholder,
  .home-root.hero-glass-mode.is-teal-search input.flatpickr-input.form-field-base::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .form-field-base::placeholder {
    color: #94a3b8 !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .form-group .text-primary {
    color: var(--aat-teal) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .form-field-base path {
    stroke: #64748b !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .form-field-base:focus,
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .form-field-base:focus-within {
    border-color: var(--aat-teal) !important;
    box-shadow: 0 0 0 2px rgba(0, 146, 149, 0.15) !important;
  }

  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .self-end.flex.items-end > button[type="button"].hgm-hotel-search-submit:hover:not(:disabled) {
    box-shadow: 0 2px 10px rgba(0, 146, 149, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .home-search-wrap .search-container:not(.research) .self-end.flex.items-end > button[type="button"].hgm-hotel-search-submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 0 5px rgba(0, 146, 149, 0.32) !important;
  }

  .home-root.hero-glass-mode.is-teal-search .hgm-stats-strip {
    margin-top: clamp(12px, 2vw, 20px) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .hgm-stat-number {
    color: #0f172a !important;
  }
  .home-root.hero-glass-mode.is-teal-search .hgm-stat-number span {
    color: var(--aat-teal) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .hgm-stat-label {
    color: #64748b !important;
  }
  .home-root.hero-glass-mode.is-teal-search .hgm-stat + .hgm-stat::before {
    background: linear-gradient(180deg, rgba(0, 146, 149, 0) 0%, rgba(0, 146, 149, 0.22) 50%, rgba(0, 146, 149, 0) 100%) !important;
  }

  .home-root.hero-glass-mode.is-teal-search .recent-searches-section {
    position: relative;
    z-index: 4;
    overflow: hidden;
    background: var(--aat-mint-band) !important;
    background-color: var(--aat-mint-band) !important;
    padding-top: clamp(28px, 4vw, 40px) !important;
    padding-bottom: clamp(32px, 5vw, 48px) !important;
  }
  .home-root.hero-glass-mode.is-teal-search .recent-searches-section .container {
    max-width: min(1200px, 100%);
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
  }
  .home-root.hero-glass-mode.is-teal-search .recent-searches-section h2 {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: clamp(18px, 1.2vw + 12px, 22px) !important;
    text-shadow: none !important;
  }
}

/* ─────────────────────────────────── MOBILE < 1024 px ────── */
@media (max-width: 1023px) {
  /* UI fix (mobile date fields): On mobile the date-input snippet renders a
     <button class="form-field-base ..."> whose inner value span carries a
     hard `text-black` Tailwind utility (date-input.html:48). The parent
     button's color override doesn't cascade through because `.text-black`
     is applied directly on the span — so the rendered date stays black
     against the glass surface. Also the Tailwind `.form-field-base`
     padding shorthand leaves only 8px of padding-inline-end, but the
     absolute chevron wrapper (end-0 + pe-3 + svg ms-3 + 10px icon)
     occupies ~34px on the end edge, so the date text collides with the
     chevron. Fix both, scoped to the `--date-chevron` modifier so only
     the date fields are affected.
     Mirror of the same fix in snippets/css/home.css (deploy pair). */
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) button.form-field-base.form-field-base--date-chevron,
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) button.form-field-base.form-field-base--date-chevron span.text-black {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) button.form-field-base.form-field-base--date-chevron span.text-gray-500 {
    color: rgba(255,255,255,.5) !important;
    -webkit-text-fill-color: rgba(255,255,255,.5) !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .search-container:not(.research) .form-field-base.form-field-base--date-chevron {
    padding-inline-end: 2.75rem !important;
  }
}

/* Recent search cards — refined dark-glass look:
   - Softer border (rgba .12 instead of .22) so edges are quieter
   - Slightly reduced surface bg + subtle top-to-bottom gradient for depth
     without a "highlighted every element" feel.
   - Calmer shadow (smaller + lower alpha).
   - Hover lifts 2px and slightly brightens border + icons turn green (see
     .text-primary:hover rule below). */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card {
  background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.05) 100%) !important;
  background-color: rgba(255,255,255,.07) !important;
  backdrop-filter: var(--hgm-glass-blur) !important;
  -webkit-backdrop-filter: var(--hgm-glass-blur) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.07) 100%) !important;
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transform: translateY(-2px);
}
/* Card text colors → white on glass */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-dark,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-dark-900,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-black,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-black-800,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-black-600 {
  color: #ffffff !important;
}
/* UI refinement (Phase 1.4): Location is the primary identifier — give it
   stronger weight and a touch more size so the card has a clear visual
   hierarchy (location → date/guests → nights badge). The dates/guests text
   stays at the smaller secondary size so the eye lands on location first. */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .font-medium.text-dark {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
}
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-black-800 {
  font-size: 12px !important;
}
/* UI refinement: by default all field icons (.text-primary, location/calendar/
   user) are SOFT WHITE so the card has a single accent. On hover they lift to
   green — gives the card a subtle interactive shift without default noise. */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-primary,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-black-500 i.text-primary,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card i.text-primary {
  color: rgba(255,255,255,.6) !important;
  transition: color .25s ease;
}
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover .text-primary,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover .text-black-500 i.text-primary,
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover i.text-primary {
  color: var(--hgm-green) !important;
}
/* Secondary/tertiary info (date + guests) sit at lower emphasis than location */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .text-black-800 {
  color: rgba(255,255,255,.72) !important;
  font-weight: 500 !important;
}
/* "Nights" badge — softer, smaller, low-contrast chip (not a highlight) */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .bg-primary-200 {
  background: rgba(255,255,255,.08) !important;
  background-color: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.7) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .bg-primary-200 span {
  color: rgba(255,255,255,.7) !important;
  font-weight: 600 !important;
}
/* Arrow = the single green accent in the card (the CTA affordance) */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .ico-arrowright {
  color: var(--hgm-green) !important;
  font-size: 18px !important;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
/* UI refinement (Phase 2.3): give the arrow a circular "tap target" wrapper
   that grows + glows on card hover. The wrapper element is the parent .ml-2
   div in search-hotel-recent.html — we style THAT (not the icon) so the
   icon stays exactly the same size while the surrounding circle animates.
   This makes the entire card feel actionable without adding chrome. */
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .ml-2 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16, 214, 31, 0.0);
  border: 1px solid rgba(16, 214, 31, 0.0);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover .ml-2 {
  background: rgba(16, 214, 31, 0.14);
  border-color: rgba(16, 214, 31, 0.32);
  box-shadow: 0 0 0 6px rgba(16, 214, 31, 0.06);
}
.home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover .ico-arrowright {
  transform: translateX(2px);
}
html[dir="rtl"] .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover .ico-arrowright {
  transform: translateX(-2px);
}
/* Respect reduced-motion preference — drop the wrapper transitions */
@media (prefers-reduced-motion: reduce) {
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .ml-2,
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card .ico-arrowright {
    transition: none !important;
  }
  .home-root.hero-glass-mode:not(.is-teal-search) .recent-searches-section .recent-search-card:hover .ml-2 {
    box-shadow: none !important;
  }
}

/* Recent search cards — mint band + white cards (published alahlla.com / is-teal-search) */
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px);
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-dark,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-dark-900,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-black,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-black-800,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-black-600 {
  color: #1e293b !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .font-medium.text-dark {
  font-size: 15px !important;
  font-weight: 600 !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-black-800 {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-primary,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .text-black-500 i.text-primary,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card i.text-primary {
  color: var(--aat-teal) !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card:hover .text-primary,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card:hover .text-black-500 i.text-primary,
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card:hover i.text-primary {
  color: var(--aat-teal-deep) !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .bg-primary-200 {
  background: #ccfbf1 !important;
  background-color: #ccfbf1 !important;
  border: none !important;
  color: #0f766e !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .bg-primary-200 span {
  color: #0f766e !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .ico-arrowright {
  color: var(--aat-teal) !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card .ml-2 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.home-root.hero-glass-mode.is-teal-search .recent-searches-section .recent-search-card:hover .ml-2 {
  background: rgba(0, 146, 149, 0.08) !important;
  border: 1px solid rgba(0, 146, 149, 0.2) !important;
}

/* Narrow desktop / small laptop: hotel row 2×2 so fields stay usable (glass home only) */
@media (min-width: 1024px) and (max-width: 1180px) {
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) {
    grid-template-columns: 1fr 1fr !important;
  }
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) > .form-group:first-child {
    grid-column: 1 / -1;
  }
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) > .hgm-rooms-search-row {
    grid-column: 1 / -1;
  }
}

/* Slightly wider: soften 5-column pressure (optional tighter gaps already from clamp) */
@media (min-width: 1181px) and (max-width: 1280px) {
  .home-root.hero-glass-mode .home-search-wrap .hgm-hotel-search-grid:not(.p-4) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) !important;
  }
}

/* ── END GLASS MODERN HERO ─────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   GLASS MODERN HEADER  —  Site-wide navy header (proposal-3)
   Targets the deployed `snippets/header-static.html` DOM:
     <header class="hgm-header shadow-light bg-primary-dark text-black lg:text-white">
       <div class="container mx-auto">
         <nav class="bg-transparent ...">
           <div class="header-main-row flex ...">
             <a><img class="w-[75px] lg:w-[156px]"></a>           ← logo
             <button id="mobile-menu-hamburger">                  ← hamburger
             <div id="navbar-default">
               ...
               <ul> <li><a data-translate="Home">                ← nav links
               ...
               <div id="accountManager">
                 <a class="bg-pastel-orange"><i class="ico-heart">     ← wishlist
                 <button class="bg-secondary-100"><i class="ico-cart"> ← cart
                 <account-manager>                                ← Login button (.btn.btn-secondary)
                 <div class="header-currency-lang-row">
                   <currency-switch> <language-switch>            ← .currencyLangSelect (.bg-secondary-500)
   ═══════════════════════════════════════════════════════════════ */

/* Dark navy bar — match default_from_dev_SPA_2026-04-10 `bg-primary-dark` (not bright --aat-teal) */
header.hgm-header,
header.hgm-header.bg-primary-dark,
header.bg-primary-dark {
  background: var(--hgm-header-footer-bg) !important;
  background-color: var(--hgm-header-footer-bg) !important;
  color: var(--hgm-text-strong) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 100;
}

/* UI refinement (Phase 1.1): tighten header rhythm at desktop sizes.
   - py-5 (20px) felt heavy against the airy hero. Drop to ~14px which
     matches the search-card vertical breathing room and gives the bar a
     more modern, premium feel.
   - Normalize the icon row gap so wishlist + cart sit closer together
     and the account-manager pill reads as a sibling group, not isolated.
   - Tighten the currency/lang cluster gap so the | divider lands tighter
     between the two switches. */
@media (min-width: 1024px) {
  header.hgm-header .header-main-row,
  header.bg-primary-dark .header-main-row {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  header.hgm-header #accountManager > div:first-child,
  header.bg-primary-dark #accountManager > div:first-child {
    gap: 16px !important;
  }
  header.hgm-header #accountManager .hidden.lg\:flex.gap-2,
  header.bg-primary-dark #accountManager .hidden.lg\:flex.gap-2 {
    gap: 8px !important;
  }
  header.hgm-header .header-currency-lang-row,
  header.bg-primary-dark .header-currency-lang-row {
    gap: 6px !important;
  }
}

/* UI refinement (Phase 2.8): pill height token alignment.
   Across the header we have wishlist (44px), cart (44px), currency/lang
   (38px), and login (40px). The drift creates a wavy baseline along the
   right cluster. Lock all four to 40px so they share a single baseline
   and the cluster reads as one unified control bar. The 44px wishlist+cart
   were too tall against the 14px header padding anyway — 40px lands at the
   same vertical proportion as the new compressed bar. */
@media (min-width: 1024px) {
  header.hgm-header a.bg-pastel-orange,
  header.bg-primary-dark a.bg-pastel-orange,
  header.hgm-header button.bg-secondary-100,
  header.bg-primary-dark button.bg-secondary-100 {
    width: 40px !important;
    height: 40px !important;
  }
  header.hgm-header .currencyLangSelect,
  header.hgm-header .currencyLangSelect.bg-secondary-500,
  header.bg-primary-dark .currencyLangSelect,
  header.bg-primary-dark .currencyLangSelect.bg-secondary-500 {
    min-height: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  header.hgm-header .accountManager .btn.btn-secondary,
  header.bg-primary-dark .accountManager .btn.btn-secondary {
    min-height: 40px !important;
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* Header `.container`: do not cap at 1200px — match Tailwind container breakpoints (hero / search / recent). */

header.hgm-header nav,
header.bg-primary-dark nav {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Logo: keep the existing w-[75px] / w-[156px] sizing, just make sure it isn't filtered */
header.hgm-header img[alt="Al Ahlla Tourism Travel"],
header.bg-primary-dark img[alt="Al Ahlla Tourism Travel"] {
  display: block;
  background: transparent !important;
}

/* ────────────────────────────────────────────────────────────
   Nav links (Home / About / Blog / Contact us) — desktop only
   The Tailwind on each link is `text-black lg:text-white px-5 py-2.5`.
   We just need to bump opacity + hover.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  header.hgm-header #navbar-default ul li a[data-translate],
  header.bg-primary-dark #navbar-default ul li a[data-translate] {
    color: var(--hgm-text-soft) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px;
    transition: color .2s, background .2s;
  }
  /* Defeat the inline `font-extrabold` Tailwind class on the Home link —
     keep it the same weight as all other nav links so it doesn't read as bold. */
  header.hgm-header #navbar-default ul li a[data-translate][aria-current="page"],
  header.hgm-header #navbar-default ul li a[data-translate].font-extrabold,
  header.bg-primary-dark #navbar-default ul li a[data-translate][aria-current="page"],
  header.bg-primary-dark #navbar-default ul li a[data-translate].font-extrabold {
    color: var(--hgm-text-strong) !important;
    font-weight: 500 !important;
  }
  header.hgm-header #navbar-default ul li a[data-translate]:hover,
  header.bg-primary-dark #navbar-default ul li a[data-translate]:hover {
    color: var(--hgm-text-strong) !important;
    background: var(--hgm-pill-bg);
  }
}

/* ────────────────────────────────────────────────────────────
   Wishlist pill — defeats legacy `.bg-pastel-orange text-red`
   ──────────────────────────────────────────────────────────── */
header.hgm-header a.bg-pastel-orange,
header.bg-primary-dark a.bg-pastel-orange {
  background: var(--hgm-pill-bg) !important;
  background-color: var(--hgm-pill-bg) !important;
  border: none !important;
  color: var(--hgm-text-strong) !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
  transition: background .2s, transform .2s;
}
header.hgm-header a.bg-pastel-orange:hover,
header.bg-primary-dark a.bg-pastel-orange:hover {
  background: var(--hgm-pill-bg-hover) !important;
  transform: translateY(-1px);
}
header.hgm-header a.bg-pastel-orange > i,
header.bg-primary-dark a.bg-pastel-orange > i {
  color: var(--hgm-text-strong) !important;
  font-size: 18px !important;
}

/* ────────────────────────────────────────────────────────────
   Cart pill — defeats legacy `.bg-secondary-100 text-secondary`
   ──────────────────────────────────────────────────────────── */
header.hgm-header button.bg-secondary-100,
header.hgm-header #cart-button-mobile.bg-secondary-100,
header.bg-primary-dark button.bg-secondary-100,
header.bg-primary-dark #cart-button-mobile.bg-secondary-100 {
  background: var(--hgm-pill-bg) !important;
  background-color: var(--hgm-pill-bg) !important;
  border: none !important;
  color: var(--hgm-text-strong) !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
  transition: background .2s, transform .2s;
}
header.hgm-header button.bg-secondary-100:hover,
header.bg-primary-dark button.bg-secondary-100:hover {
  background: var(--hgm-pill-bg-hover) !important;
  transform: translateY(-1px);
}
header.hgm-header button.bg-secondary-100 > i,
header.bg-primary-dark button.bg-secondary-100 > i {
  color: var(--hgm-text-strong) !important;
  font-size: 18px !important;
}
/* Cart count badge → green */
header.hgm-header .cartCount,
header.bg-primary-dark .cartCount {
  background: var(--hgm-green) !important;
  background-color: var(--hgm-green) !important;
  color: var(--hgm-navy-900) !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  /* Crisp border — no green halo */
  box-shadow: none !important;
  font-weight: 800 !important;
}

/* ────────────────────────────────────────────────────────────
   Currency-switch + Language-switch — Vue widgets
   They render `<div class="currencyLangSelect ... bg-secondary-500 ...">`
   ──────────────────────────────────────────────────────────── */
header.hgm-header .header-currency-lang-row,
header.bg-primary-dark .header-currency-lang-row { gap: 8px !important; }

header.hgm-header .currencyLangSelect,
header.hgm-header .currencyLangSelect.bg-secondary-500,
header.bg-primary-dark .currencyLangSelect,
header.bg-primary-dark .currencyLangSelect.bg-secondary-500 {
  background: var(--hgm-pill-bg) !important;
  background-color: var(--hgm-pill-bg) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  min-height: 38px;
  transition: background .2s;
}
header.hgm-header .currencyLangSelect:hover,
header.bg-primary-dark .currencyLangSelect:hover {
  background: var(--hgm-pill-bg-hover) !important;
}
/* Inner text + arrow → white */
header.hgm-header .currencyLangSelect span,
header.hgm-header .currencyLangSelect .text-white,
header.hgm-header .currencyLangSelect select,
header.hgm-header .currencyLangSelect .currencySelectedText,
header.hgm-header .currencyLangSelect .languageSelectedText,
header.bg-primary-dark .currencyLangSelect span,
header.bg-primary-dark .currencyLangSelect .text-white,
header.bg-primary-dark .currencyLangSelect select,
header.bg-primary-dark .currencyLangSelect .currencySelectedText,
header.bg-primary-dark .currencyLangSelect .languageSelectedText {
  color: var(--hgm-text-strong) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
header.hgm-header .currencyLangSelect img,
header.hgm-header .currencyLangSelect svg,
header.bg-primary-dark .currencyLangSelect img,
header.bg-primary-dark .currencyLangSelect svg {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
header.hgm-header .header-lang-cur-sep,
header.bg-primary-dark .header-lang-cur-sep {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ────────────────────────────────────────────────────────────
   Account-manager Login button (.btn.btn-secondary) — ss2: bright teal, dark label
   (Tailwind bg-secondary rgb(4,200,214); flat; radius aligned with form controls)
   ──────────────────────────────────────────────────────────── */
header.hgm-header .accountManager .btn.btn-secondary,
header.hgm-header #accountManager-mobile .btn.btn-secondary,
header.bg-primary-dark .accountManager .btn.btn-secondary,
header.bg-primary-dark #accountManager-mobile .btn.btn-secondary,
header.shadow-light.bg-primary-dark .accountManager .btn.btn-secondary,
header.shadow-light.bg-primary-dark #accountManager-mobile .btn.btn-secondary {
  background: rgb(4, 200, 214) !important;
  background-color: rgb(4, 200, 214) !important;
  color: rgb(15, 23, 42) !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 10px 22px !important;
  height: auto !important;
  min-height: 40px;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
header.hgm-header .accountManager .btn.btn-secondary:hover,
header.hgm-header #accountManager-mobile .btn.btn-secondary:hover,
header.bg-primary-dark .accountManager .btn.btn-secondary:hover,
header.bg-primary-dark #accountManager-mobile .btn.btn-secondary:hover,
header.shadow-light.bg-primary-dark .accountManager .btn.btn-secondary:hover,
header.shadow-light.bg-primary-dark #accountManager-mobile .btn.btn-secondary:hover {
  transform: none;
  filter: none;
  background-color: rgb(3, 175, 188) !important;
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
   Hotel search submit — markup matches default_from_dev (Tailwind bg-secondary,
   w-full lg:w-1/6 column, h-[36px] lg:h-[46px]). Do not override size/color here;
   optional motion only (snippet also sets transition-colors duration-150).
   ──────────────────────────────────────────────────────────── */
.search-container.search-area:not(.research) #desktop-hotel-search-form .hgm-hotel-search-submit {
  transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
.search-container.search-area:not(.research) #desktop-hotel-search-form .hgm-hotel-search-submit:hover:not(:disabled) {
  filter: brightness(0.97);
}
.search-container.search-area:not(.research) #desktop-hotel-search-form .hgm-hotel-search-submit:active:not(:disabled) {
  filter: brightness(0.92);
}

/* ────────────────────────────────────────────────────────────
   Mobile hamburger → glass pill style
   ────────────────────────────────────────────────────────────
   IMPORTANT: scope the styling AND its display to mobile only.
   The button HTML carries Tailwind `lg:hidden`, but earlier the
   unscoped `display: flex` here had higher specificity (ID selector)
   and forced the hamburger to render on desktop where it does
   nothing. Wrapping in @media (max-width: 1023px) leaves the
   Tailwind `lg:hidden` rule untouched on desktop.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  header.hgm-header #mobile-menu-hamburger,
  header.bg-primary-dark #mobile-menu-hamburger {
    background: var(--hgm-pill-bg) !important;
    border: 1px solid var(--hgm-pill-border) !important;
    border-radius: 10px;
    padding: 10px !important;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header.hgm-header #mobile-menu-hamburger img,
  header.bg-primary-dark #mobile-menu-hamburger img {
    filter: brightness(0) invert(1);
  }
}
/* Belt-and-braces: force-hide on desktop in case any other rule tries to show it */
@media (min-width: 1024px) {
  #mobile-menu-hamburger {
    display: none !important;
  }
}

/* Desktop header nav links — keep each label on a single line.
   "Contact us" was wrapping to two lines because no whitespace-nowrap
   class is in the purged Tailwind bundle. Apply via raw CSS instead.
   Scoped to ≥1024px so the mobile slide-in panel keeps its block layout. */
@media (min-width: 1024px) {
  .hgm-header-nav-links,
  .hgm-header-nav-links > li,
  .hgm-header-nav-links > li > a {
    white-space: nowrap;
  }
  .hgm-header-nav-links {
    flex-wrap: nowrap;
  }
}

/* On the mobile slide-in panel (white bg), keep nav-link text dark */
@media (max-width: 1023px) {
  header.hgm-header #navbar-default,
  header.bg-primary-dark #navbar-default {
    background: #ffffff !important;
  }
  header.hgm-header #navbar-default ul li a[data-translate],
  header.bg-primary-dark #navbar-default ul li a[data-translate] {
    color: #0d1f40 !important;
  }
  /* Mobile pills inside the white drawer revert to brand-friendly look */
  header.hgm-header #navbar-default a.bg-pastel-orange,
  header.bg-primary-dark #navbar-default a.bg-pastel-orange {
    background: #fff1ec !important;
    border-color: #ffd9c8 !important;
    color: #d92d20 !important;
  }
  header.hgm-header #navbar-default a.bg-pastel-orange > i,
  header.bg-primary-dark #navbar-default a.bg-pastel-orange > i { color: #d92d20 !important; }
  header.hgm-header #navbar-default button.bg-secondary-100,
  header.bg-primary-dark #navbar-default button.bg-secondary-100 {
    background: #e6f9fa !important;
    border-color: #b3eef0 !important;
    color: #0a8a8e !important;
  }
  header.hgm-header #navbar-default button.bg-secondary-100 > i,
  header.bg-primary-dark #navbar-default button.bg-secondary-100 > i { color: #0a8a8e !important; }
  /* Mobile drawer language/currency cluster → light bg, dark text */
  header.hgm-header #navbar-default .currencyLangSelect,
  header.bg-primary-dark #navbar-default .currencyLangSelect {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
  }
  header.hgm-header #navbar-default .currencyLangSelect span,
  header.hgm-header #navbar-default .currencyLangSelect select,
  header.bg-primary-dark #navbar-default .currencyLangSelect span,
  header.bg-primary-dark #navbar-default .currencyLangSelect select {
    color: #0d1f40 !important;
  }
  header.hgm-header #navbar-default .currencyLangSelect img,
  header.hgm-header #navbar-default .currencyLangSelect svg,
  header.bg-primary-dark #navbar-default .currencyLangSelect img,
  header.bg-primary-dark #navbar-default .currencyLangSelect svg {
    filter: none;
    opacity: 1;
  }
  header.hgm-header #navbar-default .header-lang-cur-sep,
  header.bg-primary-dark #navbar-default .header-lang-cur-sep {
    color: #9ca3af !important;
  }
}

/* ── END GLASS MODERN HEADER ───────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   GLASS MODERN FOOTER  —  Site-wide navy footer
   4-column grid: Brand | Products | Featured | Contact
   RTL auto-flip via CSS Grid direction (no order classes needed).
   Scoped under footer.hgm-footer so any legacy <footer> stays untouched.
   ═══════════════════════════════════════════════════════════════ */

footer.hgm-footer {
  background-image: linear-gradient(180deg, var(--hgm-header-footer-bg) 0%, var(--hgm-header-footer-bg-deep) 100%) !important;
  background-color: var(--hgm-header-footer-bg-deep) !important;
  color: var(--hgm-text-strong);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: clamp(1.5rem, 2.2vw, 2.25rem) !important;
}

/* Kill the h-[50px] desktop spacer div (DOM preserved, height zeroed) */
footer.hgm-footer .hidden.lg\:block.h-\[50px\] {
  height: 0 !important;
  display: none !important;
}

/* ── Main grid: 2 cols mobile / 4 cols desktop, all equal width ─── */
footer.hgm-footer .hgm-footer-main-grid {
  margin-bottom: 1.5rem !important;
  align-items: start !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem 1.25rem !important;
}
/* Mobile (< 1024px): 2x2 grid — every column takes 1 cell, no full-width spans.
   Defeat any inline col-span / order overrides from the HTML. */
@media (max-width: 1023px) {
  footer.hgm-footer .hgm-footer-col-brand,
  footer.hgm-footer .hgm-footer-col-products,
  footer.hgm-footer .hgm-footer-col-featured,
  footer.hgm-footer .hgm-footer-col-contact {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0;
  }
}
/* Desktop (≥ 1024px): 4 equal columns */
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-main-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
}

/* ── Column text alignment (LTR + RTL aware, both viewports) ───────
   `text-align: start` resolves automatically:
     • English (LTR) → left
     • Arabic  (RTL) → right
   Applies to all 4 columns on BOTH mobile and desktop so no centering. */
footer.hgm-footer .hgm-footer-col-brand,
footer.hgm-footer .hgm-footer-col-products,
footer.hgm-footer .hgm-footer-col-featured,
footer.hgm-footer .hgm-footer-col-contact {
  text-align: start !important;
}
footer.hgm-footer .hgm-footer-col-brand .hgm-footer-brand {
  text-align: start !important;
  align-items: flex-start !important;
}
/* Logo wrapper: align to start (left LTR / right RTL) on every viewport */
footer.hgm-footer .hgm-footer-col-brand .hgm-footer-brand > div:first-child {
  justify-content: flex-start !important;
}
[dir="rtl"] footer.hgm-footer .hgm-footer-col-brand .hgm-footer-brand > div:first-child {
  justify-content: flex-end !important;
}
/* Contact list — block flow so phone/email inherit text-align: start */
footer.hgm-footer .hgm-footer-contact-list {
  display: block !important;
  text-align: start !important;
  align-items: flex-start !important;
}
/* Override Tailwind `text-center` on the brand wrapper so mobile is also start-aligned */
footer.hgm-footer .hgm-footer-brand.text-center {
  text-align: start !important;
}

/* ── Brand column ─────────────────────────────────────────── */
footer.hgm-footer .hgm-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
/* Logo: keep modest height so brand col rhythm matches other 3 cols */
footer.hgm-footer .hgm-footer-brand img {
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-brand img {
    max-height: 44px !important;
  }
  footer.hgm-footer .hgm-footer-brand > div:first-child {
    margin-bottom: 0.625rem !important;
  }
}
/* Tagline text — bold, big (matches original: text-base mobile / text-2xl desktop) */
footer.hgm-footer .hgm-footer-tagline {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  max-width: none;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-tagline {
    font-size: 24px !important;
    max-width: 280px;
    margin-inline: 0;
  }
}

/* ── Column headings (Products / Featured / Contact us) ─────
   Reference sizes: text-base mobile (16px) / lg:text-[22px] desktop, font-bold,
   normal case (no uppercase). */
footer.hgm-footer .hgm-footer-col-products h3,
footer.hgm-footer .hgm-footer-col-featured h3,
footer.hgm-footer .hgm-footer-col-contact h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 12px !important;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-col-products h3,
  footer.hgm-footer .hgm-footer-col-featured h3,
  footer.hgm-footer .hgm-footer-col-contact h3 {
    font-size: 22px !important;
  }
}

/* ── Navigation links ───────────────────────────────────────
   Reference sizes: text-sm mobile (14px) / lg:text-base desktop (16px), font-normal. */
footer.hgm-footer nav a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 12px !important;
  border-radius: 8px;
  transition: color .2s, background .2s;
  display: inline-block;
}
@media (min-width: 1024px) {
  footer.hgm-footer nav a {
    font-size: 16px !important;
  }
}
footer.hgm-footer nav a:hover {
  color: var(--hgm-text-strong) !important;
  background: var(--hgm-pill-bg);
}

/* ── Contact column ───────────────────────────────────────── */
footer.hgm-footer .hgm-footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
footer.hgm-footer .hgm-footer-contact-link {
  display: block;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  transition: color .2s;
}
footer.hgm-footer .hgm-footer-contact-link + .hgm-footer-contact-link {
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-contact-link {
    font-size: 16px !important;
  }
}
footer.hgm-footer .hgm-footer-contact-link:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Hide the contact-link icons — original/screenshot has plain text only. */
footer.hgm-footer .hgm-footer-contact-link i[class^="ico-"] {
  display: none !important;
}

/* ── Row-by-row alignment across all 4 footer columns (LTR + RTL) ─
   Goal: heading row + 3 body rows line up horizontally across all
   columns on BOTH desktop and mobile. Achieved via:
   • Each column = flex column with consistent gap
   • Heading slot (brand logo wrapper / h3) shares the same min-height
     so item 1 of every column starts at the same Y
   • Each body item shares the same min-height so item N aligns to row N
   • All horizontal padding zeroed so left/right edges line up cleanly */
footer.hgm-footer .hgm-footer-col-brand,
footer.hgm-footer .hgm-footer-col-products,
footer.hgm-footer .hgm-footer-col-featured,
footer.hgm-footer .hgm-footer-col-contact {
  display: flex !important;
  flex-direction: column !important;
}
/* Brand inner wrapper — flex column with same gap as nav cols */
footer.hgm-footer .hgm-footer-col-brand .hgm-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
/* HEADING ROW — logo wrapper (brand) + h3 (other cols) share min-height */
footer.hgm-footer .hgm-footer-col-brand .hgm-footer-brand > div:first-child,
footer.hgm-footer .hgm-footer-col-products > h3,
footer.hgm-footer .hgm-footer-col-featured > h3,
footer.hgm-footer .hgm-footer-col-contact > h3 {
  min-height: 40px !important;
  margin: 0 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-col-brand .hgm-footer-brand > div:first-child,
  footer.hgm-footer .hgm-footer-col-products > h3,
  footer.hgm-footer .hgm-footer-col-featured > h3,
  footer.hgm-footer .hgm-footer-col-contact > h3 {
    min-height: 56px !important;
    margin: 0 0 14px 0 !important;
  }
}
/* NAV containers — flex column with consistent row gap */
footer.hgm-footer .hgm-footer-col-products nav,
footer.hgm-footer .hgm-footer-col-featured nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}
/* CONTACT list — same flex rhythm as nav cols */
footer.hgm-footer .hgm-footer-col-contact .hgm-footer-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}
footer.hgm-footer .hgm-footer-col-contact .hgm-footer-contact-link + .hgm-footer-contact-link {
  margin-top: 0 !important;
}
/* BODY ROWS — every nav link / contact link uses the same row height */
footer.hgm-footer .hgm-footer-col-products nav a,
footer.hgm-footer .hgm-footer-col-featured nav a,
footer.hgm-footer .hgm-footer-col-contact .hgm-footer-contact-link {
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  line-height: 1.4 !important;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-col-products nav a,
  footer.hgm-footer .hgm-footer-col-featured nav a,
  footer.hgm-footer .hgm-footer-col-contact .hgm-footer-contact-link {
    min-height: 32px !important;
  }
}
/* BRAND TAGLINE — behaves as the body slot for the brand column */
footer.hgm-footer .hgm-footer-col-brand .hgm-footer-tagline {
  display: block !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  max-width: none !important;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-col-brand .hgm-footer-tagline {
    min-height: 32px !important;
    line-height: 1.45 !important;
    max-width: 280px !important;
  }
}

/* ── Trust indicators (4 badges: 2×2 mobile → 1×4 desktop) ──
   Grid tracks MATCH .hgm-footer-main-grid exactly so each badge sits
   in the same column track as its corresponding menu column:
     • mobile  : 2 cols @ 1.5rem gap
     • desktop : 4 cols @ 2rem gap
   Badges are centered inside each cell — works identically in LTR and RTL
   without any directional alignment surprises. */
footer.hgm-footer .hgm-footer-trust-indicators {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
  margin-bottom: 1.25rem;
}
footer.hgm-footer .hgm-footer-trust-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  justify-items: center !important;
}
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-trust-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
}
footer.hgm-footer .hgm-trust-item {
  min-width: 0;
  color: rgba(255, 255, 255, 0.78) !important;
  align-items: center !important;
  text-align: center !important;
}
footer.hgm-footer .hgm-trust-item i[class^="ico-"] {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1;
  margin-bottom: 0.25rem;
}
footer.hgm-footer .hgm-trust-item span {
  font-size: 12px !important;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.3;
}
/* Mobile: slightly smaller text so 4 labels fit in 2×2 */
@media (max-width: 639px) {
  footer.hgm-footer .hgm-trust-item span {
    font-size: 11px !important;
  }
  footer.hgm-footer .hgm-trust-item i[class^="ico-"] {
    font-size: 20px !important;
  }
}

/* ── Bottom bar — 4-col grid on desktop (mirrors main footer grid) ── */
/* Desktop only: switch the 3-item flex row to a 4-col grid so the
   Terms column (col 4) aligns perfectly with the Contact us column above.
   Copyright spans cols 2–3 (centred). Mobile stays flex-col unchanged. */
@media (min-width: 1024px) {
  footer.hgm-footer .hgm-footer-bottom-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2.5rem; /* matches lg:gap-10 used by the main footer grid */
    align-items: center;
  }
  footer.hgm-footer .hgm-footer-bottom-row > p.text-lg {
    grid-column: span 2;
    text-align: start;
  }
}

/* ── END GLASS MODERN FOOTER ───────────────────────────────── */