/* ==========================================================================
   UncleTrips — Hotel detail (Property → Room types → Rate plans)
   Gallery, title, facts, section nav, accordion and review list come from
   detail.css; guest-score pill and amenity list from hotels.css; panels,
   notices and cross-sell from ui.css. Logical properties only (RTL-ready).
   ========================================================================== */

/* ------------------------------------------------------------ Title area */
.hotel-detail .product-head-main .hotel-card-kind {
  margin-block-end: 6px;
}

.hotel-detail .product-meta .guest-rating:hover .guest-reviews {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------- Stay card */
.stay-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.guest-rating--sm {
  font-size: var(--fs-13);
}

.stay-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.stay-card .sf-field {
  min-height: 56px;
  padding-inline: 0.75rem;
  gap: 0.55rem;
}

.stay-card .sf-field > .icon {
  width: 20px;
  height: 20px;
}

.stay-card .sf-input[type="date"] {
  min-height: 20px;
}

.stay-selection {
  display: grid;
  gap: 6px;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-grey-50);
  border: 1px solid var(--c-border);
}

.stay-selection[hidden] {
  display: none;
}

.stay-selection-eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-orange-600);
}

.stay-selection-room {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
}

.stay-selection-rate,
.stay-selection-meta {
  font-size: var(--fs-13);
  color: var(--c-grey-600);
}

.stay-selection .booking-total {
  margin-block: var(--sp-2) var(--sp-1);
}

.stay-added {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: #1e7a50;
}

.stay-added .icon {
  width: 18px;
  height: 18px;
}

.stay-added a {
  margin-inline-start: auto;
  color: var(--c-blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stay-added[hidden] {
  display: none;
}

/* ---------------------------------------------------------- Amenity tiles */
.amenity-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.amenity-tiles li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

.amenity-tiles .icon {
  width: 22px;
  height: 22px;
  color: var(--c-navy-600);
}

/* --------------------------------------------------------- Rooms & rates */
.rooms-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.rooms-context {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-800);
}

.rooms-note {
  margin-block-end: var(--sp-5);
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.room-list {
  display: grid;
  gap: var(--sp-5);
}

.room {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
  transition: opacity var(--dur) var(--ease);
}

.room-main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-4);
}

.room-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-grey-100);
}

.room-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-tag {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-navy-900);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  box-shadow: var(--sh-xs);
}

.room-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.room-name {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.room-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px var(--sp-6);
  font-size: var(--fs-14);
  color: var(--c-grey-600);
}

.room-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.room-facts .icon {
  width: 18px;
  height: 18px;
  color: var(--c-navy-600);
}

.room-more summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-blue-600);
  list-style: none;
  cursor: pointer;
}

.room-more summary::-webkit-details-marker {
  display: none;
}

.room-more summary .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

.room-more[open] summary .icon {
  transform: rotate(180deg);
}

.room-more p {
  margin-block-start: var(--sp-2);
  max-width: 62ch;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--c-grey-600);
}

.room-fit {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-cream-100);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: #8a4413;
}

.room-fit .icon {
  width: 18px;
  height: 18px;
}

.room-fit[hidden] {
  display: none;
}

/* Rate plans */
.rate-list {
  border-block-start: 1px solid var(--c-border);
}

.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  transition: background-color var(--dur) var(--ease);
}

.rate + .rate {
  border-block-start: 1px solid var(--c-border);
}

.rate:has(input:checked) {
  background: #fffaf6;
}

.rate-name {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
}

.rate-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-4);
  margin-block-start: 4px;
  font-size: var(--fs-13);
  color: var(--c-grey-600);
}

.rate-policies li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rate-policies .icon {
  width: 16px;
  height: 16px;
}

.rate-policies .is-positive {
  color: #1e7a50;
  font-weight: var(--fw-semibold);
}

.rate-policies .is-muted {
  color: var(--c-grey-600);
}

.rate-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  text-align: end;
}

.rate-price strong {
  font-size: var(--fs-20);
  font-weight: var(--fw-extrabold);
}

.rate-unit,
.rate-stay {
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

.rate-stay {
  color: var(--c-grey-600);
}

.rate-select {
  position: relative;
}

.rate-select input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rate-select .btn {
  min-width: 104px;
  cursor: pointer;
}

.rate-select input:focus-visible + .btn {
  outline: 2px solid var(--c-orange-500);
  outline-offset: 2px;
}

.rate-select input:checked + .btn {
  border-color: var(--c-orange-500);
  background: var(--c-orange-500);
  color: var(--c-white);
}

.rate-select input:disabled + .btn {
  opacity: 0.45;
  cursor: not-allowed;
}

.room.is-unfit .room-media,
.room.is-unfit .rate-terms,
.room.is-unfit .rate-price {
  opacity: 0.55;
}

/* ----------------------------------------------------- Amenity groups */
.amenity-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.amenity-groups h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: var(--sp-2);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
}

.amenity-groups h3 .icon {
  width: 20px;
  height: 20px;
  color: var(--c-navy-600);
}

.amenity-groups ul {
  display: grid;
  gap: 6px;
  font-size: var(--fs-14);
  color: var(--c-grey-600);
}

/* ------------------------------------------------------------- Location */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.loc-map {
  position: relative;
  aspect-ratio: 5 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.loc-map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.loc-sea { fill: #d7e8f5; }
.loc-land { fill: #f6f1e8; stroke: #e4d9c5; stroke-width: 0.3; }
.loc-road { fill: none; stroke: #ffffff; stroke-width: 1.6; }
.loc-road--minor { stroke-width: 0.8; }
.loc-lake { fill: #cfe3f3; }

.loc-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-navy-800);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transform: translate(-50%, -50%);
}

.loc-pin--hotel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--c-navy-900);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  z-index: 1;
}

.loc-pin--hotel .icon {
  width: 16px;
  height: 16px;
}

.loc-map figcaption {
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 8px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-12);
  color: var(--c-grey-600);
}

.loc-address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: var(--sp-3);
  font-weight: var(--fw-semibold);
}

.loc-address .icon {
  width: 18px;
  height: 18px;
  color: var(--c-navy-600);
}

.nearby li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 10px;
  border-block-end: 1px solid var(--c-border);
  font-size: var(--fs-14);
  color: var(--c-grey-600);
}

.nearby li span:last-child {
  flex: none;
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}

/* ------------------------------------------------------------- Policies */
.policy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.policy-list > div {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-grey-50);
}

.policy-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 4px;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
}

.policy-list dt .icon {
  width: 20px;
  height: 20px;
  color: var(--c-navy-600);
}

.policy-list dd {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--c-grey-600);
}

/* ---------------------------------------------- Reviews (score out of 10) */
.review-word {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
}

.score-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--sp-6);
}

.score-bars li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-13);
  color: var(--c-grey-600);
}

.score-bars li > span:last-child {
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.score-bars .bar > span {
  background: var(--c-navy-600);
}

.score-pill {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--c-navy-100);
  color: var(--c-navy-800);
  font-size: var(--fs-14);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
}

.review-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}

.review-empty {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.review[hidden] {
  display: none;
}

/* ===================================================================== < 1200 */
@media (max-width: 1199px) {
  .amenity-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-main {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

/* ===================================================================== < 768 */
@media (max-width: 767px) {
  .room-main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    padding: 0 0 var(--sp-3);
  }

  .room-media {
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .room-info {
    padding-inline: var(--sp-4);
    gap: var(--sp-2);
  }

  .room-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px var(--sp-3);
    font-size: var(--fs-13);
  }

  .rate {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "terms terms"
      "price select";
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .rate-terms { grid-area: terms; }

  .rate-price {
    grid-area: price;
    align-items: flex-start;
    text-align: start;
  }

  .rate-select { grid-area: select; }

  .amenity-groups,
  .location-grid,
  .policy-list,
  .score-bars {
    grid-template-columns: minmax(0, 1fr);
  }

  .amenity-groups {
    gap: var(--sp-5);
  }

  .policy-list > div {
    padding: var(--sp-4);
  }

  .loc-map {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 374px) {
  .stay-dates {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}