:root {
  /* AlxTrip Luxury Hotels Theme */
  --lux-hotel-black: #171b20;
  --lux-hotel-white: #ffffff;
  --lux-hotel-gold: #b88a3b;

  /* Supporting */
  --lux-hotel-gold-dark: #9b722f;
  --lux-hotel-gold-light: #f9f6ee;
  --lux-hotel-gray: #6b7280;
  --lux-hotel-light-gray: #f5f5f5;
  --lux-hotel-border: #e5e5e5;
}

/* --- Hotel search section --- */
.hotel-search-section {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.hotel-section-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 16px;
}

.hotel-search-section-card {
  width: 100%;
  height: 300px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.hotel-search-bg-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  border-radius: inherit;
}

.hotel-search-bg-image {
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  filter: blur(1px);
}

/* Floating content box */
.hotel-search-section-content {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  z-index: 20;
}

.hotel-search-section-header {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 40px;
}
.hotel-search-section-header-left {
  display: flex;
  gap: 14px;
  align-items: center;
}
.hotel-search-section-icon-wrap {
  background: rgba(255, 255, 255, 0.12);
  padding: 10px;
  border-radius: 12px;
  display: inline-flex;
}
.hotel-search-section-title {
  margin: 0;
  font-size: 55px;
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
  font-family: sans-serif;
}

.hotel-search-section-sub {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  max-width: 600px; /* keeps subtitle readable */
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.35);
}

/* search card */
.hotel-search-section-search-card {
  margin-top: 8px;
  border-radius: 14px;
  overflow: visible;
  background: #fff;
  color: #222;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

/* grid layout */
.hotel-search-section-grid {
  display: flex;
  padding: 14px;
  gap: 10px;
}

.hotel-search-section-col {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 6px;
  width: calc(100% / 3);
}

/* label */
.hotel-search-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-family: sans-serif;
}
.hotel-search-section-label-icon {
  width: 14px;
  height: 14px;
  color: #6b7280;
  display: none;
}

.hotel-search-section-label-text {
  color: #6b7280;
  font-weight: 700;
  padding: 0px 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
}

/* inputs */
.hotel-search-section-input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0px 6px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  outline: none;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease;
  background: transparent;
}

/* location dropdown */
.hotel-search-section-location-wrap {
  position: relative;
}
.hotel-search-section-location-dropdown {
  position: absolute;
  left: 0;
  top: 35px;
  width: 420px;
  max-width: 90vw;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.2);
  z-index: 80;
  overflow: hidden;
  border: 1px solid #e6e9ee;
}
.hotel-search-section-dropdown-search {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #ff7f47;
  border-radius: 20px;
  margin-bottom: 10px;
}
.hotel-search-section-dropdown-search-icon {
  width: 18px;
  height: 18px;
  color: #9ca3af;
}
.hotel-search-section-dropdown-search-input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 15px;
  padding: 6px 8px;
}
.hotel-search-section-dropdown-section-title {
  padding: 10px 14px;
  font-weight: 700;
  color: #111827;
  background: #f7fbff;
  border-bottom: 1px solid #f1f1f2;
}
.hotel-search-section-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 260px;
  overflow: auto;
}
.hotel-search-section-dropdown-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f3f3;
}
.hotel-search-section-dropdown-list-item:hover {
  background: #fbfbfb;
}
.hotel-search-section-dropdown-list-item-left {
  width: 28px;
  color: #c7c7c7;
  font-size: 18px;
}
.hotel-search-section-dropdown-list-item-title {
  font-weight: 700;
  color: #111827;
}
.hotel-search-section-dropdown-list-item-sub {
  font-size: 13px;
  color: #9aa0a6;
}

/* dates */
.hotel-search-section-col--dates {
  display: grid;
  gap: 0;
  align-items: stretch;
}

.hotel-search-section-date-display {
  position: relative;
}
.hotel-search-section-date-visual-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
}
.hotel-search-section-date-day {
  font-size: 28px;
  font-weight: 800;
  color: #304f47;
  line-height: 1;
}
.hotel-search-section-date-meta {
  margin-top: 4px;
  font-size: 14px;
  color: #111827;
  font-weight: 700;
}
.hotel-search-section-date-neights {
  font-size: 10px;
  color: #111827;
  font-weight: 700;
  border: 1px solid #111827;
  border-radius: 20px;
  padding: 2px 8px;
}
.hotel-search-section-date-range {
  text-align: right;
  min-width: 100px;
}
.hotel-search-section-date-range-line {
  font-weight: 700;
  color: #111827;
}
.hotel-search-section-date-range-meta {
  font-size: 12px;
  color: #6b7280;
}

/* calendar popup */
.hotel-search-section-calendar {
  position: absolute;
  left: 0;
  top: 34px;
  width: 340px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.15);
  z-index: 90;
  border: 1px solid #e6e9ee;
  padding: 12px;
}
.hotel-search-section-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
}

.hotel-search-section-calendar-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid #eee;
}

.calendar-top-item {
  flex: 1;
}

.calendar-top-label {
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
}

.calendar-top-date {
  font-size: 14px;
  font-weight: 600;
}

/* range styling */
.hotel-search-section-calendar-day.range-middle {
  background: #f3e2da;
}

.hotel-search-section-calendar-day.range-start,
.hotel-search-section-calendar-day.range-end {
  background: #ff7f47;
  color: #fff;
  border-radius: 999px;
}

.hotel-search-section-cal-nav {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
}
.hotel-search-section-cal-title {
  font-weight: 700;
  color: #111827;
}
.hotel-search-section-calendar-grid {
  padding-top: 8px;
}
.hotel-search-section-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.hotel-search-section-calendar-weekday {
  text-align: center;
  font-size: 12px;
  color: #9fa6ad;
}
.hotel-search-section-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.hotel-search-section-calendar-day {
  border: 0;
  background: transparent;
  padding: 8px 0;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
}
.hotel-search-section-calendar-day.empty {
  background: transparent;
  cursor: default;
}
.hotel-search-section-calendar-day.selected {
  background: #ff7f47;
  color: #fff;
  font-weight: 700;
}

.hotel-search-section-calendar-dropdown-footer {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #eee;
}

/* Clear button */
.calendar-clear-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 12px;
}

/* OK button */
.calendar-ok-btn {
  flex: 1; /* takes remaining width */
  background: #ff7f47; /* Dark orange similar to your theme */
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}

/* Hover (Optional) */
.calendar-ok-btn:hover {
  background: #ff8c55;
}

/* Guests / rooms UI */
.hotel-search-section-col--guests {
  display: grid;
  grid-gap: 0;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.hotel-search-section-inline-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hotel-search-section-guest-toggle {
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
}
.hotel-search-section-guest-toggle.small-ghost {
  width: 120px;
  background: transparent;
  border: 2px solid transparent;
}
.hotel-search-section-guest-summary .hotel-search-section-guest-main {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
}
.hotel-search-section-guest-sub {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

/* floating panels like screenshot */
.hotel-search-section-floating-panel {
  position: absolute;
  left: 20px;
  top: 86px;
  width: 380px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12);
  border: 1px solid #e6e9ee;
  z-index: 95;
  padding: 12px;
}
.hotel-search-section-floating-panel.large {
  width: 460px;
  left: auto;
  right: 20px;
}
.hotel-search-section-floating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
}
.hotel-search-section-floating-row.split {
  align-items: flex-start;
  gap: 12px;
}
.hotel-search-section-floating-title {
  font-weight: 700;
  color: #111827;
}
.hotel-search-section-floating-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hotel-search-section-guest-count {
  width: 36px;
  text-align: center;
  font-weight: 700;
}
.hotel-search-section-floating-divider {
  height: 1px;
  background: #f1f1f2;
  margin: 8px 0;
}

/* Rooms & Guests combined panel */
.hotel-search-section-room-panel {
  width: 420px;
  max-width: 92vw;
  left: 0px; /* adjust positioning if needed */
  top: 60px;
  padding: 14px;
  z-index: 95;
}

/* Header */

.hotel-search-section-room-panel-header {
  text-align: start;
  padding: 10px 0 8px;
  border-bottom: 1px solid #f2f2f2;
}

.hotel-search-section-room-panel-title {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}

/* Room list */
.hotel-search-section-room-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

/* Single room row */
.hotel-search-section-room-row {
  padding: 10px 6px;
  border-top: 1px solid #eee;
}

/* header of single room row */
.hotel-search-section-room-idx {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}

/* Controls area: two columns (Adult / Child) */
.hotel-search-section-room-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* Each column */
.hotel-search-section-room-col {
  flex: 1;
  min-width: 0;
}

/* Small title and muted sub */
.hotel-search-section-floating-title.small {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.hotel-search-section-floating-sub.muted {
  font-size: 10px;
  color: #9aa0a6;
  margin-bottom: 8px;
}

/* control buttons area (reuse your existing button styles) */
.hotel-search-section-floating-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* guest count display */
.hotel-search-section-guest-count {
  min-width: 36px;
  text-align: center;
  font-weight: 700;
  background: #fff;
  border-radius: 6px;
  padding: 5px 6px;
  border: 1px solid #eef2f6;
}

/* Add / Remove room buttons row */
.hotel-search-section-room-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  justify-content: flex-start;
  align-items: center;
}

/* Green Add */
.hotel-search-section-add-room {
  background: transparent;
  border: 1px solid #34c759;
  color: #34c759;
  padding: 5px 8px;
  border-radius: 22px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}

/* Red Remove */
.hotel-search-section-remove-room {
  background: transparent;
  border: 1px solid #ff3b30;
  color: #ff3b30;
  padding: 5px 8px;
  border-radius: 22px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}
.hotel-search-section-remove-room[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sticky Done button section */
.hotel-search-section-room-panel-done-wrap {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;

  background: #fff;
  padding: 14px 18px;
  border-top: 1px solid #eee;
  z-index: 10000;
  display: flex;
  justify-content: end;
}

/* Orange button style */
.hotel-search-section-room-panel-btn {
  border: none;
  border-radius: 18px;
  background: #ff7f47;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s;
  padding: 6px 20px;
}

/* Optional hover */
.hotel-search-section-room-panel-btn:hover {
  background: #ff8f59;
}

/* class radios */
.hotel-search-section-class-row {
  display: flex;
  gap: 12px;
  padding: 8px;
  flex-wrap: wrap;
}
.hotel-search-section-class-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
}
.hotel-search-section-class-option input {
  accent-color: #1e90ff;
}

/* action column */
.hotel-search-section-col-action {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff7f47;
  border-radius: 10px;
  padding: 0px 25px;
}
.hotel-search-section-search-action-inline {
  width: 100%;
}
.hotel-search-section-search-btn--inline {
  width: 100%;
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ff7f47;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}

.hotel-search-section-search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* small controls */
.hotel-search-section-btn {
  background: transparent;
  border: 1px solid #d1d5db;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  transition: all 140ms ease;
  user-select: none;
  background-color: #f7fbff;
}
.hotel-search-section-btn--small {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 15px;
}
/* .hotel-search-section-btn--small:hover {
  background: #ff7f47;
  border-color: #ff7f47;
  color: #fff;
} */

/* footer tip */
.hotel-search-section-footer-tip {
  margin-top: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.hotel-search-section-location-dropdown-header {
  display: none;
  align-items: center;
  margin-bottom: 16px;
}

.hotel-search-section-location-dropdown-title {
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.hotel-search-section-location-dropdown-close {
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* responsive */
@media (max-width: 979px) {
  .hotel-search-section-floating-panel {
    left: 14px;
    top: 130px;
    width: calc(100% - 32px);
  }

  .hotel-search-section-col--action {
    border-top: 1px solid #eee;
    background: linear-gradient(90deg, #ff7f47, #ff9966);
  }

  .hotel-search-section-grid {
    flex-direction: column;
  }
  .hotel-search-section-col {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
  }

  .hotel-search-section-card {
    height: 378px;
  }

  .hotel-search-section-sub {
    display: none;
  }

  .hotel-search-section-col--action {
    border-top: 1px solid #eee;
    background: linear-gradient(90deg, #ff7f47, #ff9966);
  }

  /*  Let content be normal so fixed can attach to viewport */
  .hotel-search-section-content {
    position: absolute;
    left: auto;
    bottom: -60px;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: 20px;
  }

  /*  Make wrappers non-relative so they don't interfere */
  .hotel-search-section-location-wrap,
  .hotel-search-section-col--guests,
  .hotel-search-section-date-display {
    position: static;
    width: 100%;
  }

  /*  Full-screen overlays for all dropdowns */
  .hotel-search-section-location-dropdown,
  .hotel-search-section-floating-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;

    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;

    background: #ffffff;
    z-index: 9999;
    padding: 16px;
    overflow-y: auto;
  }

  .hotel-search-section-calendar {
    position: fixed;
    top: 25%;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;

    margin: 0;
    border-radius: 20px;
    box-shadow: none;
    border: 0;

    background: #ffffff;
    z-index: 9999;
    padding: 16px;
    overflow-y: auto;
  }

  .hotel-search-section-calendar-dropdown-footer {
    display: flex;
  }
  .hotel-search-section-room-panel {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    width: 100vw;
    max-width: 100vw;
    height: 70vh; /* Bottom sheet height */
    max-height: 75vh;
    background: #fff;

    border-radius: 22px 22px 0 0;
    padding: 0 0 80px 0; /* bottom space for button */

    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    animation: slideUp 0.32s ease-out;
  }

  /* Slide-up animation */
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .hotel-search-section-location-dropdown-header {
    display: flex;
  }

  .hotel-search-section-room-panel-header {
    text-align: center;
    padding: 10px 0 8px;
    border-bottom: 1px solid #f2f2f2;
  }

  .hotel-search-section-room-panel-done-wrap {
    position: fixed;
  }

  .hotel-search-section-room-panel-btn {
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 20px;
    background: #ff7f47;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s;
  }

  .hotel-search-section-dropdown-search {
    display: flex;
  }

  .hotel-search-section-dropdown-list {
    max-height: calc(100vh - 140px);
  }

  .hotel-search-section-fullscreen-close {
    padding: 0px;
  }

  .hotel-search-section-dropdown-list-item {
    padding: 12px 4px;
  }

  .hotel-search-section-label-icon {
    display: flex;
  }

  .hotel-search-section-label-text {
    display: none;
  }

  .hotel-search-section-input,
  .hotel-search-section-date-visual-btn,
  .hotel-search-section-guest-toggle {
    background-color: white;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 10px;
    width: 100%;
  }
  .hotel-search-section-date-col {
    display: flex;
    align-items: center;
  }
  .hotel-search-section-subsection {
    display: flex;
    align-items: center;
  }

  .hotel-search-section-search-card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }

  .hotel-search-section-title {
    font-size: 45px;
  }
  .hotel-search-section-header {
    margin-bottom: 30px;
  }
}

/* HotelSearchHighlights */

.hotel-search-highlights {
  width: 100%;
  padding: 24px 0;
  background-color: #ffffff;
  margin-top: 90px;
  border-bottom: 1px solid #eee;
}

.hotel-search-highlights-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: space-between;
}

.hotel-search-highlights-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.hotel-search-highlights-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.hotel-search-highlights-content {
  max-width: 320px;
}

.hotel-search-highlights-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #222222;
  font-family: sans-serif;
}

.hotel-search-highlights-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}

/* Responsive */
@media (max-width: 979px) {
  .hotel-search-highlights-container {
    flex-direction: column;
    gap: 24px;
  }

  .hotel-search-highlights {
    display: none;
  }
}

/* hotel-offers-section
*/

/* Section wrapper */
.hotel-offers-section {
  padding: 56px 24px;
  background: transparent;
  box-sizing: border-box;
}

/* Inner container keeps content centered */
.hotel-offers-container {
  max-width: 1200px;
  margin: 20px auto;
}

/* Heading */
.hotel-offers-head {
  text-align: center;
  margin-bottom: 28px;
}
.hotel-offers-sub {
  font-size: 20px;
  margin: 0;
  color: #0b1220;

  font-weight: 600;
}
.hotel-offers-title {
  margin: 8px 0 0;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: #0b1220;
  letter-spacing: -0.02em;
}

/* Horizontal list: responsive grid with nicer spacing and large cards */
.hotel-offers-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Large screens: show 5 cards like the screenshot */
/* We'll use auto-fit/auto-fill to be flexible */
@media (min-width: 900px) {
  .hotel-offers-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
  }
}

/* Card */
.hotel-offers-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 280px;
  cursor: pointer;
  display: block;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02));
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.08);
}

/* Media (background image) */
.hotel-offers-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transform-origin: center;
  transition: transform 320ms ease;
  filter: contrast(0.95) saturate(0.95);
}

/* Gradient overlay to darken bottom for text */
.hotel-offers-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 14, 0.1) 30%,
    rgba(7, 9, 11, 0.52) 100%
  );
  transition: background 220ms ease;
}

/* Meta content block at the bottom */
.hotel-offers-meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  color: #ffffff;
}

/* Title style */
.hotel-offers-card-title {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Price line */
.hotel-offers-card-sub {
  display: flex;
  align-items: center;
}
.hotel-offers-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  background: transparent;
}
.hotel-offers-rupee {
  color: #ff7f47;
  font-weight: 600;
  margin-right: 0px;
}
.hotel-offers-price-amt {
  color: #ff7f47;
  font-weight: 700;
  font-size: 16px;
}
.hotel-offers-price-suffix {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-size: 14px;
  margin-left: 4px;
}

/* Hover interactions */
.hotel-offers-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.18);
}
.hotel-offers-card:hover .hotel-offers-media {
  transform: scale(1.06);
}
.hotel-offers-card:active {
  transform: translateY(-2px);
}

/* Make cards more compact on smaller screens */
@media (max-width: 899px) {
  .hotel-offers-card {
    min-height: 240px;
    border-radius: 14px;
  }
  .hotel-offers-title {
    font-size: 32px;
  }
  .hotel-offers-card-title {
    font-size: 20px;
  }
  .hotel-offers-price-amt {
    font-size: 16px;
  }
}

/* Accessibility focus */
.hotel-offers-card:focus {
  outline: 3px solid rgba(30, 144, 255, 0.14);
  outline-offset: 3px;
}

/* Optional: horizontal scroll on very small screens */
@media (max-width: 768px) {
  .hotel-offers-section {
    padding: 56px 20px 12px 12px;
  }
  .hotel-offers-list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .hotel-offers-card {
    min-width: 80%;
    flex: 0 0 80%;
  }
  .hotel-offers-title {
    text-align: start;
  }
}

/* Utility: safe fallback if image missing */
.hotel-offers-media[style=""] {
  background-color: #e9e9ef;
}

/* hotel-dest.css
  
*/

/* Section wrapper */
.hotel-dest-section {
  padding: 48px 20px;
  box-sizing: border-box;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
  background: #fff;
}

/* Container center */
.hotel-dest-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* Head */
.hotel-dest-head {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 8px;
}
.hotel-dest-sub {
  margin: 0;
  color: #071126;

  font-weight: 600;
  font-size: 20px;
  font-family: sans-serif;
}
.hotel-dest-title {
  margin: 8px 0 16px;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 700;
  color: #071126;
  font-family: sans-serif;
}

/* Tabs (pills) */
.hotel-dest-tabs {
  display: inline-flex;
  gap: 10px;
  margin-top: 6px;
}
.hotel-dest-tab {
  border: 0;
  background: #f3f4f6;
  color: #1f2937;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background 160ms ease;
  box-shadow: none;
}
.hotel-dest-tab:hover {
  transform: translateY(-2px);
}
.hotel-dest-tab.active {
  background: linear-gradient(90deg, #ff7f47, #ff9966);
  color: #fff;
  box-shadow: 0 10px 30px rgba(13, 54, 89, 0.08);
}

/* Grid layout */
/* Desktop: 3 columns - large first row card spans 2 columns on the left like screenshot */
.hotel-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 20px;
}

/* Make first card wider/taller for hero visual on large screens */
.hotel-dest-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 180px;
  cursor: pointer;
  display: block;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
  box-shadow: 0 8px 20px rgba(12, 18, 28, 0.06);
  background: #eee;
}
.hotel-dest-card:focus {
  outline: 3px solid rgba(30, 144, 255, 0.12);
  outline-offset: 3px;
}
.hotel-dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(11, 18, 32, 0.12);
}

/* Make the first card larger to match screenshot layout */
.hotel-dest-card--large {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  min-height: 260px;
}

/* media (background image) */
.hotel-dest-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: transform 320ms ease;
  transform-origin: center;
}
.hotel-dest-card:hover .hotel-dest-media {
  transform: scale(1.05);
}

/* overlay gradient to darken bottom */
.hotel-dest-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 9, 11, 0.06) 30%,
    rgba(7, 9, 11, 0.58) 100%
  );
}

/* meta (bottom-left) */
.hotel-dest-meta {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 4;
  color: #ffffff;
}
.hotel-dest-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 18px rgba(3, 6, 10, 0.45);
}

/* responsive adjustments */
@media (max-width: 1100px) {
  .hotel-dest-card--large {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    min-height: 240px;
  }
  .hotel-dest-title {
    font-size: 30px;
  }
}
@media (max-width: 860px) {
  .hotel-dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hotel-dest-card--large {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 260px;
  }
}
@media (max-width: 520px) {
  .hotel-dest-grid {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 6px;
  }
  .hotel-dest-card {
    min-width: 76%;
    flex: 0 0 76%;
    min-height: 220px;
  }
  .hotel-dest-card--large {
    min-width: 86%;
    flex: 0 0 86%;
  }
  .hotel-dest-title {
    font-size: 22px;
  }
  .hotel-dest-sub {
    font-size: 14px;
  }
}

/* small utility */
.hotel-dest-meta .hotel-dest-cta {
  margin-top: 8px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 700;
}

/* Wrapper section */
.hotel-popular-destinations-section {
  padding: 40px 0 50px;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #111827;
}

/* Main title */
.hotel-popular-destinations-main-title {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 24px;
}

/* Group (India / Top Destinations) */
.hotel-popular-destinations-group {
  margin-top: 18px;
}

.hotel-popular-destinations-group + .hotel-popular-destinations-group {
  margin-top: 40px;
}

.hotel-popular-destinations-group-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
}

/* Tag list */
.hotel-popular-destinations-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px; /* row gap / column gap */
}

/* Single tag */
.hotel-popular-destinations-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #f0b33a;
  background-color: #fffdf6;
  padding: 4px 16px 4px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

/* Number pill on the left */
.hotel-popular-destinations-tag-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #ffe9b8;
  color: #7a4b00;
  font-weight: 600;
  margin-right: 10px;
  border-right: 1px solid #f0b33a;
}

/* Label */
.hotel-popular-destinations-tag-label {
  white-space: nowrap;
  font-weight: 500;
  color: #1f2933;
}

/* Hover state */
.hotel-popular-destinations-tag:hover {
  background-color: #fff3d6;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hotel-popular-destinations-main-title {
    font-size: 26px;
  }

  .hotel-popular-destinations-group-title {
    font-size: 18px;
  }

  .hotel-popular-destinations-tag-label {
    font-size: 13px;
  }

  .hotel-popular-destinations-section {
    padding: 20px 12px;
  }
}

/*  hotel-faq */

/* Section */
.hotel-faq-section {
  padding: 36px 22px;
  box-sizing: border-box;

  background: #fff;
  color: #071126;
}

.hotel-faq-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Title */
.hotel-faq-title {
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* List */
.hotel-faq-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Item */
.hotel-faq-item {
  border-bottom: 1px solid #e6e6e6;
}

/* Trigger button (question row) */
.hotel-faq-trigger {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 18px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: #071126;
  outline: none;
}

.hotel-faq-trigger:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Question text */
.hotel-faq-question {
  display: block;
}

/* Icon */
.hotel-faq-icon {
  display: inline-block;
  color: #0b1220;
  transform-origin: center;
  transition: transform 180ms ease;
}
.hotel-faq-icon.rotated {
  transform: rotate(180deg);
}

/* Panel (answer) */
.hotel-faq-panel {
  overflow: hidden;
  transition:
    max-height 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 220ms ease;
  max-height: 0;
  opacity: 0;
  padding: 0 8px;
}

/* When open: we set a large max-height so content expands (content size small). */
.hotel-faq-item.open .hotel-faq-panel {
  max-height: 420px; /* safe upper bound for paragraphs; adjust if needed */
  opacity: 1;
  padding: 8px 8px 18px;
}

/* Panel inner content */
.hotel-faq-panel-inner {
  font-size: 15px;
  color: #374151;
  line-height: 1.7;
}

/* Small screens: make title larger and spacing comfortable */
@media (max-width: 640px) {
  .hotel-faq-title {
    font-size: 26px;
  }
  .hotel-faq-trigger {
    font-size: 16px;
    padding: 14px 8px;
  }
  .hotel-faq-panel-inner {
    font-size: 15px;
    padding-right: 6px;
  }
  .hotel-faq-section {
    padding: 20px 12px;
  }
}

/* Accessibility: focus visible style */
.hotel-faq-trigger:focus {
  border-radius: 6px;
}

/*  hotels-search */

/* Base */
.hotels-search-page {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
  color: #071126;
  background: #fff;
}

.hotels-search-loc {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(14, 90, 242, 0.12);
  font-size: 14px;
}
.hotels-search-dates {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #6b7280;
  font-size: 13px;
}
.hs-date {
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e9eef7;
  text-align: center;
  min-width: 110px;
  font-weight: 600;
}
.hotels-search-rooms {
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e9eef7;
}

.hotels-search-mobile-filter-btn {
  display: none;
  background: #ff7f47;
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
}

/* Layout */
.hotels-search-content {
  max-width: 1200px;
  margin: 18px auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Filters sidebar */
.hotels-search-filters {
  background: #fff;
  border: 1px solid #eee;
  padding: 14px;
  border-radius: 12px;
  position: sticky;
  top: 0px;
  height: calc(100vh - 0px);
  overflow: auto;
}
.hs-map-thumb {
  height: 110px;
  border-radius: 10px;
  background: linear-gradient(180deg, #e9f2ff, #f6fbff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ff7f47;
  margin-bottom: 12px;
}
.hotels-search-filter-search {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #eef2f8;
  margin-bottom: 12px;
}
.hotels-search-filter-block h5 {
  margin: 10px 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.hs-checkbox {
  display: block;
  padding: 8px 6px;
  cursor: pointer;
  border-radius: 6px;
  color: #111827;
}
.hs-checkbox input {
  margin-right: 10px;
  transform: translateY(1px);
}

/* count and more */
.hs-count {
  float: right;
  color: #9aa0a6;
  font-weight: 700;
  margin-left: 8px;
}
.hs-more {
  color: #ff7f47;
  margin-top: 6px;
  cursor: pointer;
  font-weight: 700;
}

/* Results area */
.hotels-search-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card */
.hotels-search-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #efeef2;
  overflow: hidden;
  display: flex;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
}
.hotels-search-card-media {
  background-size: cover;
  background-position: center;
  height: 100%;
  position: relative;
  width: 40%;
}
.hs-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  background: linear-gradient(90deg, #ff6b6b, #ff9a41);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
}
.hs-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 8px;
  border-radius: 18px;
  font-weight: 700;
  display: none;
}

/* body grid (left details, right price) */
.hotels-search-card-body {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  padding: 18px;
  align-items: start;
  width: 60%;
}
.hs-left {
  padding-right: 6px;
}
.hs-name {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #071126;
}
.hs-location {
  color: #ff7f47;
  font-weight: 600;
  margin-bottom: 8px;
}
.hs-tags {
  margin-bottom: 8px;
}
.hs-pill {
  background: #fff;
  border: 1px solid #eef2f6;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}
.hs-feature-list {
  margin: 8px 0 0 0;
  padding-left: 8px;
  color: #374151;
  font-size: 12px;
}
.hs-note {
  margin-top: 12px;
  background: linear-gradient(90deg, #fff7e6, #fffaf0);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #f3e6d0;
}

/* right column */
.hs-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.hs-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hs-rating-score {
  background: #14c38e;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 800;
}
.hs-rating-text {
  font-size: 13px;
  color: #111827;
  font-weight: 700;
  text-align: right;
}
.hs-price {
  text-align: right;
  min-width: 240px;
}
.hs-discount {
  background: #ff4d4f;
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  display: inline-block;
  font-weight: 700;
  margin-bottom: 6px;
}
.hs-old {
  text-decoration: line-through;
  color: #9aa0a6;
  font-weight: 700;
  margin-bottom: 6px;
}
.hs-current {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}
.hs-tax {
  font-size: 12px;
  color: #9aa0a6;
  margin-bottom: 12px;
}
.hs-cta {
  background: linear-gradient(90deg, #ff7f47, #ff9966);
  color: #fff;
  border: 0;
  padding: 8px 18px;
  border-radius: 28px;
  font-weight: 600;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 920px) {
  .hotels-search-content {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .hotels-search-filters {
    display: none;
  }
  .hotels-search-mobile-filter-btn {
    display: inline-block;
    margin-left: 8px;
  }
}

@media (max-width: 767.98px) {
  .hotels-search-card {
    display: flex;
    flex-direction: column;
  }

  .hotels-search-card-media {
    height: 220px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
  }
  .hotels-search-card-body {
    display: flex;
    width: 100%;
    padding: 10px;
  }

  .hs-right {
    align-items: flex-end;
    text-align: left;
  }
  .hs-cta {
    display: none;
    width: 100%;
  }
  .hs-price {
    min-width: 100px;
  }
}
/* Mobile filter drawer */
.hotels-search-mobile-filter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(3, 6, 10, 0.4), rgba(3, 6, 10, 0.4));
  z-index: 120;
  display: flex;
  justify-content: flex-end;
}
.hs-mobile-filter-header {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
  width: 420px;
}
.hs-mobile-filter-body {
  background: #fff;
  width: 420px;
  height: 100%;
  overflow: auto;
  padding: 18px;
}

/* apply btn */
.hotels-search-apply-filters {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: #ff7f47;
  color: #fff;
  font-weight: 800;
  border: 0;
}

.hotels-search-filter-label {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.hs-block {
  padding-top: 8px;
  border-top: 1px solid #eee;
  margin-bottom: 10px;
}
/* small tweaks */
.hs-reset {
  background: transparent;
  border: none;
  color: #ff7f47;
  font-weight: 600;
  float: right;
  cursor: pointer;
  font-size: 14px;
}

/* topbar */
.hotels-search-topbar {
  background: #304f47;
  padding: 20px 18px;
  position: sticky;
  top: 0;
  z-index: 80;
}
.hotels-search-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 0 20px;
  justify-content: space-between;
}

/* control wrapper */
.hotels-search-control {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hotels-search-control-wrapper {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 4px 8px;
  border-radius: 6px;
}

.hotels-search-location {
  width: 32%;
}

.hotels-search-dates-control {
  width: 35%;
}

/* labels and inputs */
.hs-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 2px;
}
.hs-input {
  min-width: 280px;
  font-weight: 600;
  font-size: 14px;
  border: none;
}

/* date button */
.hs-date-btn {
  background: #fff;
  border: none;
  min-width: 160px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.hs-date-line {
  font-weight: 600;
  font-size: 14px;
}
.hs-date-line.small {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

/* rooms button */
.hs-rooms-btn {
  background: #fff;
  border: none;
  cursor: pointer;
  min-width: 150px;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
}

/* modify button */
.hs-modify-cta {
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 28px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid white;
  background-color: #304f47;
}

/* dropdown base */
.hotels-search-dropdown {
  position: absolute;
  top: 50px;
  left: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12);
  border: 1px solid #e6e9ee;
  z-index: 90;
  width: 420px;
}

/* location dropdown specifics */
.hotels-search-dropdown--location {
  width: 360px;
}
.hs-dd-search {
  padding: 10px;
  border-bottom: 1px solid #f1f1f2;
}
.hs-dd-input {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #eef2f6;
}
.hs-dd-list {
  max-height: 200px;
  overflow: auto;
}
.hs-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  color: #071126;
}
.hs-dd-item:hover {
  background: #f7fbff;
}

/* calendar */
.hotels-search-dropdown--calendar {
  width: 760px;
  left: -40px;
  top: 50px;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
}
.hs-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hs-cal-nav {
  background: transparent;
  border: 0;
  font-size: 30px;
  cursor: pointer;
  color: #111827;
}
.hs-cal-title {
  font-weight: 800;
  font-size: 16px;
  color: #111827;
}
.hs-cal-panels {
  display: flex;
  justify-content: space-between;
}

/* individual month */
.hs-month {
  width: 50%;
  padding: 10px;
}
.hs-month-title {
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}
.hs-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  color: #9aa0a6;
  margin-bottom: 6px;
}
.hs-weekday {
  text-align: center;
  font-size: 12px;
}
.hs-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.hs-day {
  border: 0;
  padding: 8px 6px;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  color: #111827;
}
.hs-day.empty {
  background: transparent;
  cursor: default;
  color: transparent;
}
.hs-day.inrange {
  background: rgba(14, 90, 242, 0.12);
}
.hs-day.checkin,
.hs-day.checkout {
  background: #0e5af2;
  color: #fff;
  box-shadow: 0 6px 18px rgba(14, 90, 242, 0.12);
}

/* cal footer */
.hs-cal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f3f6fb;
}
.hs-cal-done {
  background: #0e5af2;
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* rooms dropdown */
.hotels-search-dropdown--rooms {
  left: -100px;
  padding: 12px;
}
.hs-rooms-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hs-room-row {
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.hs-room-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}
.hs-room-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hs-room-col {
  flex: 1;
}
.hs-room-label {
  font-weight: 600;
  font-size: 12px;
}
.hs-sub {
  font-size: 10px;
  color: #9aa0a6;
  font-weight: 600;
  margin-left: 6px;
}

/* counters */
.hs-count-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.hs-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e6e9ee;
  background: #f7fbff;
  font-weight: 700;
  cursor: pointer;
}
.hs-count {
  min-width: 36px;
  text-align: center;
  font-weight: 700;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eef2f6;
}
.hs-remove-room {
  background: transparent;
  border: 1px solid #ff3b30;
  color: #ff3b30;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

/* rooms actions */
.hs-rooms-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.hs-rooms-actions-wrapper {
  display: flex;
  gap: 10px;
}
.hs-add-room {
  background: transparent;
  border: 1px solid #34c759;
  color: #34c759;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.hs-done {
  background: #ff7f47;
  border: 0;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

/* responsive */
@media (max-width: 920px) {
  .hotels-search-topbar-inner {
    flex-wrap: wrap;
  }
  .hotels-search-dropdown--calendar {
    left: 0;
    width: 100%;
    top: 68px;
    box-shadow: none;
    border-radius: 8px;
  }
  .hotels-search-dropdown {
    left: 0;
    top: 68px;
  }
  .hotels-search-dropdown--rooms {
    width: 100%;
    left: 0;
  }
  .hs-input {
    min-width: 100%;
  }
  .hotels-search-control {
    width: 100%;
  }
  .hs-modify-cta {
    width: 100%;
    text-align: center;
  }
}

.hotel-popular-section {
  padding: clamp(32px, 5vw, 56px) 0;
  text-align: center;
}

.hotel-popular-heading {
  margin: 8px 0 24px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  color: #0b1220;
  letter-spacing: -0.02em;
}

/* Wrapper */
.hotel-popular-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fade edges so the slider doesn't look cut off */
.hotel-popular-wrapper::before,
.hotel-popular-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 5;
}

.hotel-popular-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.hotel-popular-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

/* Slider */
.hotel-popular-slider {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 20px 8px;
  scrollbar-width: none;
}

.hotel-popular-slider::-webkit-scrollbar {
  display: none;
}

/* Card */
.hotel-popular-card {
  flex: 0 0 auto;
  min-width: 300px;
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hotel-popular-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

/* Logo */
.hotel-popular-logo {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.hotel-popular-logo img {
  height: 64px;
  width: auto;
  display: block;
}

/* Image */
.hotel-popular-image {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.hotel-popular-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hotel-popular-card:hover .hotel-popular-image img {
  transform: scale(1.05);
}

/* Info */
.hotel-popular-info {
  padding: 22px 22px 20px;
  text-align: left;
}

.hotel-popular-title {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-popular-link {
  color: #ff7f47;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hotel-popular-link span {
  transition: transform 0.2s ease;
}

.hotel-popular-link:hover span {
  transform: translateX(3px);
}

/* Arrows */
.hotel-popular-arrow {
  background: #ffffff;
  border: none;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  font-size: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hotel-popular-arrow:hover {
  background: #ff7f47;
  color: #ffffff;
  transform: scale(1.05);
}

.hotel-popular-arrow:active {
  transform: scale(0.95);
}

.hotel-popular-arrow-left {
  position: absolute;
  left: -20px;
  z-index: 20;
}

.hotel-popular-arrow-right {
  position: absolute;
  right: -20px;
  z-index: 20;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .hotel-popular-arrow-left {
    left: 4px;
  }
  .hotel-popular-arrow-right {
    right: 4px;
  }
  .hotel-popular-wrapper::before,
  .hotel-popular-wrapper::after {
    width: 36px;
  }
}

@media (max-width: 768px) {
  .hotel-popular-section {
    padding: 20px 12px;
  }

  .hotel-popular-heading {
    text-align: start;
    margin: 8px 0 10px;
  }

  .hotel-popular-arrow {
    display: none;
  }

  .hotel-popular-wrapper::before,
  .hotel-popular-wrapper::after {
    display: none;
  }

  .hotel-popular-card {
    min-width: 260px;
    width: 80vw;
    max-width: 320px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  }

  .hotel-popular-image {
    height: 200px;
  }
}

/* SECTION WRAPPER */
.hotel-mood-carousel-section {
  position: relative;
  padding: 60px 0 70px;
  background-color: #f4f7fb;
  overflow: hidden;
}

.hotel-mood-carousel-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* LIGHT BACKGROUND ILLUSTRATION / GRADIENT */
.hotel-mood-carousel-bg {
  position: absolute;
  inset: 0;
  /* background: radial-gradient(circle at top, #ffffff 0, #f4f7fb 40%, #e5eef5 100%); */
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}

/* HEADER */
.hotel-mood-carousel-header {
  text-align: center;
  margin-bottom: 32px;
}

.hotel-mood-carousel-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111827;
  margin-bottom: 8px;
  line-height: 1.2;
}

.hotel-mood-carousel-subtitle {
  font-size: 18px;
  color: #4b5563;
}

/* CAROUSEL WRAPPER */
.hotel-mood-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* FADING EDGES USING MASK */
.hotel-mood-carousel-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 40px;
}

.hotel-mood-carousel-slider::-webkit-scrollbar {
  display: none;
}

/* CARD */
.hotel-mood-carousel-card {
  position: relative;
  flex: 0 0 360px;
  height: 260px;
  border-radius: 32px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25); */
  transform: translateY(0);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.hotel-mood-carousel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

/* DARK GRADIENT AT BOTTOM */
.hotel-mood-carousel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0,
    rgba(0, 0, 0, 0.3) 45%,
    transparent 100%
  );
}

/* CARD CONTENT */
.hotel-mood-carousel-card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #ffffff;
}

.hotel-mood-carousel-card-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.hotel-mood-carousel-card-link {
  border: none;
  background: transparent;
  color: #f9fafb;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
}

.hotel-mood-carousel-card-arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.hotel-mood-carousel-card-link:hover .hotel-mood-carousel-card-arrow {
  transform: translateX(4px);
}

/* ARROWS */
.hotel-mood-carousel-arrow {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.2s ease;
  color: #111827;
  z-index: 2;
}

.hotel-mood-carousel-arrow-left {
  left: 0;
}

.hotel-mood-carousel-arrow-right {
  right: 0;
}

.hotel-mood-carousel-arrow:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  background-color: #f9fafb;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hotel-mood-carousel-title {
    font-size: 32px;
  }

  .hotel-mood-carousel-card {
    flex: 0 0 320px;
    height: 230px;
  }

  .hotel-mood-carousel-arrow {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 768px) {
  .hotel-mood-carousel-section {
    padding: 40px 0 50px;
  }

  .hotel-mood-carousel-arrow-left {
    left: 4px;
  }

  .hotel-mood-carousel-arrow-right {
    right: 4px;
  }

  .hotel-mood-carousel-title {
    font-size: 26px;
    text-align: start;
  }

  .hotel-mood-carousel-subtitle {
    font-size: 15px;
    display: none;
  }
  .hotel-mood-carousel-arrow {
    display: none;
  }
  .hotel-mood-carousel-inner {
    padding: 0px 12px;
  }
  .hotel-mood-carousel-slider {
    gap: 10px;
    padding-inline: 0px;
  }
}

.hotel-home {
  --hotel-ink: #15191c;
  --hotel-ink-soft: #5b6166;
  --hotel-white: #ffffff;
  --hotel-grey-bg: #f6f7f8;
  --hotel-orange: #ff7f47;
  --hotel-orange-deep: #e85f28;
  --hotel-orange-pale: #fff0e8;
  --hotel-line: #e9eaec;
  --hotel-shadow: 0 14px 36px rgba(21, 25, 28, 0.08);
  font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;
  background: var(--hotel-white);
  color: var(--hotel-ink);
}

.hotel-home-hero {
  position: relative;
  height: 450px;
  overflow: visible;
  margin-bottom: 90px;
}

.hotel-home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 0.8s;
}

.hotel-home-hero__slide.active {
  opacity: 1;
  z-index: 2;
}

.hotel-home-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel-home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.18));
}

.hotel-home-hero__content {
  position: absolute;
  top: 50%;
  left: 10;
  transform: translateY(-50%);
  max-width: 800px;
  color: #fff;
  z-index: 10;
  padding: 0px 16px;
  contain: layout paint;
}

.hotel-home-hero__content h1 {
  font-size: 60px;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 24px;
  font-family: sans-serif;
}

.hotel-home-hero__content p {
  margin-top: 12px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  min-height: 58px;
}

.hotel-home-hero__prev,
.hotel-home-hero__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 3;
  border-radius: 0;
  padding: 8px;
  transition: all 0.3s ease;
}

.hotel-home-hero__prev {
  left: 20px;
}

.hotel-home-hero__next {
  right: 20px;
}

.hotel-home-hero__prev,
.hotel-home-hero__next {
  display: none;
}

@media (min-width: 1200px) {
  .hotel-home-hero__prev,
  .hotel-home-hero__next {
    display: flex;
  }
}

.hotel-home-hero__dots {
  position: absolute;
  bottom: 150px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 20;
}

.hotel-home-hero__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ffffff66;
}

.hotel-home-hero__dots .active {
  width: 32px;
  border-radius: 20px;
  background: #fff;
}

.hotel-home-hero__search {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -48px;
  z-index: 100;
}
@media (max-width: 767px) {
  .hotel-home-hero__content {
    position: absolute;
    top: 30%;
  }
  .hotel-home-hero__content h1 {
    max-width: 320px;
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: #fff;
  }

  .hotel-home-hero__content p {
    max-width: 300px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hotel-home-hero__search {
    bottom: -168px;
  }
}

@media (max-width: 576px) {
  .hotel-home-hero__search {
    bottom: -60px;
    left: 12px;
    right: 12px;
  }
  .hotel-home-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.15) 0,
      rgba(15, 23, 42, 0.45) 55%,
      rgba(15, 23, 42, 0.15) 78%,
      rgba(255, 255, 255, 0.75) 92%,
      #fff
    );
  }
}

/* ===== Destinations ===== */
.hotel-home__dest-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.hotel-dest-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  height: 150px;
  box-shadow: var(--hotel-shadow);
}
.hotel-dest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hotel-dest-card:hover img {
  transform: scale(1.06);
}
.hotel-dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(21, 25, 28, 0.65),
    rgba(21, 25, 28, 0) 55%
  );
}
.hotel-dest-card__label {
  position: absolute;
  bottom: 12px;
  left: 14px;
  color: var(--hotel-white);
}
.hotel-dest-card__label b {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}
.hotel-dest-card__label span {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* ===== Trust band ===== */
.hotel-band {
  background: var(--hotel-orange-pale);
  border-radius: 22px;
  padding: 42px 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.hotel-band h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
  max-width: 440px;
  line-height: 1.25;
  margin: 0;
  color: var(--hotel-ink);
}
.hotel-band__stats {
  display: flex;
  gap: 38px;
}
.hotel-band__stats div b {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--hotel-orange-deep);
}
.hotel-band__stats div span {
  font-size: 0.74rem;
  color: var(--hotel-ink-soft);
}

/* ===== Testimonial ===== */
.hotel-testi {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 44px;
  align-items: center;
  background: var(--hotel-grey-bg);
  border-radius: 22px;
  padding: 44px;
}
.hotel-testi__photo {
  border-radius: 16px;
  overflow: hidden;
  height: 280px;
}
.hotel-testi__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotel-testi__body {
  position: relative;
}
.hotel-testi__quote-icon {
  color: var(--hotel-orange);
  opacity: 0.5;
  margin-bottom: 10px;
}
.hotel-testi blockquote {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 22px;
}
.hotel-testi__by {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotel-testi__by img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.hotel-testi__by b {
  display: block;
  font-size: 0.9rem;
}
.hotel-testi__by span {
  font-size: 0.78rem;
  color: var(--hotel-ink-soft);
}

/* ===== Footer ===== */
.hotel-footer {
  background: var(--hotel-ink);
  color: var(--hotel-white);
  padding: 56px 0 24px;
  margin-top: 8px;
}
.hotel-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hotel-footer__logo {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: inherit;
}
.hotel-footer__brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
  line-height: 1.6;
  max-width: 270px;
  margin: 0 0 16px;
}
.hotel-footer__social {
  display: flex;
  gap: 10px;
}
.hotel-footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-white);
  transition: 0.2s ease;
}
.hotel-footer__social a:hover {
  background: var(--hotel-orange);
  border-color: var(--hotel-orange);
  color: var(--hotel-ink);
}
.hotel-footer__col h5 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 14px;
}
.hotel-footer__col a {
  display: block;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
  text-decoration: none;
}
.hotel-footer__col a:hover {
  color: var(--hotel-orange);
}
.hotel-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Search — shared base ===== */
.hotel-search-wrap {
  width: 100%;
}
.hotel-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hotel-white);
  border-radius: 0px;
  box-shadow: 0 4px 20px #00000014;
  padding: 10px;
}
.hotel-search--home {
  /* padding:30px ; */
}
.hotel-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hotel-search__divider {
  width: 1px;
  height: 40px;

  background: #dddddd;

  flex-shrink: 0;

  margin: 0 16px;
}
.hotel-search__label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hotel-ink-soft);
  padding-left: 2px;
  display: none;
}
.hotel-search__box {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;

  background: #fff;
}
.hotel-search__box:hover {
  background: rgba(21, 25, 28, 0.04);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.hotel-search__box--active {
  background: #fff;
  box-shadow: 0 0 0 1.5px #171b20 inset;
}
.hotel-search__value {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--hotel-ink, #15191c);
}
.hotel-search__chevron {
  color: var(--hotel-ink-soft);
  margin-left: auto;
  flex-shrink: 0;
}
.hotel-search__combo-icon {
  flex-shrink: 0;
  color: #181818;
  stroke-width: 1.6;
  margin-right: 12px;
}
.hotel-search__combo-input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  color: var(--hotel-ink, #15191c);
}
.hotel-search__combo-input::placeholder {
  font-weight: 500;
  color: var(--hotel-ink-soft);
}
.hotel-search__clear {
  all: unset;
  cursor: pointer;
  display: none;
  color: var(--hotel-ink-soft);
  flex-shrink: 0;
}

.hotel-search__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #b88a3b;
  color: #fff;

  border: none;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  border-radius: 0;

  min-width: 140px;
  height: 45px;

  font-family: sans-serif;
  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.hotel-search__submit:hover {
  background: #9f752f;
  color: #fff;
}
.hotel-search-wrap,
.hotel-search,
.hotel-search__field {
  position: relative;
  z-index: 100;
}

.hotel-search__panel {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  word-break: break-word;

  position: absolute;
  top: calc(100% + 4px);
  left: -1px;

  z-index: 9999;

  background: #fff;
  border-radius: 0;
  width: 544px;
  max-height: 500px;
  padding: 10px 16px;

  overflow-y: auto;
  overflow-x: hidden;

  box-shadow: 0 4px 16px #00000014;
  animation: hotel-fade 0.15s ease;
  margin-top: 10px;
}
@keyframes hotel-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hotel-search__panel--dest {
  width: 330px;
  padding-top: 6px;
}
.hotel-search__suggestions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.hotel-search__suggestion {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 9px;
}

.hotel-search__suggestion-icon {
  color: #171b20;
  display: flex;
}
.hotel-search__suggestion-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.hotel-search__suggestion-text b {
  font-size: 0.88rem;
  font-weight: 700;
}
.hotel-search__suggestion-text small {
  font-size: 0.74rem;
  color: var(--hotel-ink-soft);
}
.hotel-search__suggestion-count {
  font-size: 0.74rem;
  color: var(--hotel-ink-soft);
  white-space: nowrap;
}
.hotel-search__empty {
  font-size: 0.84rem;
  color: var(--hotel-ink-soft);
  padding: 10px 4px;
  margin: 0;
}

/* ===== Dates panel / calendar ===== */
.hotel-search__panel--dates {
  width: 600px;
}
.hotel-search__calendar {
  display: flex;
  gap: 0;
}
.hotel-search__month {
  flex: 1;
  min-width: 0;
  padding: 4px 14px;
}
.hotel-search__month:first-child {
  border-right: 1px solid var(--hotel-line);
}
.hotel-search__month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hotel-search__month-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--hotel-ink, #15191c);
}
.hotel-search__nav {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--hotel-ink, #15191c);
}
.hotel-search__nav:hover:not(:disabled) {
  background: rgba(21, 25, 28, 0.06);
}
.hotel-search__nav:disabled {
  color: var(--hotel-line);
  cursor: not-allowed;
}
.hotel-search__nav-spacer {
  width: 26px;
  height: 26px;
}
.hotel-search__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.hotel-search__weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hotel-ink-soft);
  padding: 4px 0;
}
.hotel-search__daysgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}
.hotel-search__day {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--hotel-ink, #15191c);
  padding: 9px 0;
  border-radius: 999px;
  width: 100%;
}
.hotel-search__day--empty {
  cursor: default;
}
.hotel-search__day:not(.hotel-search__day--disabled):not(
    .hotel-search__day--empty
  ):hover {
  background: #f8f2e7; /* light luxury gold */
}

.hotel-search__day--disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.hotel-search__day--today {
  font-weight: 700;
  color: #b88a3b;
}

.hotel-search__day--in-range {
  background: #f5eddf; /* soft gold range */
  border-radius: 0;
}

.hotel-search__day--selected {
  background: #b88a3b; /* brand gold */
  color: #fff;
  font-weight: 700;
}
.hotel-search__day--range-start {
  border-radius: 999px 0 0 999px;
}
.hotel-search__day--range-end {
  border-radius: 0 999px 999px 0;
}

.hotel-search__quickdates {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px 4px;
  border-top: 1px solid var(--hotel-line);
  margin-top: 8px;
}
.hotel-search__chip {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--hotel-line);
  border-radius: 999px;
  color: var(--hotel-ink, #15191c);
}
.hotel-search__chip:hover {
  border-color: var(--hotel-orange);
  color: var(--hotel-orange-deep);
}

/* ===== Guests panel ===== */
.hotel-search__panel--guests {
  width: 260px;
  right: 0;
  left: auto;
}
.hotel-search__stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.hotel-search__stepper-row span {
  font-size: 0.88rem;
  font-weight: 600;
}
.hotel-search__stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotel-search__stepper button {
  all: unset;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hotel-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-ink, #15191c);
}
.hotel-search__stepper button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.hotel-search__stepper button:not(:disabled):hover {
  border-color: #b88a3b;
  color: #b88a3b;
}
.hotel-search__stepper b {
  width: 16px;
  text-align: center;
  font-size: 0.9rem;
}

.hotel-search__done {
  all: unset;
  cursor: pointer;
  display: block;
  width: 168px;
  text-align: center;
  margin-top: 10px;
  color: #fff;
  background-color: #b88a3b;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 10px;

  transition: background-color 0.25s ease;
}

.hotel-search__done:hover {
  background-color: #9f752f;
}

/* ===================================================
   COMPACT variant — light gray bar with orange button
   =================================================== */

.hotels-results-top {
  background: #fff;
  border-bottom: 1px solid #ececec;

  position: sticky;
  top: 0;
  z-index: 100;
}

.hotel-search-wrap--compact {
  background: #ffffff;
  padding: 16px 0;
}

.hotel-search-wrap--compact-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}

.hotel-search--compact {
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 16px;
  align-items: flex-end;
}
.hotel-search--compact .hotel-search__field--dest {
  flex: 2 1 260px;
}
.hotel-search--compact .hotel-search__field--checkin,
.hotel-search--compact .hotel-search__field--checkout {
  flex: 0 1 150px;
}
.hotel-search--compact .hotel-search__field--guests {
  flex: 0 1 190px;
}

.hotel-search--compact .hotel-search__box {
  width: 100%;
  background: #f5f5f5;
  border: 1px solid #dddddd;
  border-radius: 0;
  padding: 6px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-align: left;
}

/* Label inside box */
.hotel-search--compact .hotel-search__label {
  display: block;
  margin: 0;

  color: #8a8a8a;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Value */
.hotel-search--compact .hotel-search__value,
.hotel-search--compact .hotel-search__combo-input {
  color: #15191c;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

/* Destination content */
.hotel-search--compact .hotel-search__box-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Destination input */
.hotel-search--compact .hotel-search__combo-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

/* Active */
.hotel-search--compact .hotel-search__box--active {
  border-color: #171b20;
  box-shadow: 0 0 0 1px #171b20 inset;
}

/* Error */
.hotel-search--compact .hotel-search__box--error {
  border-color: #dc3545;
  box-shadow: 0 0 0 1px #dc3545 inset;
}
.hotel-search--compact .hotel-search__submit {
  background: #b88a3b;
  color: #ffffff;
  min-width: auto;
  padding: 13px 24px;
  border-radius: 0;
  font-weight: 700;
  border: none;
  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.hotel-search--compact .hotel-search__submit:hover {
  background: #9b722f;
  color: #ffffff;
}
/* ===================================================
   Mobile — panels become full-width bottom sheets
   (desktop-style compact bar, used when the mobile
   compact flow below is NOT active)
   =================================================== */
@media (max-width: 680px) {
  .hotel-search__field {
    width: 100%;
  }

  /* every open panel becomes a bottom sheet */
  .hotel-search__panel,
  .hotel-search__panel--dest,
  .hotel-search__panel--dates,
  .hotel-search__panel--guests {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 28px #00000024;
    padding: 16px 14px 20px;
    animation: hotel-sheet-up 0.2s ease;
  }
  @keyframes hotel-sheet-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hotel-search__calendar {
    flex-direction: column;
  }
  .hotel-search__month:first-child {
    border-right: none;
  }
  .hotel-search__month {
    padding: 2px 2px;
  }
  .hotel-search__day {
    font-size: 0.9rem;
    padding: 10px 0;
  }

  .hotel-search__done {
    width: 100%;
  }
}

.hotel-search-wrap--compact-mobile {
  position: sticky !important;
  top: 0;
  z-index: 1000;

  width: 100%;
  background: #fff;
  padding: 0;
}

.hotel-search-m {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 14px 16px;
}

.hotel-search-m__header {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 8px 18px;

  background: #ffffff;

  /* Card style like screenshot */
  border: 1px solid #e2e2e2;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);

  /* Not sticky */
  position: relative;
  z-index: 20;

  box-sizing: border-box;
}

.hotel-search-m__back,
.hotel-search-m__search {
  all: unset;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 4px;
}

.hotel-search-m__content {
  flex: 1;
  min-width: 0;
}

.hotel-search-m__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: sans-serif;
}

.hotel-search-m__summary {
  all: unset;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.hotel-search-m__summary-edit {
  color: var(--lux-hotel-gold);
  font-weight: 700;
}
/* Overlay */

.hotel-search-m__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;

  display: flex;
  align-items: flex-start;
}

/* Sheet */

.hotel-search-m__card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);

  animation: hotelSlide 0.28s ease;
}

.hotel-search-m__card .hotel-search-m__header {
  padding: 0;
  margin-bottom: 18px;
  box-shadow: none;
}

@keyframes hotelSlide {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Header */

.hotel-search-m__back {
  all: unset;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Field */

.hotel-search-m__field {
  all: unset;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 14px;

  box-sizing: border-box;

  width: 100%;

  background: #fff;

  border: 1px solid #dddddd;

  border-radius: 0;

  padding: 6px 10px;

  margin-bottom: 16px;
}

.hotel-search-m__icon {
  color: #c7c7c7;
  flex-shrink: 0;
}

.hotel-search-m__content {
  flex: 1;
  min-width: 0;
}

.hotel-search-m__label {
  display: block;

  color: #555;

  font-size: 13px;

  margin-bottom: 4px;
}

.hotel-search-m__value {
  display: block;

  font-size: 15px;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

/* Date Row */

.hotel-search-m__double {
  display: flex;

  border: 1px solid #ddd;

  border-radius: 0;

  overflow: hidden;

  margin-bottom: 16px;
}

.hotel-search-m__field-half {
  border: none;

  border-radius: 0;

  margin: 0;

  flex: 1;
}

.hotel-search-m__divider {
  width: 1px;

  background: #e6e6e6;
}

/* Search */

.hotel-search-m__submit {
  all: unset;

  width: 100%;
  height: 45px;
  box-sizing: border-box;

  cursor: pointer;
  text-align: center;

  border-radius: 0;

  background: var(--lux-hotel-gold);
  color: var(--lux-hotel-white);

  font-size: 18px;
  font-weight: 700;

  transition: background 0.2s ease;
}

.hotel-search-m__submit:hover {
  background: var(--lux-hotel-gold-dark);
}

.hotel-search-m__close {
  position: fixed;
  top: calc(100% - 220px); /* adjust according to your card height */
  left: 50%;
  transform: translateX(-50%);

  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;

  background: #6f6f6f;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 10001;

  transition: all 0.2s ease;
}

.hotel-search-m__close:hover {
  background: #5b5b5b;
}

.hotel-search-m__sheet {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  background: #fff;
  display: flex;
  flex-direction: column;

  z-index: 999999;

  margin: 0;
  padding: 0;

  overflow: hidden;
  box-sizing: border-box;
}

/* Header */

.hotel-search-m__sheet-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid #ececec;
}

.hotel-search-m__sheet-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: sans-serif;
}

.hotel-search-m__sheet-close,
.hotel-search-m__sheet-placeholder {
  width: 28px;
  height: 28px;
}

.hotel-search-m__sheet-close {
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search */

.hotel-search-m__sheet-search {
  display: flex;
  align-items: center;
  margin: 16px;
  height: 42px;
  border: 1.5px solid #b88a3b;
  border-radius: 0;
  padding: 0 14px;
  gap: 10px;
}

.hotel-search-m__sheet-search svg {
  color: #666;
}

.hotel-search-m__sheet-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
}

.hotel-search-m__clear {
  width: 22px;
  height: 22px;
  border: none;
  background: #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* List */

.hotel-search-m__sheet-list {
  flex: 1;
  overflow-y: auto;
}

.hotel-search-m__sheet-item {
  width: 100%;
  border: none;
  background: #fff;
  display: flex;
  align-items: flex-start;
  padding: 14px 18px;
  gap: 14px;
  text-align: left;
}

.hotel-search-m__sheet-item:active {
  background: #f7f7f7;
}

.hotel-search-m__sheet-item-left {
  color: #3b3b3b;
  margin-top: 2px;
}

.hotel-search-m__sheet-item-content {
  flex: 1;
  min-width: 0;
}

.hotel-search-m__sheet-item-content h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #222;
}

.hotel-search-m__sheet-item-content p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #888;
}

.hotel-search-m__sheet-item-type {
  font-size: 13px;
  color: #8f8f8f;
  white-space: nowrap;
  margin-left: 10px;
}

/* ---- dates sheet (image 4) ---- */
.hotel-search-m__sheet-dateheader {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid var(--hotel-line);
  gap: 6px;
  flex-shrink: 0;
}
.hotel-search-m__sheet-datecol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hotel-search-m__sheet-datecol span {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--hotel-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hotel-search-m__sheet-datecol b {
  font-size: 0.84rem;
  font-weight: 800;
  color: #b88a3b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-search-m__sheet-datediv {
  width: 1px;
  align-self: stretch;
  background: var(--hotel-line);
}

.hotel-search-m__sheet-close {
  all: unset;
  cursor: pointer;
  display: flex;
  color: var(--hotel-ink-soft);
  padding: 4px;
  flex-shrink: 0;
}

.hotel-search-m__sheet-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f8f2e7;
  padding: 8px 6px;
  flex-shrink: 0;
}

.hotel-search-m__sheet-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--hotel-ink-soft);
}

.hotel-search-m__sheet-months {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px 24px;
}

.hotel-search-m__sheet-month-title {
  text-align: center;
  font-weight: 800;
  font-size: 0.98rem;
  margin: 14px 0 8px;
  color: #171b20;
}

.hotel-search-m__sheet-daysgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
}

.hotel-search-m__sheet-day {
  all: unset;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 999px;
  width: 100%;
  color: #171b20;
}

.hotel-search-m__sheet-day--empty {
  cursor: default;
}

.hotel-search-m__sheet-day--disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

/* Today */
.hotel-search-m__sheet-day--today {
  text-decoration: underline;
  color: #b88a3b;
  font-weight: 700;
}

/* Between check-in and check-out */
.hotel-search-m__sheet-day--in-range {
  background: #f5eddf;
  border-radius: 0;
}

/* Selected Check-in / Check-out */
.hotel-search-m__sheet-day--selected {
  background: #b88a3b;
  color: #ffffff;
  font-weight: 800;
}

/* Optional hover */
.hotel-search-m__sheet-day:not(.hotel-search-m__sheet-day--disabled):not(
    .hotel-search-m__sheet-day--empty
  ):hover {
  background: #f8f2e7;
}

/* Keep selected gold even on hover */
.hotel-search-m__sheet-day--selected:hover {
  background: #9f752f;
  color: #ffffff;
}
.hotel-search-m__sheet-day--range-start {
  border-radius: 999px 0 0 999px;
}
.hotel-search-m__sheet-day--range-end {
  border-radius: 0 999px 999px 0;
}

.hotel-search-m__sheet-done {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: calc(100% - 28px);
  margin: 10px 14px;
  text-align: center;
  cursor: pointer;
  height: 45px;
  border-radius: 0;

  background: #b88a3b;
  color: #fff;

  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;

  transition: background 0.25s ease;
}

.hotel-search-m__sheet-done:hover {
  background: #9f752f;
}
.hotel-search-m__sheet-done:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Overlay */
.hotel-search-m__overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background: rgba(0, 0, 0, 0.45);

  overflow: hidden;
}

/* Guest bottom sheet */
.hotel-search-m__guestsheet {
  position: relative;

  width: 100%;
  max-height: 80vh;

  box-sizing: border-box;

  background: #fff;

  border-radius: 20px 20px 0 0;

  padding: 18px 20px 20px;

  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14);

  overflow-y: auto;
  overscroll-behavior: contain;

  animation: hotel-sheet-up 0.25s ease;
}

.hotel-search-m__guestsheet-handle {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--hotel-line);
  margin: 4px auto 14px;
}
.hotel-search-m__guestsheet h4 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hotel-ink, #15191c);
}

.hotel-search-m__guestsheet-room {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hotel-ink-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hotel-line);
}

.hotel-search-m__guestsheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.hotel-search-m__guestsheet-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;

  background: #f8f2e7;
  color: #b88a3b;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hotel-search-m__guestsheet-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--hotel-ink, #15191c);
}
.hotel-search-m__guestsheet-label small {
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--hotel-ink-soft);
}
.hotel-search-m__guestsheet-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hotel-search-m__guestsheet-stepper button {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hotel-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-ink, #15191c);
}
.hotel-search-m__guestsheet-stepper button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.hotel-search-m__guestsheet-stepper b {
  width: 18px;
  text-align: center;
  font-size: 0.92rem;
}
.hotel-search-m__guestsheet-addroom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.hotel-search-m__guestsheet-addroom button {
  all: unset;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--hs-blue);
}
.hotel-search-m__guestsheet-removeroom {
  color: #ef4444 !important;
}

.hotel-search-m__guestsheet-done {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  cursor: pointer;
  height: 45px;
  border-radius: 0;

  background: #b88a3b;
  color: #fff;

  font-weight: 700;
  font-size: 18px;

  transition: background 0.25s ease;
}

.hotel-search-m__guestsheet-done:hover {
  background: #9f752f;
}
.hotel-home__container {
  max-width: 1300px;
  margin: 0 auto;
}

/* ===== Sections ===== */
.hotel-home__section {
  padding: 0 0 80px;
}

.hotel-home__section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hotel-home__section-head h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  margin: 0 0 6px;
}
.hotel-home__section-head p {
  color: var(--hotel-ink-soft);
  font-size: 0.92rem;
  margin: 0;
  max-width: 420px;
}
.hotel-home__filter {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--hotel-white);
  border: 1px solid var(--hotel-line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--hotel-ink);
}
.hotel-home__filter:hover {
  border-color: var(--hotel-orange-deep);
  color: var(--hotel-orange-deep);
}

.hotel-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ===== Hotel Card ===== */
.hotel-card {
  border: 1px solid var(--hotel-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--hotel-white);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.hotel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hotel-shadow);
}
.hotel-card__photo {
  position: relative;
  height: 190px;
}
.hotel-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hotel-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hotel-orange);
  color: var(--hotel-ink);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 999px;
}
.hotel-card__fav {
  all: unset;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hotel-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-ink-soft);
  box-shadow: 0 4px 10px rgba(21, 25, 28, 0.15);
}
.hotel-card__fav--active {
  color: var(--hotel-orange-deep);
}
.hotel-card__body {
  padding: 16px 18px 18px;
}
.hotel-card__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hotel-orange-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.hotel-card__name {
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.25;
}
.hotel-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--hotel-ink-soft);
  margin-bottom: 14px;
}
.hotel-card__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--hotel-orange-deep);
  font-weight: 700;
}
.hotel-card__dot {
  margin: 0 2px;
}
.hotel-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hotel-line);
  padding-top: 14px;
}
.hotel-card__price b {
  font-size: 1.15rem;
  font-weight: 700;
}
.hotel-card__price span {
  font-size: 0.74rem;
  color: var(--hotel-ink-soft);
  margin-left: 3px;
}
.hotel-card__book {
  background: var(--hotel-ink);
  color: var(--hotel-white);
  border: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hotel-card__book:hover {
  background: var(--hotel-orange-deep);
}

/* ===== Why ===== */
.hotel-home__section--why {
  padding-top: 8px;
}
.hotel-home__why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hotel-home__why-card {
  border: 1px solid var(--hotel-line);
  border-radius: 14px;
  padding: 24px 20px;
}
.hotel-home__why-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--hotel-orange-pale);
  color: var(--hotel-orange-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.hotel-home__why-card h4 {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.hotel-home__why-card p {
  font-size: 0.85rem;
  color: var(--hotel-ink-soft);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1300px) {
  .hotel-home__hero {
    height: 320px;
  }
}

@media (max-width: 900px) {
  .hotel-home__hero {
    height: 320px;
    margin-bottom: 20px;
  }

  .hotel-search__divider {
    display: none;
  }

  .hotel-search__submit {
    justify-content: center;
    padding: 12px;
    margin-top: 4px;
  }
  .hotel-search__panel--guests {
    right: auto;
    left: 0;
  }
  .hotel-home__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hotel-home__why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hotel-home__dest-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .hotel-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .hotel-testi {
    grid-template-columns: 1fr;
    padding: 30px;
  }
  .hotel-testi__photo {
    height: 220px;
  }
  .hotel-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .hotel-home__hero {
    height: 320px;
    margin-bottom: 20px;
  }
  .hotel-home__hero-content {
    padding-bottom: 28px;
  }
  .hotel-home__grid {
    grid-template-columns: 1fr;
  }
  .hotel-home__why-grid {
    grid-template-columns: 1fr;
  }
  .hotel-home__dest-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .hotel-footer__grid {
    grid-template-columns: 1fr;
  }
  .hotel-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hotel-home__hero-text {
    display: none;
  }

  .hotel-search__trigger {
    background-color: #fff;
    padding: 10px 0px;
  }
}

.hotel-home-hotels-overview {
  width: 100%;
  padding: 40px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e9edf3;
}

.hotel-home-hotels-overview__title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #111827;
}

.hotel-home-hotels-overview__content {
  max-width: 100%;
}

.hotel-home-hotels-overview__content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 16px;
  color: #62637c;
}

.hotel-home-hotels-overview__content strong {
  color: #112e3b;
  font-weight: 600;
}

.hotel-home-hotels-overview__heading {
  font-size: 24px;
  font-weight: 700;
  margin-top: 35px;
  margin-bottom: 14px;
  color: #000;
  line-height: 30px;
}

/* ==========================================
   Hotel Home - Hotel Collections
========================================== */

.hotel-home-recommended-hotels {
  padding: 40px 16px;
  background: #fff;
  overflow: hidden;
}

.hotel-home-container {
  max-width: 1300px;
  margin: 0 auto;
}

.hotel-home-recommended-hotels-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.hotel-home-recommended-hotels-header h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotel-home-recommended-hotels-header p {
  font-size: 16px;
  font-family: sans-serif;
  line-height: 24px;
  font-weight: 400;
  color: #4f5b70;
}

.hotel-home-recommended-hotels-view-all {
  color: #ff6a2b;
  font-weight: 600;
  text-decoration: none;
}

.hotel-home-recommended-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
}

.hotel-home-recommended-hotels-item {
  display: flex;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  transition: 0.25s ease;
}

.hotel-home-recommended-hotels-thumb {
  width: 145px;
  height: 145px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  transition: 0.35s;
}

.hotel-home-recommended-hotels-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hotel-home-recommended-hotels-info h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotel-home-recommended-hotels-info p {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgb(128, 128, 128);
}

.hotel-home-recommended-hotels-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hotel-home-recommended-hotels-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hotel-home-recommended-hotels-price {
  font-size: 15px;
  color: #666;
}

.hotel-home-recommended-hotels-price span {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgb(128, 128, 128);
}

.hotel-home-recommended-hotels-price strong {
  color: #ff7f47;
  font-size: 22px;
}

.hotel-home-recommended-hotels-star {
  color: #d6d6d6;
}

.hotel-home-recommended-hotels-star.active {
  color: #f7b500;
}

@media (max-width: 1200px) {
  .hotel-home-recommended-hotels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .hotel-home-recommended-hotels-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hotel-home-recommended-hotels-thumb {
    width: 110px;
    height: 110px;
  }

  .hotel-home-recommended-hotels-info h3 {
    font-size: 20px;
  }

  .hotel-home-recommended-hotels-info p {
    font-size: 15px;
  }

  .hotel-home-recommended-hotels-price strong {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .hotel-home-recommended-hotels {
    padding: 50px 0;
  }

  .hotel-home-recommended-hotels-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.hotel-home-deals {
  padding: 40px 0;
  background: #fff;
}

.hotel-home-deals__container {
  max-width: 1300px;
  margin: auto;
  padding: 0 16px;
}

.hotel-home-deals__header {
  margin-bottom: 24px;
}

.hotel-home-deals__header h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

/* .hotel-home-deals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
} */

.hotel-home-deals__grid {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.hotel-home-deals__grid::-webkit-scrollbar {
  display: none;
}

.hotel-home-deals__card {
  min-width: 385px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 18px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hotel-home-deals__top {
  display: flex;
  gap: 14px;
}

.hotel-home-deals__image {
  width: 78px;
  height: 78px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #f1f1f1;
}

.hotel-home-deals__content {
  flex: 1;
}

.hotel-home-deals__content h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotel-home-deals__content p {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgb(128, 128, 128);
}

.hotel-home-deals__bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 10px;
  gap: 12px;
}

.hotel-home-deals__price {
  display: block;
  color: #ff7f47;
  font-size: 15px;
  font-weight: 700;
}

.hotel-home-deals__bottom small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgb(128, 128, 128);
}

.hotel-home-deals__btn {
  border: none;
  background: #ff7f47;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .hotel-home-deals {
    padding: 30px 0;
  }

  .hotel-home-deals__header h2 {
    font-size: 24px;
  }

  .hotel-home-deals__card {
    min-width: 285px;
    scroll-snap-align: start;
    padding: 16px;
  }

  .hotel-home-deals__image {
    width: 64px;
    height: 64px;
  }

  .hotel-home-deals__content h3 {
    font-size: 18px;
  }

  .hotel-home-deals__content p {
    font-size: 13px;
  }

  .hotel-home-deals__price {
    font-size: 20px;
  }

  .hotel-home-deals__btn {
    padding: 9px 14px;
    font-size: 12px;
  }
}

.hotels-results-filters-wrapper {
  border-bottom: 1px solid rgb(243, 243, 243);
  width: 100%;
}

.hotels-results-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0px;
}

.hotels-results-filters-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
}

/* All Filters trigger */

.hotels-results-all-filters {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff7f47;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Filter button + dropdown wrapper */

.hotels-results-filter-dropdown {
  position: relative;
  z-index: 100;
}

.hotels-results-filter-btn {
  padding: 6px 8px;
  width: fit-content;
  white-space: nowrap;
  border-style: none;
  background: rgb(255, 255, 255);
  border-radius: 30px;
  cursor: pointer;
  box-shadow: rgb(231, 231, 231) 0px 0px 0px 1px inset;
  position: relative;
  display: flex;
  align-items: center;
}

.hotels-results-filter-btn span {
  display: inline-flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
}

.hotels-results-filter-btn strong {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: rgb(26, 26, 26);
}

.hotels-results-filter-btn:hover {
  box-shadow: #111827 0px 0px 0px 1px inset;
}

.hotels-results-filter-btn-active {
  box-shadow:
    #111827 0px 0px 0px 1px inset,
    0 0 0 2px rgba(0, 0, 0, 0.06);
}

/* Badge (active filter counts) */

.hr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Portal-rendered panels are positioned relative to the viewport
   (top/left set inline via JS) so they always escape the scroll track. */
.hotels-results-dropdown--portal {
  position: fixed;
  z-index: 150;
  max-width: calc(100vw - 32px);
}

.hr-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.hr-scroll-track {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
}

.hr-scroll-track::-webkit-scrollbar {
  display: none;
}

.hr-scroll-arrow {
  all: unset;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: #111827;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.15s;
}

.hr-scroll-arrow--left {
  margin-right: 6px;
}

.hr-scroll-arrow--right {
  margin-left: 6px;
}

.hr-scroll-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}

.hotels-results-dropdown h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hr-dropdown-body {
  max-height: 420px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 4px;
}

.hr-dropdown-body--tall {
  max-height: 520px;
}

.hr-section-title {
  margin: 20px 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.hr-section-title:first-child {
  margin-top: 0;
}

/* Footer with Reset All / Show N hotels */

.hr-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hr-reset-btn {
  all: unset;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
}

.hr-reset-btn:hover {
  color: #111827;
}

.hr-show-btn {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: #ff7f47;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(255, 127, 71, 0.25);
}

.hr-show-btn:hover {
  background: #ff6a2b;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 127, 71, 0.35);
}

/* Radio (Sort) */

.hotels-results-radio {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 16px;
}

.hotels-results-radio:last-child {
  margin-bottom: 0;
}

/* Hide native radio */
.hotels-results-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom radio */
.hotels-results-radio .radio-circle {
  width: 22px;
  height: 22px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Inner dot */
.hotels-results-radio .radio-circle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #111827;
  transform: scale(0);
  transition: transform 0.2s ease;
}

/* Checked state */
.hotels-results-radio input:checked + .radio-circle {
  border-color: #111827;
}

.hotels-results-radio input:checked + .radio-circle::after {
  transform: scale(1);
}

.hotels-results-radio span:last-child {
  font-weight: 500;
}

/* Checkbox rows (Deals, Star category, Guest ratings, Price brackets) */

.hr-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.hr-checkbox-row:last-child {
  border-bottom: none;
}

.hr-checkbox-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hr-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 1px;
  transition: 0.15s;
}

.hr-checkbox--round {
  border-radius: 50%;
}

.hr-checkbox--checked {
  background: #111827;
  border-color: #111827;
}

.hr-checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hr-checkbox-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgb(26, 26, 26);
}

.hr-checkbox-sub {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Apply button */

.hotels-results-apply-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  user-select: none;
  text-decoration: none;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  min-width: 100%;
  height: 45px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: all 0.25s ease;

  background: #ff7f47;
  color: #ffff;
  cursor: not-allowed;
}

/* Location panel */

.hr-location-search {
  width: 100%;
  height: 52px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  background: #fff;
  margin-bottom: 20px;
  color: #8b8b8b;
}

.hr-location-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #111827;
}

.hr-section-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}

.hr-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.hr-pill {
  all: unset;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  transition: 0.15s;
}

.hr-pill:hover {
  border-color: #111827;
}

.hr-pill--active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.hr-price-control,
.hr-price-control * {
  box-sizing: border-box;
}
.hr-price-control {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  padding: 0 20px;
}

.hr-price-control-tooltip {
  position: absolute;
  top: -18px;
  transform: translate(-50%, -100%);
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}
.hr-price-control-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111827;
}

.hr-price-control-histogram {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 70px;
  margin-bottom: 12px;
}
.hr-price-control-histogram-bar {
  flex: 1;
  background: #e5e7eb;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  transition: background 0.15s;
}
.hr-price-control-histogram-bar--active {
  background: #111827;
}

.hr-price-control-slider {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  touch-action: none;
  user-select: none;
}
.hr-price-control-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px;
  background: #e5e7eb;
}
.hr-price-control-slider-range {
  position: absolute;
  height: 4px;
  border-radius: 4px;
  background: #111827;
}
.hr-price-control-slider-thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111827;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: translate(-50%, -50%);
  touch-action: none;
}
.hr-price-control-slider-thumb:active {
  cursor: grabbing;
}
.hr-price-control-slider-thumb:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px;
}

.hr-price-control-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
/* Search (desktop, top right) */

.hotels-results-search {
  position: relative;
  display: inline-flex;
  gap: 16px 8px;
  background: rgb(255, 255, 255);
  outline: rgb(231, 231, 231) solid 1px;
  border-radius: 6px;
  cursor: text;
  -webkit-box-align: center;
  align-items: center;
  box-sizing: border-box;
  width: 288px;
  height: 40px;
  padding: 0px 16px;
}

.hotels-results-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #111827;
}

/* Overlay (desktop dropdowns) */

.hotels-results-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
}

/* ===================================================================
   Mobile-only header + bottom bar + bottom sheets
=================================================================== */

.hr-mobile-only {
  display: none;
}

.hr-mobile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
}

.hr-mobile-icon-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
}

.hr-mobile-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hr-mobile-header-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

.hr-mobile-header-sub {
  font-size: 12px;
  color: #6b7280;
}

.hr-mobile-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 0px;
  background: #fff;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}

.hr-mobile-bar .hr-scroll-track {
  gap: 10px;
}

.hr-mobile-bar .hr-scroll-arrow {
  width: 26px;
  height: 26px;
}

.hr-mobile-bar-btn {
  all: unset;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

/* Bottom sheet */

.hr-mobile-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}

.hr-mobile-sheet {
  position: relative;
  width: 100%;
  max-height: 82vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  animation: hr-sheet-up 0.22s ease-out;
}

@keyframes hr-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.hr-mobile-sheet-close {
  all: unset;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #111827;
}

.hr-mobile-sheet-title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  line-height: 28px;
  font-family: sans-serif;
}

.hr-mobile-sheet-body {
  overflow-y: auto;
  margin-bottom: 18px;
  flex: 1;
}

/* ===================================================================
   Responsive breakpoints
=================================================================== */

@media (max-width: 1200px) {
  .hotels-results-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .hotels-results-search {
    width: 100%;
  }
}

/* Switch entirely to the mobile bar/sheets below 768px */

@media (max-width: 768px) {
  .hr-desktop-only {
    display: none;
  }

  .hr-mobile-only {
    display: block;
  }

  .hr-mobile-sheet h3,
  .hotels-results-dropdown h3 {
    font-size: 1.5rem;
  }

  .hotels-results-radio {
    font-size: 1.05rem;
    margin-bottom: 20px;
  }

  .hotels-results-radio input {
    width: 22px;
    height: 22px;
  }
}

/* ===========================
   Hotels Results Page
=========================== */

.hotels-results-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 1200px) {
  .hotels-results-container {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .hotels-results-container {
    padding: 0 16px;
  }
}
.hotels-results-header {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 50;
}

.hotels-results-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
}

.hotels-results-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #f0501e;
  white-space: nowrap;
  flex-shrink: 0;
}
.hotels-results-logo__mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #f0501e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.hotels-results-searchbar {
  flex: 1;
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: visible;
  max-width: 780px;
  position: relative;
  transition: border-color 0.15s ease;
}
.hotels-results-searchbar--expanded {
  border-color: #d1d5db;
  border-radius: 12px;
  max-width: 900px;
}

.hotels-results-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  cursor: pointer;
  min-width: 0;
  position: relative;
}
.hotels-results-field:not(:last-child) {
  border-right: 1px solid #e5e7eb;
}
.hotels-results-field--active {
  background: #f9fafb;
}
.hotels-results-field__icon {
  color: #6b7280;
  flex-shrink: 0;
}
.hotels-results-field__text {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotels-results-field--location {
  flex: 1.3;
  min-width: 0;
}
.hotels-results-field--dates {
  flex: 1.4;
}
.hotels-results-field--guests {
  flex: 1.1;
}

.hotels-results-field__input {
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  font-family: inherit;
  color: #1a1a1a;
  background: transparent;
}
.hotels-results-field__input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.hotels-results-clear {
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hotels-results-clear:hover {
  background: #f9fafb;
}

.hotels-results-update {
  border: none;
  background: #f0501e;
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 0 26px;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  white-space: nowrap;
}
.hotels-results-update:hover {
  background: #d8430f;
}

.hotels-results-auth {
  border: 1px solid #111827;
  background: white;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.hotels-results-auth:hover {
  background: #f9fafb;
}

/* -------- dropdown panels -------- */
.hotels-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  z-index: 999;
  overflow: hidden;

  /* New */
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Scrollable content */
.hotels-results-dropdown__content {
  overflow-y: auto;
  max-height: inherit;
  scrollbar-width: thin;
}

/* Chrome */
.hotels-results-dropdown__content::-webkit-scrollbar {
  width: 6px;
}

.hotels-results-dropdown__content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

.hotels-results-dropdown__content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* location dropdown */
.hotels-results-dropdown--location {
  width: 340px;
  padding: 8px 0;
}
.hotels-results-dropdown__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7280;
  padding: 10px 18px 6px;
}
.hotels-results-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 10px 18px;
  cursor: pointer;
  text-align: left;
}
.hotels-results-option:hover {
  background: #f9fafb;
}
.hotels-results-option__main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotels-results-option__name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}
.hotels-results-option__meta {
  font-size: 12px;
  color: #6b7280;
}

/* date dropdown */
.hotels-results-dropdown--dates {
  width: 660px;
  padding: 22px 24px;
}
.hotels-results-monthsrow {
  display: flex;
  gap: 36px;
  position: relative;
}
.hotels-results-navbtn {
  position: absolute;
  top: -2px;
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
}
.hotels-results-navbtn:hover {
  background: #f9fafb;
}
.hotels-results-navbtn--prev {
  left: 0;
}
.hotels-results-navbtn--next {
  right: 0;
}

.hotels-results-month {
  flex: 1;
  min-width: 0;
}
.hotels-results-month__title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hotels-results-month__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.hotels-results-month__weekday {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}
.hotels-results-month__weekday--weekend {
  color: #dc2626;
}
.hotels-results-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 6px;
}
.hotels-results-day {
  border: none;
  background: none;
  font-size: 14px;
  color: #1a1a1a;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
}
.hotels-results-day:hover:not(.hotels-results-day--disabled) {
  background: #f9fafb;
}
.hotels-results-day--blank {
  cursor: default;
}
.hotels-results-day--disabled {
  color: #d1d5db;
  cursor: not-allowed;
}
.hotels-results-day--selected {
  background: #111827;
  color: white;
  font-weight: 700;
}
.hotels-results-day--between {
  background: #fdece5;
  border-radius: 0;
}

/* guests dropdown */
.hotels-results-dropdown--guests {
  width: 280px;
  padding: 18px;
}
.hotels-results-guestrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.hotels-results-guestrow + .hotels-results-guestrow {
  border-top: 1px solid #e5e7eb;
}
.hotels-results-guestlabel {
  font-size: 14px;
  font-weight: 500;
}
.hotels-results-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotels-results-stepbtn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
}
.hotels-results-stepbtn:hover {
  background: #f9fafb;
}
.hotels-results-stepbtn:disabled {
  color: #d1d5db;
  cursor: not-allowed;
}
.hotels-results-stepval {
  font-size: 14px;
  font-weight: 600;
  width: 18px;
  text-align: center;
}
.hotels-results-guestsdone {
  margin-top: 14px;
  width: 100%;
  border: none;
  background: #f0501e;
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
.hotels-results-guestsdone:hover {
  background: #d8430f;
}

.hotels-results-heading {
  display: block;
  margin-bottom: 20px;
}

.hotels-results-heading h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

@media (max-width: 768px) {
  .hotels-results-heading h2 {
    line-height: normal;
    font-size: 18px;
    font-weight: 600;

    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

.hotels-results-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hotels-results-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5f7fa;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
}

.hotels-results-card-badge svg {
  color: #f59e0b;
  font-size: 13px;
}

@media (max-width: 768px) {
  .hotels-results-grid-wrapper {
    padding: 0 0 40px 0;
  }
}

.hotels-details-gallery-wrap {
  position: relative;
}

.hotels-details-gallery-empty {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1efe9;
  border-radius: 16px;
  color: #8a8578;
  font-size: 14px;
}

.hotels-details-gallery-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 420px;
  border-radius: 0px;
  overflow: hidden;
}

.hotels-details-gallery-tile {
  position: relative;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: #e8e5dd;
}

.hotels-details-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hotels-details-gallery-tile--0 {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* ---- "+N" overlay (unchanged from original — desktop stays single-line) ---- */
.hotels-details-gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 20, 24, 0.55);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Label is hidden by default (desktop only ever shows "+N").
   It's switched on inside the mobile media query below. */
.hotels-details-gallery-more-count {
  line-height: 1.1;
}

.hotels-details-gallery-more-label {
  display: none;
}

.hotels-details-gallery-grid--count-1 {
  grid-template-columns: 1fr;
}
.hotels-details-gallery-grid--count-1 .hotels-details-gallery-tile--0 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.hotels-details-gallery-grid--count-2 {
  grid-template-columns: 1.5fr 1fr;
}
.hotels-details-gallery-grid--count-2 .hotels-details-gallery-tile--1 {
  grid-column: 2;
  grid-row: 1 / 3;
}

.hotels-details-gallery-grid--count-3 {
  grid-template-columns: 1.5fr 1fr;
}
.hotels-details-gallery-grid--count-3 .hotels-details-gallery-tile--1 {
  grid-column: 2;
  grid-row: 1;
}
.hotels-details-gallery-grid--count-3 .hotels-details-gallery-tile--2 {
  grid-column: 2;
  grid-row: 2;
}

.hotels-details-gallery-grid--count-4 {
  grid-template-columns: 1.5fr 1fr;
}
.hotels-details-gallery-grid--count-4 .hotels-details-gallery-tile--1 {
  grid-column: 2;
  grid-row: 1;
}
.hotels-details-gallery-grid--count-4 .hotels-details-gallery-tile--2 {
  grid-column: 2;
  grid-row: 2;
}
.hotels-details-gallery-grid--count-4 .hotels-details-gallery-tile--3 {
  display: none;
}

.hotels-details-gallery-viewall {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #fff;
  color: #1c2126;
  border: 1px solid rgba(28, 33, 38, 0.12);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.hotels-details-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  padding: 28px;
}

.hotels-details-lightbox-panel {
  position: relative;
  width: 100%;
  max-width: 1120px;
  max-height: 92vh;
  background: #161616;
  border-radius: 14px;
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hotels-details-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.hotels-details-lightbox-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hotels-details-lightbox-roomtitle {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  font-family: sans-serif;
}

.hotels-details-lightbox-tab {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.hotels-details-lightbox-tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hotels-details-lightbox-tab--active {
  background: #fff;
  color: #161616;
  border-color: #fff;
}

.hotels-details-lightbox-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  flex-shrink: 0;
}

.hotels-details-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.hotels-details-lightbox-imgwrap {
  position: relative;
  max-width: 100%;
  max-height: 62vh;
  display: flex;
}

.hotels-details-lightbox-img {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

.hotels-details-lightbox-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.hotels-details-lightbox-arrow {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 12px;
  transition: background 0.15s ease;
}

.hotels-details-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
}

.hotels-details-lightbox-share {
  position: absolute;
  right: -44px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotels-details-lightbox-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.hotels-details-lightbox-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}

.hotels-details-lightbox-thumbs::-webkit-scrollbar {
  height: 4px;
}

.hotels-details-lightbox-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.hotels-details-lightbox-thumb {
  flex-shrink: 0;
  width: 88px;
  height: 62px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease;
}

.hotels-details-lightbox-thumb:hover {
  opacity: 0.85;
}

.hotels-details-lightbox-thumb--active {
  opacity: 1;
  border-color: #fff;
}

.hotels-details-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotels-details-lightbox-thumbscroll {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .hotels-details-gallery-grid {
    height: 320px;
  }
}

/* Desktop/mobile toggling helpers */
.hotels-mobile-only {
  display: none;
}

@media (max-width: 720px) {
  .hotels-details-lightbox {
    padding: 0;
  }

  .hotels-details-lightbox-panel {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    background: #fff;
    padding: 0;
  }

  /* Hide the desktop slider pieces, show mobile grid pieces */
  .hotels-desktop-only {
    display: none !important;
  }

  .hotels-mobile-only {
    display: block;
  }

  /* ---- Mobile header: back arrow + title ---- */
  .hotels-mobile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #eee;
  }

  .hotels-mobile-back {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #444;
    cursor: pointer;
    padding: 0px;
    line-height: 1;
    flex-shrink: 0;
  }

  .hotels-mobile-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: sans-serif;
  }

  /* ---- Mobile category pills ---- */
  .hotels-mobile-tabs {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hotels-mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  .hotels-mobile-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 12px 2px;
    white-space: nowrap;
    cursor: pointer;
  }

  .hotels-mobile-tab--active {
    color: var(--lux-hotel-gold);
    border-bottom-color: var(--lux-hotel-gold);
  }

  /* ---- Mobile body / grid ---- */
  .hotels-mobile-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f5f5f5;
  }

  .hotels-mobile-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
  }

  .hotels-mobile-section-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: sans-serif;
  }

  .hotels-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hotels-mobile-grid-item {
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
  }

  /* first image spans full width, like the screenshot's large top photo */
  .hotels-mobile-grid-item:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .hotels-mobile-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hotels-details-lightbox-share {
    display: none;
  }
}
/*
 * ---- Mobile gallery grid ----
 * Previously this breakpoint stacked every tile into a single column and
 * hid tiles 2/3/4, which lost the "big left + 2x2 right" layout entirely.
 * Now it keeps the same grid shape as desktop, just resized, so mobile
 * matches the reference: big left photo, one wide top-right photo, and
 * two smaller bottom-right photos (the last one carrying the "+N" overlay).
 */
@media (max-width: 640px) {
  .hotels-details-gallery-grid,
  .hotels-details-gallery-grid--count-1,
  .hotels-details-gallery-grid--count-2,
  .hotels-details-gallery-grid--count-3,
  .hotels-details-gallery-grid--count-4 {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 210px;
    border-radius: 12px;
  }

  /* Only 4 tiles fit comfortably on mobile: hero + top + bottom-left + bottom-right */
  .hotels-details-gallery-tile--4 {
    display: none;
  }

  /* Restore tile 3 on mobile even where the count-4 desktop rule hides it,
     since on mobile it's the tile that shows the "+N" overlay. */
  .hotels-details-gallery-grid--count-4 .hotels-details-gallery-tile--3 {
    display: block;
    grid-column: 3;
    grid-row: 2;
  }

  .hotels-details-gallery-tile--0 {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .hotels-details-gallery-tile--1 {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  .hotels-details-gallery-tile--2 {
    grid-column: 2;
    grid-row: 2;
  }
  .hotels-details-gallery-tile--3 {
    grid-column: 3;
    grid-row: 2;
  }

  /* Mobile-only: switch the "+N" overlay to a stacked count + label,
     matching the reference screenshot. Desktop keeps the original single-line "+N". */
  .hotels-details-gallery-more {
    flex-direction: column;
    gap: 2px;
    text-align: center;
    font-size: 18px;
  }
  .hotels-details-gallery-more-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 76px;
  }

  .hotels-details-gallery-viewall {
    margin-top: 8px;
    font-size: 11px;
    padding: 8px 10px;
  }
}

.hotels-details-gallery-viewall-desktop {
  display: inline;
}

.hotels-details-gallery-viewall-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hotels-details-gallery-viewall {
    padding: 8px 10px;
    gap: 6px;
    font-size: 12px;
  }

  .hotels-details-gallery-viewall svg {
    width: 14px;
    height: 14px;
  }

  .hotels-details-gallery-viewall-desktop {
    display: none;
  }

  .hotels-details-gallery-viewall-mobile {
    display: inline;
    font-weight: 600;
  }
}

.hotels-details-titlebar {
  margin-bottom: 20px;
}

.hotels-details-titlebar-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hotels-details-title-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hotel-view-map {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

.hotel-view-map:hover {
  border-color: #d8d8d8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hotel-view-map__icon {
  width: 60px;
  height: 35px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    #8fd0ff 0%,
    #8fd0ff 30%,
    #ffeab3 30%,
    #ffeab3 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hotel-view-map__icon svg {
  stroke-width: 2.2;
}

.hotel-view-map__content {
  display: flex;
  align-items: center;
}

.hotel-view-map__content span {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .hotel-view-map {
    padding: 6px;
    gap: 8px;
  }

  .hotel-view-map__icon {
    width: 60px;
    height: 44px;
  }

  .hotel-view-map__content span {
    font-size: 15px;
  }
}

.hotels-details-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hotels-details-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: rgb(26, 26, 26);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: sans-serif;
}

.hotels-details-stars {
  display: flex;
  gap: 2px;
  color: #ffb400;
  font-size: 18px;
}

.hotels-details-type {
  padding: 5px 12px;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}

.hotels-details-address-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hotels-details-location-icon {
  color: var(--lux-hotel-gold);
  font-size: 16px;
  flex-shrink: 0;
}

.hotels-details-address {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgb(128, 128, 128);
}

.hotels-details-map-btn {
  border: none;
  background: none;
  color: #1677ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.hotels-details-map-btn:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .hotels-details-title {
    font-size: 28px;
  }

  .hotels-details-address {
    font-size: 15px;
  }

  .hotels-details-stars {
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hotels-details-info {
    display: block;
    background: #fff;
    border-radius: 0;

    padding: 20px 16px;
    margin-top: 0;

    border-bottom: 1px solid #e5e7eb;
  }
}

.hotels-details-info-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.hotels-details-info-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hotels-details-info-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

.hotels-details-card {
  background: #fff;
  padding-bottom: 10px;
}

.hotels-details-card-title {
  font-size: 18px;
  line-height: 18px;
  color: #000;
  font-family: sans-serif;
  margin-bottom: 16px;
}

.hotels-details-richtext {
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  color: rgb(26, 26, 26);
}

.hotels-details-richtext p {
  margin: 0 0 0px;
}

.hotels-details-richtext strong {
  font-weight: 600;
  color: #1a1a1a;
}

.hotels-details-richtext br {
  content: "";
  display: block;
  margin-bottom: 0px;
}

.hotels-details-richtext ul,
.hotels-details-richtext ol {
  margin: 0 0 16px 20px;
  padding-left: 0;
}

.hotels-details-richtext li {
  margin-bottom: 0px;
}

.hotels-details-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.hotels-details-reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgb(26, 26, 26);
}

.hotels-details-reason-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

/* Facilities */
.hotels-details-facilities {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 18px;
}

/* Item */
.hotels-details-facility {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icon */

.hotels-details-facility-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280; /* Modern gray */
  font-size: 22px;
  flex-shrink: 0;
}

/* Large Tablet */
@media (max-width: 1200px) {
  .hotels-details-facilities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tablet */
@media (max-width: 992px) {
  .hotels-details-facilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hotels-details-card-title {
    font-size: 18px;
    line-height: 18px;
    color: #000;
    font-family: sans-serif;
    margin-bottom: 5px;
  }
  .hotels-details-facilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .hotels-details-facility-icon {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .hotels-details-facilities {
    grid-template-columns: 1fr;
  }
}

.hotels-details-policies {
  display: flex;
  flex-direction: column;
}

.hotels-details-policy {
  border-top: 1px solid #ece9e1;
  padding: 12px 0;
}

.hotels-details-policy:first-child {
  border-top: none;
  padding-top: 0;
}

.hotels-details-policy-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1c2126;
  cursor: pointer;
}

.hotels-details-policy-chevron {
  transition: transform 0.15s ease;
  font-size: 16px;
  color: #8a8578;
}

.hotels-details-policy-chevron--open {
  transform: rotate(180deg);
}

.hotels-details-policy-excerpt {
  font-size: 13px;
  color: #6b6862;
  margin: 8px 0 0;
}

.hotels-details-policy-body {
  margin-top: 8px;
}

.hotels-details-goodtoknow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hotels-details-goodtoknow-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4c4a44;
}

.hotels-details-link {
  color: #ff7f47;
  font-weight: 600;
  text-decoration: none;
}

.hotels-details-offer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hotels-details-offer-badge {
  background: #fff1ea; /* Light theme background */
  color: #ff7f47; /* Theme color */
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.hotels-details-section-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .hotels-details-info-inner {
    grid-template-columns: 1fr;
  }
  .hotels-details-info-side {
    position: static;
  }
  .hotels-details-room-card {
    grid-template-columns: 160px 1fr;
  }
  .hotels-details-room-body {
    border-right: none;
    padding-right: 0;
  }
  .hotels-details-room-price {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border-top: 1px solid #f0eee7;
    padding-top: 12px;
  }
}

@media (max-width: 560px) {
  .hotels-details-room-card {
    grid-template-columns: 1fr;
  }
  .hotels-details-room-image {
    height: 180px;
  }
}

.hotels-itinerary-hotel-card {
  border-radius: 12px;
  border: 1.5px solid rgb(231, 231, 231);
  box-shadow: rgba(26, 26, 26, 0.08) 0px -4px 16px;
  background-color: rgb(255, 255, 255);
  padding: 4px;
}

.hotels-itinerary-hotel-top {
  display: flex;

  justify-content: space-between;

  padding: 20px;

  gap: 30px;
}

.hotels-itinerary-hotel-content {
  flex: 1;
}

.hotels-itinerary-hotel-category {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgb(128, 128, 128);

  margin-bottom: 10px;
}

.hotels-itinerary-hotel-name {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: rgb(26, 26, 26);

  margin-bottom: 18px;

  font-family: sans-serif;
}

.hotels-itinerary-hotel-rating {
  display: flex;

  align-items: center;

  gap: 14px;
}

.hotels-itinerary-rating-box {
  display: flex;

  align-items: center;

  gap: 6px;

  padding: 5px 10px;

  border-radius: 8px;

  background: #e9f8ef;

  color: #16a34a;

  font-weight: 700;
}

.hotels-itinerary-rating-count {
  font-size: 15px;

  color: #6b7280;
}

.hotels-itinerary-hotel-image {
  width: 170px;

  height: 100px;

  border-radius: 14px;

  overflow: hidden;

  flex-shrink: 0;
}

.hotels-itinerary-hotel-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

.hotels-itinerary-booking-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.hotels-itinerary-booking-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;

  background: repeating-linear-gradient(
    to right,
    #e5e7eb 0 4px,
    transparent 4px 10px
  );
}

/* Left Side */
.hotels-itinerary-booking-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

/* Right Side */
.hotels-itinerary-booking-room {
  width: 320px;
  /* border-left: 1px solid #ececec; */
  padding: 20px;
}

/* Item */
.hotels-itinerary-booking-item p {
  margin: 0 0 8px;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.hotels-itinerary-booking-item h4 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.hotels-itinerary-booking-item span {
  font-size: 15px;
  color: #6b7280;
  font-weight: 500;
}

/* Night Badge */
.hotels-itinerary-booking-night {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 32px;
  margin: 0 40px;
  background: #f3f4f6;
  border-radius: 6px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .hotels-itinerary-booking-info {
    flex-direction: column;
  }

  .hotels-itinerary-booking-left {
    width: 100%;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .hotels-itinerary-booking-room {
    width: 100%;
    border-left: none;
    border-top: 1px solid #ececec;
  }

  .hotels-itinerary-booking-night {
    margin: 0;
  }
}

.hotels-itinerary-details-btn {
  margin-top: 12px;

  display: flex;

  align-items: center;

  gap: 5px;

  background: none;

  border: none;

  color: #2563eb;

  font-weight: 600;

  cursor: pointer;

  padding: 0;
}

@media (max-width: 992px) {
  .hotels-itinerary-hotel-top {
    flex-direction: column;
  }

  .hotels-itinerary-hotel-image {
    width: 100%;

    height: 240px;
  }

  .hotels-itinerary-booking-info {
    grid-template-columns: 1fr 1fr;
  }

  .hotels-itinerary-booking-night {
    display: none;
  }
}

@media (max-width: 768px) {
  .hotels-itinerary-booking-info {
    grid-template-columns: 1fr;
  }

  .hotels-itinerary-hotel-name {
    font-size: 28px;
  }
}

.hotels-itinerary-room-card {
  margin-top: 40px;
}

.hotels-itinerary-room-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
  margin-bottom: 20px;
}

.hotels-itinerary-room-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.hotels-itinerary-room-image {
  width: 220px;
  height: 150px;
  overflow: hidden;
  border-radius: 14px;
  flex-shrink: 0;
}

.hotels-itinerary-room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotels-itinerary-room-content {
  flex: 1;
}

.hotels-itinerary-room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hotels-itinerary-room-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  width: fit-content;
  white-space: nowrap;
  border-style: none;
  background: rgb(243, 243, 243);
  border-radius: 30px;
  cursor: pointer;
  box-shadow: rgb(231, 231, 231) 0px 0px 0px 1px inset;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(26, 26, 26);
}

.hotels-itinerary-room-meal {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgb(26, 26, 26);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hotels-itinerary-room-price {
  margin-top: 18px;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
}

.hotels-itinerary-room-details {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.hotels-itinerary-room-details:hover {
  color: #1d4ed8;
}

@media (max-width: 992px) {
  .hotels-itinerary-room-body {
    flex-direction: column;
  }

  .hotels-itinerary-room-image {
    width: 100%;
    height: 240px;
  }
}

@media (max-width: 768px) {
  .hotels-itinerary-room-title {
    font-size: 24px;
  }

  .hotels-itinerary-room-tag {
    font-size: 13px;
    padding: 8px 12px;
  }

  .hotels-itinerary-room-meal {
    font-size: 15px;
  }

  .hotels-itinerary-room-price {
    font-size: 22px;
  }
}

.hotels-itinerary-guest {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #ececec;
}

.hotels-itinerary-cancellation {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #ececec;
}

.hotels-itinerary-cancellation-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.hotels-itinerary-cancellation-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hotels-itinerary-cancellation-icon.success {
  background: #ecfdf5;
  color: #16a34a;
}

.hotels-itinerary-cancellation-icon.danger {
  background: #fef2f2;
  color: #dc2626;
}

.hotels-itinerary-cancellation-content h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.hotels-itinerary-cancellation-content p {
  margin-top: 8px;
  color: #6b7280;
  line-height: 1.7;
  font-size: 15px;
}

@media (max-width: 768px) {
  .hotels-itinerary-section-heading {
    font-size: 24px;
  }

  .hotels-itinerary-cancellation-card {
    gap: 14px;
  }

  .hotels-itinerary-cancellation-icon {
    width: 40px;
    height: 40px;
  }

  .hotels-itinerary-cancellation-content h4 {
    font-size: 18px;
  }
}

.hotels-itinerary-property {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid #ececec;
}

.hotels-itinerary-property-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hotels-itinerary-property-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hotels-itinerary-property-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  flex-shrink: 0;
}

.hotels-itinerary-property-item span {
  color: #374151;
  font-size: 15px;
  line-height: 1.6;
}

.hotels-itinerary-property-btn {
  margin-top: 22px;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.hotels-itinerary-property-btn:hover {
  color: #1d4ed8;
}

@media (max-width: 768px) {
  .hotels-itinerary-property {
    margin-top: 36px;
    padding-top: 32px;
  }

  .hotels-itinerary-property-item span {
    font-size: 14px;
  }

  .hotels-itinerary-property-icon {
    width: 34px;
    height: 34px;
  }
}

.hotels-itinerary-guest-card {
  margin-top: 48px;
}

.hotels-itinerary-guest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.hotels-itinerary-input-group {
  display: flex;
  flex-direction: column;
}

.hotels-itinerary-input-group label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.hotels-itinerary-input-group input {
  height: 50px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: 0.2s;
}

.hotels-itinerary-input-group input:focus {
  border-color: #111827;
}

.hotels-itinerary-full-width {
  grid-column: 1/-1;
}

.hotels-itinerary-title-selector {
  display: flex;
  gap: 12px;
}

.hotels-itinerary-title-btn {
  height: 46px;
  padding: 0 24px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

.hotels-itinerary-title-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

@media (max-width: 768px) {
  .hotels-itinerary-guest-grid {
    grid-template-columns: 1fr;
  }

  .hotels-itinerary-full-width {
    grid-column: auto;
  }

  .hotels-itinerary-title-selector {
    flex-wrap: wrap;
  }

  .hotels-itinerary-title-btn {
    flex: 1;
  }
}

.hotels-itinerary-price-card {
  border-radius: 16px;
  border: 1px solid rgb(231, 231, 231);
  box-shadow: none;
  background-color: rgb(255, 255, 255);
  padding: 24px;
}

.hotels-itinerary-price-title {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotels-itinerary-price-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hotels-itinerary-price-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(26, 26, 26);
}

.hotels-itinerary-price-row strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(26, 26, 26);
}

.hotels-itinerary-discount strong {
  color: #16a34a;
}

.hotels-itinerary-price-total {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed #d1d5db;
}

.hotels-itinerary-price-total span {
  display: block;
  color: #6b7280;
  font-size: 14px;
}

.hotels-itinerary-price-total h2 {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}
.hotels-itinerary-continue-btn {
  min-width: 216px;
  margin-top: 28px;
  padding: 12px 12px;
  border: none;
  border-radius: 8px;
  background: #ff7f47;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

.hotels-itinerary-continue-btn:hover {
  background: #f26a2c;
  box-shadow: 0 12px 24px rgba(255, 127, 71, 0.38);
  transform: translateY(-1px);
}

@media (max-width: 992px) {
  .hotels-itinerary-price-card {
    position: static;
    margin-top: 40px;
    margin-bottom: 20px;
  }
}

.hotels-itinerary-section-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  font-family: sans-serif;
}

.hotels-itinerary-section-number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 2px solid #111827;

  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: rgb(26, 26, 26);
}

.hotels-itinerary-section-content {
  flex: 1;
}

.hotels-itinerary-section-heading {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

@media (max-width: 992px) {
  .hotels-itinerary-section-heading {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .hotels-itinerary-section-title {
    gap: 14px;
    margin-bottom: 24px;
  }

  .hotels-itinerary-section-number {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 16px;
  }

  .hotels-itinerary-section-heading {
    font-size: 24px;
  }
}

/* Page */

.hotels-itinerary-page {
  background-color: rgb(255, 255, 255);
}

/* Container */

.hotels-itinerary-container {
  max-width: 1300px;
  margin: auto;
  padding: 20px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

/* Left */

.hotels-itinerary-left {
  min-width: 0;
}

/* Right */

.hotels-itinerary-right {
  position: sticky;
  top: 90px;
  align-self: start;
}

/* Large Laptop */

@media (max-width: 1200px) {
  .hotels-itinerary-container {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
  }
}

/* Tablet */

@media (max-width: 992px) {
  .hotels-itinerary-container {
    grid-template-columns: 1fr;
  }

  .hotels-itinerary-right {
    position: static;
    width: 100%;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .hotels-itinerary-container {
    padding: 40 16px;
    gap: 24px;
  }
}

.hotels-itinerary-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.hotels-itinerary-header-container {
  max-width: 1300px;
  margin: auto;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hotels-itinerary-header-logo {
  display: flex;
  align-items: center;
}

.hotels-itinerary-header-logo img {
  height: 46px;
  width: auto;
  display: block;
}

.hotels-itinerary-header-contact {
  display: flex;
  align-items: center;
  gap: 32px;
}

.hotels-itinerary-header-link {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #1f2937;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;

  transition: 0.25s;
}

.hotels-itinerary-header-link:hover {
  color: #ff6a2b;
}

.hotels-itinerary-header-link svg {
  width: 20px;
  height: 20px;
  color: #4b5563;
}

/* Tablet */

@media (max-width: 992px) {
  .hotels-itinerary-header-container {
    height: 72px;
  }

  .hotels-itinerary-header-logo img {
    height: 40px;
  }

  .hotels-itinerary-header-contact {
    gap: 20px;
  }

  .hotels-itinerary-header-link span {
    display: none;
  }
}

/* Mobile */

@media (max-width: 576px) {
  .hotels-itinerary-header-container {
    height: 64px;
    padding: 0 16px;
  }

  .hotels-itinerary-header-logo img {
    height: 34px;
  }

  .hotels-itinerary-header-contact {
    gap: 16px;
  }
}

.hotels-details-page {
  background-color: #f6f7f9;
  padding-bottom: 20px;
}

.hotels-details-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0px 16px;
}

@media (max-width: 480px) {
  .hotels-details-container {
    padding: 0 0px;
  }
}

.hotels-details-overview {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 20px;
  /* background-color: #fff; */
}

.hotels-details-content {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;

  align-items: start;
  background-color: #fff;
  border-radius: 0;
  padding: 16px;
  box-sizing: border-box;
}

.hotels-details-left {
  min-width: 0;
}

@media (max-width: 1100px) {
  .hotels-details-content {
    grid-template-columns: 1fr;
    background-color: #f6f7f9;
  }
}

/******** Base (desktop unchanged) ********/
.hotel-details-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: #000c;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: 24px;
  animation: hotel-details-fade 0.25s;
}

.hotel-details-modal {
  width: 100%;
  max-width: 740px;
  max-height: 90vh;
  background: #fff;
  border-radius: 10px;
  position: relative;
  animation: hotel-details-popup 0.28s;
  display: flex;
  flex-direction: column;
}

.hotel-details-modal-header {
  padding: 30px 40px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hotel-details-modal-header-text h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  margin-bottom: 6px;
  font-family: sans-serif;
}

.hotel-details-modal-header-text p {
  font-size: 19px;
  line-height: 1.6;
  color: #4b5563;
  font-weight: 500;
}

.hotel-details-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 40px;
}

.hotel-details-modal-close {
  position: absolute;
  top: -28px;
  right: -38px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: 0.25s;
  flex-shrink: 0;
}

.hotel-details-modal-icon-back {
  display: none;
}

@keyframes hotel-details-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hotel-details-popup {
  from {
    transform: translateY(25px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/******** Mobile: FULL SCREEN, not a floating sheet ********/
@media (max-width: 768px) {
  .hotel-details-modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .hotel-details-modal {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* accounts for mobile browser chrome */
    max-height: none;
    border-radius: 0; /* flush full-screen, no floating card */
  }

  .hotel-details-modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding: 16px 16px;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  .hotel-details-modal-close {
    position: static;
    box-shadow: none;
    width: 24px;
    height: 24px;
    font-size: 20px;
    background: transparent;
    color: #111;
  }

  .hotel-details-modal-header-text h2 {
    font-size: 19px;
    margin-bottom: 2px;
  }

  .hotel-details-modal-header-text p {
    font-size: 13px;
    line-height: 1.4;
    color: #9ca3af;
  }

  .hotel-details-modal-body {
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* sticky pills/filter row right below header */
  .hotel-details-modal-tabs {
    position: sticky;
    top: 0; /* sits directly under header since header is a sibling above body */
    z-index: 2;
    background: #f5f5f5;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -20px -20px 20px; /* bleed to edges inside body padding */
  }

  .hotel-details-modal-body h3 {
    font-size: 19px;
  }

  .hotel-details-modal-body p,
  .hotel-details-modal-body li {
    font-size: 14px;
  }
  .hotel-details-modal-icon-close {
    display: none;
  }

  .hotel-details-modal-icon-back {
    display: block;
  }
}

.hotels-details-about-preview {
  margin: 0;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}

.hotels-details-about-more {
  border: none;
  background: none;
  color: #ff7f47;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  margin-left: 6px;
  padding: 0;
}

.hotels-details-about-more:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .hotels-details-about-preview {
    font-size: 15px;
    line-height: 1.8;
  }

  .hotels-details-about-more {
    font-size: 15px;
  }
}

/* RIGHT SIDEBAR */

.hotels-details-right {
  position: sticky;
  top: 120px;
  align-self: flex-start;
  margin-top: 10px;
}

/* CARD */

.hotels-details-booking-card {
  border: 1px solid #d8d8d8;
  border-radius: 0;
  padding: 16px;
}

/* ROOM NAME */

.hotels-details-booking-room-name {
  margin: 0;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  font-family: sans-serif;
}

/* CAPACITY */

.hotels-details-booking-capacity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #4b5563;
  font-size: 15px;
}

.hotels-details-booking-capacity svg {
  color: #ff7f47;
  font-size: 15px;
}

/* BENEFIT */

.hotels-details-booking-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  background: #fff7f3;
  border: 1px solid #ffe2d4;
  border-radius: 12px;
  color: #12805c;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.hotels-details-booking-benefit svg {
  color: #ff7f47;
  margin-top: 2px;
  flex-shrink: 0;
}

/* PRICE */

.hotels-details-booking-price-box {
  margin-top: 24px;
}

.hotels-details-booking-price-title {
  display: block;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 8px;
}

.hotels-details-booking-price-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.hotels-details-booking-price {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.hotels-details-booking-tax {
  color: #6b7280;
  font-size: 13px;
}

/* BOOK BUTTON */

.hotels-details-booking-btn {
  width: 100%;
  padding: 16px 20px;
  margin-top: 26px;
  border: none;
  border-radius: 0;

  background: var(--lux-hotel-gold);
  color: var(--lux-hotel-white);

  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-transform: uppercase;

  cursor: pointer;
  transition: background 0.25s ease;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hotels-details-booking-btn:hover {
  background: var(--lux-hotel-gold-dark);
}

.hotels-details-booking-loader {
  animation: hotels-details-booking-spin 0.8s linear infinite;
}

.hotels-details-booking-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

@keyframes hotels-details-booking-spin {
  to {
    transform: rotate(360deg);
  }
}

/* MORE OPTIONS */
.hotels-details-booking-more {
  margin-top: 22px;
  padding: 12px;
  border-radius: 0;

  background: var(--lux-hotel-gold-light);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.hotels-details-booking-more h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.hotels-details-booking-more p {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

/* VIEW ALL */

.hotels-details-booking-view-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  border: 2px solid var(--lux-hotel-gold);
  background: var(--lux-hotel-white);
  color: var(--lux-hotel-gold);

  padding: 8px 18px;
  border-radius: 0;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.hotels-details-booking-view-btn svg {
  font-size: 13px;
}

/* RESPONSIVE */

@media (max-width: 991px) {
  /* .hotels-details-right{
        position:static;
        margin-top:24px;
    } */

  .hotels-details-booking-room-name {
    font-size: 24px;
  }

  .hotels-details-booking-price {
    font-size: 34px;
  }

  .hotels-details-booking-more {
    flex-direction: column;
    align-items: flex-start;
  }

  .hotels-details-booking-view-btn {
    width: 100%;
    justify-content: center;
  }
}

.hotels-details-modal-section {
  margin-bottom: 32px;
}

.hotels-details-modal-heading {
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  font-family: sans-serif;
}

.hotels-details-modal-highlights-list {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}

.hotels-details-modal-highlights-list li {
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 1.7;
  color: #62637c;
  font-family: "Work Sans", system-ui, sans-serif;
}

.hotels-details-modal-highlights-list li::marker {
  color: #4b5563;
  font-size: 18px;
}

.hotels-details-subtitle {
  margin-top: 6px;
  font-size: 15px;
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.hotels-details-dot {
  margin: 0 6px;
}

/* ===========================
   Card
=========================== */

.hotel-room-heading {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  margin: 0 0 20px;
  font-family: sans-serif;
}

/* ===========================
   Card
=========================== */

.hotel-room-card {
  background: #fff;

  overflow: hidden;
  margin-bottom: 24px;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  border-radius: 0;
}

/* ===========================
   Banner
=========================== */

.hotel-room-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf6e2;
  padding: 12px 22px;
  border-bottom: 1px solid #e3caa0;
}

.hotel-room-banner-tag {
  background: #ffffff;
  color: #8a6410;
  border: 1px solid #e3caa0;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.hotel-room-banner-text {
  font-size: 14px;
  color: #6b5a2e;
}

/* ===========================
   Layout
=========================== */

.hotel-room-content {
  display: grid;
  grid-template-columns: 300px 1fr 240px;
  align-items: stretch;
}

.hotel-room-left,
.hotel-room-middle,
.hotel-room-right {
  padding: 22px;
}

.hotel-room-left {
  border-right: 1px solid #edece5;
}

/* ===========================
   Image
=========================== */

.hotel-room-slider {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  border-radius: 0px;
  cursor: pointer;
  background: #f0efe9;
}

.hotel-room-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.hotel-room-slide {
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  object-fit: cover;
  user-select: none;
}

.hotel-room-slider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}

.room-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 20, 18, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease;
  opacity: 1;
}
/* 
.room-arrow:hover {
  background: rgba(20, 20, 18, 0.8);
  opacity: 1;
} */

.room-arrow.left {
  left: 10px;
}

.room-arrow.right {
  right: 10px;
}

.room-photo-count {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

.room-slider-dots {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 5px;
  z-index: 2;
}

.room-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.room-slider-dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* ===========================
   Left Info
=========================== */

.hotel-room-name {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotel-room-meta {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hotel-room-guests,
.hotel-room-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: #4b5563;
}

.hotel-room-guests svg,
.hotel-room-size svg {
  width: 18px;
  height: 18px;
  color: #6b7280;
  stroke-width: 1.8;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ===========================
   Middle
=========================== */

.hotel-room-middle p {
  margin: 0 0 8px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  display: inline;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.room-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.room-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #0f7a5c;
  font-size: 14px;
  font-weight: 600;
}

.room-feature-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eaf5f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
}

.room-divider {
  margin: 20px 0;
  border-top: 1px dashed #e6e4dc;
}

/* Amenities Grid */
.room-amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
}

/* Single Amenity */
.room-amenity {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 15px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.4;
}

/* Icon */
.room-amenity svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #8f8d85;
  stroke-width: 1.8;
}

/* More Button */
.room-amenity-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;

  background: transparent;
  border: 1px dashed #e6e4dc;
  border-radius: 24px;
  padding: 8px 16px;

  font-size: 14px;
  font-weight: 600;
  color: #dd5b1f;
  cursor: pointer;
  transition: all 0.2s ease;
}

.room-amenity-more:hover {
  background: #fff6f1;
  border-color: #dd5b1f;
}

/* Mobile */
@media (max-width: 576px) {
  .room-amenities {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .room-amenity {
    font-size: 15px;
    gap: 8px;
  }

  .room-amenity svg {
    width: 17px;
    height: 17px;
  }
}
.room-amenity-more {
  background: transparent;
  border: 1px dashed #e6e4dc;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: #dd5b1f;
  cursor: pointer;
}

.room-amenity-more:hover {
  border-color: #dd5b1f;
}

.room-more-btn {
  margin-top: 22px;
  border: none;
  background: transparent;

  color: var(--lux-hotel-gold);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  padding: 0;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  transition: color 0.2s ease;
}

/* ===========================
   Price
=========================== */

.hotel-room-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.room-discount-badge {
  align-self: flex-start;
  background: #eaf5f0;
  color: #0f7a5c;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.room-original-price {
  color: #9a988f;
  font-size: 14px;
  text-decoration: line-through;
}

.room-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.room-price {
  font-size: 26px;
  font-weight: 700;
  color: #000;
  line-height: 1;
  font-family: sans-serif;
}

.room-price-unit {
  font-size: 13px;
  color: #4b5563;
}

.room-tax {
  margin-top: 8px;
  color: #4b5563;
  font-size: 13px;
}
.room-select-btn {
  margin-top: 22px;
  width: 100%;
  height: 45px;

  border: none;
  border-radius: 0;

  background: var(--lux-hotel-gold);
  color: var(--lux-hotel-white);

  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.room-select-loader {
  animation: room-spin 0.8s linear infinite;
}

.room-select-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

@keyframes room-spin {
  to {
    transform: rotate(360deg);
  }
}

.room-trust-note {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #0f7a5c;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}

/* ===========================
   Responsive
=========================== */

@media (max-width: 1100px) {
  .hotel-room-content {
    grid-template-columns: 1fr;
  }

  .hotel-room-left,
  .hotel-room-right {
    border: none;
  }

  .hotel-room-right {
    border-top: 1px solid #edece5;
    align-items: flex-start;
  }

  .room-select-btn,
  .room-trust-note {
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .hotel-room-heading {
    font-size: 18px;
    margin: 0 16px 16px;
  }

  .hotel-room-left,
  .hotel-room-middle,
  .hotel-room-right {
    padding: 16px;
  }

  .hotel-room-slider {
    height: 200px;
  }

  .hotel-room-name {
    font-size: 19px;
  }

  .room-price {
    font-size: 28px;
  }

  .room-select-btn,
  .room-trust-note {
    max-width: none;
  }
  .room-select-btn {
    background-color: #ff7f47;
    color: #fff;
  }

  .room-amenities {
    gap: 8px;
  }
}

/* ========================================
   MOBILE COMPACT ROOM CARD
======================================== */

.room-card-compact {
  display: none;
}

@media (max-width: 767px) {
  .hotel-room-card {
    display: none;
  }

  .room-card-compact {
    margin: 10px;
    display: block;
    background: #ffffff;

    border-radius: 0;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
  }

  /* ---------- Top ---------- */

  .room-card-compact-head {
    display: flex;
    gap: 12px;
    padding: 12px;
  }

  .room-card-compact-image-wrap {
    position: relative;
    width: 105px;
    height: 90px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0;
    background: #f3f3f3;
  }

  .room-card-compact-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .room-card-compact-photo-count {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
  }

  .room-card-compact-info {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
  }

  .room-card-compact-name {
    margin: 0 0 6px;
    color: #171717;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    font-family: sans-serif;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .room-card-compact-specs {
    color: #707070;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .room-card-compact-details {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b88a3b;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }

  /* ---------- Benefits ---------- */

  .room-card-compact-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 9px 12px;
    border-top: 1px solid #eeeeee;
    background: #fafafa;
  }

  .room-card-compact-benefit {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #246b3c;
    font-size: 10px;
    font-weight: 600;
  }

  .room-card-compact-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
  }

  .room-card-compact-benefit.is-warning {
    color: #777777;
  }

  /* ---------- Footer ---------- */

  .room-card-compact-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px 12px;
    border-top: 1px solid #eeeeee;
  }

  .room-card-compact-price-wrap {
    min-width: 0;
  }

  .room-card-compact-strike {
    display: block;
    margin-bottom: 1px;
    color: #999999;
    font-size: 10px;
    text-decoration: line-through;
  }

  .room-card-compact-price {
    color: #151515;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
  }

  .room-card-compact-tax {
    margin-top: 3px;
    color: #777777;
    font-size: 9px;
    line-height: 1.3;
  }

  /* ---------- Book ---------- */

  .room-card-compact-book {
    min-width: 92px;
    height: 38px;
    padding: 0 16px;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 0;
    background: #b88a3b;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
  }

  .room-card-compact-book:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }
}

.hotel-booking-summary-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: hotel-booking-summary-spin 0.7s linear infinite;
  margin-right: 10px;
  vertical-align: middle;
}

@keyframes hotel-booking-summary-spin {
  to {
    transform: rotate(360deg);
  }
}
/*=========================
  HOTEL LOCATION
=========================*/

.hotels-details-location-section {
  margin: 60px 0;
}

.hotels-details-location-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);

  position: relative;
  display: inline-block;
  font-family: sans-serif;
}

/* Map */

.hotels-details-map-wrapper {
  position: relative;
  overflow: hidden;

  height: 360px;

  border-radius: 8px;

  padding: 22px 24px;
  z-index: 1;
}

.hotels-details-map {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Floating Card */

.hotels-details-location-card {
  position: absolute;

  left: 30px;
  bottom: 30px;

  display: flex;
  align-items: center;
  gap: 8px;

  background: #fff;

  padding: 12px 18px;

  max-width: 430px;

  border-radius: 8px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

  transition: 0.35s;
}

/* Address */

.hotels-details-address-box {
  font-size: 14px;
  line-height: 14px;
  color: #4a4a4a;
  padding: 22px 24px;
}

.hotels-details-address-label {
  font-weight: 700;
  color: #4a4a4a;
}

.hotels-details-address-text {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  display: inline;
}

.hotels-details-location-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--lux-hotel-gold);

  font-size: 16px;

  flex-shrink: 0;
}

.hotels-details-location-content {
  flex: 1;
}

.hotels-details-location-content h4 {
  margin: 0;

  font-size: 20px;

  font-weight: 700;

  color: #111827;
}

.hotels-details-location-content p {
  font-size: 15px;

  line-height: 1.6;

  color: #6b7280;
}

/* Responsive */

@media (max-width: 992px) {
  .hotels-details-map-wrapper {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .hotels-details-map-wrapper {
    height: 168px;
    border-radius: 18px;
    padding: 16px 12px;
  }

  .hotels-details-location-card {
    display: none;
  }

  .hotels-details-location-content h4 {
    font-size: 17px;
  }

  .hotels-details-location-content p {
    font-size: 14px;
  }

  .hotels-details-location-icon {
    width: 48px;
    height: 48px;

    font-size: 18px;
  }

  .hotels-details-location-title {
    font-size: 24px;
  }
}

/* ========================================
   Features
======================================== */

.hotels-results-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hotels-results-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f7f7f7;
  color: #444;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.hotels-results-card-badge svg {
  font-size: 11px;
  color: #ff6a2b;
  flex-shrink: 0;
}

/* ========================================
   Room
======================================== */

.hotels-results-card-room {
  margin-top: 14px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.hotels-results-card-room strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* ========================================
   Price
======================================== */

.hotels-results-card-price {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.hotels-results-card-final-price {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}

.hotels-results-card-night {
  font-size: 13px;
  color: #777;
  margin-bottom: 2px;
}

/* ========================================
   Discount
======================================== */

.hotels-results-card-discount {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hotels-results-card-old-price {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
}

.hotels-results-card-discount span:last-child {
  background: #e8fff1;
  color: #0a9b5b;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ========================================
   Responsive
======================================== */

@media (max-width: 768px) {
  .hotels-results-card-features {
    gap: 6px;
  }

  .hotels-results-card-badge {
    font-size: 10px;
    padding: 5px 8px;
  }

  .hotels-results-card-room {
    font-size: 12px;
  }

  .hotels-results-card-final-price {
    font-size: 20px;
  }

  .hotels-results-card-night,
  .hotels-results-card-old-price {
    font-size: 12px;
  }
}

/* ===========================
   Room details sections
=========================== */

.hotels-details-room-modal-section {
  padding: 20px 0;
  border-bottom: 1px solid #edece5;
}

.hotels-details-room-modal-section:first-child {
  padding-top: 0;
}

.hotels-details-room-modal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hotels-details-room-modal-section-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1a;
  margin: 0 0 12px;
  font-family: sans-serif;
}

/* ===========================
   Photo grid
=========================== */

.hotels-details-room-modal-section-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hotels-details-room-modal-section-photo-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  background: #f0efe9;
}

/* ===========================
   Highlights list
=========================== */

.hotels-details-room-modal-section-highlights-list {
  display: flex;

  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hotels-details-room-modal-section-highlights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hotels-details-room-modal-section-highlights-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #4b5563;
}

.hotels-details-room-modal-section-highlights-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: #112e3b;
  font-size: 14px;
  font-weight: 700;
}

/* ===========================
   Rich text
=========================== */

.hotels-details-room-modal-section-richtext {
  font-size: 14px;
  line-height: 1.7;
  color: #6b6a63;
}

.hotels-details-room-modal-section-richtext p {
  margin: 0 0 12px;
}

.hotels-details-room-modal-section-richtext p:last-child {
  margin-bottom: 0;
}

/* ===========================
   Price section / footer
=========================== */

.hotels-details-room-modal-section-price-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hotels-details-room-modal-section-price-block {
  display: flex;
  flex-direction: column;
}

.hotels-details-room-modal-section-price {
  font-size: 26px;
  font-weight: 700;
  color: #1c1c1a;
  line-height: 1.2;
  font-family: sans-serif;
}

.hotels-details-room-modal-section-price-unit {
  font-size: 13px;
  color: #6b6a63;
}

.hotels-details-room-modal-section-select-btn {
  border: none;
  border-radius: 10px;
  background: #ff7f47;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

@media (max-width: 600px) {
  .hotels-details-room-modal-section-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotels-details-room-modal-section-price-section {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

.hotel-home-hotels-section {
  background: #ffffff;
  padding: 40px 16px;
}

.hotel-home-hotels-section * {
  box-sizing: border-box;
}

.hotel-home-hotels-header {
  margin-bottom: 28px;
}

.hotel-home-hotels-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 8px;
}

.hotel-home-hotels-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
  line-height: 1.2;
}

.hotel-home-hotels-subtitle {
  font-size: 15px;
  color: #555;
  margin-bottom: 35px;
}

.hotel-home-hotels-carousel {
  position: relative;
}

.hotel-home-hotels-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 8px 4px;
  scrollbar-width: none;
}

.hotel-home-hotels-track::-webkit-scrollbar {
  display: none;
}

.hotel-home-hotels-card {
  flex: 0 0 auto;
  width: 270px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.hotel-home-hotels-image-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  background: #e5e7eb;
  margin-bottom: 14px;
}

.hotel-home-hotels-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotel-home-hotels-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

.hotel-home-hotels-fav:hover {
  transform: scale(1.08);
}

.hotel-home-hotels-fav-active {
  color: #e11d48;
}

.hotel-home-hotels-name {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  font-family: sans-serif;
}

.hotel-home-hotels-list {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  flex: 1;
}

.hotel-home-hotels-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
  margin-bottom: 6px;
}

.hotel-home-hotels-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7f47;
  margin-top: 6px;
}

.hotel-home-hotels-cta {
  align-self: flex-start;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.hotel-home-hotels-cta:hover {
  border: 1.5px solid #ff7f47;
  color: #ff7f47;
}

.hotel-home-hotels-nav {
  position: absolute;
  top: 30%;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  cursor: pointer;
  z-index: 2;
}

.hotel-home-hotels-nav:hover {
  background: #f3f4f6;
}

.hotel-home-hotels-nav-prev {
  left: -20px;
}

.hotel-home-hotels-nav-next {
  right: -20px;
}

@media (max-width: 640px) {
  .hotel-home-hotels-card {
    width: 220px;
  }
  .hotel-home-hotels-image-wrap {
    height: 200px;
  }
  .hotel-home-hotels-nav {
    display: none;
  }
}

.hotel-home-resorts-section {
  --hhr-ink: #171a21;
  --hhr-muted: #6e7889;
  --hhr-blue: #3f7dc2;
  --hhr-surface: #ffffff;
  --hhr-media-h: 333px;
  background: var(--hhr-surface);
  padding: 40px 0px;
}

.hotel-home-resorts-section * {
  box-sizing: border-box;
}

.hotel-home-resorts-header {
  margin-bottom: 20px;
}

.hotel-home-resorts-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hhr-muted);
}

.hotel-home-resorts-title {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hhr-ink);
  font-family: sans-serif;
}

.hotel-home-resorts-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hhr-ink);
  max-width: 700px;
}

.hotel-home-resorts-highlight {
  color: #ff7f47;
}

.hotel-home-resorts-carousel {
  position: relative;
}

.hotel-home-resorts-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hotel-home-resorts-track::-webkit-scrollbar {
  display: none;
}

.hotel-home-resorts-card {
  flex: 1 0 calc(100% / 7);
  min-width: 130px;
  scroll-snap-align: start;
  cursor: pointer;
}

.hotel-home-resorts-media {
  position: relative;
  width: 100%;
  height: var(--hhr-media-h);
  overflow: hidden;
  background: #eef0f3;
}

.hotel-home-resorts-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotel-home-resorts-like {
  position: absolute;
  top: 15px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: var(--hhr-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 23, 31, 0.2);
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

.hotel-home-resorts-like:hover {
  transform: scale(1.08);
}

.hotel-home-resorts-like--active {
  color: #e0405a;
}

.hotel-home-resorts-info {
  margin-top: 14px;
  padding-right: 16px;
}

.hotel-home-resorts-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--hhr-ink);
  line-height: 1.35;
}

.hotel-home-resorts-location {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--hhr-muted);
}

.hotel-home-resorts-nav {
  position: absolute;
  top: calc(var(--hhr-media-h) / 2);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: #ffffff;
  color: var(--hhr-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(20, 23, 31, 0.22);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.hotel-home-resorts-nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.05);
}

.hotel-home-resorts-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.hotel-home-resorts-nav--prev {
  left: 140px;
}

.hotel-home-resorts-nav--next {
  right: 140px;
}

@media (max-width: 900px) {
  .hotel-home-resorts-card {
    flex: 1 0 45%;
  }
  .hotel-home-resorts-nav--prev {
    left: 12px;
  }
  .hotel-home-resorts-nav--next {
    right: 12px;
  }
}

@media (max-width: 480px) {
  .hotel-home-resorts-section {
    --hhr-media-h: 220px;
  }
  .hotel-home-resorts-card {
    flex: 1 0 70%;
  }
}

.hotel-home-villas-section {
  --hhv-ink: #171a21;
  --hhv-muted: #6e7889;
  --hhv-blue: #3f7dc2;
  --hhv-surface: #ffffff;
  --hhv-media-h: 333px;
  --hhv-radius: 14px;
  background: var(--hhv-surface);
  padding: 40px 16px;
}

.hotel-home-villas-section * {
  box-sizing: border-box;
}

.hotel-home-villas-header {
  margin-bottom: 20px;
}

.hotel-home-villas-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hhv-muted);
}

.hotel-home-villas-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
  line-height: 1.2;
}

.hotel-home-villas-subtitle {
  font-size: 15px;
  color: #555;
  margin-bottom: 35px;
}

.hotel-home-villas-plain {
  color: var(--hhv-ink);
}

.hotel-home-villas-highlight {
  color: #ff7f47;
}

.hotel-home-villas-carousel {
  position: relative;
}

.hotel-home-villas-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hotel-home-villas-track::-webkit-scrollbar {
  display: none;
}

.hotel-home-villas-card {
  flex: 0 0 auto;
  width: min(461px, 68vw);
  scroll-snap-align: start;
  cursor: pointer;
}

.hotel-home-villas-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.hotel-home-villas-media {
  position: relative;
  width: 100%;
  height: var(--hhv-media-h);
  border-radius: var(--hhv-radius);
  overflow: hidden;
  background: #eef0f3;
}

.hotel-home-villas-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hotel-home-villas-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.18) 28%,
    rgba(0, 0, 0, 0) 55%
  );
  pointer-events: none;
}

.hotel-home-villas-like {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: var(--hhv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 23, 31, 0.22);
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

.hotel-home-villas-like:hover {
  transform: scale(1.08);
}

.hotel-home-villas-like--active {
  color: #e0405a;
}

.hotel-home-villas-label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  right: 20px;
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.hotel-home-villas-nav {
  position: absolute;
  top: calc(var(--hhv-media-h) / 2);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: #ffffff;
  color: var(--hhv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(20, 23, 31, 0.22);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.hotel-home-villas-nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.05);
}

.hotel-home-villas-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.hotel-home-villas-nav--prev {
  left: -20px;
}

.hotel-home-villas-nav--next {
  right: -20px;
}

@media (max-width: 900px) {
  .hotel-home-villas-card {
    width: 78vw;
  }
  .hotel-home-villas-nav--prev {
    left: 4px;
  }
  .hotel-home-villas-nav--next {
    right: 4px;
  }
}

@media (max-width: 480px) {
  .hotel-home-villas-section {
    --hhv-media-h: 220px;
  }
  .hotel-home-villas-label {
    font-size: 17px;
  }
}

.hotel-home-destinations-section {
  --hhd-ink: #171a21;
  --hhd-link: #4a5e82;
  --hhd-dot: #ff6612;

  background: #ffffff;
  padding: 40px 16px;
}

.hotel-home-section-heading {
  margin-bottom: 28px;
}

.hotel-home-section-heading h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 0px;
  color: #111;
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
}

.hotel-home-section-heading p {
  color: #6b7280;
  font-size: 15px;
}

.hotel-home-destination-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hotel-home-destination-tag {
  display: flex;
  align-items: center;
  border: 1px solid #d4a04b;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}

.hotel-home-destination-number {
  background: #fff3d6;
  padding: 6px 10px;
  border-right: 1px solid #d4a04b;
  font-weight: 600;
  color: #8a5a00;
}

.hotel-home-destination-name {
  padding: 6px 12px;
  color: #333;
  font-family: sans-serif;
}

@media (max-width: 768px) {
  .hotel-home-destinations-section {
    padding: 50px 16px;
  }

  .hotel-home-section-heading h2 {
    font-size: 24px;
    text-align: start;
    font-weight: 700;
  }

  .hotel-home-destination-tags {
    gap: 10px;
  }

  .hotel-home-destination-name {
    flex: 1;
  }
}

.hotel-home-resorts-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ===============================
   Property Highlights
================================== */

.hotels-details-highlights {
  margin: 40px 0;
}

.hotels-details-highlights-heading {
  margin: 0 0 20px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #1f2937;
}

.hotels-details-highlights-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.hotels-details-highlights-list::-webkit-scrollbar {
  display: none;
}

/* Card */

.hotels-details-highlights-card {
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Icon */

.hotels-details-highlights-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: rgba(255, 127, 71, 0.12);
  color: #ff7f47;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: all 0.3s ease;
}

/* Content */

.hotels-details-highlights-content {
  flex: 1;
  min-width: 0;
}

.hotels-details-highlights-content h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotels-details-highlights-content p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */

.hotels-details-highlights-arrow {
  color: #ff7f47;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* More */

.hotels-details-highlights-more {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  border: 1px solid #ececec;
  background: #fff;
  color: #ff7f47;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.hotels-details-highlights-more:hover {
  background: #ff7f47;
  color: #fff;
  border-color: #ff7f47;
  transform: scale(1.05);
}

/* ===============================
   Modal
================================== */

.hotels-details-highlights-popup-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hotels-details-highlights-popup-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
}

.hotels-details-highlights-popup-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hotels-details-highlights-popup-item h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.hotels-details-highlights-popup-item p {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
}

/* ===============================
   Responsive
================================== */

@media (max-width: 991px) {
  .hotels-details-highlights-heading {
    font-size: 28px;
  }

  .hotels-details-highlights-card {
    flex: 0 0 310px;
  }
}

@media (max-width: 768px) {
  .hotels-details-highlights {
    margin: 30px 0;
  }

  .hotels-details-highlights-heading {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .hotels-details-highlights-list {
    gap: 12px;
  }

  .hotels-details-highlights-card {
    flex: 0 0 285px;
    padding: 14px;
    gap: 12px;
  }

  .hotels-details-highlights-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 20px;
  }

  .hotels-details-highlights-content h4 {
    font-size: 17px;
  }

  .hotels-details-highlights-content p {
    font-size: 13px;
    margin-top: 4px;
  }

  .hotels-details-highlights-more {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .hotels-details-highlights-popup-item {
    gap: 14px;
  }

  .hotels-details-highlights-popup-item h4 {
    font-size: 18px;
  }

  .hotels-details-highlights-popup-item p {
    font-size: 14px;
  }
}

.hotels-details-highlight-card {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.hotels-details-highlight-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hotels-details-highlight-rating-badge {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #1e3a8a;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotels-details-highlight-rating-text {
  flex: 1;
  font-size: 14px;
}

.hotels-details-highlight-map-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #e5f0e9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 20px;
}

.hotels-details-highlight-location-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.hotels-details-highlight-muted {
  color: #6b7280;
  font-size: 13px;
}

.hotels-details-highlight-link {
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.hotels-details-highlight-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 16px 0;
}

.hotels-details-highlight-deal-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid #10b981;
  color: #10b981;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}

.hotels-details-highlight-deal-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

.hotels-details-rules-card {
  margin-top: 18px;
  border: 1px solid #d8d8d8;
  border-radius: 16px;
  padding: 16px;
}

.hotels-details-rules-title {
  margin: 0;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  font-family: sans-serif;
}

.hotels-details-rules-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hotels-details-rules-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 6px 0;
}

.hotels-details-rules-list li:last-child {
  border-bottom: none;
}

.hotels-details-rules-list svg {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 18px;
  color: #ff7f47;
}

.hotels-details-rules-list span {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

.hotels-details-rules-list strong {
  color: #112e3b;
  font-weight: 600;
}

.hotels-results-page {
  background: #f7f9fc;
  min-height: 100vh;
}

.hotels-results-toolbar {
  background: #fff;
  margin-bottom: 20px;
}

.hotels-results-toolbar-container {
  max-width: 1300px;
  margin: auto;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.hotels-results-toolbar__label {
  font-family: sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sort bar (arrows + scrollable pills) */
.hotels-sort-bar {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}

.hotels-sort-bar__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #374151;
  padding: 4px;
  flex-shrink: 0;
  border-radius: 6px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.hotels-sort-bar__arrow:hover:not(:disabled) {
  background: #f3f4f6;
}

.hotels-sort-bar__arrow:disabled {
  color: #d1d5db;
  cursor: default;
}

.hotels-sort-bar__pills {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hotels-sort-bar__pills::-webkit-scrollbar {
  display: none;
}

.hotels-sort-bar__pill {
  position: relative;
  font-family: sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

/* vertical divider between pills, not before the first one */
.hotels-sort-bar__pill + .hotels-sort-bar__pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #d1d5db;
}

.hotels-sort-bar__pill--active {
  background: var(--lux-hotel-gold-light);
  color: var(--lux-hotel-gold);
}
/* hide the divider around the active pill so it doesn't overlap the rounded background */
.hotels-sort-bar__pill--active::before {
  display: none;
}

.hotels-sort-bar__pill--active + .hotels-sort-bar__pill::before {
  display: none;
}

.hotels-results-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
}

.hotels-results-toolbar__search-icon {
  color: #9ca3af;
  flex-shrink: 0;
}

.hotels-results-toolbar__search input {
  border: none;
  outline: none;
  font-family: sans-serif;
  font-size: 0.9rem;
  width: 180px;
  color: #111827;
}

.hotels-results-toolbar__search input::placeholder {
  color: #9ca3af;
}

@media (max-width: 991px) {
  .hotels-results-toolbar {
    display: none;
  }
}

.hotels-results-content {
  max-width: 1300px;
  margin: auto;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  padding: 20px 16px;
}

.hotels-results-sidebar {
  display: block;
  position: sticky;
  top: 120px;
  align-self: start;
}

.hotels-results-main {
  min-width: 0;
}

/* Tablet & Mobile */
@media (max-width: 991px) {
  .hotels-results-sidebar {
    display: none;
  }

  .hotels-results-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== Grid ===== */
.hotels-results-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.hotels-results-grid--empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--hotel-ink-soft, #6b7280);
  background: var(--hotel-white, #fff);
  border-radius: 12px;
}

/* ===== Card — shared ===== */
.hotels-results-card {
  position: relative;
  display: flex;
  gap: 20px;
  background: var(--hotel-white, #fff);

  padding: 16px;
  border: 1px solid rgb(243, 243, 243);
  border-radius: 0;
}

.hotels-results-card:hover {
  border-color: var(--lux-hotel-gold);
}

/* Gallery */

.hotels-results-card__gallery {
  flex: 0 0 300px;
}

.hotels-results-card__main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  overflow: hidden;
  border-radius: 0;
  background: #eee;
}

/* Slider */

.hotels-results-card__slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
}

.hotels-results-card__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom gradient */

.hotels-results-card__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 5%,
    rgba(0, 0, 0, 0.2) 30%,
    transparent 55%
  );
  pointer-events: none;
}

/* Favourite */

.hotels-results-card__wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Dots */

.hotels-results-card__gallery-dots {
  position: absolute;
  left: 12px;
  bottom: 14px;
  display: flex;
  gap: 5px;
}

.hotels-results-card__gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  transition: 0.3s;
}

.hotels-results-card__gallery-dot--active {
  width: 24px;
  background: #fff;
}

/* Photos Button */

.hotels-results-card__photos-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 28px;
  padding: 0 14px;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;

  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(12px);

  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
  transition: all 0.25s ease;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  z-index: 5;
}

.hotels-results-card__photos-btn svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  flex-shrink: 0;
}

/* Navigation */
.hotels-results-card__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff;

  cursor: pointer;

  opacity: 0;
  transition: all 0.25s ease;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  z-index: 5;
}

.hotels-results-card__gallery-nav svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.hotels-results-card__gallery-nav--prev {
  left: 10px;
}

.hotels-results-card__gallery-nav--next {
  right: 10px;
}

.hotels-results-card__main-image:hover .hotels-results-card__gallery-nav {
  opacity: 1;
}

/* ---- Body ---- */
.hotels-results-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hotels-results-card__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hotels-results-card__star-badge {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--hotel-ink, #15191c);
  border: 1px solid var(--hotel-line, #e5e7eb);
  border-radius: 6px;
  padding: 3px 8px;
}
.hotels-results-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hotels-results-card__rating-count {
  font-size: 0.78rem;
  color: var(--hotel-ink, #15191c);
}
.hotels-results-card__rating-score {
  background: #1a9d5c;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.hotels-results-card__name {
  margin: 2px 0 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--hotel-ink, #15191c);
  line-height: 1.3;
  font-family: sans-serif;
}

.hotels-results-card__city {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--lux-hotel-gold);
}

.hotels-results-card__amenities {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hotels-results-card__amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;

  color: var(--hotel-ink, #15191c);
  border: 1px solid var(--hotel-line, #e5e7eb);
  border-radius: 6px;
  padding: 5px 9px;

  white-space: nowrap;
}

/* Amenity icon wrapper */
.hotels-results-card__amenity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;
  min-width: 15px;

  color: var(--hotel-ink, #15191c);
  flex-shrink: 0;
}

/* Lucide icon */
.hotels-results-card__amenity-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.hotels-results-card__amenity-more {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lux-hotel-gold);
}

.hotels-results-card__features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hotels-results-card__feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--hotel-ink, #15191c);
}
.hotels-results-card__feature svg {
  color: #1a9d5c;
  flex-shrink: 0;
}

.hotels-results-card__feature--couple {
  color: var(--lux-hotel-gold);
  font-weight: 600;
}

.hotels-results-card__feature--couple svg {
  color: var(--lux-hotel-gold);
}

.hotels-results-card__description {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--hotel-ink, #15191c);
  line-height: 1.5;
}
.hotels-results-card__readmore {
  all: unset;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2563eb;
}

.hotels-results-card__deal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fff7e6;
  border: 1px solid #f0d9a6;
  border-radius: 8px;
}
.hotels-results-card__deal-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #92660a;
  border: 1px solid #d8b558;
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}
.hotels-results-card__deal-text {
  font-size: 0.8rem;
  color: #6b5410;
}

/* ---- Price ---- */
.hotels-results-card__price {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  padding-left: 20px;
  border-left: 1px solid var(--hotel-line, #e5e7eb);
}
.hotels-results-card__price-original {
  font-size: 0.82rem;
  color: var(--hotel-ink-soft, #6b7280);
  text-decoration: line-through;
}
.hotels-results-card__price-current {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hotel-ink, #15191c);
}
.hotels-results-card__price-taxes {
  font-size: 0.72rem;
  color: var(--hotel-ink-soft, #6b7280);
}
.hotels-results-card__price-per {
  font-size: 0.72rem;
  color: var(--hotel-ink-soft, #6b7280);
  margin-bottom: 8px;
}
.hotels-results-card__login-link {
  all: unset;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
}

.hotels-results-card__book-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  order: 3;
  cursor: pointer;

  background: #ff7f47;
  color: #fff;

  font-weight: 700;
  font-size: 0.9rem;

  padding: 10px 18px;
  border-radius: 8px;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.hotels-results-card__book-btn:hover {
  background: #ff7f47;
  color: #fff;
}

.hotels-results-card__book-btn svg {
  font-size: 16px;
  transition: transform 0.25s ease;
}

/* ---- Lightbox ---- */
.hotels-results-card__lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000000cc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.hotels-results-card__lightbox-close {
  all: unset;
  position: absolute;
  top: 20px;
  right: 24px;
  color: #fff;
  cursor: pointer;
}
.hotels-results-card__lightbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  max-width: 1000px;
  max-height: 85vh;
  overflow-y: auto;
}
.hotels-results-card__lightbox-grid img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* ===================================================
   Mobile — stacked card layout
   =================================================== */
@media (max-width: 760px) {
  .hotels-results-card {
    flex-direction: column;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .hotels-results-card:hover {
    border: 1px solid rgb(243, 243, 243);
  }

  .hotels-results-card__gallery {
    flex: none;
    gap: 0;
  }
  .hotels-results-card__main-image {
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }
  .hotels-results-card__gallery-nav {
    display: flex;
  }
  .hotels-results-card__thumbs {
    display: none;
  }

  .hotels-results-card__body {
    padding: 0 14px;
    gap: 6px;
  }

  .hotels-results-card__price {
    flex: none;
    border-left: none;
    border-top: 1px solid var(--hotel-line, #e5e7eb);
    align-items: stretch;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px 14px;
    margin-top: 4px;
    gap: 2px 10px;
  }
  .hotels-results-card__price-original,
  .hotels-results-card__price-current,
  .hotels-results-card__price-taxes,
  .hotels-results-card__price-per {
    text-align: left;
  }
  .hotels-results-card__price-current {
    order: 1;
  }
  .hotels-results-card__price-original {
    order: 0;
    width: 100%;
  }
  .hotels-results-card__price-taxes {
    order: 2;
    flex: 1;
  }
  .hotels-results-card__price-per {
    display: none;
  }
  .hotels-results-card__login-link {
    display: none;
  }

  .hotels-results-card__deal {
    margin: 8px 14px 14px;
  }
}

/*==========================
 Hotels Results Skeleton
===========================*/

.hotels-results-skeleton {
  display: flex;
  gap: 20px;
  background: var(--hotel-white, #fff);

  padding: 10px;
  border: 1px solid rgb(243, 243, 243);
  border-radius: 0;

  overflow: hidden;
}

/* shimmer */

.shimmer {
  position: relative;
  overflow: hidden;
  background: #edf2f7;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.75),
    transparent
  );
  animation: hotels-results-skeleton-loading 1.4s infinite;
}

@keyframes hotels-results-skeleton-loading {
  100% {
    transform: translateX(100%);
  }
}

/* Gallery */

.hotels-results-skeleton__gallery {
  width: 380px;
  flex-shrink: 0;
}

.hotels-results-skeleton__image {
  width: 100%;
  height: 210px;
  border-radius: 0;
}

.hotels-results-skeleton__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.hotels-results-skeleton__thumb {
  width: 86px;
  height: 58px;
  border-radius: 10px;
}

/* Body */

.hotels-results-skeleton__body {
  flex: 1;
  padding: 10px;
}

.hotels-results-skeleton__badge {
  width: 150px;
  height: 30px;
  border-radius: 8px;
}

.hotels-results-skeleton__title {
  width: 280px;
  height: 34px;
  border-radius: 8px;
  margin-top: 18px;
}

.hotels-results-skeleton__location {
  width: 110px;
  height: 18px;
  border-radius: 6px;
  margin-top: 14px;
}

.hotels-results-skeleton__chips {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.hotels-results-skeleton__chips span {
  width: 70px;
  height: 34px;
  border-radius: 8px;
}

.hotels-results-skeleton__line {
  width: 100%;
  height: 16px;
  border-radius: 5px;
  margin-top: 16px;
}

.hotels-results-skeleton__line--short {
  width: 70%;
}

/* Price */

.hotels-results-skeleton__price {
  width: 220px;
  padding-left: 25px;
  border-left: 1px solid #eceff5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hotels-results-skeleton__old-price {
  width: 70px;
  height: 18px;
  border-radius: 4px;
}

.hotels-results-skeleton__current-price {
  width: 130px;
  height: 42px;
  border-radius: 8px;
  margin-top: 12px;
}

.hotels-results-skeleton__tax {
  width: 120px;
  height: 16px;
  border-radius: 4px;
  margin-top: 14px;
}

.hotels-results-skeleton__button {
  width: 160px;
  height: 44px;
  border-radius: 10px;
  margin-top: 30px;
}

/* Mobile */

@media (max-width: 768px) {
  .hotels-results-skeleton {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .hotels-results-skeleton__gallery {
    width: 100%;
  }

  .hotels-results-skeleton__image {
    height: 220px;
  }

  .hotels-results-skeleton__price {
    display: none;
  }

  .hotels-results-skeleton__current-price {
    width: 120px;
  }

  .hotels-results-skeleton__button {
    width: 100%;
  }
}

.hf-sidebar {
  background: rgb(255, 255, 255);
  margin-bottom: 20px;
}

.hf-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.hf-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.hf-clear {
  all: unset;
  cursor: pointer;

  font-size: 13px;
  font-weight: 600;

  color: var(--lux-hotel-gold);

  transition: color 0.2s ease;
}

.hf-clear:hover {
  text-decoration: underline;
}

/* Applied-filter chips */

.hf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 4px;
  flex-shrink: 0;
}

.hf-chip {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  background: var(--lux-hotel-gold-light);
  color: var(--lux-hotel-gold);

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.hf-chip:hover {
  background: var(--lux-hotel-gold);
  color: var(--lux-hotel-white);
}

/* Scrollable accordion list */

.hf-sections {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0 8px;
}

.hf-sections::-webkit-scrollbar {
  width: 6px;
}
.hf-sections::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 999px;
}

.hf-section {
  border-bottom: 1px solid #f3f4f6;
}

.hf-section:last-child {
  border-bottom: none;
}

.hf-section-header {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  color: #111827;
}

.hf-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
}

.hf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.hf-section-body {
  padding: 0 18px 16px;
}

/* Checkbox rows */

.hf-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  padding: 8px 0;
}

.hf-checkbox-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hf-checkbox {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 1px;
  transition: 0.15s;
}

.hf-checkbox--checked {
  background: var(--lux-hotel-gold);
  border-color: var(--lux-hotel-gold);
}

.hf-checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hf-checkbox-label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 19px;
  color: #1a1a1a;
}

.hf-checkbox-sub {
  font-size: 12px;
  color: #6b7280;
}

/* Location search + pills */

.hf-location-search {
  height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.hf-location-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: #111827;
}

.hf-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hf-pill {
  all: unset;
  cursor: pointer;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  transition: 0.15s;
}

.hf-pill:hover {
  border-color: #111827;
}

.hf-pill--active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.hf-no-match {
  font-size: 12.5px;
  color: #9ca3af;
}

/* Price control */

.hf-price-control,
.hf-price-control * {
  box-sizing: border-box;
}

.hf-price-control {
  width: 100%;
  position: relative;
  padding: 6px 8px 0;
  margin-bottom: 14px;
}

.hf-price-tooltip {
  position: absolute;
  top: -10px;
  transform: translate(-50%, -100%);
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

.hf-price-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111827;
}

.hf-price-histogram {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  margin-bottom: 10px;
}

.hf-price-bar {
  flex: 1;
  background: #e5e7eb;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: background 0.15s;
}

.hf-price-bar--active {
  background: #111827;
}

.hf-price-slider {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  touch-action: none;
  user-select: none;
}

.hf-price-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px;
  background: #e5e7eb;
}

.hf-price-range {
  position: absolute;
  height: 4px;
  border-radius: 4px;
  background: #111827;
}

.hf-price-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111827;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.hf-price-thumb:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px;
}

.hf-price-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.hf-price-brackets {
  border-top: 1px solid #f3f4f6;
  padding-top: 6px;
}

.hf-sidebar-footer {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid #f3f4f6;
  font-size: 12.5px;
  color: #6b7280;
  text-align: center;
}

.hotels-results-toolbar__label {
  flex-shrink: 0;
  display: block;
  line-height: 1.15;
  font-weight: 700;
  font-size: 0.95rem;
  color: #15191c;
  margin-right: 8px;
}

.hotels-results-toolbar__pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hotels-results-toolbar__pill {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid #2f6fed;
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 600;

  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.hotels-results-toolbar__pill:hover {
  background: #eef4ff;
}
.hotels-results-toolbar__pill--active {
  background: #d3e6ff;
  border-color: #2f6fed;
  color: #1d4ed8;
  font-weight: 800;
}

.hotels-results-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e3e7eb;
  border-radius: 4px;
  color: #4a4a4a;
  font-size: 16px;
  font-weight: 400;
  outline: 0;
  padding: 10px 10px 10px 10px;

  flex-shrink: 0;
}

.hotels-results-toolbar__search-icon {
  color: var(--lux-hotel-gold);
  flex-shrink: 0;
}
.hotels-results-toolbar__search input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  color: #15191c;
}
.hotels-results-toolbar__search input::placeholder {
  color: #7c8794;
}

/* ===== Mobile ===== */
@media (max-width: 680px) {
  .hotels-results-toolbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .hotels-results-toolbar__search {
    min-width: 200px;
  }
}

.hotels-results-top {
  /* position: sticky;
  top: 0;
  z-index: 100; */
  background: #fff;
  border-bottom: 1px solid #ececec;
}

.msf-toolbar {
  position: relative;
  z-index: 20;
  background: #fff;
  display: none;
  gap: 10px;
  padding: 10px 14px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.msf-toolbar::-webkit-scrollbar {
  display: none;
}
.msf-toolbar-dropdown-wrap {
  position: relative;
  flex: 0 0 auto;
}
.msf-toolbar-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 0;
  border: 1px solid #d8dade;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #33373d;
}
.msf-toolbar-pill--active {
  border-color: #ff5722;
  color: #ff5722;
}
.msf-toolbar-pill--open {
  border-color: #33373d;
}
.msf-trigger-count {
  background: #ff5722;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: -2px;
}

/* Wrap the toolbar in a positioned container so the popover can anchor to it */
.msf-toolbar-wrap {
  position: relative;
}

/* Full-screen dark scrim — click to dismiss, sits behind the popover */
.msf-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(20, 22, 26, 0.45);
}

/* The actual popover card — anchored to the toolbar wrapper, not the viewport */
.msf-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 14px;
  right: 14px;
  z-index: 46;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 14px;
  max-height: 60vh;
  overflow-y: auto;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.msf-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
}
.msf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, 0.55);
}
.msf-panel {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: msf-slide-up 0.22s ease-out;
}
@keyframes msf-slide-up {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.msf-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #e2e4e8;
  margin: 10px auto 0;
}
.msf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #eef0f2;
}

.msf-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #1c1e22;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.msf-icon-btn:hover {
  background: #f3f4f6;
}

.msf-icon-btn:active {
  background: #e5e7eb;
}

.msf-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.msf-title {
  font-size: 16px;
  font-weight: 700;
  color: #14161a;
}

.msf-clear-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 0;
  border: 0;
  background: transparent;

  color: var(--lux-hotel-gold);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  text-decoration: none;

  transition: color 0.2s ease;
}

.msf-body {
  overflow-y: auto;
  padding: 4px 16px 8px;
}
.msf-section {
  padding: 16px 0;
  border-bottom: 1px solid #f0f1f3;
}
.msf-section--last {
  border-bottom: none;
}
.msf-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #14161a;
  margin: 0 0 12px;
  font-family: sans-serif;
}
.msf-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.msf-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d8dade;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #33373d;
  text-transform: capitalize;
}
.msf-pill-sub {
  font-size: 11px;
  font-weight: 500;
  color: #9a9ea5;
  text-transform: none;
}
.msf-pill--active {
  border-color: var(--lux-hotel-gold);
  background: var(--lux-hotel-gold-light);
  color: var(--lux-hotel-gold);
}
.msf-pill--active .msf-pill-sub {
  color: #ff5722;
  opacity: 0.75;
}
.msf-footer {
  padding: 12px 16px 18px;
  border-top: 1px solid #eef0f2;
}

.msf-cta {
  width: 100%;
  padding: 13px;
  border-radius: 10px;

  background: var(--lux-hotel-gold);
  color: var(--lux-hotel-white);

  font-size: 15px;
  font-weight: 700;

  border: none;
  cursor: pointer;

  transition: background 0.2s ease;
}

.msf-cta--compact {
  padding: 10px;
  font-size: 14px;
  margin-top: 16px;
}

.msf-radio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  border-bottom: 1px solid #f0f1f3;
  cursor: pointer;
}
.msf-radio-row:last-of-type {
  border-bottom: none;
}
.msf-radio-label {
  font-size: 14.5px;
  color: #1c1e22;
  font-weight: 500;
}
.msf-radio {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.6px solid #c7cad0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.msf-radio--checked {
  border-color: #ff5722;
}
.msf-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5722;
}
.msf-radio-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 991px) {
  .msf-toolbar {
    display: flex;
    background: #f7f9fc;
  }
}

/* ==========================================
   Hotel Details Tabs
========================================== */

.hotels-details-tabs__trigger {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.hotels-details-tabs {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 100;

  background: #fff;
  border-bottom: 1px solid #e8e8e8;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);

  transition:
    opacity 0.25s ease,
    transform 0.3s ease,
    visibility 0.3s ease;

  pointer-events: none;
}

/* Show after scrolling to this section */
.hotels-details-tabs--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.hotels-details-tabs__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hotels-details-tabs__container::-webkit-scrollbar {
  display: none;
}

.hotels-details-tabs__item {
  flex-shrink: 0;
  padding: 20px 24px;

  border: 0;
  background: transparent;

  cursor: pointer;

  color: #4a4a4a;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;

  position: relative;
  text-transform: uppercase;
  white-space: nowrap;

  transition: color 0.25s ease;
}

.hotels-details-tabs__item.active {
  color: var(--lux-hotel-gold);
}

.hotels-details-tabs__item.active::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  background: var(--lux-hotel-gold);
  border-radius: 2px 2px 0 0;
}

/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {
  .hotels-details-tabs__container {
    justify-content: flex-start;
  }

  .hotels-details-tabs__item {
    padding: 18px 20px;
    font-size: 16px;
  }
}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 576px) {
  .hotels-details-tabs {
    display: none;
    top: 50px;
  }

  .hotels-details-tabs__container {
    padding: 0;
  }

  .hotels-details-tabs__item {
    padding: 15px 18px;
    font-size: 13px;
  }

  .hotels-details-tabs__item.active::after {
    height: 2px;
  }
}

/* HotelHomeExploreExperience — theme tokens.
   Every class is prefixed hhee- so it's safe to drop into a global
   stylesheet without colliding with the rest of your app. */
.hhee-section {
  --hhee-accent: #ff7f47;
  --hhee-accent-dark: #e8672f;
  --hhee-accent-tint: #fff1ea;
  --hhee-ink: #1f2430;
  --hhee-muted: #6b7280;

  padding: 40px 24px 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.hhee-heading {
  margin: 0 0 28px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hhee-ink);
  text-align: center;
}

.hhee-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 20px;
}

.hhee-item {
  display: flex;
}

.hhee-tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font: inherit;
}

.hhee-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hhee-accent-tint);
  border: 1px solid rgba(255, 127, 71, 0.18);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.hhee-icon {
  width: 38px;
  height: 38px;
  color: var(--hhee-accent);
  transition: color 0.18s ease;
}

.hhee-tile:hover .hhee-icon-wrap,
.hhee-tile:focus-visible .hhee-icon-wrap {
  transform: translateY(-3px);
  background: var(--hhee-accent);
  box-shadow: 0 10px 24px -10px rgba(255, 127, 71, 0.55);
}

.hhee-tile:hover .hhee-icon,
.hhee-tile:focus-visible .hhee-icon {
  color: #fff;
}

.hhee-tile:focus-visible {
  outline: 2px solid var(--hhee-accent-dark);
  outline-offset: 4px;
  border-radius: 12px;
}

.hhee-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--hhee-ink);
  text-align: center;
}

/* Responsive: fewer columns as space tightens, then a horizontal scroller */
@media (max-width: 960px) {
  .hhee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .hhee-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hhee-grid::-webkit-scrollbar {
    display: none;
  }

  .hhee-item {
    flex: 0 0 auto;
    width: 92px;
    scroll-snap-align: start;
  }

  .hhee-icon-wrap {
    width: 76px;
    height: 76px;
  }

  .hhee-heading {
    font-size: 22px;
  }
}

/* ---------- Experience (property type) filter — dropdown list ---------- */

.hotel-search__panel--experience {
  width: 230px;
  padding: 8px;
}

.hotel-search__dropdown-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}

.hotel-search__dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--hs-text, #1f2937);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.hotel-search__dropdown-item:hover {
  background: var(--hs-hover, #f3f4f6);
}

.hotel-search__dropdown-item--active {
  background: var(--hs-accent-tint, #fff1eb);
  color: var(--hs-accent, #ff6b35);
  font-weight: 600;
}

.hotel-search__dropdown-item--active:hover {
  background: var(--hs-accent-tint, #fff1eb);
}

.hotel-search__dropdown-item-label {
  flex: 1;
}

.hotel-search__dropdown-item-tick {
  flex-shrink: 0;
  color: var(--hs-accent, #ff6b35);
}

.hotel-search__panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 10px 2px;
  border-top: 1px solid var(--hs-border, #e5e7eb);
}

.hotel-search__clear-link {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--hs-text-muted, #6b7280);
  cursor: pointer;
  padding: 0;
}

.hotel-search__clear-link:hover:not(:disabled) {
  color: var(--hs-accent, #ff6b35);
}

.hotel-search__clear-link:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hotel-search-wrap--home-mobile {
  padding: 12px;
}

.hotel-search-home-m {
  width: 100%;
}

.hotel-search-home-m__card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ececec;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.hotel-search-home-m__input {
  width: 100%;
  height: 60px;
  padding: 0 18px;
  background: #fff;
  border: none;
  border-bottom: 1px solid #ededed;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  transition: background 0.2s ease;
}

.hotel-search-home-m__input:last-of-type {
  border-bottom: none;
}

.hotel-search-home-m__input:hover {
  background: #fafafa;
}

.hotel-search-home-m__input:active {
  background: #f7f7f7;
}

.hotel-search-home-m__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}

.hotel-search-home-m__icon {
  font-size: 20px;
  color: #3f3f46;
  flex-shrink: 0;
}

.hotel-search-home-m__text {
  font-size: 16px;
  font-weight: 500;
  color: #202124;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-search-home-m__submit {
  width: calc(100% - 24px);
  height: 48px;
  margin: 14px 12px 12px;

  border: none;
  border-radius: 10px;

  background: #b88a3b;
  color: #fff;

  font-size: 16px;
  font-weight: 700;

  cursor: pointer;
  transition: all 0.25s ease;
}

.hotel-search-home-m__submit:hover {
  background: #9f752f;
}

.hotel-search-home-m__submit:active {
  transform: scale(0.98);
}

/* Small devices */
@media (max-width: 480px) {
  .hotel-search-wrap--home-mobile {
    padding: 10px;
  }

  .hotel-search-home-m__card {
    border-radius: 16px;
  }

  .hotel-search-home-m__input {
    height: 58px;
    padding: 0 16px;
  }

  .hotel-search-home-m__icon {
    font-size: 18px;
  }

  .hotel-search-home-m__text {
    font-size: 15px;
  }

  .hotel-search-home-m__submit {
    height: 46px;
    font-size: 15px;
    margin: 12px 10px 10px;
    width: calc(100% - 20px);
  }
}

@media (max-width: 767px) {
  .hotel-home__hero {
    position: relative;
    min-height: 320px;
  }

  .hotel-home__hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hotel-home__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(15, 23, 42, 0.15) 0%,
      rgba(15, 23, 42, 0.45) 55%,
      rgba(15, 23, 42, 0.15) 78%,
      rgba(255, 255, 255, 0.75) 92%,
      #fff 100%
    );
  }

  .hotel-home__hero-content {
    position: relative;
    z-index: 2;
    padding: 0px 16px 0;
  }

  .hotel-home__hero-text {
    display: none;
  }

  .hotel-home__hero-content .hotel-search-wrap--home-mobile {
    padding: 0;
    margin-bottom: -90px;
  }
}

.hotel-home__title-desktop {
  display: inline;
}

.hotel-home__title-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hotel-home__title-desktop {
    display: none;
  }

  .hotel-home__title-mobile {
    display: inline;
  }
}

.hotels-details-property-policies {
  background: #fff;

  overflow: hidden;
  margin-top: 10px;
  border-radius: 0;
}
@media (max-width: 768px) {
  .hotels-details-property-policies {
    margin: 0;
  }
}
.hotels-details-property-policies__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid #eef2f6;
}

.hotels-details-property-policies__header h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);

  font-family: sans-serif;
}

.hotels-details-property-policies__times {
  display: flex;
  gap: 12px;
}

.hotels-details-property-policies__times div {
  display: flex;
  align-items: center;
  gap: 8px;

  background: var(--lux-hotel-gold-light);

  padding: 10px 18px;
  border-radius: 0;

  font-size: 15px;
}

.hotels-details-property-policies__times strong {
  margin-left: 4px;
}

.hotels-details-property-policies__list {
  padding: 24px;
}

.hotels-details-property-policies__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  font-size: 16px;
}

.hotels-details-property-policies__item span {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  display: inline;
}

.hotels-details-property-policies__item svg {
  color: #16a34a;
  margin-top: 2px;
  flex-shrink: 0;
}

.hotels-details-property-policies__view {
  border: none;
  background: none;

  color: var(--lux-hotel-gold);

  font-size: 14px;
  font-weight: 600;

  padding: 0 24px 24px;
  cursor: pointer;

  transition: color 0.2s ease;
}

.hotels-details-property-policies-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hotels-details-property-policies-modal h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 700;
  color: rgb(70, 72, 77);
}

.hotels-details-property-policies-modal__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hotels-details-property-policies-modal__list div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  line-height: 1.6;
}

.hotels-details-property-policies-modal__content {
  line-height: 1.8;
  color: #4b5563;
}

.hotels-details-property-policies-modal__content p {
  margin-bottom: 12px;
  font-weight: 400;
  color: #4b5563;
}

@media (max-width: 768px) {
  .hotels-details-property-policies__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 12px;
  }
  .hotels-details-property-policies__header h3 {
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 18px;

    line-height: 22px;
  }
  .hotels-details-property-policies__list {
    padding: 16px 12px;
  }

  .hotels-details-property-policies__times {
    flex-direction: column;
    width: 100%;
  }

  .hotels-details-property-policies__times div {
    width: 100%;
    justify-content: center;
  }

  .hotels-details-property-policies-modal h4 {
    font-size: 22px;
  }

  .hotels-details-property-policies-modal__list div {
    font-size: 16px;
  }
  .hotels-details-property-policies__view {
    padding: 0 16px 24px;
  }
}

.hotel-room-section {
  padding: 40px 0 10px;
}

.hotels-details-location {
  background: #fff;

  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 0;
}

.hotels-details-location-header {
  padding: 22px 24px;
  border-bottom: 1px solid #eef2f6;
}

.hotels-details-location-headding {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotels-results-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 32px auto;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.hotels-results-loading__spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #e5e7eb;
  border-top-color: #ff7f47;
  border-radius: 50%;
  animation: hotels-results-loading-spin 0.8s linear infinite;
}

.hotels-results-loading__text {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

@keyframes hotels-results-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .hotels-details-location {
    margin: 0;
    border-bottom: 1px solid #e5e7eb;
  }
  .hotels-details-location-header {
    padding: 16px 12px;
  }
  .hotels-details-address-box {
    padding: 16px 12px;
  }
}

.hotel-breadcrumb {
  padding: 20px 16px;
}

.hotel-breadcrumb-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.hotel-breadcrumb-container a {
  color: var(--lux-hotel-gold);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.hotel-breadcrumb-container a:hover {
  color: var(--lux-hotel-gold-dark);
}

.hotel-breadcrumb-container svg {
  color: #b5b5b5;
  flex-shrink: 0;
}

.hotel-breadcrumb-container span {
  color: #444;
  font-weight: 600;
}

.hotels-details-aside-location-card {
  border: 1px solid #d8d8d8;
  border-radius: 16px;
  padding: 16px;
  margin-top: 20px;
}

/* Rating */

.hotels-details-aside-location-rating {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hotels-details-aside-location-rating-box {
  width: 92px;
  height: 72px;
  border-radius: 18px;
  background: #2f58b7;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.hotels-details-aside-location-rating-content {
  flex: 1;
}

.hotels-details-aside-location-rating-content h4 {
  margin: 0;
  color: #2f58b7;
  font-size: 18px;
  font-weight: 700;
}

.hotels-details-aside-location-rating-content span {
  display: block;
  margin-top: 4px;
  color: #666;
  font-size: 15px;
}

.hotels-details-aside-location-review-btn {
  border: none;
  background: transparent;
  color: #0b84ff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Divider */

.hotels-details-aside-location-divider {
  height: 1px;
  background: #ececec;
  margin: 20px 0;
}

/* Location */

.hotels-details-aside-location-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hotels-details-aside-location-map {
  width: 92px;
  height: 70px;
  border-radius: 12px;
  background: #fff7f3;
  color: #ff7f47;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.hotels-details-aside-location-text {
  flex: 1;
}

.hotels-details-aside-location-text h4 {
  margin: 0;
  color: #112e3b;
  font-size: 18px;
  font-weight: 700;
}

.hotels-details-aside-location-text p {
  margin: 6px 0 0;
  color: #666;
  font-size: 15px;
  line-height: 1.5;
}

.hotels-details-aside-location-map-btn {
  border: none;
  background: transparent;
  color: #ff7f47;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Parking */

.hotels-details-aside-location-parking {
  margin-top: 18px;
  background: #f7f7f7;
  border-radius: 12px;
  min-height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #444;
  font-size: 15px;
  font-weight: 500;
}

/* Mobile */

@media (max-width: 768px) {
  .hotels-details-aside-location-card {
    padding: 16px;
  }

  .hotels-details-aside-location-rating-box {
    width: 70px;
    height: 60px;
    font-size: 28px;
  }

  .hotels-details-aside-location-rating-content h4 {
    font-size: 16px;
  }

  .hotels-details-aside-location-rating-content span,
  .hotels-details-aside-location-review-btn,
  .hotels-details-aside-location-map-btn,
  .hotels-details-aside-location-text p {
    font-size: 14px;
  }

  .hotels-details-aside-location-map {
    width: 72px;
    height: 58px;
  }

  .hotels-details-aside-location-text h4 {
    font-size: 16px;
  }

  .hotels-details-aside-location-parking {
    min-height: 52px;
    font-size: 14px;
  }
}

.hotels-details-description-preview {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  display: inline;
}

.hotels-details-read-more-inline {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;

  color: var(--lux-hotel-gold);

  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;

  transition: color 0.2s ease;
}

.hotels-details-read-more-inline:hover {
  text-decoration: underline;
}

.hotels-details-booking-amenities {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}

.hotels-details-booking-amenity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hotels-details-booking-amenity-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af; /* gray like the screenshot */
  flex-shrink: 0;
}

.hotels-details-booking-amenity-text {
  color: #4b5563;
  font-size: 15px;
}

@media (max-width: 768px) {
  .hotel-breadcrumb {
    display: none;
  }
}

/* Desktop */
.hotels-details-desktop-header {
  display: block;
}

.hotels-details-mobile-card {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .hotels-details-content {
    padding: 0;
    gap: 0;
  }
  .hotels-details-desktop-header {
    display: none;
  }

  .hotels-details-mobile-card {
    display: block;
    background: #fff;
    border-radius: 0;

    padding: 20px 16px;
    margin-top: 0;

    border-bottom: 1px solid #e5e7eb;
  }
  .hotels-details-mobile-card .hotels-details-title {
    color: #000;
    font-size: 20px;

    line-height: 24px;
  }

  .hotels-details-stars {
    display: flex;
    gap: 3px;
    color: #f4b400;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .hotels-details-mobile-card .hotels-details-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
  }

  .hotels-details-gallery-section {
    margin-bottom: 0;
  }
}

.hotel-details-mobile-header {
  display: none;
}

@media (max-width: 768px) {
  .hotel-details-mobile-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px;

    background-color: #f6f7f9;
  }

  .hotel-details-mobile-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 999;

    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }

  .hotel-details-mobile-header-back,
  .hotel-details-mobile-header-share {
    /* width: 42px;
    height: 42px; */

    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    flex-shrink: 0;
    background-color: #f6f7f9;
  }

  .hotel-details-mobile-header--sticky .hotel-details-mobile-header-back,
  .hotel-details-mobile-header--sticky .hotel-details-mobile-header-share {
    background: #fff;
  }

  .hotel-details-mobile-header-title {
    flex: 1;

    margin: 0 12px;

    text-align: center;

    font-size: 16px;
    font-weight: 600;

    color: #111827;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .hotel-details-mobile-header--sticky .hotel-details-mobile-header-title {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .hotel-room-section {
    padding: 0;
    margin: 0;
  }
}

.hotels-results-main .hotel-breadcrumb {
  padding: 0 0 20px;
}

.hotels-results-main .hotel-breadcrumb-container {
  width: 100%;
  padding: 0;
}

.hotel-booking-summary-page {
  --hbs-ink: #1a2233;
  --hbs-muted: #6b7280;
  --hbs-border: #e7e9ee;
  --hbs-bg: #f6f7fb;
  --hbs-primary: #ff5722;
  --hbs-primary-dark: #e64a19;
  --hbs-green: #1a9c5e;
  --hbs-green-bg: #e9f8f0;
  --hbs-blue-bg: #eaf2ff;
  --hbs-blue: #2563eb;
  --hbs-radius: 12px;
  background: var(--hbs-bg);
  min-height: 100vh;
  font-family: sans-serif;
  color: var(--hbs-ink);
  padding: 24px 32px 64px;
}

.hotel-booking-summary-topbar {
  max-width: 1300px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.hotel-booking-summary-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.hotel-booking-summary-back-link:hover {
  color: #111827;
}

.hotel-booking-summary-back-link svg {
  color: inherit;
}

.hotel-booking-summary-stepper {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hotel-booking-summary-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hbs-muted);
  font-size: 14px;
  font-weight: 600;
}

.hotel-booking-summary-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #9aa1af;
  font-size: 12px;
}

.hotel-booking-summary-step.is-active .hotel-booking-summary-step-badge {
  background: #ff7f47;
  color: #fff;
}

.hotel-booking-summary-step.is-active .hotel-booking-summary-step-label {
  color: var(--hbs-ink);
}

.hotel-booking-summary-step.is-done .hotel-booking-summary-step-badge {
  background: var(--hbs-green);
  color: #fff;
}

.hotel-booking-summary-step-divider {
  width: 40px;
  height: 1px;
  background: var(--hbs-border);
  margin: 0 12px;
}

.hotel-booking-summary-stepper-mobile {
  display: none;
}

.hotel-booking-summary-layout {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.hotel-booking-summary-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 14px;
}

.hotel-booking-summary-section-header:first-child {
  margin-top: 0;
}

.hotel-booking-summary-section-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hbs-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.hotel-booking-summary-section-header h2 {
  font-size: 24px;
  line-height: 24px;
  color: #000000;
  font-weight: 700;
  margin: 0;
  flex: 1;
  font-family: sans-serif;
}

.hotel-booking-summary-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hbs-green);
  font-weight: 600;
  font-size: 13px;
}

.hotel-booking-summary-card {
  background: #fff;
  padding: 24px;
  box-shadow:
    0 1px 2px rgba(3, 54, 63, 0.4),
    0 -1px 2px rgba(3, 54, 63, 0.04);
  border-radius: 11px;
  margin-bottom: 20px;
}

.hotel-booking-summary-hotel-row {
  display: flex;
  gap: 16px;
}

.hotel-booking-summary-hotel-img {
  width: 150px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0f0f0;
}

.hotel-booking-summary-hotel-img img,
.hotel-booking-summary-room-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotel-booking-summary-hotel-info {
  flex: 1;
  min-width: 0;
}

.hotel-booking-summary-hotel-info h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  font-family: sans-serif;
}
.hotel-booking-summary-hotel-info-subtitle {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.hotel-booking-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.hotel-booking-summary-tag {
  display: flex;
  align-items: center;
  font-size: 11px;
  height: 20px;
  padding: 2px 7px;

  gap: 6px;
  color: rgb(74, 74, 74);
  border-color: rgb(231, 231, 231);
  background-color: rgb(241, 241, 241);
  padding: 5px 10px;
  /* border: 1px solid #e7e7e7; */
  border-radius: 4px;
}

.hotel-booking-summary-tag-green {
  background: var(--hbs-green-bg);
  color: var(--hbs-green);
}

.hotel-booking-summary-tag-blue {
  background: var(--hbs-blue-bg);
  color: var(--hbs-blue);
}

.hotel-booking-summary-tag-orange {
  background: #fff2eb;
  color: #ff7f47;
}

.hotel-booking-summary-urgency {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff2ea;
  color: var(--hbs-primary-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.hotel-booking-summary-stay-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hbs-border);
}

.hotel-booking-summary-stay-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hotel-booking-summary-stay-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hbs-muted);
}

.hotel-booking-summary-stay-value {
  font-weight: 700;
  font-size: 15px;
}

.hotel-booking-summary-stay-sub {
  font-size: 12px;
  color: var(--hbs-muted);
}

.hotel-booking-summary-room-row {
  display: flex;
  gap: 16px;
}

.hotel-booking-summary-room-img {
  width: 150px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0f0f0;
}

.hotel-booking-summary-room-info h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.hotel-booking-summary-room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--hbs-muted);
  margin-bottom: 6px;
}

.hotel-booking-summary-room-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hotel-booking-summary-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: none;
  border: none;

  color: var(--lux-hotel-gold);

  font-weight: 600;
  font-size: 13px;

  cursor: pointer;
  padding: 6px 0 0;

  transition: color 0.2s ease;
}

@media (max-width: 768px) {
  /* --- Room row: same top-right image pattern as hotel row --- */
  .hotel-booking-summary-room-row {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  .hotel-booking-summary-room-img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  .hotel-booking-summary-room-info {
    flex: 1;
    min-width: 0;
  }

  .hotel-booking-summary-room-info h4 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  /* Meta rows: let each pill wrap naturally, tighten spacing */
  .hotel-booking-summary-room-meta {
    gap: 10px 14px;
    font-size: 12px;
    margin-bottom: 8px;
  }

  .hotel-booking-summary-room-meta span {
    gap: 5px;
  }

  .hotel-booking-summary-link-btn {
    font-size: 11px;
  }
}

.hotel-booking-summary-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hotel-booking-summary-block-title h4 {
  margin: 0;
  color: #000;
  font-size: 18px;
  font-weight: 700;
}

.hotel-booking-summary-icon-green {
  color: var(--hbs-green);
}

.hotel-booking-summary-block-title-plain {
  margin: 0 0 14px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
}

.hotel-booking-summary-cancellation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--hbs-green-bg);
  border-radius: 10px;
  padding: 14px 16px;
}

.hotel-booking-summary-cancellation div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.hotel-booking-summary-cancel-ok {
  color: var(--hbs-green);
  font-weight: 600;
}

.hotel-booking-summary-cancel-bad {
  color: #d9534f;
  font-weight: 600;
}

.hotel-booking-summary-policy-text {
  font-size: 12.5px;
  color: var(--hbs-muted);
  line-height: 1.6;
  margin: 0px 0 0;
}

.hotel-booking-summary-rules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.hotel-booking-summary-rule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
  color: var(--hbs-muted);
}

.hotel-booking-summary-rule svg {
  font-size: 16px;
  color: var(--hbs-ink);
  margin-bottom: 2px;
}

.hotel-booking-summary-rule strong {
  color: var(--hbs-ink);
  font-size: 14px;
}

.hotel-booking-summary-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.hotel-booking-summary-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hotel-booking-summary-field-full {
  grid-column: 1 / -1;
}

.hotel-booking-summary-field label {
  font-size: 13px;
  font-weight: 600;
}

.hotel-booking-summary-field label span {
  color: #d9534f;
}

.hotel-booking-summary-field input:not(.country-select-search-input),
.hotel-booking-summary-field textarea,
.hotel-booking-summary-field select {
  height: 52px;
  border: 1px solid var(--hbs-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--hbs-ink);
  background: #fff;
}

.hotel-booking-summary-field textarea {
  min-height: 80px;
  resize: vertical;
}

.hotel-booking-summary-char-count {
  align-self: flex-end;
  font-size: 11px;
  color: var(--hbs-muted);
}

.hotel-booking-summary-title-group {
  display: flex;
  gap: 8px;
}

.hotel-booking-summary-title-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--hbs-border);
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.hotel-booking-summary-title-btn.is-selected {
  background: var(--hbs-ink);
  color: #fff;
  border-color: var(--hbs-ink);
}

.hotel-booking-summary-phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.hotel-booking-summary-phone-group select,
.hotel-booking-summary-phone-group input:not(.country-select-search-input) {
  height: 52px;
  border: 1px solid var(--hbs-border);
  background: #fff;
  font-size: 15px;
  color: var(--hbs-ink);
  transition: all 0.2s ease;
}

.hotel-booking-summary-phone-group select {
  width: 68px;
  min-width: 68px;
  border-radius: 10px 0 0 10px;
  border-right: 0;
  padding: 0 12px;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

.hotel-booking-summary-phone-group input:not(.country-select-search-input) {
  flex: 1;
  border-radius: 0 10px 10px 0;
  padding: 0 16px;
  border-left: 1px solid var(--hbs-border);
}

.hotel-booking-summary-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  color: var(--hbs-ink);
}

.hotel-booking-summary-confirmation-strip {
  margin-top: 20px;
  background: #fff8e8;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.hotel-booking-summary-confirmation-icons {
  display: flex;
  gap: 16px;
  font-weight: 600;
  color: var(--hbs-green);
}

.hotel-booking-summary-confirmation-icons span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- sidebar ---------- */
.hotel-booking-summary-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
}

.hotel-booking-summary-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.hotel-booking-summary-price-label {
  flex: 1;
  font-size: 15px;
  line-height: 1.3;
  color: #222;
  font-weight: 500;
  max-width: 180px;
}

.hotel-booking-summary-price-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.hotel-booking-summary-price-amount {
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.hotel-booking-summary-tax-value {
  font-size: 15px;
  font-weight: 500;
  color: #555;
}

.hotel-booking-summary-divider {
  height: 1px;
  background: var(--hbs-border);
  margin: 14px 0;
}

.hotel-booking-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.hotel-booking-summary-cta {
  display: flex;
  min-width: 216px;

  background: var(--lux-hotel-gold);
  color: var(--lux-hotel-white);

  border: none;
  border-radius: 10px;
  padding: 14px;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;
  margin-top: 6px;

  justify-content: center;

  transition: background 0.25s ease;
}

.hotel-booking-summary-cta:hover:not(:disabled) {
  background: var(--lux-hotel-gold-dark);
}

.hotel-booking-summary-cta:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.hotel-booking-summary-secure-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hbs-border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 14px;
  font-size: 12px;
}

.hotel-booking-summary-secure-box svg {
  color: var(--hbs-green);
  font-size: 18px;
}

.hotel-booking-summary-secure-box strong {
  display: block;
  font-size: 13px;
}

.hotel-booking-summary-secure-box span {
  color: var(--hbs-muted);
}

.hotel-booking-summary-muted {
  font-size: 15px;
  line-height: 1.3;
  color: #222;
  font-weight: 500;

  margin: 0 0 6px;
}

.hotel-booking-summary-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.3;
  color: #222;
  font-weight: 500;

  text-decoration: none;
  margin-bottom: 6px;
}

.hotel-booking-summary-phone:hover {
  color: inherit;
}

.hotel-booking-summary-trust-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hotel-booking-summary-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.hotel-booking-summary-trust-item svg {
  color: var(--hbs-green);
}

.hotel-booking-summary-mobile-bar {
  display: none;
}

@media (max-width: 960px) {
  .hotel-booking-summary-layout {
    grid-template-columns: 1fr;
  }
  .hotel-booking-summary-sidebar {
    position: static;
  }
  .hotel-booking-summary-stay-strip,
  .hotel-booking-summary-rules-grid,
  .hotel-booking-summary-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hotel-booking-summary-hotel-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .hotel-booking-summary-page {
    padding: 14px 14px 96px;
  }

  .hotel-booking-summary-topbar {
    margin-bottom: 18px;
    gap: 10px;
  }

  .hotel-booking-summary-back-link span {
    display: none;
  }

  .hotel-booking-summary-stepper {
    display: none;
  }

  .hotel-booking-summary-stepper-mobile {
    display: block;
    flex: 1;
  }

  .hotel-booking-summary-stepper-mobile-top {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hbs-muted);
    margin-bottom: 6px;
  }

  .hotel-booking-summary-stepper-mobile-label {
    color: var(--hbs-ink);
  }

  .hotel-booking-summary-stepper-mobile-track {
    height: 4px;
    border-radius: 4px;
    background: var(--hbs-border);
    overflow: hidden;
  }

  .hotel-booking-summary-stepper-mobile-fill {
    display: block;
    height: 100%;
    background: var(--hbs-primary);
    border-radius: 4px;
    transition: width 0.2s ease;
  }

  .hotel-booking-summary-section-header {
    margin: 22px 0 12px;
    display: none;
  }

  .hotel-booking-summary-section-header h2 {
    font-size: 17px;
  }

  .hotel-booking-summary-secure span {
    display: none;
  }

  .hotel-booking-summary-card {
    box-shadow: none;
    border-radius: 0;
    border: none;
    padding: 20px;
  }

  .hotel-booking-summary-rules-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 16px;
  }

  .hotel-booking-summary-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hotel-booking-summary-title-btn {
    flex: 1;
    padding: 10px 0;
    text-align: center;
  }

  .hotel-booking-summary-title-group {
    width: 100%;
  }

  .hotel-booking-summary-confirmation-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .hotel-booking-summary-price-card .hotel-booking-summary-cta,
  .hotel-booking-summary-secure-box {
    display: none;
  }
  .hotel-booking-summary-cta {
    display: none;
  }

  .hotel-booking-summary-mobile-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--hbs-border);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  .hotel-booking-summary-mobile-bar-drawer {
    border-bottom: 1px solid var(--hbs-border);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .hotel-booking-summary-mobile-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hotel-booking-summary-mobile-bar-total {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    min-width: 0;
  }

  .hotel-booking-summary-mobile-bar-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--hbs-ink);
  }

  .hotel-booking-summary-mobile-bar-chevron {
    font-size: 11px;
    color: var(--hbs-muted);
    transition: transform 0.2s ease;
  }

  .hotel-booking-summary-mobile-bar-chevron.is-open {
    transform: rotate(180deg);
  }

  .hotel-booking-summary-mobile-bar-sub {
    font-size: 12px;
    color: #ff7f47;
    font-weight: 600;
  }

  .hotel-booking-summary-mobile-bar-cta {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    padding: 13px 26px;
    background: #ff7f47;
    color: #fff;
    border: none;
    border-radius: 10px;
  }
}

@media (max-width: 768px) {
  /* --- Hotel header row: image top-right, info top-left --- */
  .hotel-booking-summary-hotel-row {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  .hotel-booking-summary-hotel-img {
    border-radius: 16px;
    height: 85px;
    object-fit: cover;
    overflow: hidden;
    width: 85px;
  }

  .hotel-booking-summary-hotel-info h3 {
    font-size: 20px;
    line-height: 1.25;
  }

  .hotel-booking-summary-hotel-info-subtitle {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    margin-top: 4px;
  }

  .hotel-booking-summary-hotel-info-subtitle .hotels-details-dot {
    display: none;
  }

  .hotel-booking-summary-tags {
    margin-top: 10px;
  }

  /* --- Stay strip: 2 columns + centered "night" pill + full-width guests --- */
  .hotel-booking-summary-stay-strip {
    position: relative;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "in out"
      "guests guests";
    row-gap: 22px;
    column-gap: 12px;
  }

  .hotel-booking-summary-stay-item:nth-child(1) {
    grid-area: in;
  }

  .hotel-booking-summary-stay-item:nth-child(3) {
    grid-area: out;
    align-items: flex-end;
    text-align: right;
  }

  .hotel-booking-summary-stay-item:nth-child(4) {
    grid-area: guests;
  }

  /* Duration item becomes a floating pill between the two dates */
  .hotel-booking-summary-stay-item:nth-child(2) {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    background: #fff;
    border: 1px solid var(--hbs-border, #e5e7eb);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .hotel-booking-summary-stay-item:nth-child(2)
    .hotel-booking-summary-stay-label {
    display: none;
  }

  .hotel-booking-summary-stay-item:nth-child(2)
    .hotel-booking-summary-stay-value {
    font-size: 11px;
    font-weight: 600;
  }
}

@media (max-width: 560px) {
  .hotel-booking-summary-page {
    padding: 12px 0px 96px;
  }
  .hotel-booking-summary-stay-strip,
  .hotel-booking-summary-rules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hotel-booking-summary-error {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  color: #cf1322;
  font-size: 14px;
  font-weight: 500;
}

.hotel-booking-summary-error-text {
  display: block;
  margin-top: 0px;
  color: #dc2626;
  font-size: 11px;
  font-weight: 500;
}

.hotel-booking-summary-field input.error,
.hotel-booking-summary-field textarea.error,
.hotel-booking-summary-phone-group.error {
  border-color: #dc2626;
}

.hotel-booking-mobile-header {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ececec;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.hotel-booking-mobile-header-back {
  width: 56px;
  height: 64px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hotel-booking-mobile-header-back:hover {
  color: #111;
}

.hotel-booking-mobile-header h1 {
  margin: 0;

  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 18px;
  font-family: sans-serif;
}

@media (min-width: 768px) {
  .hotel-booking-mobile-header {
    display: none;
  }
}

@media (max-width: 768px) {
  .hotel-booking-summary-main {
    display: flex;
    flex-direction: column;
  }
  .hbs-order-1 {
    order: 1;
  }
  .hbs-order-2 {
    order: 2;
  }
  .hbs-order-3 {
    order: 3;
  }
  .hbs-order-4 {
    order: 4;
  }
  .hbs-order-5 {
    order: 5;
  }
  .hbs-order-6 {
    order: 6;
  }
  .hbs-order-7 {
    order: 7;
  }

  .hbs-mobile-only {
    display: block; /* show the inline price card on mobile */
  }

  .hotel-booking-summary-sidebar {
    display: none; /* hides the desktop price card + help card block on mobile */
  }
}

@media (min-width: 769px) {
  .hbs-mobile-only {
    display: none; /* hide the inline mobile price card on desktop */
  }
}

.hotel-home-faq-section {
  padding: 40px 16px;
  background: #fff;
}

.hotel-home-faq-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #000;
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
}

.hotel-home-faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hotel-home-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.hotel-home-faq-question {
  width: 100%;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  color: #000;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
}

.hotel-home-faq-icon {
  color: #555;
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

.hotel-home-faq-icon-open {
  transform: rotate(180deg);
}

/* Animated Content */

.hotel-home-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hotel-home-faq-answer-open {
  max-height: 200px;
}

.hotel-home-faq-answer p {
  padding: 14px 16px;
  font-size: 16px;
  color: #585c66;
  background: #f9fafb;
  font-weight: 400;
  word-break: break-word;
  margin: 0 10px 10px;
  font-family: sans-serif;
}

/* Mobile */

@media (max-width: 768px) {
  .hotel-home-faq-title {
    font-size: 24px;
    text-align: start;
    font-weight: 700;
  }

  .hotel-home-faq-question {
    margin-right: 6px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.5;
    gap: 15px;
  }

  .hotel-home-faq-answer {
    padding: 0 18px;
  }

  .hotel-home-faq-answer-open {
    padding: 0 0px 18px;
  }

  .hotel-home-faq-answer p {
    font-size: 15px;
    line-height: 1.7;
  }

  .hotel-home-faq-icon {
    font-size: 15px;
  }
}

.hotel-home-why-book-section {
  padding: 70px 16px;
  background: #f7f8fc;
}

.hotel-home-why-book-heading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #111;
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
}

.hotel-home-why-book-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
}

.hotel-home-why-book-item {
  text-align: center;
  padding: 10px;
  position: relative;
}

.hotel-home-why-book-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
  height: 150px;
  background: #e3e5ea;
}

.hotel-home-why-book-icon {
  color: #b88a3b;
  margin-bottom: 12px;
  font-family: sans-serif;
}

.hotel-home-why-book-item h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  font-family: sans-serif;
}

.hotel-home-why-book-item p {
  color: #4b5563;
  font-size: 17px;
  font-family: sans-serif;
}

@media (max-width: 992px) {
  .hotel-home-why-book-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotel-home-why-book-item::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .hotel-home-why-book-section {
    padding: 50px 16px;
  }

  .hotel-home-why-book-heading {
    font-size: 24px;
    text-align: start;
    font-weight: 700;
  }
}

.hotel-home-hotels-skeleton {
  pointer-events: none;
}

.hotel-home-hotels-image-skeleton {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  background: #ececec;
}

.hotel-home-hotels-title-skeleton {
  width: 70%;
  height: 24px;
  margin: 18px 0;
  border-radius: 8px;
  background: #ececec;
}

.hotel-home-hotels-line {
  width: 90%;
  height: 14px;
  margin-bottom: 14px;
  border-radius: 6px;
  background: #ececec;
}

.hotel-home-hotels-line.short {
  width: 65%;
}

.hotel-home-hotels-btn-skeleton {
  width: 130px;
  height: 46px;
  margin-top: 24px;
  border-radius: 12px;
  background: #ececec;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.75),
    transparent
  );
  animation: hotelShimmer 1.2s infinite;
}

@keyframes hotelShimmer {
  100% {
    transform: translateX(100%);
  }
}

.hotel-home-resorts-skeleton {
  pointer-events: none;
}

.hotel-home-resorts-image-skeleton {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  background: #ececec;
}

.hotel-home-resorts-title-skeleton {
  width: 85%;
  height: 20px;
  margin-top: 16px;
  border-radius: 6px;
  background: #ececec;
}

.hotel-home-resorts-location-skeleton {
  width: 45%;
  height: 14px;
  margin-top: 12px;
  border-radius: 6px;
  background: #ececec;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  animation: resortShimmer 1.2s infinite;
}

@keyframes resortShimmer {
  100% {
    transform: translateX(100%);
  }
}

.hotel-home-villas-skeleton {
  pointer-events: none;
}

.hotel-home-villas-image-skeleton {
  width: 100%;
  aspect-ratio: 1.45;
  border-radius: 22px;
  background: #ececec;
  position: relative;
  overflow: hidden;
}

.hotel-home-villas-label-skeleton {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 45%;
  height: 22px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.75),
    transparent
  );
  animation: hotel-home-villa-shimmer 1.2s infinite;
}

@keyframes hotel-home-villa-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.hotel-search__box--error {
  border: 1px solid #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.08);
}

.hotel-search__box--error input {
  color: #111827;
}

.hotel-search__error {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #ef4444;
  line-height: 1.3;
}

.hotels-results-top .hotel-search-wrap {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .hotel-search-wrap--home-mobile {
    padding: 0;
  }
}

.hotel-booking-summary-header {
  width: 100%;
  background: #fff;
  padding: 20px 16px;
}

.hotel-booking-summary-header__container {
  max-width: 1300px;
  margin: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hotel-booking-summary-header__logo img {
  display: block;

  object-fit: contain;
}

.hotel-booking-summary-header__contact {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hotel-booking-summary-header__item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.hotel-booking-summary-header__item svg {
  font-size: 18px;
}

.hotel-booking-summary-header__item:hover {
  color: #333;
}

.hotel-booking-summary-header__item:hover svg {
  color: #333;
}

/* Mobile */

@media (max-width: 768px) {
  .hotel-booking-summary-header__contact {
    gap: 12px;
  }

  .hotel-booking-summary-header__item {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f5f5;
    justify-content: center;
    gap: 0;
  }

  .hotel-booking-summary-header__item span {
    display: none;
  }

  .hotel-booking-summary-header__item svg {
    width: 18px;
    height: 18px;
  }
}

.hotel-home-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 12px 28px;
  background: #ff7f47;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hotel-home-hero__btn:hover {
  background: #ff6a2b;
}

@media (max-width: 768px) {
  .hotel-home-hero__btn {
    margin-top: 22px;
    padding: 10px 22px;
    font-size: 14px;
  }
}

.hotel-home-explore-experience {
  --hhee-bg: #ffffff;
  --hhee-surface: #faf6f4;
  --hhee-primary: #ff7f47;
  --hhee-primary-soft: #ffede3;
  --hhee-text: #12131a;
  --hhee-muted: #6b7280;
  --hhee-border: #efe3dc;

  background: var(--hhee-bg);
  padding: 20px 16px;
  font-family: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--hhee-text);
}

.hotel-home-explore-experience__inner {
  max-width: 1300px;
  margin: 0 auto;
}

.hotel-home-explore-experience__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
  font-family:
    Georgia,
    Times New Roman,
    Times,
    serif;
  line-height: 1.2;
}

.hotel-home-explore-experience__subtitle {
  font-size: 15px;
  color: #555;
  margin-bottom: 35px;
}

.hotel-home-explore-experience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hotel-home-explore-experience__card {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff7f3;
  border: 1px solid #ffe1d6;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.hotel-home-explore-experience__card:hover {
  border-color: #ff7f50;
  box-shadow: 0 6px 16px rgba(255, 127, 80, 0.2);
}

.hotel-home-explore-experience__card:focus-visible {
  outline: 2px solid var(--hhee-primary);
  outline-offset: 2px;
}

.hotel-home-explore-experience__card-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hhee-primary-soft);
  color: var(--hhee-primary);
}

.hotel-home-explore-experience__card-title {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
}

@media (max-width: 1080px) {
  .hotel-home-explore-experience__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .hotel-home-explore-experience {
    padding: 20px 16px;
  }
  .hotel-home-explore-experience__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hotel-home-explore-experience__card {
    padding: 14px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hotel-home-explore-experience__card {
    transition: none;
  }
}

.hotel-search-skeleton {
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr 180px;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  align-items: end;
}

.hotel-search-skeleton__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.hotel-search-skeleton__label {
  width: 90px;
  height: 12px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.hotel-search-skeleton__text {
  width: 100%;
  height: 54px;
  border-radius: 16px;
}

.hotel-search-skeleton__btn {
  width: 100%;
  height: 54px;
  border-radius: 16px;
}

.hotel-search-skeleton__icon,
.hotel-search-skeleton__divider {
  display: none;
}

/* Mobile */
@media (max-width: 767px) {
  .hotel-search-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
    border-radius: 20px;
    overflow: hidden;
  }

  .hotel-search-skeleton__field {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
  }

  .hotel-search-skeleton__content {
    flex: 1;
  }

  .hotel-search-skeleton__icon {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .hotel-search-skeleton__label {
    width: 110px;
    height: 12px;
    margin-bottom: 8px;
  }

  .hotel-search-skeleton__text {
    width: 75%;
    height: 16px;
    border-radius: 6px;
  }

  .hotel-search-skeleton__divider {
    display: block;
    height: 1px;
    background: #ececec;
    margin: 0 20px;
  }

  .hotel-search-skeleton__btn {
    height: 50px;
    margin: 16px 20px 20px;
    border-radius: 14px;
  }
}

.hotel-search-skeleton-shimmer {
  background: linear-gradient(90deg, #f3f3f3 25%, #e7e7e7 50%, #f3f3f3 75%);
  background-size: 200% 100%;
  animation: hotel-search-shimmer 1.4s linear infinite;
}

@keyframes hotel-search-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.hotel-booking-summary-hotel-details {
  margin-bottom: 20px;
}

.hotel-booking-summary-overview-title {
  margin-bottom: 15px;
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-family: sans-serif;
}

.hotel-booking-summary-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #c7d0d9;
  border-radius: 9px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hotel-booking-summary-overview-grid {
    grid-template-columns: 280px 1fr;
  }
}

/* ---------------- Left column: dates ---------------- */

.hotel-booking-summary-overview-dates {
  padding: 20px;
  border-right: 1px solid #c7d0d9;
}

.hotel-booking-summary-overview-dates-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: #333;
}

.hotel-booking-summary-overview-date-box {
  background: var(--lux-hotel-gold-light);
  padding: 10px 14px;
  border-radius: 10px;
  text-align: center;
}

.hotel-booking-summary-overview-date-tag {
  font-size: 12px;
  color: var(--lux-hotel-gold);
}

.hotel-booking-summary-overview-date-value {
  font-size: 14px;
  margin: 0;
}

.hotel-booking-summary-overview-date-arrow {
  text-align: center;
  color: #cbd5e1;
  font-size: 15px;
  padding: 6px 0;
}

/* ---------------- Right column: details ---------------- */

.hotel-booking-summary-overview-details {
  padding: 20px;
}

.hotel-booking-summary-overview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 20px;
}

.hotel-booking-summary-overview-meta-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.hotel-booking-summary-overview-meta-value {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.hotel-booking-summary-overview-meta-sub {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}

.hotel-booking-summary-overview-hotel-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.hotel-booking-summary-overview-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
}

.hotel-booking-summary-overview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hotel-booking-summary-overview-star {
  color: #666;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.hotel-booking-summary-overview-star::after {
  content: "•";
  font-size: 18px;
  line-height: 1;
  color: #b3b3b3;
  margin-left: 10px;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
}

.hotel-booking-summary-overview-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #666;
  min-width: 0;
}

.hotel-booking-summary-overview-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- Room card ---------------- */

.hotel-booking-summary-overview-room-card {
  display: flex;
  gap: 14px;
  border: 1px solid #c7d0d9;
  border-radius: 12px;
  padding: 12px;
}

.hotel-booking-summary-overview-room-image {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.hotel-booking-summary-overview-room-image-fallback {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: #fdeee3;
  flex-shrink: 0;
}

.hotel-booking-summary-overview-room-info {
  min-width: 0;
}

.hotel-booking-summary-overview-room-name {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 6px;
}

.hotel-booking-summary-overview-room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.hotel-booking-summary-overview-room-tag {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hotel-booking-summary-overview-room-price {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.hotel-booking-summary-overview-room-price-suffix {
  font-weight: 400;
  font-size: 12px;
  color: #94a3b8;
}

.hotel-booking-summary-overview-view-details {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  background: none;
  border: none;
  padding: 0;

  color: var(--lux-hotel-gold);

  font-weight: 700;
  font-size: 12px;

  cursor: pointer;

  transition: color 0.2s ease;
}

.hotel-booking-summary-hero-wrapper * {
  box-sizing: border-box;
}

.hotel-booking-summary-hero-wrapper {
  padding: 20px 0;
}

.hotel-booking-summary-hero-title {
  flex: 1 1;
  min-width: 0;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 20px;
  font-family: sans-serif;
}

@media (max-width: 640px) {
  .hotel-booking-summary-hero-title {
    font-size: 20px;
  }
}

.hotel-booking-summary-hero-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .hotel-booking-summary-hero-wrapper {
    padding: 20px 20px;
  }
  .hotel-booking-summary-hero-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotel-booking-summary-hero-image-tile:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .hotel-booking-summary-hero-image-tile:first-child {
    grid-column: auto;
  }
}

.hotel-booking-summary-hero-image-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  border: none;
}

.hotel-booking-summary-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotel-booking-summary-hero-photo-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}

.hotel-search__submit:disabled,
.hotel-search-home-m__submit:disabled,
.hotel-search-m__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.hotel-search__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hotel-search-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes hotel-search-spin {
  to {
    transform: rotate(360deg);
  }
}

.hotel-booking-summary-success-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
  padding: 16px;
}

.hotel-booking-summary-success-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: hotel-booking-summary-success-modal-pop 0.25s ease-out;
}

@keyframes hotel-booking-summary-success-modal-pop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.hotel-booking-summary-success-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #888;
}
.hotel-booking-summary-success-modal-close:hover {
  color: #333;
}

.hotel-booking-summary-success-modal-icon {
  margin-bottom: 12px;
  color: #16a34a;
}

.hotel-booking-summary-success-modal-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111;
  font-family: sans-serif;
}

.hotel-booking-summary-success-modal-subtitle {
  color: #555;
  margin-bottom: 20px;
  font-size: 14px;
}

.hotel-booking-summary-success-modal-details {
  text-align: left;
  background: #f9fafb;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.hotel-booking-summary-success-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.hotel-booking-summary-success-modal-row:last-child {
  border-bottom: none;
}

.hotel-booking-summary-success-modal-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
}

.hotel-booking-summary-success-modal-row-value {
  font-weight: 600;
  color: #111;
  text-align: right;
}

.hotel-booking-summary-success-modal-amount {
  color: #16a34a;
}

.hotel-booking-summary-success-modal-actions {
  display: flex;
  gap: 10px;
}

.hotel-booking-summary-success-modal-btn-primary,
.hotel-booking-summary-success-modal-btn-secondary {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.hotel-booking-summary-success-modal-btn-primary {
  background: #b88a3b;
  color: #fff;
}
.hotel-booking-summary-success-modal-btn-primary:hover {
  background: #b88a3b;
}

.hotel-booking-summary-success-modal-btn-secondary {
  background: #eee;
  color: #333;
}
.hotel-booking-summary-success-modal-btn-secondary:hover {
  background: #e2e2e2;
}

@media (max-width: 480px) {
  .hotel-booking-summary-success-modal-actions {
    flex-direction: column;
  }
}

.hotels-results-grid__ad {
  width: 100%;
  margin: 0px 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.hotel-booking-summary-overview-room-tax {
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

@media (max-width: 640px) {
  .hotel-home-villas-nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .hotel-home-why-book-item p {
    font-size: 15px;
  }
}

/* ========================================
   Luxury Hotel Header
======================================== */

.lux-hotel-header {
  width: 100%;
  height: 70px;

  background: #ffffff;
  border-bottom: 1px solid #eeeeee;

  position: relative;
  z-index: 999;

  display: flex;
  align-items: center;
}

.lux-hotel-header--sticky {
  position: sticky;
  top: 0;
}

.lux-hotel-header-container {
  width: 100%;
  height: 100%;

  padding: 0 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ========================================
   Logo
======================================== */

.lux-hotel-header-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.lux-hotel-header-logo-img {
  width: auto;
  height: 48px;
  object-fit: contain;
}

/* ========================================
   Right Actions
======================================== */

.lux-hotel-header-actions {
  display: flex;
  align-items: center;
  gap: 34px;
}

/* Phone */

.lux-hotel-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  color: #171717;
  text-decoration: none;

  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.3px;

  white-space: nowrap;

  transition: opacity 0.2s ease;
}

.lux-hotel-header-phone svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.lux-hotel-header-phone:hover {
  color: #171717;
}

/* Sign In */

.lux-hotel-header-signin {
  min-width: 80px;
  height: 35px;

  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 1px solid #222222;
  border-radius: 0;

  color: #111111;

  font-family: inherit;
  font-size: 16px;
  font-weight: 500;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.lux-hotel-header-signin:hover {
  background: #171717;
  color: #ffffff;
}

/* ========================================
   Mobile Actions
======================================== */

.lux-hotel-header-mobile-actions {
  display: none;
  align-items: center;
  gap: 12px;
}

.lux-hotel-header-mobile-signin {
  border: 0;
  background: transparent;

  color: #b88a3b;
  font-size: 15px;
  font-weight: 400;

  cursor: pointer;
}

.lux-hotel-header-menu-btn {
  width: 45px;
  height: 45px;

  border: 0;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #b88a3b;
  cursor: pointer;
}

.lux-hotel-header-menu-btn svg {
  width: 28px;
  height: 28px;
}

/* ========================================
   Mobile Menu
======================================== */

.lux-hotel-header-mobile-menu {
  display: none;

  position: absolute;
  top: 100%;
  left: 0;

  width: 100%;

  background: #ffffff;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.lux-hotel-header-mobile-menu-open {
  display: block;
}

.lux-hotel-header-mobile-nav {
  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lux-hotel-header-mobile-item {
  min-height: 52px;

  display: flex;
  align-items: center;
  gap: 13px;

  color: #171717;
  text-decoration: none;

  font-size: 16px;

  border-bottom: 1px solid #eeeeee;
}

.lux-hotel-header-mobile-item svg {
  width: 22px;
  height: 22px;
}

.lux-hotel-header-mobile-login {
  width: 100%;
  height: 46px;

  margin-top: 15px;

  background: #ffffff;
  border: 1px solid #222222;

  color: #111111;

  font-size: 16px;
  font-weight: 500;

  cursor: pointer;
}

/* ========================================
   Responsive
======================================== */

@media (max-width: 900px) {
  .lux-hotel-header {
    height: 60px;
    background: rgb(246, 245, 245);
  }

  .lux-hotel-header-container {
    padding: 0 20px;
  }

  .lux-hotel-header-actions {
    display: none;
  }

  .lux-hotel-header-mobile-actions {
    display: flex;
  }

  .lux-hotel-header-logo-img {
    height: 42px;
  }
}

@media (max-width: 480px) {
  .lux-hotel-header-container {
    padding: 0 14px;
  }

  .lux-hotel-header-logo-img {
    height: 38px;
  }

  .lux-hotel-header-mobile-signin {
    font-size: 14px;
  }
}

/* ===================================
   LUXURY HOTEL HERO
=================================== */

.lux-hotel-hero {
  position: relative;
  z-index: 10;

  width: 100%;
  min-height: 450px;

  background-image: url("/assets/images/hotel/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;

  margin-top: 0;
}

/* Dark overlay */
.lux-hotel-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Main container */
.lux-hotel-hero-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 70px 16px 0px;

  position: relative;
  z-index: 2;
}

/* =========================================
   LUXURY HOTEL HERO CONTENT
========================================= */

.lux-hotel-hero-content {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto 42px;
  padding: 0 24px;

  text-align: center;
  color: #ffffff;
}

/* Luxury editorial heading */
.lux-hotel-hero-title {
  margin: 0 auto 18px;

  max-width: 1000px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.05;
  font-weight: 400;

  letter-spacing: -1.5px;

  color: #ffffff;

  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

/* Supporting description */
.lux-hotel-hero-description {
  max-width: 780px;
  margin: 0 auto;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;

  letter-spacing: 0.15px;

  color: rgba(255, 255, 255, 0.92);

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {
  .lux-hotel-hero-content {
    max-width: 800px;
    margin-bottom: 34px;
  }

  .lux-hotel-hero-title {
    font-size: 48px;
    line-height: 1.08;
  }

  .lux-hotel-hero-description {
    max-width: 650px;
    font-size: 15px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
  .lux-hotel-hero-content {
    padding: 0 18px;
    margin-bottom: 28px;
  }

  .lux-hotel-hero-title {
    margin-bottom: 14px;

    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -0.8px;
  }

  .lux-hotel-hero-description {
    max-width: 340px;

    font-size: 14px;
    line-height: 1.5;
  }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {
  .lux-hotel-hero-title {
    font-size: 32px;
  }

  .lux-hotel-hero-description {
    font-size: 13px;
  }
}

/* Existing search component */
.lux-hotel-hero-search {
  width: 100%;
  position: relative;
  z-index: 3;
}

/* ==========================================
   ALXTRIP LUXURY HOTELS FOOTER
========================================== */

.lux-hotel-footer {
  width: 100%;
  background: #11110f;
  color: #ffffff;
  padding: 60px 16px 0;
}

.lux-hotel-footer-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* ==========================================
   LOGO
========================================== */

.lux-hotel-footer-brand {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.lux-hotel-footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.lux-hotel-footer-logo-img {
  width: auto;
  height: 50px;
  object-fit: contain;
  display: block;
}

.lux-hotel-footer-logo {
  display: inline-block;

  color: #ffffff;

  font-size: 34px;
  line-height: 1;
  font-weight: 700;

  text-decoration: none;
}

.lux-hotel-footer-logo span {
  color: #b88a3b;
}

.lux-hotel-footer-brand p {
  margin: 7px 0 0;

  color: #b88a3b;

  font-size: 9px;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
}

/* ==========================================
   GRID
========================================== */

.lux-hotel-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 0.55fr;
  gap: 80px;
}

/* ==========================================
   COMMON HEADING
========================================== */

.lux-hotel-footer-heading,
.lux-hotel-footer-contact h4,
.lux-hotel-footer-support h4 {
  margin: 0;

  color: #858585;

  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;

  text-transform: uppercase;
}

/* ==========================================
   SUBSCRIBE
========================================== */

.lux-hotel-footer-subscribe {
  display: flex;
  align-items: flex-end;

  max-width: 680px;
  margin-top: 24px;
  gap: 20px;
}

.lux-hotel-footer-subscribe input {
  flex: 1;

  height: 52px;

  padding: 0 0 5px;

  border: none;
  border-bottom: 1px solid #a8a8a8;

  outline: none;

  background: transparent;
  color: #ffffff;

  font-size: 18px;
}

.lux-hotel-footer-subscribe input::placeholder {
  color: #858585;
}

.lux-hotel-footer-subscribe button {
  min-width: 180px;
  height: 52px;

  padding: 0 25px;

  border: none;

  background: #b88a3b;
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.lux-hotel-footer-subscribe button:hover {
  background: #9f752f;
}

/* ==========================================
   CONTACT
========================================== */

.lux-hotel-footer-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;

  margin-top: 35px;
}

.lux-hotel-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lux-hotel-footer-contact a,
.lux-hotel-footer-support a {
  display: inline-block;

  margin-top: 8px;

  color: #ffffff;

  font-size: 16px;
  line-height: 25px;

  text-decoration: none;

  transition: color 0.2s ease;
}

.lux-hotel-footer-contact a + a {
  margin-top: 22px;
}

.lux-hotel-footer-support {
  margin-top: 32px;
}

/* ==========================================
   QUICK LINKS
========================================== */

.lux-hotel-footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 45px;

  margin-top: 15px;
}

.lux-hotel-footer-links-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 14px;
}

.lux-hotel-footer-links-grid a {
  color: #ffffff;
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* ==========================================
   SOCIAL MEDIA
========================================== */

.lux-hotel-footer-socials {
  display: flex;
  align-items: center;

  gap: 22px;

  margin-top: 18px;
}

.lux-hotel-footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size: 20px;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* ==========================================
   BOTTOM
========================================== */

.lux-hotel-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 25px 0;
}

.lux-hotel-footer-bottom p {
  margin: 0;

  color: #858585;

  font-size: 13px;
  text-align: center;
}

.lux-hotel-footer-bottom > div {
  display: flex;
  align-items: center;
  gap: 25px;
}

.lux-hotel-footer-bottom a {
  color: #858585;

  font-size: 13px;

  text-decoration: none;

  transition: color 0.2s ease;
}

.lux-hotel-footer-bottom a:hover {
  color: #b88a3b;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1200px) {
  .lux-hotel-footer-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 55px;
  }

  .lux-hotel-footer-social-section {
    grid-column: 1 / -1;
  }
}

/* ==========================================
   MOBILE / TABLET
========================================== */

@media (max-width: 768px) {
  .lux-hotel-footer {
    padding-top: 45px;
  }

  .lux-hotel-footer-brand {
    margin-bottom: 40px;
  }

  .lux-hotel-footer-logo {
    font-size: 30px;
  }

  .lux-hotel-footer-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .lux-hotel-footer-social-section {
    grid-column: auto;
  }

  .lux-hotel-footer-subscribe {
    max-width: 100%;
  }

  .lux-hotel-footer-contact-grid {
    gap: 25px;
  }

  .lux-hotel-footer-links-grid {
    gap: 30px;
  }

  .lux-hotel-footer-bottom {
    flex-direction: column;
    align-items: flex-start;

    margin-top: 40px;
  }
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 520px) {
  .lux-hotel-footer-subscribe {
    flex-direction: column;
    align-items: stretch;

    gap: 16px;
  }

  .lux-hotel-footer-subscribe input {
    width: 100%;
  }

  .lux-hotel-footer-subscribe button {
    width: 100%;
    min-width: 0;
  }

  .lux-hotel-footer-contact-grid {
    grid-template-columns: 1fr;
  }

  .lux-hotel-footer-email {
    margin-top: 10px;
  }

  .lux-hotel-footer-links-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .lux-hotel-footer-socials {
    flex-wrap: wrap;
  }

  .lux-hotel-footer-bottom > div {
    flex-wrap: wrap;
    gap: 15px;
  }
}

/* =====================================
   LUXURY HOTEL FAQ
===================================== */

.lux-hotel-faq {
  width: 100%;

  padding: 40px 16px;
}

.lux-hotel-faq-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* =====================================
   TITLE
===================================== */

.lux-hotel-faq-title {
  margin: 0 0 35px;

  color: #171b20;

  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  font-family: sans-serif;
}

/* =====================================
   GRID
===================================== */

.lux-hotel-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

/* =====================================
   FAQ ITEM
===================================== */

.lux-hotel-faq-item {
  width: 100%;
  border-bottom: 1px solid #d7d7d7;
}

/* =====================================
   QUESTION
===================================== */

.lux-hotel-faq-question {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 20px 8px 10px 0;

  border: none;
  outline: none;

  background: transparent;

  color: #171b20;

  font-family: inherit;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;
}

.lux-hotel-faq-question span {
  flex: 1;
}

/* =====================================
   ARROW
===================================== */

.lux-hotel-faq-icon {
  flex-shrink: 0;

  width: 18px;
  height: 18px;

  color: #777777;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

/* =====================================
   ANSWER ANIMATION
===================================== */

.lux-hotel-faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;

  transition: grid-template-rows 0.3s ease;
}

.lux-hotel-faq-item--active .lux-hotel-faq-answer-wrapper {
  grid-template-rows: 1fr;
}

.lux-hotel-faq-answer {
  overflow: hidden;
}

.lux-hotel-faq-answer p {
  margin: 0;
  padding: 0 45px 22px 0;

  color: #606060;

  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
}

/* =====================================
   TABLET
===================================== */

@media (max-width: 1024px) {
  .lux-hotel-faq-title {
    font-size: 30px;
  }

  .lux-hotel-faq-question {
    font-size: 16px;
  }
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 768px) {
  .lux-hotel-faq-title {
    margin-bottom: 20px;

    font-size: 26px;
  }

  .lux-hotel-faq-grid {
    grid-template-columns: 1fr;
  }

  .lux-hotel-faq-question {
    min-height: 70px;

    padding: 17px 5px 17px 0;

    font-size: 16px;
    line-height: 23px;
  }

  .lux-hotel-faq-answer p {
    padding: 0 25px 20px 0;

    font-size: 14px;
    line-height: 1.65;
  }
}

/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width: 480px) {
  .lux-hotel-faq-title {
    font-size: 24px;
  }

  .lux-hotel-faq-question {
    font-size: 15px;
  }
}

/* =========================================
   FOOTER DESTINATIONS
========================================= */

.lux-hotel-footer-destinations {
  width: 100%;
  margin-top: 55px;

  border-top: 1px solid #3d3d3a;
  border-bottom: 1px solid #3d3d3a;
}

/* Header */
.lux-hotel-footer-destinations-header {
  all: unset;

  box-sizing: border-box;

  width: 100%;
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  cursor: pointer;
}

.lux-hotel-footer-destinations-header span {
  color: #858585;

  font-size: 14px;
  line-height: 20px;
  font-weight: 600;

  letter-spacing: 0.3px;

  text-transform: uppercase;
}

/* Plus / Minus */
.lux-hotel-footer-destinations-icon {
  flex-shrink: 0;

  width: 19px;
  height: 19px;

  color: #ffffff;
}

/* =========================================
   ACCORDION
========================================= */

.lux-hotel-footer-destinations-content {
  display: grid;
  grid-template-rows: 0fr;

  transition: grid-template-rows 0.35s ease;
}

.lux-hotel-footer-destinations--open .lux-hotel-footer-destinations-content {
  grid-template-rows: 1fr;
}

.lux-hotel-footer-destinations-inner {
  overflow: hidden;
}

/* =========================================
   DESTINATION LINKS
========================================= */

.lux-hotel-footer-destinations-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  column-gap: 60px;
  row-gap: 25px;

  padding: 0 30px 45px;
}

.lux-hotel-footer-destinations-grid a {
  color: #ffffff;

  font-size: 15px;
  line-height: 22px;
  font-weight: 400;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* ========================================
   FOOTER NEWSLETTER OTP
======================================== */

.lux-hotel-footer-newsletter {
  width: 100%;
}

.lux-hotel-footer-newsletter-form {
  width: 100%;
}

/* OTP wrapper */
.lux-hotel-footer-otp-wrapper {
  margin-top: 12px;
  width: 100%;
}

/* OTP input + resend */
.lux-hotel-footer-otp-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* OTP input */
.lux-hotel-footer-otp-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 3px;
  outline: none;
  transition: border-color 0.25s ease;
}

.lux-hotel-footer-otp-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: normal;
}

.lux-hotel-footer-otp-input:focus {
  border-color: #b88a3b;
}

/* Resend button */
.lux-hotel-footer-resend {
  border: none;
  background: transparent;
  color: #b88a3b;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.lux-hotel-footer-resend:hover:not(:disabled) {
  text-decoration: underline;
}

.lux-hotel-footer-resend:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* OTP information */
.lux-hotel-footer-otp-info {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.lux-hotel-footer-otp-info strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* Error */
.lux-hotel-footer-newsletter-error {
  margin: 10px 0 0;
  color: #ff6b6b;
  font-size: 13px;
  line-height: 1.4;
}

/* Success */
.lux-hotel-footer-newsletter-success {
  margin: 10px 0 0;
  color: #b88a3b;
  font-size: 13px;
  line-height: 1.4;
}

/* Disabled states */
.lux-hotel-footer-subscribe input:disabled,
.lux-hotel-footer-otp-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.lux-hotel-footer-subscribe button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Mobile */
@media (max-width: 576px) {
  .lux-hotel-footer-otp-row {
    gap: 10px;
  }

  .lux-hotel-footer-otp-input {
    min-width: 0;
  }

  .lux-hotel-footer-resend {
    font-size: 12px;
  }
}

/* ==========================================
   EXPLORE BY EXPERIENCE
========================================== */

.lux-hotel-experience {
  width: 100%;
  overflow: hidden;
  background: rgb(246, 245, 245);
  padding: 40px 16px;
}

.lux-hotel-experience-container {
  width: 100%;
  max-width: 1300px;

  margin: 0 auto;
}

/* ==========================================
   HEADING
========================================== */

.lux-hotel-experience-heading {
  margin-bottom: 32px;
}

.lux-hotel-experience-heading h2 {
  margin: 0;
  color: #171b20;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 700;
  font-family: sans-serif;
}

.lux-hotel-experience-heading p {
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 18px;
  line-height: 1.7;
  max-width: 620px;
}

/* ==========================================
   SLIDER
========================================== */

.lux-hotel-experience-slider {
  position: relative;

  margin-top: 20px;
}

/* ==========================================
   SCROLL
========================================== */

.lux-hotel-experience-scroll {
  display: flex;
  align-items: stretch;

  width: 100%;

  overflow-x: auto;
  overflow-y: visible;

  scroll-behavior: smooth;
  scrollbar-width: none;
}

.lux-hotel-experience-scroll::-webkit-scrollbar {
  display: none;
}

/* ==========================================
   EXPERIENCE CARD
========================================== */

.lux-hotel-experience-card {
  position: relative;
  z-index: 1;
  all: unset;
  box-sizing: border-box;

  position: relative;

  flex: 0 0 250px;

  min-height: 175px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 24px;

  border-right: 1px solid #deddd9;

  color: #5c5a57;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.lux-hotel-experience-card:first-child {
  border-left: 1px solid #deddd9;
}

/* Icon */

.lux-hotel-experience-card-icon {
  width: 34px;
  height: 34px;

  color: #aaa9a6;

  stroke-width: 1.2;

  transition: color 0.25s ease;
}

/* Label */

.lux-hotel-experience-card span {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;

  text-transform: uppercase;
}

/* ==========================================
   ACTIVE
========================================== */

.lux-hotel-experience-card--active {
  z-index: 2;

  color: #b88a3b;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.lux-hotel-experience-card--active .lux-hotel-experience-card-icon {
  color: #b88a3b;
}

/* Hover */

.lux-hotel-experience-card:not(.lux-hotel-experience-card--active):hover {
  background: rgba(255, 255, 255, 0.55);
  color: #b88a3b;
}

.lux-hotel-experience-card:not(.lux-hotel-experience-card--active):hover
  .lux-hotel-experience-card-icon {
  color: #b88a3b;
}

/* ==========================================
   ARROWS
========================================== */

.lux-hotel-experience-arrow {
  position: absolute;

  top: 50%;

  z-index: 5;

  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: #ffffff;
  color: #5c5a57;

  font-size: 28px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.lux-hotel-experience-arrow--left {
  left: 30px;
}

.lux-hotel-experience-arrow--right {
  right: 30px;
}

@media (max-width: 768px) {
  .hotel-search-home-m__card {
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .hotel-search-home-m__submit {
    border-radius: 0;
  }
}

.lux-hotel-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/*==========================================================
LUXURY COLLECTIONS
==========================================================*/

.lux-hotel-luxury-collections {
  padding: 40px 16px;
  background: #ffffff;
  overflow: hidden;
}

/*==========================================================
HEADER
==========================================================*/

.lux-hotel-luxury-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.lux-hotel-luxury-header .lux-hotel-section-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #171b20;
  line-height: 1.2;
  font-family: sans-serif;
}

.lux-hotel-luxury-header .lux-hotel-section-subtitle {
  margin-top: 10px;
  max-width: 620px;
  color: #6b7280;
  font-size: 17px;
  line-height: 1.7;
}

/*==========================================================
NAVIGATION
==========================================================*/

.lux-hotel-luxury-nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.lux-hotel-luxury-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ececec;
  background: #fff;
  color: #171b20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 22px;
}

/*==========================================================
SLIDER
==========================================================*/

.lux-hotel-luxury-slider {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 10px;
}

.lux-hotel-luxury-slider::-webkit-scrollbar {
  display: none;
}

/*==========================================================
CARD
==========================================================*/

.lux-hotel-luxury-card {
  flex: 0 0 390px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #efefef;
  transition: all 0.35s ease;
}

/*==========================================================
IMAGE
==========================================================*/

.lux-hotel-luxury-image-wrapper {
  position: relative;
  width: 100%;
  height: 290px;
  overflow: hidden;
}

.lux-hotel-luxury-image {
  object-fit: cover;
  transition: transform 0.5s ease;
}

.lux-hotel-luxury-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.05));
}

/*==========================================================
CONTENT
==========================================================*/

.lux-hotel-luxury-content {
  padding: 20px;
}

.lux-hotel-luxury-rating {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: #b88a3b;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lux-hotel-luxury-title {
  margin: 0;
  color: #171b20;
  font-size: 24px;
  font-weight: 700;
  font-family: sans-serif;
  line-height: 1.3;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lux-hotel-luxury-location {
  margin: 8px 0 8px;
  color: #6b7280;
  font-size: 15px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*==========================================================
FOOTER
==========================================================*/

.lux-hotel-luxury-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
}

.lux-hotel-luxury-price-label {
  display: block;
  margin-bottom: 8px;
  color: #888;
  font-size: 13px;
}

.lux-hotel-luxury-price {
  margin: 0;
  color: #171b20;
  font-size: 30px;
  font-weight: 700;
}

.lux-hotel-luxury-price small {
  margin-left: 6px;
  color: #777;
  font-size: 15px;
  font-weight: 500;
}

.lux-hotel-luxury-btn {
  height: 46px;
  padding: 0 20px;
  border: none;
  border-radius: 0;
  background: #b88a3b;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/*==========================================================
EMPTY
==========================================================*/

.lux-hotel-luxury-empty {
  width: 100%;
  text-align: center;
  padding: 80px 20px;
}

.lux-hotel-luxury-empty h3 {
  margin-bottom: 12px;
  color: #171b20;
  font-size: 28px;
}

.lux-hotel-luxury-empty p {
  color: #777;
  font-size: 16px;
}

/*==========================================================
SKELETON
==========================================================*/

.lux-hotel-luxury-card-skeleton {
  pointer-events: none;
}

.lux-hotel-luxury-skeleton {
  position: relative;
  overflow: hidden;
  background: #ececec;
  border-radius: 8px;
}

.lux-hotel-luxury-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  animation: luxHotelSkeleton 1.5s infinite;
}

@keyframes luxHotelSkeleton {
  100% {
    transform: translateX(100%);
  }
}

.lux-hotel-luxury-skeleton-image {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.lux-hotel-luxury-skeleton-badge {
  width: 120px;
  height: 16px;
  margin-bottom: 18px;
}

.lux-hotel-luxury-skeleton-title {
  width: 75%;
  height: 30px;
  margin-bottom: 16px;
}

.lux-hotel-luxury-skeleton-location {
  width: 65%;
  height: 18px;
  margin-bottom: 28px;
}

.lux-hotel-luxury-skeleton-label {
  width: 90px;
  height: 14px;
  margin-bottom: 10px;
}

.lux-hotel-luxury-skeleton-price {
  width: 130px;
  height: 28px;
}

.lux-hotel-luxury-skeleton-button {
  width: 100px;
  height: 46px;
  border-radius: 999px;
}

/*==========================================================
TABLET
==========================================================*/

@media (max-width: 1024px) {
  .lux-hotel-luxury-card {
    flex: 0 0 340px;
  }

  .lux-hotel-luxury-image-wrapper {
    height: 250px;
  }

  .lux-hotel-luxury-title {
    font-size: 24px;
  }

  .lux-hotel-luxury-price {
    font-size: 26px;
  }
}

/*==========================================================
MOBILE
==========================================================*/

@media (max-width: 768px) {
  .lux-hotel-luxury-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .lux-hotel-luxury-header .lux-hotel-section-title {
    font-size: 30px;
  }

  .lux-hotel-luxury-header .lux-hotel-section-subtitle {
    font-size: 15px;
  }

  .lux-hotel-luxury-nav {
    width: 100%;
    justify-content: flex-end;
  }

  .lux-hotel-luxury-slider {
    gap: 18px;
  }

  .lux-hotel-luxury-card {
    flex: 0 0 285px;
  }

  .lux-hotel-luxury-image-wrapper {
    height: 220px;
  }

  .lux-hotel-luxury-content {
    padding: 18px;
  }

  .lux-hotel-luxury-title {
    font-size: 21px;
  }

  .lux-hotel-luxury-location {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .lux-hotel-luxury-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .lux-hotel-luxury-btn {
    width: 100%;
    justify-content: center;
  }

  .lux-hotel-luxury-price {
    font-size: 22px;
  }
}

/*=========================================================
LUXURY HOTELS CONTENT
=========================================================*/

.lux-hotel-about {
  padding: 40px 16px;
  position: relative;
}

.lux-hotel-about-wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

/*=========================================================
HEADER
=========================================================*/

.lux-hotel-about-header {
  margin-bottom: 20px;
}

.lux-hotel-about-subtitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  color: #b88a3b;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 2px;
  text-transform: uppercase;
}

.lux-hotel-about-title {
  margin: 0;
  color: #171b20;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  font-family: sans-serif;
}

/*=========================================================
CONTENT BOX
=========================================================*/

.lux-hotel-about-content {
  border: none;
  border-radius: 0;
}

/*=========================================================
PARAGRAPHS
=========================================================*/

.lux-hotel-about-content p {
  margin: 0 0 28px;

  color: #4b5563;

  font-size: 17px;
  line-height: 1.95;

  text-align: justify;
}

.lux-hotel-about-content p:last-child {
  margin-bottom: 0;
}

/*=========================================================
SELECTION
=========================================================*/

.lux-hotel-about-content ::selection {
  background: rgba(184, 138, 59, 0.25);
}

/*=========================================================
TABLET
=========================================================*/

@media (max-width: 1024px) {
  .lux-hotel-about-header {
    margin-bottom: 45px;
  }

  .lux-hotel-about-title {
    font-size: 36px;
  }

  .lux-hotel-about-content p {
    font-size: 16px;
    line-height: 1.85;
  }
}

/*=========================================================
MOBILE
=========================================================*/

@media (max-width: 768px) {
  .lux-hotel-about-header {
    margin-bottom: 32px;
  }

  .lux-hotel-about-subtitle {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .lux-hotel-about-title {
    font-size: 28px;
  }

  .lux-hotel-about-content p {
    margin-bottom: 18px;

    font-size: 15px;
    line-height: 1.8;

    text-align: left;
  }
}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width: 480px) {
  .lux-hotel-about-title {
    font-size: 24px;
  }

  .lux-hotel-about-content p {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* ==========================================
   EXPERIENCE HEADER
========================================== */

.lux-hotel-experience-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;

  margin-bottom: 55px;
}

.lux-hotel-experience-heading {
  text-align: left;
}

.lux-hotel-experience-heading h2 {
  margin: 0;

  color: #171b20;

  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
}

.lux-hotel-experience-heading p {
  margin: 8px 0 0;

  color: #667085;

  font-size: 18px;
  line-height: 1.6;
}

/* ==========================================
   HEADER NAVIGATION
========================================== */

.lux-hotel-experience-nav {
  display: flex;
  align-items: center;
  gap: 12px;

  flex-shrink: 0;
}

.lux-hotel-experience-nav button {
  width: 44px;
  height: 44px;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #171b20;
  font-size: 22px;
  transition: all 0.25s ease;
}

/* ==========================================
   SLIDER
========================================== */

.lux-hotel-experience-slider {
  position: relative;
  width: 100%;
}

/* No space required for side arrows anymore */
.lux-hotel-experience-scroll {
  width: 100%;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
  .lux-hotel-experience-header {
    align-items: flex-end;
    gap: 16px;

    margin-bottom: 32px;
  }

  .lux-hotel-experience-heading {
    flex: 1;
  }

  .lux-hotel-experience-heading h2 {
    font-size: 30px;
  }

  .lux-hotel-experience-heading p {
    margin-top: 10px;

    font-size: 15px;
  }

  .lux-hotel-experience-nav {
    gap: 8px;
  }

  .lux-hotel-experience-nav button {
    width: 42px;
    height: 42px;

    font-size: 20px;
  }

  .lux-hotel-footer-destinations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }

  .lux-hotel-footer-destinations-grid {
    padding: 0 0px 45px;
  }
}

@media (max-width: 520px) {
  .lux-hotel-experience-header {
    align-items: flex-start;
  }

  .lux-hotel-experience-heading h2 {
    font-size: 26px;
  }

  .lux-hotel-experience-nav button {
    width: 38px;
    height: 38px;

    font-size: 18px;
  }
}

.hotel-search-m__sheet-header {
  position: relative;
  z-index: 1; /* stays above the sheet body content */
}

/* ================================
   MOBILE HERO
================================ */
@media (max-width: 768px) {
  .lux-hotel-hero {
    width: 100%;
    height: auto;
    min-height: auto;

    margin-top: 0;
    padding: 0;

    display: block;

    background-size: cover;
    background-position: center;
  }

  /* Hero content */
  .lux-hotel-hero-content {
    width: 100%;
    padding: 28px 0px 0;
    box-sizing: border-box;
  }

  /* Mobile search wrapper */
  .hotel-search-wrap--home-mobile {
    width: 100%;

    padding: 0 0px 28px;
    margin: 24px 0 0;

    position: static;
    transform: none;

    box-sizing: border-box;
  }

  .hotel-search-home-m {
    width: 100%;
    max-width: none;

    margin: 0;
    box-sizing: border-box;
  }
}

/* Hide mobile navigation on desktop */
.lux-hotel-trending-nav--mobile {
  display: none;
}

@media (max-width: 768px) {
  .lux-hotel-trending-header {
    display: block;
    margin-bottom: 20px;
  }

  /* Remove buttons from header */
  .lux-hotel-trending-nav--desktop {
    display: none;
  }

  /* Buttons AFTER cards */
  .lux-hotel-trending-nav--mobile {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
  }

  .lux-hotel-trending-nav--mobile button {
    width: 42px;
    height: 42px;
  }
}

/* Desktop */
.lux-hotel-luxury-nav--mobile {
  display: none;
}

.lux-hotel-luxury-nav--desktop {
  display: flex;
}

/* Mobile */
@media (max-width: 768px) {
  .lux-hotel-luxury-header {
    display: block;
  }

  /* Hide header arrows */
  .lux-hotel-luxury-nav--desktop {
    display: none;
  }

  /* Show arrows after cards */
  .lux-hotel-luxury-nav--mobile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 20px;
  }
}

/* Mobile nav hidden by default */
.lux-hotel-experience-nav--mobile {
  display: none;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 768px) {
  .lux-hotel-experience-header {
    display: block;
  }

  /* Hide header navigation */
  .lux-hotel-experience-nav--desktop {
    display: none;
  }

  /* Navigation after items */
  .lux-hotel-experience-nav--mobile {
    display: flex;

    width: 100%;

    justify-content: flex-end;
    align-items: center;

    gap: 10px;

    margin-top: 20px;
  }

  .lux-hotel-experience-nav--mobile button {
    width: 42px;
    height: 42px;

    font-size: 20px;
  }
}

/* =========================================
   Heading
========================================= */

.lux-hotel-section-heading {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.lux-hotel-section-heading > span {
  display: inline-block;
  margin-bottom: 10px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;

  color: #ff6a00;
}

.lux-hotel-section-heading h2 {
  margin: 0;

  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;

  color: #17212b;
  font-family: sans-serif;
}

.lux-hotel-section-heading p {
  max-width: 680px;

  margin: 14px auto 0;

  font-size: 16px;
  line-height: 1.6;

  color: #6b7280;
}

.lux-hotel-experience-slider {
  position: relative;
  width: 100%;
}

.lux-hotel-experience-scroll {
  display: flex;
  align-items: stretch;
  gap: 16px;

  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;

  padding: 10px 4px;
}

.lux-hotel-experience-scroll::-webkit-scrollbar {
  display: none;
}

/* Navigation */
.lux-hotel-experience-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: 1px solid #e6e0d8;
  border-radius: 50%;

  background: #ffffff;
  color: #2d2d2d;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  cursor: pointer;

  z-index: 10;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.lux-hotel-experience-nav svg {
  width: 20px;
  height: 20px;
}

/* Previous */
.lux-hotel-experience-nav--prev {
  left: -21px;
}

/* Next */
.lux-hotel-experience-nav--next {
  right: -21px;
}

/* Mobile */
@media (max-width: 768px) {
  .lux-hotel-experience-nav {
    width: 36px;
    height: 36px;
  }

  .lux-hotel-experience-nav svg {
    width: 18px;
    height: 18px;
  }

  .lux-hotel-experience-nav--prev {
    left: 4px;
  }

  .lux-hotel-experience-nav--next {
    right: 4px;
  }
}

/* =========================================
   TRENDING STAYS
========================================= */

.lux-hotel-trending {
  width: 100%;
  padding: 40px 16px;
  background: #ffffff;
  overflow: hidden;
}

.lux-hotel-trending-wrapper {
  position: relative;
  width: 100%;
}

/* =========================================
   SLIDER
========================================= */

.lux-hotel-trending-slider {
  display: flex;
  gap: 32px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  padding: 0 0 60px;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lux-hotel-trending-slider::-webkit-scrollbar {
  display: none;
}

/* =========================================
   CARD
========================================= */

.lux-hotel-trending-card {
  position: relative;

  flex: 0 0 calc((100% - 64px) / 3);

  min-width: 0;

  scroll-snap-align: start;
}

.lux-hotel-trending-card-link {
  display: block;
  position: relative;

  text-decoration: none;
  color: inherit;
}

/* =========================================
   IMAGE
========================================= */

.lux-hotel-trending-card-media {
  position: relative;

  width: 100%;
  height: 500px;

  overflow: hidden;

  background: #eeeeee;
}

.lux-hotel-trending-card-image {
  object-fit: cover;

  transition: transform 0.6s ease;
}

/* =========================================
   FLOATING WHITE CONTENT
========================================= */

.lux-hotel-trending-card-content {
  position: relative;

  width: calc(100% - 70px);

  min-height: 145px;

  margin-top: -50px;
  margin-left: auto;

  padding: 24px 28px 22px;

  background: #ffffff;

  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);

  z-index: 2;

  box-sizing: border-box;
}

/* =========================================
   TITLE
========================================= */

.lux-hotel-trending-card-title {
  margin: 0;

  color: #3d3a36;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;

  text-transform: uppercase;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* =========================================
   LOCATION
========================================= */

.lux-hotel-trending-card-location {
  margin: 8px 0 0;

  color: #77736d;

  font-size: 13px;
  line-height: 1.5;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   BOTTOM
========================================= */

.lux-hotel-trending-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 15px;

  margin-top: 18px;
}

/* View hotel */

.lux-hotel-trending-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: #b88a3b;

  font-size: 14px;
  font-weight: 600;

  letter-spacing: 1.5px;

  border-bottom: 1px solid #b88a3b;

  padding-bottom: 2px;
}

.lux-hotel-trending-card-more svg {
  font-size: 17px;

  transition: transform 0.25s ease;
}

/* =========================================
   PRICE
========================================= */

.lux-hotel-trending-card-price {
  display: flex;
  align-items: baseline;

  gap: 4px;

  white-space: nowrap;
}

.lux-hotel-trending-card-price span {
  color: #8b8781;

  font-size: 11px;
}

.lux-hotel-trending-card-price strong {
  color: #2d2b28;

  font-size: 18px;
  font-weight: 600;
}

.lux-hotel-trending-card-price small {
  color: #8b8781;

  font-size: 11px;
}

/* =========================================
   PREV / NEXT ARROWS
========================================= */
.lux-hotel-trending-arrow {
  position: absolute;
  top: 220px;
  z-index: 10;

  width: 46px;
  height: 46px;
  border-radius: 50%;

  /* Screenshot style */
  background: rgba(90, 90, 90, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  padding: 0;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.lux-hotel-trending-arrow svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.4;
}

/* Position arrow over image like reference */

.lux-hotel-trending-arrow--prev {
  left: 30px;
}

.lux-hotel-trending-arrow--next {
  right: 30px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {
  .lux-hotel-trending-slider {
    gap: 24px;
  }

  .lux-hotel-trending-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }

  .lux-hotel-trending-card-media {
    height: 440px;
  }

  .lux-hotel-trending-arrow {
    top: 190px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .lux-hotel-trending-wrapper {
    margin-top: 28px;
  }

  .lux-hotel-trending-slider {
    gap: 16px;

    padding-bottom: 0;

    scroll-padding-left: 0;
  }

  .lux-hotel-trending-card {
    flex: 0 0 86%;
  }

  .lux-hotel-trending-card-media {
    height: 320px;
  }

  .lux-hotel-trending-card-content {
    width: calc(100% - 28px);

    min-height: auto;

    margin-top: -42px;

    padding: 10px 10px;
  }

  .lux-hotel-trending-card-title {
    font-size: 18px;
  }

  .lux-hotel-trending-card-location {
    font-size: 12px;
  }

  .lux-hotel-trending-card-bottom {
    margin-top: 15px;
  }

  .lux-hotel-trending-card-more {
    font-size: 11px;

    letter-spacing: 1px;
  }

  .lux-hotel-trending-card-price strong {
    font-size: 16px;
  }

  /* Smaller arrows on mobile */

  .lux-hotel-trending-arrow {
    display: none;
    width: 48px;
    height: 48px;

    top: 170px;
  }

  .lux-hotel-trending-arrow svg {
    width: 24px;
    height: 24px;
  }

  .lux-hotel-trending-arrow--prev {
    left: 14px;
  }

  .lux-hotel-trending-arrow--next {
    right: 14px;
  }
}

/* =========================================
   LUXURY COLLECTIONS
========================================= */

.lux-hotel-collections {
  width: 100%;
  padding: 40px 16px;
  background: none center center / cover no-repeat rgb(236, 239, 241);
  overflow: hidden;
}

.lux-hotel-collections-header {
  position: relative;
  margin-bottom: 38px;
}

/* =========================================
   NAVIGATION
========================================= */

.lux-hotel-collections-nav {
  position: absolute;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  gap: 10px;
}

.lux-hotel-collections-nav button {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #dedede;
  border-radius: 50%;

  background: #ffffff;

  color: #222222;
  font-size: 22px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.lux-hotel-collections-nav button:hover {
  background: #b88a3b;
  border-color: #b88a3b;
  color: #ffffff;

  transform: translateY(-2px);
}

/* =========================================
   SLIDER
========================================= */

.lux-hotel-collections-slider {
  display: flex;
  gap: 20px;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
}

.lux-hotel-collections-slider::-webkit-scrollbar {
  display: none;
}

/* =========================================
   CARD
========================================= */

.lux-hotel-collection-card {
  position: relative;

  flex: 0 0 calc((100% - 60px) / 4);

  height: 500px;

  overflow: hidden;

  scroll-snap-align: start;

  text-decoration: none;
  color: #ffffff;

  background: #222222;
}

/* =========================================
   IMAGE
========================================= */

.lux-hotel-collection-card-image {
  object-fit: cover;

  transition: transform 0.65s ease;
}

.lux-hotel-collection-card:hover .lux-hotel-collection-card-image {
  transform: scale(1.055);
}

/* =========================================
   GRADIENT
========================================= */

.lux-hotel-collection-card-gradient {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 20%,
    rgba(0, 0, 0, 0.12) 45%,
    rgba(0, 0, 0, 0.82) 100%
  );

  transition: background 0.3s ease;
}

.lux-hotel-collection-card:hover .lux-hotel-collection-card-gradient {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 15%,
    rgba(0, 0, 0, 0.16) 45%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* =========================================
   BADGE
========================================= */

.lux-hotel-collection-badge {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 3;

  padding: 7px 12px;

  background: rgba(255, 255, 255, 0.94);

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #8c672c;
}

/* =========================================
   CONTENT
========================================= */

.lux-hotel-collection-card-content {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 3;

  padding: 26px 25px;
}

.lux-hotel-collection-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.lux-hotel-collection-title-row h3 {
  margin: 0;

  min-width: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;

  color: #ffffff;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* =========================================
   RATING
========================================= */

.lux-hotel-collection-rating {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  gap: 5px;

  margin-top: 5px;

  font-size: 15px;
  font-weight: 600;

  color: #ffffff;
}

.lux-hotel-collection-rating svg {
  font-size: 13px;
  color: #ffffff;
}

/* =========================================
   LOCATION
========================================= */

.lux-hotel-collection-location {
  margin: 8px 0 0;

  max-width: 95%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 14px;
  line-height: 1.4;

  color: rgba(255, 255, 255, 0.82);
}

/* =========================================
   PRICE
========================================= */

.lux-hotel-collection-price {
  display: flex;
  align-items: baseline;
  gap: 4px;

  margin-top: 18px;

  color: #ffffff;
}

.lux-hotel-collection-price span {
  font-size: 13px;

  color: rgba(255, 255, 255, 0.75);
}

.lux-hotel-collection-price strong {
  font-size: 20px;
  font-weight: 600;

  color: #ffffff;
}

/* =========================================
   LOADING
========================================= */

.lux-hotel-collections-loading {
  height: 300px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #777777;
}

/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1200px) {
  .lux-hotel-collection-card {
    flex-basis: calc((100% - 40px) / 3);
    height: 470px;
  }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
  .lux-hotel-collection-card {
    flex-basis: calc((100% - 20px) / 2);
    height: 450px;
  }

  .lux-hotel-collection-title-row h3 {
    font-size: 22px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
  .lux-hotel-collections-header {
    margin-bottom: 25px;
  }

  .lux-hotel-collections-nav {
    display: none;
  }

  .lux-hotel-collections-slider {
    gap: 14px;

    margin-right: -16px;

    padding-right: 16px;
  }

  .lux-hotel-collection-card {
    flex: 0 0 84%;

    height: 320px;
  }

  .lux-hotel-collection-card-content {
    padding: 22px 20px;
  }

  .lux-hotel-collection-title-row h3 {
    font-size: 21px;
  }

  .lux-hotel-collection-location {
    font-size: 13px;
  }

  .lux-hotel-collection-price {
    margin-top: 14px;
  }

  .lux-hotel-collection-price strong {
    font-size: 19px;
  }
}

.lux-hotel-collections-slider-wrapper {
  position: relative;
  width: 100%;
}

/* arrows */

.lux-hotel-collections-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;

  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  border: 1px solid #e5e5e5;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.96);

  color: #222;
  font-size: 25px;

  cursor: pointer;

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.14);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* left */

.lux-hotel-collections-arrow--prev {
  left: -27px;
}

/* right */

.lux-hotel-collections-arrow--next {
  right: -27px;
}

/* icon */

.lux-hotel-collections-arrow svg {
  width: 25px;
  height: 25px;
}

/* mobile */

@media (max-width: 768px) {
  .lux-hotel-collections-arrow {
    display: none;
    width: 44px;
    height: 44px;

    font-size: 21px;
  }

  .lux-hotel-collections-arrow--prev {
    left: 8px;
  }

  .lux-hotel-collections-arrow--next {
    right: 8px;
  }
}

/* ========================================
   Hotels Customer Login
======================================== */

.hotels-customer-login-overlay {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.62);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  animation: hotelsCustomerLoginFade 0.2s ease;
}

.hotels-customer-login-modal {
  width: 100%;
  max-width: 420px;

  position: relative;

  padding: 32px 30px 30px;

  background: #ffffff;

  border: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.24),
    0 5px 20px rgba(0, 0, 0, 0.08);

  animation: hotelsCustomerLoginOpen 0.25s ease;

  box-sizing: border-box;
}

/* Header */

.hotels-customer-login-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 34px;
}

.hotels-customer-login-title {
  margin: 0;

  color: #1d1d1b;

  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.6px;
  font-family: sans-serif;
}

.hotels-customer-login-close {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  background: transparent;

  color: #222222;

  font-size: 28px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.hotels-customer-login-close:hover {
  background: #f5f5f3;
}

/* Google */

.hotels-customer-login-google {
  width: 100%;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  padding: 0 20px;

  background: #ffffff;

  border: 1px solid #6f6f6f;

  color: #262626;

  font-size: 18px;
  font-weight: 500;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.hotels-customer-login-google:hover {
  border-color: #1d1d1b;
  background: #fafafa;
}

.hotels-customer-login-google-icon {
  font-size: 25px;
  flex-shrink: 0;
}

/* Divider */

.hotels-customer-login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 24px;

  margin: 24px 0;
}

.hotels-customer-login-divider span {
  width: 100%;
  height: 1px;

  background: #e2e2e2;
}

.hotels-customer-login-divider p {
  margin: 0;

  color: #343434;

  font-size: 17px;
  line-height: 1;
}

/* Phone */

.hotels-customer-login-phone {
  width: 100%;
  height: 62px;

  display: flex;
  align-items: center;

  border: 1px solid #d8d8d8;

  background: #ffffff;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.hotels-customer-login-country {
  height: 100%;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0 15px 0 18px;

  border: 0;

  background: transparent;

  color: #333333;

  cursor: pointer;

  white-space: nowrap;
}

.hotels-customer-login-flag {
  font-size: 23px;
  line-height: 1;
}

.hotels-customer-login-code {
  font-size: 17px;
  font-weight: 400;
}

.hotels-customer-login-country svg {
  font-size: 17px;
  color: #969696;
}

.hotels-customer-login-phone-divider {
  width: 1px;
  height: 28px;

  flex-shrink: 0;

  background: #dddddd;
}

.hotels-customer-login-phone input:not(.country-select-search-input) {
  min-width: 0;
  flex: 1;

  height: 100%;

  padding: 0 16px;

  border: 0;
  outline: none;

  background: transparent;

  color: #222222;

  font-size: 17px;
  font-family: inherit;
}

.hotels-customer-login-phone input::placeholder {
  color: #777777;
}

/* Submit */

.hotels-customer-login-submit {
  width: 100%;
  height: 50px;

  margin-top: 28px;
  margin-bottom: 16px;
  border: 1px solid #9d742f;

  background: #b88a3b;

  color: #ffffff;

  font-size: 17px;
  font-weight: 600;
  font-family: inherit;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.hotels-customer-login-submit:hover:not(:disabled) {
  background: #9f752f;
  border-color: #9f752f;
}

.hotels-customer-login-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Terms */

.hotels-customer-login-terms {
  margin: 20px 20px 0;

  text-align: center;

  color: #777777;

  font-size: 12px;
  line-height: 1.7;
}

.hotels-customer-login-terms button {
  padding: 0;

  border: 0;
  background: transparent;

  color: #8d682e;

  font: inherit;
  text-decoration: underline;

  cursor: pointer;
}

/* Animations */

@keyframes hotelsCustomerLoginFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hotelsCustomerLoginOpen {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   Tablet / Mobile
======================================== */

@media (max-width: 640px) {
  .hotels-customer-login-overlay {
    padding: 0;

    align-items: flex-end;
  }

  .hotels-customer-login-modal {
    max-width: 100%;

    padding: 25px 20px 24px;

    border-radius: 14px 14px 0 0;
  }

  .hotels-customer-login-header {
    margin-bottom: 25px;
  }

  .hotels-customer-login-title {
    font-size: 24px;
  }

  .hotels-customer-login-close {
    width: 36px;
    height: 36px;

    font-size: 25px;
  }

  .hotels-customer-login-google {
    height: 58px;

    font-size: 16px;
  }

  .hotels-customer-login-divider {
    margin: 21px 0;

    gap: 16px;
  }

  .hotels-customer-login-phone {
    height: 58px;
  }

  .hotels-customer-login-country {
    padding-left: 13px;
    padding-right: 11px;

    gap: 6px;
  }

  .hotels-customer-login-flag {
    font-size: 20px;
  }

  .hotels-customer-login-code {
    font-size: 15px;
  }

  .hotels-customer-login-phone input {
    padding: 0 12px;

    font-size: 15px;
  }

  .hotels-customer-login-submit {
    height: 58px;

    margin-top: 20px;

    font-size: 16px;
  }

  .hotels-customer-login-terms {
    margin-top: 16px;
  }
}

.lux-hotel-header-login,
.lux-hotel-header-mobile-login,
.lux-hotel-header-mobile-login-menu {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* ================================
   COUNTRY CODE SELECT
================================ */

.hotels-customer-login-country {
  position: relative;

  display: flex;
  align-items: center;
  flex-shrink: 0;

  height: 100%;
  min-width: 82px;

  padding: 0 12px 0 14px;

  background: transparent;
  border: none;
  box-sizing: border-box;
}

/* Select */

.hotels-customer-login-country-select {
  width: 100%;
  height: 100%;

  padding: 0 10px 0 0;

  border: none;
  outline: none;
  background: transparent;

  font-size: 15px;
  font-weight: 600;
  color: #222222;

  margin: 0;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Custom arrow */

.hotels-customer-login-country > svg {
  position: absolute;

  right: 10px;
  top: 50%;

  transform: translateY(-50%);

  width: 15px;
  height: 15px;

  color: #777777;

  pointer-events: none;
}

/* ================================
   COMPLETE PHONE INPUT
================================ */

.hotels-customer-login-phone {
  width: 100%;
  height: 54px;

  display: flex;
  align-items: center;

  background: #ffffff;

  border: 1px solid #dedede;
  border-radius: 0;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Divider */

.hotels-customer-login-phone-divider {
  width: 1px;
  height: 26px;

  flex-shrink: 0;

  background: #e5e5e5;
}

/* Mobile input */

.hotels-customer-login-phone input:not(.country-select-search-input) {
  width: 100%;
  height: 100%;

  padding: 0 16px;

  border: none;
  outline: none;

  background: transparent;

  font-size: 15px;
  font-weight: 500;
  color: #222222;

  box-sizing: border-box;
}

.hotels-customer-login-phone input::placeholder {
  color: #999999;
  font-weight: 400;
}

/* ================================
   MOBILE
================================ */

@media (max-width: 576px) {
  .hotels-customer-login-phone {
    height: 52px;
  }

  .hotels-customer-login-country {
    min-width: 78px;
    padding-left: 12px;
  }

  .hotels-customer-login-country-select {
    font-size: 14px;
  }

  .hotels-customer-login-phone input {
    padding: 0 12px;
    font-size: 14px;
  }
}

.hotels-customer-login-otp {
  width: 100%;
}

.hotels-customer-login-otp-input {
  width: 100%;
  height: 58px;

  padding: 0 18px;

  border: 1px solid #dddddd;
  border-radius: 0;

  outline: none;
  background: #ffffff;

  font-size: 17px;
  font-weight: 400;
  color: #222222;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.hotels-customer-login-otp-input::placeholder {
  color: #777777;
}

/* RESEND */

.hotels-customer-login-otp-resend {
  margin: 14px 0 20px;

  text-align: right;

  font-size: 13px;
  color: #777777;
}

.hotels-customer-login-otp-resend strong {
  color: #444444;
}

.hotels-customer-login-otp-resend button {
  padding: 0;

  border: none;
  background: transparent;

  font-size: 13px;
  font-weight: 600;

  color: #ff7f47;

  cursor: pointer;
}

.hotels-customer-login-otp-resend button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hotels-customer-login-header-left {
  display: flex;
  gap: 10px;
}

.hotels-customer-login-back {
  border: none;
  background-color: #fff;
}

@media (max-width: 768px) {
  .hotels-results-page {
    position: relative;
    overflow: visible;
  }

  .hotels-results-top {
    position: sticky;
    top: 0;
    z-index: 999;

    width: 100%;
    background: #f7f9fc;
    border-bottom: none;
  }

  /* Search itself doesn't need sticky */
  .hotel-search-wrap--compact-mobile {
    position: relative;
  }

  .hotel-search-m {
    position: relative;
    background: #f7f9fc;
  }

  .hotel-search-m__header {
    position: relative;
    border: none;
  }
}

@media (max-width: 768px) {
  .hotels-details-page {
    padding-bottom: 0;
  }
}

/* =========================================
   MOBILE HOTEL IMAGE GALLERY
========================================= */

.hotels-details-mobile-gallery {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop gallery */
  .hotels-details-gallery-section {
    display: none;
  }

  .hotels-details-desktop-header {
    display: none;
  }

  .hotels-details-mobile-gallery {
    display: block;
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f3f3f3;
  }

  /* Slider */
  .hotels-details-mobile-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hotels-details-mobile-gallery-track::-webkit-scrollbar {
    display: none;
  }

  .hotels-details-mobile-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;
    border: 0;

    background: transparent;

    scroll-snap-align: start;

    cursor: pointer;
  }

  .hotels-details-mobile-gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  /* =============================
     TOP BUTTONS
  ============================== */

  .hotels-details-mobile-gallery-action {
    width: 38px;
    height: 38px;

    border: none;
    background: rgba(255, 255, 255, 0.96);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #222;

    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .hotels-details-mobile-gallery-close {
    position: absolute;
    top: 14px;
    left: 16px;

    z-index: 5;
  }

  .hotels-details-mobile-gallery-actions {
    position: absolute;
    top: 14px;
    right: 16px;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* =============================
     DOTS
  ============================== */

  .hotels-details-mobile-gallery-dots {
    position: absolute;

    left: 12px;
    bottom: 10px;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 5px;
  }

  .hotels-details-mobile-gallery-dot {
    display: block;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.65);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  }

  .hotels-details-mobile-gallery-dot--active {
    background: #ffffff;
    transform: scale(1.08);
  }

  /* =============================
     IMAGE COUNTER
  ============================== */

  .hotels-details-mobile-gallery-counter {
    position: absolute;

    right: 14px;
    bottom: 9px;

    z-index: 5;

    min-width: 52px;
    height: 30px;

    padding: 0 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(20, 20, 20, 0.9);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.2px;
  }

  /* Hotel info below gallery */
  .hotels-details-mobile-card {
    display: block;

    background: #ffffff;

    padding: 18px 16px 20px;

    border-radius: 0;

    border-bottom: 1px solid #e5e5e5;
  }
}

@media (min-width: 769px) {
  .hotels-details-mobile-gallery {
    display: none;
  }

  .hotels-details-mobile-card {
    display: none;
  }
}

/* =========================================
   MOBILE BOTTOM BOOKING BAR
========================================= */

.hotels-details-mobile-booking-bar {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop booking card */
  .hotels-details-booking-card {
    display: none;
  }

  .hotels-details-mobile-booking-bar {
    display: block;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    z-index: 9999;

    background: #ffffff;
    border-top: 1px solid #e5e5e5;

    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));

    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
  }

  .hotels-details-mobile-booking-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* PRICE SIDE */

  .hotels-details-mobile-booking-price-wrap {
    flex: 1;
    min-width: 0;
  }

  .hotels-details-mobile-booking-price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    line-height: 1.2;
  }

  .hotels-details-mobile-booking-original {
    font-size: 14px;
    font-weight: 400;
    color: #333333;

    text-decoration: line-through;
    text-decoration-thickness: 1px;

    white-space: nowrap;
  }

  .hotels-details-mobile-booking-price {
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    color: #222222;

    white-space: nowrap;
  }

  .hotels-details-mobile-booking-night {
    font-size: 15px;
    font-weight: 400;
    color: #333333;

    white-space: nowrap;
  }

  .hotels-details-mobile-booking-tax {
    margin-top: 6px;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;

    color: #666666;

    white-space: nowrap;
  }

  /* BOOK NOW */

  .hotels-details-mobile-booking-btn {
    flex-shrink: 0;

    width: 44%;
    min-width: 145px;
    height: 45px;

    border: 0;
    border-radius: 0;

    background: var(--lux-hotel-gold);
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;

    transition:
      background 0.2s ease,
      opacity 0.2s ease;
  }

  .hotels-details-mobile-booking-btn:active {
    background: #805d29;
  }

  .hotels-details-mobile-booking-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* Prevent bottom bar covering page content */
  .hotels-details-page {
    padding-bottom: 100px;
  }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
  .hotels-details-mobile-booking-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hotels-details-mobile-booking-inner {
    gap: 10px;
  }

  .hotels-details-mobile-booking-original {
    font-size: 12px;
  }

  .hotels-details-mobile-booking-price {
    font-size: 18px;
  }

  .hotels-details-mobile-booking-night {
    font-size: 13px;
  }

  .hotels-details-mobile-booking-tax {
    font-size: 11px;
  }

  .hotels-details-mobile-booking-btn {
    min-width: 130px;
    height: 45px;

    font-size: 16px;
  }
}

/* LOADER */

.hotels-booking-spinner {
  animation: hotels-booking-spin 0.8s linear infinite;
}

@keyframes hotels-booking-spin {
  to {
    transform: rotate(360deg);
  }
}

.lux-hotel-about-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 45px;
}

.lux-hotel-about-heading h2 {
  margin: 0;
  color: #4a4945;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1.5px;
  text-align: center;
  white-space: nowrap;
}

.lux-hotel-about-heading-line {
  width: 80px;
  height: 1px;
  flex-shrink: 0;
  background: #4a4945;
}

@media (max-width: 600px) {
  .lux-hotel-about {
    padding: 40px 20px;
    overflow: hidden;
  }

  .lux-hotel-about-heading {
    display: block;
    width: 100%;
    margin-bottom: 28px;
  }

  .lux-hotel-about-heading h2 {
    display: block;
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-family: "Times New Roman", Georgia, serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.5px;

    color: #263747;

    text-align: left;
    text-transform: uppercase;

    /* IMPORTANT */
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Line becomes part of first text line */
  .lux-hotel-about-heading h2::before {
    content: "";
    display: inline-block;

    width: 38px;
    height: 1px;

    margin-right: 14px;
    margin-bottom: 8px;

    background: #77736d;
    vertical-align: middle;
  }

  /* Desktop lines hidden */
  .lux-hotel-about-heading-line {
    display: none;
  }
}

.hotel-search__box-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.hotels-details-gallery-section {
  margin-bottom: 20px;
}

/* =========================================
   HOTEL FACILITIES
========================================= */

.hotels-details-amenities-card {
  background: #ffffff;
}

.hotels-details-amenities-card .hotels-details-card-title {
  font-size: 18px;
  line-height: 18px;
  color: #000;
  font-family: sans-serif;
  margin-bottom: 16px;
}

/* Grid */
.hotels-details-facilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 60px;
  row-gap: 22px;
}

/* Single facility */
.hotels-details-facility {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 18px;
}

/* Icon */
.hotels-details-facility-icon {
  width: 26px;
  min-width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #202020;
}

.hotels-details-facility-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Name */
.hotels-details-facility-text {
  color: #161616;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

/* =========================================
   VIEW ALL / VIEW LESS
========================================= */

.hotels-details-amenities-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-top: 20px;
  padding: 0;

  border: 0;
  outline: 0;
  background: transparent;

  color: var(--lux-hotel-gold);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
}

.hotels-details-amenities-toggle:hover {
  color: var(--lux-hotel-gold);
}

.hotels-details-amenities-toggle-icon {
  transition: transform 0.2s ease;
}

.hotels-details-amenities-toggle-icon--open {
  transform: rotate(180deg);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
  .hotels-details-facilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 35px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {
  .hotels-details-amenities-card .hotels-details-card-title {
    font-size: 18px;
    line-height: 18px;
    color: #000;
    font-family: sans-serif;
    margin-bottom: 20px;
  }

  .hotels-details-facilities {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .hotels-details-facility {
    gap: 14px;
  }

  .hotels-details-facility-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }

  .hotels-details-facility-icon svg {
    width: 22px;
    height: 22px;
  }

  .hotels-details-facility-text {
    font-size: 15px;
  }

  .hotels-details-amenities-toggle {
    margin-top: 25px;
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .hotels-details-overview {
    padding-bottom: 0;
  }
}

.hotels-customer-login-register {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 15px;
  color: #666;
}

.hotels-customer-login-register button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b88a3b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.hotels-customer-login-register button:hover {
  text-decoration: underline;
}

.hotel-booking-back-wrap {
  max-width: 1640px;
  margin: 0 auto;
  padding: 20px 16px 0;
}

.hotel-booking-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 0;
  border: none;
  background: transparent;

  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;

  cursor: pointer;
  transition: color 0.2s ease;
}

.hotel-booking-back-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.hotel-booking-back-btn:hover {
  color: #b88a3b;
}

.hotel-booking-back-btn:hover .hotel-booking-back-icon {
  transform: translateX(-3px);
}

@media (max-width: 768px) {
  .hotel-booking-back-wrap {
    padding: 12px 16px 0;
  }

  .hotel-booking-back-btn {
    font-size: 14px;
    margin: 0 16px;
  }
}

/* Desktop only */
.hbs-desktop-only {
  display: block;
}

/* Hide on mobile */
@media (max-width: 768px) {
  .hbs-desktop-only {
    display: none;
  }
}

.hotel-booking-summary-phone-country-code {
  display: flex;
  align-items: center;
  border: 1px solid var(--hbs-border);
  border-right: none;
  background: #fff;

  border-radius: 10px 0px 0px 10px;
}

/* =========================================
   List Your Hotel - Header
========================================= */

.list-your-hotel-header {
  width: 100%;
  height: 76px;
  background: #ffffff;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  z-index: 20;
}

.list-your-hotel-header-container {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================
   Logo
========================================= */

.list-your-hotel-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.list-your-hotel-logo-image {
  display: block;
  width: 145px;
  height: auto;
  object-fit: contain;
}

/* =========================================
   Header Actions
========================================= */

.list-your-hotel-header-action {
  display: flex;
  align-items: center;
  gap: 18px;
}

.list-your-hotel-header-text {
  font-size: 14px;
  line-height: 20px;
  color: #5f6368;
}

.list-your-hotel-login-link {
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.list-your-hotel-login-link:hover {
  color: #ff7f47;
}

/* =========================================
   Register Button
========================================= */

.list-your-hotel-register-btn {
  min-width: 108px;
  height: 40px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;
  background: #ff7f47;
  color: #ffffff;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.list-your-hotel-register-btn:hover {
  background: #ff7f50;
  color: #ffffff;
}

/* =========================================
   Page Content
========================================= */

.list-your-hotel-content {
  width: 100%;
  min-height: 500px;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 768px) {
  .list-your-hotel-header {
    height: 68px;
  }

  .list-your-hotel-header-container {
    padding: 0 18px;
  }

  .list-your-hotel-logo-image {
    width: 125px;
  }

  .list-your-hotel-header-text {
    display: none;
  }

  .list-your-hotel-header-action {
    gap: 12px;
  }

  .list-your-hotel-login-link {
    font-size: 13px;
  }

  .list-your-hotel-register-btn {
    min-width: 92px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .list-your-hotel-header-container {
    padding: 0 14px;
  }

  .list-your-hotel-logo-image {
    width: 112px;
  }

  .list-your-hotel-header-action {
    gap: 10px;
  }

  .list-your-hotel-login-link {
    display: none;
  }

  .list-your-hotel-register-btn {
    min-width: 88px;
  }
}

/* =========================================
   List Your Hotel - Hero
========================================= */

.list-your-hotel-hero {
  position: relative;
  width: 100%;
  min-height: 510px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

/* Next Image */

.list-your-hotel-hero-image {
  position: absolute !important;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* Dark overlay */

.list-your-hotel-hero-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.42);

  z-index: 1;
}

/* Content */

.list-your-hotel-hero-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1000px;

  padding: 60px 24px;

  text-align: center;
  color: #ffffff;
}

/* Heading */

.list-your-hotel-hero-content h1 {
  margin: 0 auto;

  max-width: 900px;

  font-size: 44px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.5px;

  color: #ffffff;
  font-family: sans-serif;
}

/* Description */

.list-your-hotel-hero-content p {
  margin: 18px auto 28px;

  max-width: 650px;

  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.95);
}

/* CTA */

.list-your-hotel-hero-btn {
  min-width: 260px;
  height: 52px;

  padding: 0 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50px;

  background: #ff7f47;
  color: #ffffff;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
  text-transform: uppercase;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.list-your-hotel-hero-btn:hover {
  background: #ff7f50;
  color: #ffffff;
}

/* =========================================
   Tablet
========================================= */

@media (max-width: 768px) {
  .list-your-hotel-hero {
    min-height: 430px;
  }

  .list-your-hotel-hero-content {
    padding: 50px 20px;
  }

  .list-your-hotel-hero-content h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .list-your-hotel-hero-content p {
    font-size: 16px;
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .list-your-hotel-hero-btn {
    min-width: 230px;
    height: 48px;
    font-size: 14px;
  }
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 480px) {
  .list-your-hotel-hero {
    min-height: 390px;
  }

  .list-your-hotel-hero-image {
    object-position: center;
  }

  .list-your-hotel-hero-content {
    padding: 40px 18px;
  }

  .list-your-hotel-hero-content h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .list-your-hotel-hero-content h1 br {
    display: none;
  }

  .list-your-hotel-hero-content p {
    font-size: 14px;
    line-height: 1.5;
    margin: 14px auto 22px;
  }

  .list-your-hotel-hero-btn {
    width: 100%;
    max-width: 260px;

    height: 46px;
    padding: 0 20px;

    font-size: 13px;
  }
}

/* ============================================
   ALXTRIP LIST YOUR HOTEL FOOTER
============================================ */

.list-your-hotel-footer {
  width: 100%;
  margin: 0;
  padding: 0;

  background: #f4f4f4;
  color: #111827;

  box-sizing: border-box;
  margin-top: 40px;
}

.list-your-hotel-footer *,
.list-your-hotel-footer *::before,
.list-your-hotel-footer *::after {
  box-sizing: border-box;
}

/* ============================================
   MAIN FOOTER
============================================ */

.list-your-hotel-footer-inner {
  width: 100%;
  max-width: 1300px;

  margin: 0 auto;
  padding: 55px 20px;

  display: block;
}

.list-your-hotel-footer-info {
  width: 100%;
  max-width: 760px;
}

.list-your-hotel-footer-info h3 {
  margin: 0 0 8px;
  padding: 0;

  font-family: inherit;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;

  color: #111827;
}

.list-your-hotel-footer-info p {
  margin: 0;
  padding: 0;

  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;

  color: #6b7280;
}

/* ============================================
   APP BUTTONS
============================================ */

.list-your-hotel-footer-apps {
  margin-top: 25px;

  display: flex;
  align-items: center;
  gap: 14px;
}

.list-your-hotel-footer-app {
  width: 180px;
  height: 54px;

  padding: 0 15px;

  display: flex;
  align-items: center;

  gap: 10px;

  border-radius: 7px;

  background: #000000;
  color: #ffffff !important;

  text-decoration: none !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.list-your-hotel-footer-app:hover {
  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);

  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
}

/* Apple */

.list-your-hotel-footer-app-symbol {
  width: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 29px;
  line-height: 1;

  color: #ffffff;
}

/* Google Play */

.list-your-hotel-footer-play-symbol {
  width: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 23px;
  line-height: 1;

  color: #ffffff;
}

/* Text */

.list-your-hotel-footer-app-text {
  display: flex;
  flex-direction: column;

  line-height: 1;
}

.list-your-hotel-footer-app-text small {
  margin: 0 0 3px;
  padding: 0;

  font-family: inherit;

  font-size: 9px;
  line-height: 11px;
  font-weight: 400;

  color: #ffffff;
}

.list-your-hotel-footer-app-text strong {
  margin: 0;
  padding: 0;

  font-family: inherit;

  font-size: 18px;
  line-height: 20px;
  font-weight: 500;

  color: #ffffff;
}

/* ============================================
   COPYRIGHT
============================================ */

.list-your-hotel-footer-copyright {
  width: 100%;

  border-top: 1px solid #e5e7eb;

  background: #ffffff;
}

.list-your-hotel-footer-copyright-inner {
  width: 100%;
  max-width: 1300px;

  min-height: 64px;

  margin: 0 auto;
  padding: 16px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  font-size: 13px;
  line-height: 1.5;

  color: #6b7280;
}

.list-your-hotel-footer-nav {
  display: flex;
  align-items: center;

  gap: 25px;
}

.list-your-hotel-footer-nav a {
  margin: 0;
  padding: 0;

  color: #6b7280 !important;

  font-size: 13px;
  text-decoration: none !important;

  transition: color 0.2s ease;
}

.list-your-hotel-footer-nav a:hover {
  color: #ff6a00 !important;
}

/* ============================================
   TABLET
============================================ */

@media (max-width: 768px) {
  .list-your-hotel-footer-inner {
    padding: 42px 20px;
  }

  .list-your-hotel-footer-info h3 {
    font-size: 21px;
  }

  .list-your-hotel-footer-info p {
    font-size: 14px;
  }

  .list-your-hotel-footer-copyright-inner {
    padding: 18px 20px;

    flex-direction: column;
    align-items: flex-start;
  }
  .list-your-hotel-footer-copyright-inner span {
    text-align: center;
  }
}

/* ============================================
   MOBILE
============================================ */

@media (max-width: 480px) {
  .list-your-hotel-footer-inner {
    padding: 35px 16px;
  }

  .list-your-hotel-footer-apps {
    width: 100%;

    flex-direction: column;
    align-items: flex-start;
  }

  .list-your-hotel-footer-app {
    width: 180px;
  }

  .list-your-hotel-footer-copyright-inner {
    padding: 18px 16px;
  }

  .list-your-hotel-footer-nav {
    width: 100%;

    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
  }
}

/* =========================================
   PROPERTY TYPES SECTION
========================================= */

.list-your-hotel-property-types {
  width: 100%;
  background: #ffffff;
  padding: 50px 0;
}

.list-your-hotel-property-types-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================================
   Heading
========================================= */

.list-your-hotel-property-types-heading {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.list-your-hotel-property-types-heading > span {
  display: inline-block;
  margin-bottom: 10px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;

  color: #ff6a00;
}

.list-your-hotel-property-types-heading h2 {
  margin: 0;

  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;

  color: #17212b;
  font-family: sans-serif;
}

.list-your-hotel-property-types-heading p {
  max-width: 680px;

  margin: 14px auto 0;

  font-size: 16px;
  line-height: 1.6;

  color: #6b7280;
}

/* =========================================
   Slider
========================================= */

.list-your-hotel-property-types-slider-wrap {
  position: relative;
}

.list-your-hotel-property-types-slider {
  display: flex;

  gap: 18px;

  overflow-x: auto;

  padding: 8px 4px 18px;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
}

.list-your-hotel-property-types-slider::-webkit-scrollbar {
  display: none;
}

/* =========================================
   Card Content
========================================= */

.list-your-hotel-property-type-card h3 {
  margin: 0 0 9px;

  font-size: 20px;
  font-family: sans-serif;
  line-height: 1.3;
  font-weight: 700;

  color: #17212b;
}

.list-your-hotel-property-type-card p {
  margin: 0;

  font-size: 14px;
  line-height: 1.55;

  color: #6b7280;
}

/* =========================================
   Slider Arrows
========================================= */

.list-your-hotel-property-types-arrow {
  position: absolute;

  top: 50%;
  z-index: 5;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #e5e7eb;
  border-radius: 50%;

  background: #ffffff;
  color: #374151;

  cursor: pointer;

  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);

  transform: translateY(-50%);

  transition: all 0.2s ease;
}

.list-your-hotel-property-types-arrow-left {
  left: -20px;
}

.list-your-hotel-property-types-arrow-right {
  right: -20px;
}

/* =========================================
   Tablet
========================================= */

@media (max-width: 1024px) {
  .list-your-hotel-property-types {
    padding: 65px 0;
  }

  .list-your-hotel-property-types-heading h2 {
    font-size: 32px;
  }

  .list-your-hotel-property-types-arrow-left {
    left: 0;
  }

  .list-your-hotel-property-types-arrow-right {
    right: 0;
  }
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 640px) {
  .list-your-hotel-property-types {
    padding: 52px 0;
  }

  .list-your-hotel-property-types-container {
    padding: 0 16px;
  }

  .list-your-hotel-property-types-heading {
    margin-bottom: 28px;
  }

  .list-your-hotel-property-types-heading > span {
    font-size: 10px;
  }

  .list-your-hotel-property-types-heading h2 {
    font-size: 27px;
  }

  .list-your-hotel-property-types-heading p {
    font-size: 14px;
  }

  .list-your-hotel-property-types-arrow {
    display: none;
  }
}

.list-your-hotel-property-type-card {
  flex: 0 0 300px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.list-your-hotel-property-type-image {
  position: relative;
  width: 100%;
  height: 168px;
  overflow: hidden;
}

.list-your-hotel-property-type-image img {
  object-fit: cover;
  transition: transform 0.5s ease;
}

.list-your-hotel-property-type-content {
  padding: 10px;
}

.list-your-hotel-property-type-content h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 36px;
  color: #212121;
  font-weight: 900;
}

.list-your-hotel-property-type-content p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

.list-your-hotel-property-type-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ff7f47;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.list-your-hotel-property-type-link:hover {
  color: #ff7f47;
}

/* =========================================
   WHY PARTNER WITH US
========================================= */

.list-your-hotel-commercial {
  width: 100%;
  padding: 50px 20px;
  background: #ffffff;
}

.list-your-hotel-commercial-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* =========================================
   HEADING
========================================= */

.list-your-hotel-commercial-heading {
  max-width: 680px;
  margin: 0 auto 55px;
  text-align: center;
}

.list-your-hotel-commercial-heading span {
  display: block;
  margin-bottom: 10px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;

  color: #ff6a00;
}

.list-your-hotel-commercial-heading h2 {
  margin: 0;

  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;
  font-family: sans-serif;

  color: #17212b;
}

.list-your-hotel-commercial-heading p {
  margin: 14px auto 0;

  max-width: 580px;

  font-size: 15px;
  line-height: 1.7;

  color: #6b7280;
}

/* =========================================
   BENEFITS GRID
========================================= */

.list-your-hotel-commercial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
  row-gap: 48px;
}

/* =========================================
   BENEFIT ITEM
========================================= */

.list-your-hotel-commercial-item {
  display: flex;
  align-items: flex-start;

  gap: 25px;
}

.list-your-hotel-commercial-icon {
  flex: 0 0 76px;

  width: 76px;
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #171717;
}

.list-your-hotel-commercial-icon svg {
  width: 58px;
  height: 58px;

  stroke-width: 1.3;
}

.list-your-hotel-commercial-content {
  padding-top: 2px;
}

.list-your-hotel-commercial-content h3 {
  margin: 0 0 7px;

  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  font-family: sans-serif;

  color: #17212b;
}

.list-your-hotel-commercial-content p {
  margin: 0;

  max-width: 400px;

  font-size: 15px;
  line-height: 1.65;

  color: #5f6368;
}

/* =========================================
   COMMERCIAL HIGHLIGHTS
========================================= */

.list-your-hotel-commercial-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  margin-top: 65px;

  padding-top: 28px;

  border-top: 1px solid #e8e8e8;
}

.list-your-hotel-commercial-highlights > div {
  text-align: center;

  padding: 0 20px;

  border-right: 1px solid #e8e8e8;
}

.list-your-hotel-commercial-highlights > div:last-child {
  border-right: 0;
}

.list-your-hotel-commercial-highlights strong {
  display: block;

  font-size: 22px;
  line-height: 1.2;

  color: #17212b;
}

.list-your-hotel-commercial-highlights span {
  display: block;

  margin-top: 5px;

  font-size: 12px;

  color: #7b8085;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {
  .list-your-hotel-commercial-grid {
    column-gap: 40px;
  }

  .list-your-hotel-commercial-highlights {
    grid-template-columns: repeat(2, 1fr);

    row-gap: 25px;
  }

  .list-your-hotel-commercial-highlights > div:nth-child(2) {
    border-right: 0;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px) {
  .list-your-hotel-commercial {
    padding: 60px 18px;
  }

  .list-your-hotel-commercial-heading {
    margin-bottom: 40px;
  }

  .list-your-hotel-commercial-heading h2 {
    font-size: 29px;
  }

  .list-your-hotel-commercial-heading p {
    font-size: 14px;
  }

  .list-your-hotel-commercial-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .list-your-hotel-commercial-item {
    gap: 18px;
  }

  .list-your-hotel-commercial-icon {
    flex-basis: 58px;

    width: 58px;
    height: 58px;
  }

  .list-your-hotel-commercial-icon svg {
    width: 46px;
    height: 46px;
  }

  .list-your-hotel-commercial-content h3 {
    font-size: 16px;
  }

  .list-your-hotel-commercial-content p {
    font-size: 13px;
    line-height: 1.6;
  }

  .list-your-hotel-commercial-highlights {
    grid-template-columns: 1fr 1fr;

    margin-top: 45px;
    padding-top: 25px;

    row-gap: 25px;
  }

  .list-your-hotel-commercial-highlights > div {
    padding: 0 10px;
  }

  .list-your-hotel-commercial-highlights > div:nth-child(2) {
    border-right: 0;
  }

  .list-your-hotel-commercial-highlights strong {
    font-size: 19px;
  }
}

/* =========================================================
   HOTEL DETAILS - SPECIAL DEALS
========================================================= */

.hotels-details-deals {
  margin-top: 10px;
}

/* =========================================================
   HEADER
========================================================= */

.hotels-details-deals-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}

.hotels-details-deals-header-content {
  min-width: 0;
}

.hotels-details-deals-eyebrow {
  display: block;

  margin-bottom: 6px;

  color: #bd8b32;

  font-size: 10px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.hotels-details-deals-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: rgb(26, 26, 26);
  font-family: sans-serif;
}

.hotels-details-deals-subtitle {
  margin: 6px 0 0;

  color: #687386;

  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================
   DEALS WRAPPER
   REQUIRED FOR CENTERED ARROWS
========================================================= */

.hotels-details-deals-wrapper {
  position: relative;

  width: 100%;

  box-sizing: border-box;
}

/* =========================================================
   DEAL SCROLL
   ALL ITEMS IN ONE ROW
========================================================= */

.hotels-details-deals-scroll {
  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;

  align-items: stretch;

  gap: 14px;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 3px 2px 8px;

  scroll-behavior: smooth;

  scroll-snap-type: x proximity;

  /*
   * Hide scrollbar
   */
  scrollbar-width: none;

  -ms-overflow-style: none;

  box-sizing: border-box;
}

.hotels-details-deals-scroll::-webkit-scrollbar {
  display: none;

  width: 0;
  height: 0;
}

.hotels-details-deal {
  position: relative;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;

  flex: 0 0 480px;

  width: 480px;
  min-width: 480px;
  max-width: 480px;

  height: 150px;
  min-height: 150px;
  max-height: 150px;

  overflow: hidden;

  padding: 0;

  background: var(--lux-hotel-gold-light);

  cursor: pointer;

  scroll-snap-align: start;

  box-sizing: border-box;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.hotels-details-deal--selected {
  box-shadow:
    0 4px 10px rgba(189, 139, 50, 0.08),
    0 10px 25px rgba(189, 139, 50, 0.16);
}
/* =========================================================
   IMAGE
========================================================= */

.hotels-details-deal-image-wrap {
  position: relative;

  flex: 0 0 150px;

  width: 150px;
  min-width: 150px;
  max-width: 150px;

  height: 150px;
  min-height: 150px;
  max-height: 150px;

  overflow: hidden;

  background: #f5f4f1;

  box-sizing: border-box;
}

.hotels-details-deal-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease;
}

/* =========================================================
   IMAGE PLACEHOLDER
========================================================= */

.hotels-details-deal-placeholder {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  background: #f7f3eb;

  color: #bd8b32;

  font-size: 12px;

  font-weight: 600;
}

/* =========================================================
   IMAGE BADGE
========================================================= */

.hotels-details-deal-badge {
  position: absolute;

  top: 8px;
  left: 8px;

  z-index: 2;

  padding: 5px 7px;

  background: #ffffff;

  color: #98702b;

  font-size: 8px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.7px;
}

/* =========================================================
   SELECTED BADGE
========================================================= */

.hotels-details-deal-selected-badge {
  position: absolute;

  right: 7px;
  bottom: 7px;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 5px 7px;

  background: #bd8b32;

  color: #ffffff;

  font-size: 9px;
  line-height: 1;

  font-weight: 700;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.hotels-details-deal-selected-badge svg {
  flex-shrink: 0;
}

/* =========================================================
   CONTENT
========================================================= */

.hotels-details-deal-content {
  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  min-width: 0;

  height: 100%;

  padding: 13px 14px;

  box-sizing: border-box;
}

/* =========================================================
   DEAL TITLE
========================================================= */

.hotels-details-deal-title {
  display: block;

  margin: 0;

  overflow: hidden;

  color: #171717;

  font-size: 16px;
  line-height: 1.25;

  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
  font-family: sans-serif;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.hotels-details-deal-description {
  display: -webkit-box;

  margin: 5px 0 0;

  overflow: hidden;

  color: #687386;

  font-size: 10.5px;
  line-height: 1.45;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;
}

/* =========================================================
   DEAL BOTTOM
========================================================= */

.hotels-details-deal-bottom {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: auto;

  padding-top: 8px;

  border-top: 1px solid #eeeeee;
}

/* =========================================================
   PRICE
========================================================= */

.hotels-details-deal-price {
  flex-shrink: 0;

  color: #171717;

  font-size: 17px;

  line-height: 1.1;

  font-weight: 700;

  white-space: nowrap;
}

.hotels-details-deal-price span {
  margin-left: 2px;

  color: #7b8490;

  font-size: 9px;

  font-weight: 400;
}

/* =========================================================
   VALIDITY
========================================================= */

.hotels-details-deal-validity {
  display: flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

  color: #7a818b;

  font-size: 9px;

  white-space: nowrap;
}

.hotels-details-deal-validity svg {
  flex-shrink: 0;

  color: #bd8b32;
}

.hotels-details-deal-validity strong {
  color: #454b55;

  font-weight: 600;
}

/* =========================================================
   SELECT ROW
========================================================= */

.hotels-details-deal-select {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-top: 7px;

  color: #59616d;

  font-size: 10px;

  font-weight: 600;

  white-space: nowrap;
}

.hotels-details-deal-select--selected {
  color: #a2762a;
}

/* =========================================================
   RADIO
========================================================= */

.hotels-details-deal-radio {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;

  flex-shrink: 0;

  border: 1.5px solid #c8ccd1;

  border-radius: 50%;

  color: #ffffff;

  box-sizing: border-box;
}

.hotels-details-deal-select--selected .hotels-details-deal-radio {
  border-color: #bd8b32;

  background: #bd8b32;
}

/* =========================================================
   SELECT ARROW
========================================================= */

.hotels-details-deal-select > svg:last-child {
  margin-left: auto;

  flex-shrink: 0;

  color: #9ca3af;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* =========================================================
   LEFT / RIGHT NAVIGATION
========================================================= */

.hotels-details-deals-nav {
  position: absolute;

  top: 50%;

  z-index: 20;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  padding: 0;

  border: 1px solid #e1e1e1;

  border-radius: 50%;

  background: #ffffff;

  color: #252525;

  cursor: pointer;

  transform: translateY(-50%);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);

  box-sizing: border-box;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* =========================================================
   LEFT BUTTON
========================================================= */

.hotels-details-deals-nav--left {
  left: -19px;
}

/* =========================================================
   RIGHT BUTTON
========================================================= */

.hotels-details-deals-nav--right {
  right: -19px;
}

/* =========================================================
   SCROLL HINT
========================================================= */

.hotels-details-deals-scroll-hint {
  display: none;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {
  .hotels-details-deal {
    flex-basis: 520px;

    width: 520px;
    min-width: 520px;
    max-width: 520px;
  }

  .hotels-details-deal-image-wrap {
    flex-basis: 155px;

    width: 155px;
    min-width: 155px;
    max-width: 155px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .hotels-details-deals {
    padding-right: 16px;
    padding-left: 16px;
  }

  .hotels-details-deal {
    flex-basis: 470px;

    width: 470px;
    min-width: 470px;
    max-width: 470px;
  }

  .hotels-details-deal-image-wrap {
    flex-basis: 140px;

    width: 140px;
    min-width: 140px;
    max-width: 140px;
  }

  .hotels-details-deals-nav {
    width: 35px;
    height: 35px;
  }

  .hotels-details-deals-nav--left {
    left: -13px;
  }

  .hotels-details-deals-nav--right {
    right: -13px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
  .hotels-details-deals {
    margin-top: 20px;

    padding: 22px 14px;
  }

  .hotels-details-deals-header {
    margin-bottom: 15px;
  }

  .hotels-details-deals-title {
    font-size: 21px;
  }

  .hotels-details-deals-subtitle {
    font-size: 11px;
  }

  /* -------------------------------------------------------
     SCROLL
  ------------------------------------------------------- */

  .hotels-details-deals-scroll {
    gap: 10px;

    margin-right: -14px;

    padding-right: 14px;

    scrollbar-width: none;
  }

  /* -------------------------------------------------------
     DEAL
  ------------------------------------------------------- */

  .hotels-details-deal {
    flex: 0 0 390px;

    width: 390px;
    min-width: 390px;
    max-width: 390px;

    height: 135px;
    min-height: 135px;
    max-height: 135px;
  }

  /* -------------------------------------------------------
     IMAGE
  ------------------------------------------------------- */

  .hotels-details-deal-image-wrap {
    flex: 0 0 125px;

    width: 125px;
    min-width: 125px;
    max-width: 125px;

    height: 135px;
    min-height: 135px;
  }

  /* -------------------------------------------------------
     CONTENT
  ------------------------------------------------------- */

  .hotels-details-deal-content {
    padding: 11px 12px;
  }

  .hotels-details-deal-title {
    font-size: 14px;
  }

  .hotels-details-deal-description {
    margin-top: 4px;

    font-size: 9.5px;

    -webkit-line-clamp: 2;
  }

  /* -------------------------------------------------------
     BOTTOM
  ------------------------------------------------------- */

  .hotels-details-deal-bottom {
    gap: 7px;

    padding-top: 6px;
  }

  .hotels-details-deal-price {
    font-size: 15px;
  }

  .hotels-details-deal-price span {
    font-size: 8px;
  }

  .hotels-details-deal-validity {
    font-size: 8px;
  }

  /* -------------------------------------------------------
     SELECT
  ------------------------------------------------------- */

  .hotels-details-deal-select {
    margin-top: 5px;

    font-size: 9px;
  }

  .hotels-details-deal-radio {
    width: 14px;
    height: 14px;
  }

  /* -------------------------------------------------------
     BADGES
  ------------------------------------------------------- */

  .hotels-details-deal-badge {
    top: 7px;
    left: 7px;

    padding: 4px 6px;

    font-size: 7px;
  }

  .hotels-details-deal-selected-badge {
    right: 6px;
    bottom: 6px;

    padding: 4px 6px;

    font-size: 8px;
  }

  /* -------------------------------------------------------
     NAVIGATION
  ------------------------------------------------------- */

  .hotels-details-deals-nav {
    width: 32px;
    height: 32px;
  }

  .hotels-details-deals-nav--left {
    left: -7px;
  }

  .hotels-details-deals-nav--right {
    right: -7px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .hotels-details-deal {
    flex-basis: 350px;

    width: 350px;
    min-width: 350px;
    max-width: 350px;
  }

  .hotels-details-deal-image-wrap {
    flex-basis: 110px;

    width: 110px;
    min-width: 110px;
    max-width: 110px;
  }

  .hotels-details-deal-content {
    padding: 10px 11px;
  }

  .hotels-details-deal-title {
    font-size: 13px;
  }

  .hotels-details-deal-description {
    font-size: 9px;
  }

  .hotels-details-deal-price {
    font-size: 14px;
  }

  .hotels-details-deal-validity {
    font-size: 7.5px;
  }

  .hotels-details-deals-nav {
    width: 30px;
    height: 30px;
  }

  .hotels-details-deals-nav--left {
    left: -5px;
  }

  .hotels-details-deals-nav--right {
    right: -5px;
  }
}

.hotel-booking-summary-block-signup-login {
  padding: 0px;
}

.hotel-booking-summary-block-signup-login-title {
  margin: 0 0 14px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  font-family: sans-serif;
}

.hotel-booking-summary-block-signup-login-title span {
  color: var(--lux-hotel-gold);
}

.hotel-booking-summary-block-signup-login-action {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--lux-hotel-gold);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.hotel-booking-summary-block-signup-login-action:hover {
  text-decoration: underline;
}

.hotel-booking-summary-block-signup-login-list {
  width: 100%;
}

.hotel-booking-summary-block-signup-login-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 39px;
  border-bottom: 1px solid #d9d9d9;
}

.hotel-booking-summary-block-signup-login-item:last-child {
  border-bottom: none;
}

.hotel-booking-summary-block-signup-login-check {
  flex-shrink: 0;
  color: var(--lux-hotel-gold);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.hotel-booking-summary-block-signup-login-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.hotel-booking-summary-block-signup-login-item strong {
  color: #111;
  font-weight: 700;
}

.lux-hotel-section-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* =========================================================
   PARTNER HOW IT WORKS
   ========================================================= */

.lux-hotel-partner-how {
  padding: 40px 16px;

  background: #ffffff;
}

/* Heading */

.lux-hotel-partner-how .lux-hotel-section-heading {
  margin-bottom: 75px;
}

/* Steps wrapper */

.lux-hotel-partner-how__steps {
  position: relative;

  max-width: 1000px;

  margin: 0 auto;
}

/* Center line */

.lux-hotel-partner-how__steps::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;

  background: #ffe1d5;

  transform: translateX(-50%);
}

/* Individual step */

.lux-hotel-partner-how__step {
  position: relative;

  display: grid;

  grid-template-columns: 1fr 72px 1fr;

  min-height: 150px;

  align-items: center;
}

/* Content */

.lux-hotel-partner-how__content {
  width: 100%;

  max-width: 390px;

  padding: 20px;

  background: #ffffff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;

}



/* Normal steps */

.lux-hotel-partner-how__step:not(.lux-hotel-partner-how__step--reverse)
  .lux-hotel-partner-how__content {
  justify-self: end;
}

/* Reverse steps */

.lux-hotel-partner-how__step--reverse .lux-hotel-partner-how__content {
  grid-column: 3;

  justify-self: start;
}

/* Marker */

.lux-hotel-partner-how__marker {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin: 0 auto;

  border: 2px solid #ffe1d5;

  border-radius: 50%;

  background: #fff4ef;

  color: #ff7f47;

  font-size: 15px;
  font-weight: 700;

}

/* Empty space */

.lux-hotel-partner-how__space {
  min-width: 0;
}

/* Eyebrow */

.lux-hotel-partner-how__eyebrow {
  display: block;

  margin-bottom: 10px;

  color: #ff7f47;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1.5px;
}

/* Title */

.lux-hotel-partner-how__content h3 {
  margin: 0 0 10px;

  color: #172b3a;

  font-family: sans-serif;

  font-size: 22px;
  font-weight: 600;

  line-height: 1.3;
}

/* Description */

.lux-hotel-partner-how__content p {
  margin: 0;

  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {
  .lux-hotel-partner-how {
    padding: 75px 0;
  }

  .lux-hotel-partner-how .lux-hotel-section-heading {
    margin-bottom: 50px;
  }

  .lux-hotel-partner-how__steps {
    padding-left: 5px;
  }

  .lux-hotel-partner-how__steps::before {
    left: 29px;

    transform: none;
  }

  .lux-hotel-partner-how__step {
    display: grid;

    grid-template-columns: 58px 1fr;

    min-height: auto;

    margin-bottom: 22px;

    align-items: start;
  }

  .lux-hotel-partner-how__marker {
    grid-column: 1;

    width: 58px;
    height: 58px;

    margin: 0;
  }

  .lux-hotel-partner-how__content,
  .lux-hotel-partner-how__step--reverse .lux-hotel-partner-how__content {
    grid-column: 2;

    grid-row: 1;

    justify-self: stretch;

    max-width: none;

    margin-left: 20px;

    padding: 23px;
  }

  .lux-hotel-partner-how__space {
    display: none;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .lux-hotel-partner-how {
    padding: 60px 0;
  }

  .lux-hotel-partner-how .lux-hotel-section-heading {
    margin-bottom: 40px;
  }

  .lux-hotel-partner-how__steps {
    padding-left: 0;
  }

  .lux-hotel-partner-how__steps::before {
    left: 24px;
  }

  .lux-hotel-partner-how__step {
    grid-template-columns: 48px 1fr;

    margin-bottom: 16px;
  }

  .lux-hotel-partner-how__marker {
    width: 48px;
    height: 48px;

    font-size: 10px;
  }

  .lux-hotel-partner-how__content,
  .lux-hotel-partner-how__step--reverse .lux-hotel-partner-how__content {
    margin-left: 14px;

    padding: 20px;
  }

  .lux-hotel-partner-how__content h3 {
    font-size: 19px;
  }

  .lux-hotel-partner-how__content p {
    font-size: 13px;

    line-height: 1.65;
  }

  .lux-hotel-partner-how__eyebrow {
    font-size: 9px;
  }
}


.lux-hotel-partner-properties {
  width: 100%;
  padding: 40px 16px;
  background: #ffffff;
}


.lux-hotel-partner-properties__content {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.lux-hotel-partner-properties__content h2 {
  margin: 0;
  color: #172b3a;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.lux-hotel-partner-properties__content > p {
  max-width: 700px;
  margin: 20px auto 45px;
  color: #71717a;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.lux-hotel-partner-properties__list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: left;
  margin: 40px 0 0 0;
}

.lux-hotel-partner-properties__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #f8f9fa;
  border: 1px solid #e7e7e9;
  border-radius: 12px;
}

.lux-hotel-partner-properties__check {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff0ea;
  color: #ff7f47;
  font-size: 14px;
  font-weight: 700;
}

.lux-hotel-partner-properties__item p {
  margin: 0;
  color: #52525b;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.lux-hotel-partner-properties__button {
  margin-top: 40px;
  padding: 14px 28px;
  border: 0;
  border-radius: 50px;
  background: #ff7f47;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.lux-hotel-partner-properties__button:hover {
  background: #f56f3a;
 
}

@media (max-width: 768px) {
  .lux-hotel-partner-properties {
    padding: 70px 16px;
  }

  .lux-hotel-partner-properties__content h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .lux-hotel-partner-properties__content > p {
    margin: 16px auto 35px;
    font-size: 14px;
    line-height: 1.65;
  }

  .lux-hotel-partner-properties__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lux-hotel-partner-properties__item {
    padding: 16px;
  }

  .lux-hotel-partner-properties__button {
    width: 100%;
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .lux-hotel-partner-properties {
    padding: 55px 14px;
  }

  .lux-hotel-partner-properties__content h2 {
    font-size: 28px;
  }

  .lux-hotel-partner-properties__content > p {
    font-size: 13px;
  }

  .lux-hotel-partner-properties__item p {
    font-size: 14px;
  }
}


.lux-hotel-partner-rooms {
  width: 100%;
  padding: 40px 16px;
  background: #f8f9fa;
}



/* =========================
   Room Categories
========================= */

.lux-hotel-partner-rooms__categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lux-hotel-partner-rooms__category {
  position: relative;
  min-height: 270px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}




/* Number */

.lux-hotel-partner-rooms__category-number {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 45px;
  border-radius: 50%;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 13px;
  font-weight: 700;
}

/* Room Name */

.lux-hotel-partner-rooms__category h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #172b3a;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.3;
  font-family: sans-serif;
}

.lux-hotel-partner-rooms__category > p {
  position: relative;
  z-index: 1;
  max-width: 400px;
  margin: 10px 0 25px;
  font-size: 16px;
    line-height: 24px;
    color: #333333;
}

/* Category Footer */

.lux-hotel-partner-rooms__category-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #eeeeef;
}

.lux-hotel-partner-rooms__category-link span:first-child {
  color: #71717a;
  font-size: 12px;
  font-weight: 500;
}

.lux-hotel-partner-rooms__category-link span:last-child {
  color: #ff7f47;
  font-size: 16px;
}

/* =========================
   Information Section
========================= */

.lux-hotel-partner-rooms__information {
  margin-top: 24px;
  padding: 38px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

.lux-hotel-partner-rooms__information-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-rooms__information-heading h3 {
  margin: 0;
  color: #172b3a;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.3;
  font-family: sans-serif;
}

.lux-hotel-partner-rooms__information-heading p {
  max-width: 560px;
  margin: 8px 0 0;
  color: #71717a;
  font-size: 14px;
  line-height: 1.65;
}



/* =========================
   Information Cards
========================= */

.lux-hotel-partner-rooms__information-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 5px;
}

.lux-hotel-partner-rooms__information-card {
  padding: 30px 28px 20px;
  border-right: 1px solid #e7e7e9;
}

.lux-hotel-partner-rooms__information-card:first-child {
  padding-left: 0;
}

.lux-hotel-partner-rooms__information-card:last-child {
  padding-right: 0;
  border-right: 0;
}

/* Icon */

.lux-hotel-partner-rooms__information-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 9px;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 14px;
  font-weight: 700;
}

.lux-hotel-partner-rooms__information-card h4 {
  margin: 0;
  color: #172b3a;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.3;
}

.lux-hotel-partner-rooms__information-card-desc {
  margin: 8px 0 20px;
  font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* List */

.lux-hotel-partner-rooms__information-card ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lux-hotel-partner-rooms__information-card li {
  display: flex;
  align-items: center;
  gap: 9px;
 font-size: 15px;
    line-height: 24px;
    color: #333333;
}

.lux-hotel-partner-rooms__information-card li span {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 9px;
  font-weight: 700;
}

/* =========================
   Tablet
========================= */

@media (max-width: 950px) {
  .lux-hotel-partner-rooms {
    padding: 85px 16px;
  }

  .lux-hotel-partner-rooms__categories {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-rooms__category {
    min-height: auto;
  }

  .lux-hotel-partner-rooms__information-grid {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-rooms__information-card,
  .lux-hotel-partner-rooms__information-card:first-child,
  .lux-hotel-partner-rooms__information-card:last-child {
    padding: 25px 0;
    border-right: 0;
    border-bottom: 1px solid #e7e7e9;
  }

  .lux-hotel-partner-rooms__information-card:last-child {
    border-bottom: 0;
  }
}

/* =========================
   Mobile
========================= */

@media (max-width: 600px) {
  .lux-hotel-partner-rooms {
    padding: 65px 14px;
  }

  .lux-hotel-partner-rooms .lux-hotel-section-heading {
    margin-bottom: 40px;
  }

  .lux-hotel-partner-rooms .lux-hotel-section-heading h2 {
    font-size: 30px;
  }

  .lux-hotel-partner-rooms .lux-hotel-section-heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .lux-hotel-partner-rooms__category {
    padding: 23px;
  }

  .lux-hotel-partner-rooms__category-number {
    margin-bottom: 35px;
  }

  .lux-hotel-partner-rooms__category h3 {
    font-size: 21px;
  }

  .lux-hotel-partner-rooms__information {
    padding: 24px;
  }

  .lux-hotel-partner-rooms__information-heading {
    display: block;
    padding-bottom: 22px;
  }

  .lux-hotel-partner-rooms__information-heading h3 {
    font-size: 21px;
  }

  .lux-hotel-partner-rooms__information-heading p {
    margin-top: 10px;
    font-size: 13px;
  }

  .lux-hotel-partner-rooms__information-heading::after {
    display: block;
    margin-top: 18px;
  }

  .lux-hotel-partner-rooms__information-card {
    padding: 23px 0;
  }
}

@media (max-width: 420px) {
  .lux-hotel-partner-rooms {
    padding: 55px 14px;
  }

  .lux-hotel-partner-rooms .lux-hotel-section-heading h2 {
    font-size: 27px;
  }

  .lux-hotel-partner-rooms__category {
    padding: 20px;
  }

  .lux-hotel-partner-rooms__information {
    padding: 20px;
  }
}


.lux-hotel-partner-pricing {
  width: 100%;
  padding: 40px 16px;
  
}




/* =========================
   Overview
========================= */

.lux-hotel-partner-pricing__overview {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: hidden;
  border-radius: 16px;
  background: #172b3a;
}

.lux-hotel-partner-pricing__overview-content {
  padding: 42px;
}

.lux-hotel-partner-pricing__overview-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 55px;
  border-radius: 50%;
  background: rgba(255, 127, 71, 0.15);
  color: #ff9b76;
  font-size: 12px;
  font-weight: 700;
}

.lux-hotel-partner-pricing__overview-content h3 {
  max-width: 410px;
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.3;
  font-family: sans-serif;
}

.lux-hotel-partner-pricing__overview-content p {
  max-width: 430px;
  margin: 15px 0 0;
  color: #cbd5db;
  font-size: 14px;
  line-height: 1.7;
}

/* =========================
   Example
========================= */

.lux-hotel-partner-pricing__example {
  padding: 35px;
  background: #ffffff;
}

.lux-hotel-partner-pricing__example-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-pricing__example-header span {
  color: #ff7f47;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lux-hotel-partner-pricing__example-header strong {
  color: #172b3a;
  font-size: 15px;
  font-weight: 650;
}

.lux-hotel-partner-pricing__example-flow {
  display: grid;
  grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  align-items: center;
  gap: 5px;
  padding-top: 25px;
}

.lux-hotel-partner-pricing__rate {
  min-height: 130px;
  padding: 17px;
  background: #f8f9fa;
  border: 1px solid #e7e7e9;
  border-radius: 9px;
}

.lux-hotel-partner-pricing__rate > span {
  display: block;
  margin-bottom: 25px;
  color: #71717a;
  font-size: 10px;
  font-weight: 600;
}

.lux-hotel-partner-pricing__rate strong {
  display: block;
  color: #172b3a;
  font-size: 14px;
  font-weight: 650;
}

.lux-hotel-partner-pricing__rate p {
  margin: 5px 0 0;
      font-size: 11px;
   
    color: #333333;
}

.lux-hotel-partner-pricing__flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7f47;
  font-size: 17px;
}

/* =========================
   Rules
========================= */

.lux-hotel-partner-pricing__rules {
  margin-top: 24px;
  padding: 35px;
  background: #ffffff;
  border: 1px solid #e7e7e9;
  border-radius: 16px;
}

.lux-hotel-partner-pricing__rules-heading {
  padding-bottom: 25px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-pricing__rules-heading h3 {
  margin: 0;
  color: #172b3a;
  font-size: 25px;
  font-weight: 650;
  font-family: sans-serif;
}

.lux-hotel-partner-pricing__rules-heading p {
  margin: 8px 0 0;
  color: #71717a;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   Rule Grid
========================= */

.lux-hotel-partner-pricing__rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 45px;
}

.lux-hotel-partner-pricing__rule {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-height: 145px;
  padding: 27px 0;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-pricing__rule:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.lux-hotel-partner-pricing__rule-number {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 11px;
  font-weight: 700;
}

.lux-hotel-partner-pricing__rule h4 {
  margin: 1px 0 7px;
  color: #172b3a;
  font-size: 17px;
  font-weight: 650;
}

.lux-hotel-partner-pricing__rule p {
  margin: 0;
      font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* =========================
   Bottom Note
========================= */

.lux-hotel-partner-pricing__bottom {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 18px;
  padding: 20px 23px;
  border-left: 3px solid #ff7f47;
  background: #fff4ef;
}

.lux-hotel-partner-pricing__bottom-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff7f47;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.lux-hotel-partner-pricing__bottom h3 {
  margin: 0;
  color: #172b3a;
  font-size: 18px;
  font-weight: 650;
  font-family: sans-serif;
}

.lux-hotel-partner-pricing__bottom p {
  max-width: 900px;
  margin: 5px 0 0;
      font-size: 16px;
    line-height: 24px;
    color: #333333;
}

/* =========================
   Tablet
========================= */

@media (max-width: 1000px) {
  .lux-hotel-partner-pricing {
    padding: 85px 16px;
  }

  .lux-hotel-partner-pricing__overview {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-pricing__example-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .lux-hotel-partner-pricing__flow-arrow {
    display: none;
  }
}

/* =========================
   Mobile
========================= */

@media (max-width: 650px) {
  .lux-hotel-partner-pricing {
    padding: 65px 14px;
  }

  .lux-hotel-partner-pricing .lux-hotel-section-heading {
    margin-bottom: 40px;
  }

  .lux-hotel-partner-pricing .lux-hotel-section-heading h2 {
    font-size: 30px;
  }

  .lux-hotel-partner-pricing .lux-hotel-section-heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .lux-hotel-partner-pricing__overview-content {
    padding: 27px;
  }

  .lux-hotel-partner-pricing__overview-number {
    margin-bottom: 40px;
  }

  .lux-hotel-partner-pricing__overview-content h3 {
    font-size: 23px;
  }

  .lux-hotel-partner-pricing__overview-content p {
    font-size: 13px;
  }

  .lux-hotel-partner-pricing__example {
    padding: 23px;
  }

  .lux-hotel-partner-pricing__example-flow {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-pricing__rate {
    min-height: auto;
  }

  .lux-hotel-partner-pricing__rules {
    padding: 23px;
  }

  .lux-hotel-partner-pricing__rules-heading h3 {
    font-size: 21px;
  }

  .lux-hotel-partner-pricing__rule-grid {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-pricing__rule {
    min-height: auto;
    padding: 22px 0;
  }

  .lux-hotel-partner-pricing__rule:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e7e7e9;
  }

  .lux-hotel-partner-pricing__rule:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .lux-hotel-partner-pricing {
    padding: 55px 14px;
  }

  .lux-hotel-partner-pricing .lux-hotel-section-heading h2 {
    font-size: 27px;
  }

  .lux-hotel-partner-pricing__overview-content {
    padding: 22px;
  }

  .lux-hotel-partner-pricing__example {
    padding: 19px;
  }

  .lux-hotel-partner-pricing__rules {
    padding: 19px;
  }
}

.lux-hotel-partner-deals {
  width: 100%;
  padding: 40px 16px;
  background: #ffffff;
}



/* Intro */

.lux-hotel-partner-deals__intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: 16px;
  background: #172b3a;
}

.lux-hotel-partner-deals__intro-content {
  padding: 42px;
}

.lux-hotel-partner-deals__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 55px;
  border-radius: 50%;
  background: rgba(255, 127, 71, 0.15);
  color: #ff9b76;
  font-size: 12px;
  font-weight: 700;
}

.lux-hotel-partner-deals__intro-content h3 {
  max-width: 430px;
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.3;
  font-family: sans-serif;
}

.lux-hotel-partner-deals__intro-content p {
  max-width: 450px;
  margin: 16px 0 0;
  color: #cbd5db;
  font-size: 14px;
  line-height: 1.7;
}

/* Highlight */

.lux-hotel-partner-deals__highlight {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #e7e7e9;
}

.lux-hotel-partner-deals__highlight div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 145px;
  padding: 30px;
  background: #ffffff;
}

.lux-hotel-partner-deals__highlight strong {
  color: #172b3a;
  font-size: 17px;
  font-weight: 650;
}

.lux-hotel-partner-deals__highlight span {
  margin-top: 7px;
      font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Offers */

.lux-hotel-partner-deals__offers {
  margin-top: 24px;
  padding: 35px;
  border: 1px solid #e7e7e9;
  border-radius: 16px;
}

.lux-hotel-partner-deals__offers-heading {
  padding-bottom: 25px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-deals__offers-heading h3 {
  margin: 0;
  color: #172b3a;
  font-size: 25px;
  font-weight: 650;
  font-family: sans-serif;
}

.lux-hotel-partner-deals__offers-heading p {
  max-width: 700px;
  margin: 8px 0 0;
  color: #71717a;
  font-size: 14px;
  line-height: 1.6;
}

.lux-hotel-partner-deals__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 45px;
}

.lux-hotel-partner-deals__card {
  position: relative;
  padding: 28px 0;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-deals__card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.lux-hotel-partner-deals__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.lux-hotel-partner-deals__card-top > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 11px;
  font-weight: 700;
}

.lux-hotel-partner-deals__card-top small {
  color: #71717a;
  font-size: 13px;
  font-weight: 600;
}

.lux-hotel-partner-deals__card h3 {
  margin: 0;
  color: #172b3a;
  font-size: 19px;
  font-weight: 650;
  font-family: sans-serif;
}

.lux-hotel-partner-deals__card p {
  max-width: 480px;
  margin: 9px 0 0;
      font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Benefits */

.lux-hotel-partner-deals__benefits {
  margin-top: 24px;
  padding: 35px;
  background: #f8f9fa;
  border-radius: 16px;
}

.lux-hotel-partner-deals__benefits-heading {
  padding-bottom: 25px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-deals__benefits-heading h3 {
  margin: 0;
  color: #172b3a;
  font-size: 25px;
  font-weight: 650;
  font-family: sans-serif;
}

.lux-hotel-partner-deals__benefits-heading p {
  max-width: 720px;
  margin: 8px 0 0;
  color: #71717a;
  font-size: 14px;
  line-height: 1.6;
}

.lux-hotel-partner-deals__benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 45px;
}

.lux-hotel-partner-deals__benefit {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 25px 0;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-deals__benefit:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.lux-hotel-partner-deals__benefit > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  margin-top: 1px;
  border-radius: 50%;
  background: #ff7f47;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.lux-hotel-partner-deals__benefit h4 {
  margin: 0;
  color: #172b3a;
  font-size: 18px;
  font-weight: 650;
}

.lux-hotel-partner-deals__benefit p {
  margin: 5px 0 0;
     font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Tablet */

@media (max-width: 1000px) {
  .lux-hotel-partner-deals {
    padding: 85px 16px;
  }

  .lux-hotel-partner-deals__intro {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-deals__highlight {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */

@media (max-width: 650px) {
  .lux-hotel-partner-deals {
    padding: 65px 14px;
  }

  .lux-hotel-partner-deals .lux-hotel-section-heading {
    margin-bottom: 40px;
  }

  .lux-hotel-partner-deals .lux-hotel-section-heading h2 {
    font-size: 30px;
  }

  .lux-hotel-partner-deals .lux-hotel-section-heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .lux-hotel-partner-deals__intro-content {
    padding: 27px;
  }

  .lux-hotel-partner-deals__number {
    margin-bottom: 40px;
  }

  .lux-hotel-partner-deals__intro-content h3 {
    font-size: 23px;
  }

  .lux-hotel-partner-deals__intro-content p {
    font-size: 13px;
  }

  .lux-hotel-partner-deals__highlight div {
    min-height: 120px;
    padding: 22px;
  }

  .lux-hotel-partner-deals__highlight strong {
    font-size: 15px;
  }

  .lux-hotel-partner-deals__highlight span {
    font-size: 12px;
  }

  .lux-hotel-partner-deals__offers {
    padding: 23px;
  }

  .lux-hotel-partner-deals__offers-heading h3 {
    font-size: 21px;
  }

  .lux-hotel-partner-deals__grid {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-deals__card:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e7e7e9;
  }

  .lux-hotel-partner-deals__card:last-child {
    border-bottom: 0;
  }

  .lux-hotel-partner-deals__benefits {
    padding: 23px;
  }

  .lux-hotel-partner-deals__benefits-heading h3 {
    font-size: 21px;
  }

  .lux-hotel-partner-deals__benefits-grid {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-deals__benefit:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e7e7e9;
  }

  .lux-hotel-partner-deals__benefit:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .lux-hotel-partner-deals {
    padding: 55px 14px;
  }

  .lux-hotel-partner-deals .lux-hotel-section-heading h2 {
    font-size: 27px;
  }

  .lux-hotel-partner-deals__intro-content {
    padding: 22px;
  }

  .lux-hotel-partner-deals__highlight div {
    padding: 18px;
  }

  .lux-hotel-partner-deals__offers,
  .lux-hotel-partner-deals__benefits {
    padding: 19px;
  }
}


.lux-hotel-partner-inventory {
  width: 100%;
  padding: 40px 16px;
  background: #ffffff;
}


/* Main Content */

.lux-hotel-partner-inventory__content {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 70px;
  align-items: start;
}

.lux-hotel-partner-inventory__main {
  min-width: 0;
}

.lux-hotel-partner-inventory__intro {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 38px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-inventory__intro > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 12px;
  font-weight: 700;
}

.lux-hotel-partner-inventory__intro h3 {
  margin: 0;
  color: #172b3a;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.3;
  font-family: sans-serif;
}

.lux-hotel-partner-inventory__intro p {
  max-width: 700px;
  margin: 14px 0 0;
      font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Information List */

.lux-hotel-partner-inventory__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 45px;
}

.lux-hotel-partner-inventory__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 30px 0;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-inventory__item > span {
  color: #ff7f47;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.lux-hotel-partner-inventory__item h4 {
  margin: 0;
  color: #172b3a;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
}

.lux-hotel-partner-inventory__item p {
  margin: 8px 0 0;
      font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Side Information */

.lux-hotel-partner-inventory__side {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 14px;
}

.lux-hotel-partner-inventory__side h3 {
  margin: 0;
  color: #172b3a;
  font-size: 21px;
  font-weight: 650;
  line-height: 1.35;
  font-family: sans-serif;
}

.lux-hotel-partner-inventory__side > p {
  margin: 12px 0 0;
      font-size: 15px;
    line-height: 24px;
    color: #333333;
}

.lux-hotel-partner-inventory__reasons {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e1e2e4;
}

.lux-hotel-partner-inventory__reasons > div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
}

.lux-hotel-partner-inventory__reasons span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: #ffffff;
  color: #ff7f47;
  font-size: 10px;
  font-weight: 700;
}

.lux-hotel-partner-inventory__reasons p {
  margin: 0;
      font-size: 13px;
    line-height: 24px;
    color: #333333;
}

.lux-hotel-partner-inventory__note {
  margin-top: 22px;
  padding: 18px;
  background: #ffffff;
  border-left: 3px solid #ff7f47;
}

.lux-hotel-partner-inventory__note strong {
  display: block;
  color: #172b3a;
  font-size: 16px;
  font-weight: 650;
}

.lux-hotel-partner-inventory__note p {
  margin: 6px 0 0;
     font-size: 13px;
    line-height: 24px;
    color: #333333;
}

/* Tablet */

@media (max-width: 900px) {
  .lux-hotel-partner-inventory {
    padding: 85px 16px;
  }

  .lux-hotel-partner-inventory__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lux-hotel-partner-inventory__side {
    max-width: 700px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .lux-hotel-partner-inventory {
    padding: 65px 14px;
  }

  .lux-hotel-partner-inventory__heading {
    margin-bottom: 45px;
  }

  .lux-hotel-partner-inventory__heading h2 {
    font-size: 30px;
  }

  .lux-hotel-partner-inventory__heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .lux-hotel-partner-inventory__intro {
    gap: 15px;
    padding-bottom: 28px;
  }

  .lux-hotel-partner-inventory__intro h3 {
    font-size: 22px;
  }

  .lux-hotel-partner-inventory__intro p {
    font-size: 13px;
  }

  .lux-hotel-partner-inventory__list {
    grid-template-columns: 1fr;
  }

  .lux-hotel-partner-inventory__item {
    padding: 23px 0;
  }

  .lux-hotel-partner-inventory__side {
    padding: 24px;
  }
}

@media (max-width: 420px) {
  .lux-hotel-partner-inventory {
    padding: 55px 14px;
  }

  .lux-hotel-partner-inventory__heading h2 {
    font-size: 27px;
  }

  .lux-hotel-partner-inventory__intro h3 {
    font-size: 20px;
  }

  .lux-hotel-partner-inventory__side {
    padding: 20px;
  }
}


.lux-hotel-partner-kyc {
  width: 100%;
  padding: 40px 16px;
  background: #fff4ef;
}


/* Content */

.lux-hotel-partner-kyc__content {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 70px;
  align-items: start;
}

.lux-hotel-partner-kyc__main {
  background: #ffffff;
  border-radius: 16px;
  padding: 38px 40px;
}

.lux-hotel-partner-kyc__intro {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-kyc__intro > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 12px;
  font-weight: 700;
}

.lux-hotel-partner-kyc__intro h3 {
  margin: 0;
  color: #172b3a;
  font-size: 25px;
  font-weight: 650;
  line-height: 1.35;
  font-family: sans-serif;
}

.lux-hotel-partner-kyc__intro p {
  max-width: 650px;
  margin: 12px 0 0;
  font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Steps */

.lux-hotel-partner-kyc__step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 27px 0;
  border-bottom: 1px solid #e7e7e9;
}

.lux-hotel-partner-kyc__step:last-child {
  border-bottom: 0;
  padding-bottom: 5px;
}

.lux-hotel-partner-kyc__step > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: #fff4ef;
  color: #ff7f47;
  font-size: 11px;
  font-weight: 700;
}

.lux-hotel-partner-kyc__step h4 {
  margin: 0;
  color: #172b3a;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
}

.lux-hotel-partner-kyc__step p {
  max-width: 650px;
  margin: 7px 0 0;
  font-size: 15px;
    line-height: 24px;
    color: #333333;
}

/* Side */

.lux-hotel-partner-kyc__side {
  padding: 20px;
  background: #172b3a;
  border-radius: 16px;
}

.lux-hotel-partner-kyc__side-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 30px;
  border-radius: 50%;
  background: #ff7f47;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.lux-hotel-partner-kyc__side h3 {
  margin: 0;
  color: #ffffff;
  font-size: 23px;
  font-weight: 650;
  font-family: sans-serif;
}

.lux-hotel-partner-kyc__side > p {
  margin: 11px 0 0;
  color: #cbd5db;
  font-size: 13px;
  line-height: 1.7;
}

.lux-hotel-partner-kyc__points {
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lux-hotel-partner-kyc__points > div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}

.lux-hotel-partner-kyc__points span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border-radius: 50%;
  background: rgba(255, 127, 71, 0.16);
  color: #ff9b76;
  font-size: 9px;
  font-weight: 700;
}

.lux-hotel-partner-kyc__points p {
  margin: 0;
  color: #d7dfe3;
  font-size: 12px;
  line-height: 1.5;
}

.lux-hotel-partner-kyc__note {
  margin-top: 25px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #ff7f47;
}

.lux-hotel-partner-kyc__note strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
}

.lux-hotel-partner-kyc__note p {
  margin: 6px 0 0;
  color: #bfcbd1;
  font-size: 12px;
  line-height: 1.6;
}

/* Tablet */

@media (max-width: 900px) {
  .lux-hotel-partner-kyc {
    padding: 85px 16px;
  }

  .lux-hotel-partner-kyc__content {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .lux-hotel-partner-kyc__side {
    max-width: 700px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .lux-hotel-partner-kyc {
    padding: 65px 14px;
  }

  .lux-hotel-partner-kyc__heading {
    margin-bottom: 45px;
  }

  .lux-hotel-partner-kyc__heading h2 {
    font-size: 30px;
  }

  .lux-hotel-partner-kyc__heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .lux-hotel-partner-kyc__main {
    padding: 25px;
  }

  .lux-hotel-partner-kyc__intro {
    gap: 14px;
  }

  .lux-hotel-partner-kyc__intro h3 {
    font-size: 21px;
  }

  .lux-hotel-partner-kyc__intro p {
    font-size: 13px;
  }

  .lux-hotel-partner-kyc__side {
    padding: 25px;
  }
}

@media (max-width: 420px) {
  .lux-hotel-partner-kyc {
    padding: 55px 14px;
  }

  .lux-hotel-partner-kyc__heading h2 {
    font-size: 27px;
  }

  .lux-hotel-partner-kyc__main,
  .lux-hotel-partner-kyc__side {
    padding: 20px;
  }

  .lux-hotel-partner-kyc__intro h3 {
    font-size: 19px;
  }
}


.lux-hotel-partner-faq {
  width: 100%;
  padding: 40px 16px;
  background: #f8f9fa;
}


/* Content */

.lux-hotel-partner-faq__content {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 70px;
  align-items: start;
}

/* Intro */

.lux-hotel-partner-faq__intro {
  position: sticky;
  top: 100px;
  padding-right: 25px;
}

.lux-hotel-partner-faq__intro > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 4px;
  background: #fff1eb;
  color: #ff7f47;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.lux-hotel-partner-faq__intro h3 {
  margin: 20px 0 0;
  color: #172b3a;
  font-size: 27px;
  font-weight: 650;
  line-height: 1.35;
  font-family: sans-serif;
}

.lux-hotel-partner-faq__intro p {
  margin: 15px 0 0;
      font-size: 15px;
    line-height: 1.65;
    color: #5f6368;
}

/* FAQ List */

.lux-hotel-partner-faq__list {
  border-top: 1px solid #dfe1e3;
}

.lux-hotel-partner-faq__item {
  border-bottom: 1px solid #dfe1e3;
}

.lux-hotel-partner-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  color: #172b3a;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}

.lux-hotel-partner-faq__item summary::-webkit-details-marker {
  display: none;
}

.lux-hotel-partner-faq__item summary::marker {
  display: none;
}

.lux-hotel-partner-faq__item summary b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #dfe1e3;
  border-radius: 50%;
  color: #ff7f47;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.lux-hotel-partner-faq__item[open] summary b {
  transform: rotate(45deg);
}

.lux-hotel-partner-faq__answer {
  max-width: 750px;
  padding: 0 55px 25px 0;
}

.lux-hotel-partner-faq__answer p {
  margin: 0;
      font-size: 15px;
    line-height: 1.65;
    color: #5f6368;
}

/* Tablet */

@media (max-width: 900px) {
  .lux-hotel-partner-faq {
    padding: 85px 16px;
  }

  .lux-hotel-partner-faq__content {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .lux-hotel-partner-faq__intro {
    position: static;
    max-width: 700px;
    padding-right: 0;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .lux-hotel-partner-faq {
    padding: 65px 14px;
  }

  .lux-hotel-partner-faq__heading {
    margin-bottom: 45px;
  }

  .lux-hotel-partner-faq__heading h2 {
    font-size: 30px;
  }

  .lux-hotel-partner-faq__heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .lux-hotel-partner-faq__intro h3 {
    margin-top: 16px;
    font-size: 22px;
  }

  .lux-hotel-partner-faq__intro p {
    font-size: 13px;
  }

  .lux-hotel-partner-faq__item summary {
    padding: 20px 0;
    font-size: 14px;
  }

  .lux-hotel-partner-faq__answer {
    padding: 0 40px 20px 0;
  }

  .lux-hotel-partner-faq__answer p {
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .lux-hotel-partner-faq {
    padding: 55px 14px;
  }

  .lux-hotel-partner-faq__heading h2 {
    font-size: 27px;
  }

  .lux-hotel-partner-faq__intro h3 {
    font-size: 20px;
  }

  .lux-hotel-partner-faq__item summary {
    gap: 15px;
  }

  .lux-hotel-partner-faq__item summary b {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    font-size: 16px;
  }
}