/* Hotel detail page — scoped to keep the existing homepage and listing intact. */
.hotel-detail-body {
  background: #f5f2ec;
}

.hotel-detail-page {
  color: #35342f;
  background: #f5f2ec;
}

.hotel-detail-page button,
.hotel-gallery-modal button,
.hotel-room-modal button,
.hotel-review-photo-modal button,
.hotel-review-modal button,
.hotel-mobile-bar button {
  font: inherit;
}

.hotel-detail-page button:focus-visible,
.hotel-detail-page a:focus-visible,
.hotel-gallery-modal button:focus-visible,
.hotel-room-modal button:focus-visible,
.hotel-review-photo-modal button:focus-visible,
.hotel-review-modal button:focus-visible,
.hotel-mobile-bar button:focus-visible {
  outline: 3px solid rgba(240, 201, 97, .42);
  outline-offset: 3px;
}

.hotel-detail-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-top) + var(--header-height) + 38px) 0 44px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 14%, rgba(222, 173, 77, .18), transparent 27%),
    radial-gradient(circle at 86% 0%, rgba(255, 255, 255, .06), transparent 24%),
    linear-gradient(150deg, #171815 0%, #262620 48%, #191a17 100%);
}

.hotel-detail-hero::before,
.hotel-detail-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(232, 190, 108, .12);
  border-radius: 50%;
  pointer-events: none;
}

.hotel-detail-hero::before {
  width: 430px;
  height: 430px;
  top: -275px;
  left: -120px;
}

.hotel-detail-hero::after {
  width: 300px;
  height: 300px;
  right: -170px;
  bottom: -210px;
}

.hotel-detail-hero .content-container {
  position: relative;
  z-index: 1;
}

.hotel-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-weight: 560;
}

.hotel-breadcrumb a {
  transition: color .18s ease;
}

.hotel-breadcrumb a:hover,
.hotel-breadcrumb a:focus-visible {
  color: #f0c961;
}

.hotel-breadcrumb svg {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
}

.hotel-title-row {
  margin-top: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
}

.hotel-title-copy {
  min-width: 0;
}

.hotel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e6bc70;
  font-size: 12px;
  font-weight: 720;
}

.hotel-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: #d5a54e;
}

.hotel-title-line {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hotel-title-line h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.1vw, 43px);
  font-weight: 820;
  line-height: 1.45;
  letter-spacing: -.65px;
  text-wrap: balance;
}

.hotel-title-stars {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  gap: 2px;
}

.hotel-title-stars svg {
  width: 17px;
  height: 17px;
}

.hotel-title-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 20px;
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  font-weight: 520;
}

.hotel-title-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hotel-title-meta svg {
  color: #dcb15f;
  font-size: 17px;
}

.hotel-title-side {
  --hotel-title-control-size: 54px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hotel-rating-card {
  min-width: 132px;
  height: var(--hotel-title-control-size);
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

.hotel-rating-card > strong {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #23221e;
  background: linear-gradient(135deg, #f5d58e, #d6a345);
  border-radius: 11px 11px 11px 3px;
  font-size: 18px;
  font-weight: 850;
}

.hotel-rating-card span {
  display: grid;
  gap: 2px;
}

.hotel-rating-card b {
  font-size: 13px;
  font-weight: 760;
}

.hotel-rating-card small {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
}

.hotel-title-actions {
  display: flex;
  gap: 7px;
}

.hotel-title-actions button {
  width: var(--hotel-title-control-size);
  height: var(--hotel-title-control-size);
  padding: 0;
  display: grid;
  place-items: center;
  gap: 1px;
  color: #f3d08c;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.hotel-title-actions button:hover {
  background: rgba(230, 183, 91, .13);
  border-color: rgba(230, 183, 91, .42);
  transform: translateY(-1px);
}

.hotel-title-actions svg {
  font-size: 17px;
}

.hotel-title-actions span {
  font-size: 12px;
  font-weight: 690;
}

.hotel-gallery {
  height: 430px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 23px;
  box-shadow: 0 28px 65px rgba(0, 0, 0, .28);
  direction: ltr;
}

.hotel-gallery-item {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #2e2e29;
  border: 0;
  cursor: zoom-in;
  direction: rtl;
}

.hotel-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 8, 7, .52));
  pointer-events: none;
  transition: background-color .2s ease;
}

.hotel-gallery-item:hover::after {
  background-color: rgba(225, 180, 91, .08);
}

.hotel-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.hotel-gallery-item:hover img {
  transform: scale(1.025);
}

.hotel-gallery-item--main {
  grid-column: 5 / -1;
  grid-row: 1 / 3;
}

.hotel-gallery-item--small:nth-of-type(2) {
  grid-column: 1 / 5;
  grid-row: 1;
}

.hotel-gallery-item--small:nth-of-type(3) {
  grid-column: 1 / 3;
  grid-row: 2;
}

.hotel-gallery-item--small:nth-of-type(4) {
  grid-column: 3 / 5;
  grid-row: 2;
}

.hotel-gallery-badge {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: 17px;
  padding: 7px 11px;
  color: #25231d;
  background: linear-gradient(135deg, #f5d58e, #d9a647);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
  font-size: 12px;
  font-weight: 760;
}

.hotel-gallery-all {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  left: 10px;
  min-height: 38px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: rgba(24, 24, 21, .86);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  backdrop-filter: blur(9px);
  font-size: 12px;
  font-weight: 680;
}

.hotel-gallery-all svg {
  font-size: 15px;
}

.hotel-gallery-mobile-count {
  display: none;
}

.hotel-detail-trust {
  background: #fff;
  border-bottom: 1px solid #e5dfd5;
}

.hotel-detail-trust-grid {
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.hotel-detail-trust-grid > span {
  min-width: 0;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  border-left: 1px solid #ebe5db;
}

.hotel-detail-trust-grid > span:last-child {
  border-left: 0;
}

.hotel-detail-trust-grid svg {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  padding: 10px;
  color: #a6711d;
  background: #f7f0e3;
  border-radius: 12px;
}

.hotel-detail-trust-grid b {
  color: #33312b;
  font-size: 12.5px;
  font-weight: 760;
}

.hotel-detail-trust-grid small {
  color: #8b877f;
  font-size: 12px;
}

.hotel-section-nav {
  position: sticky;
  z-index: 68;
  top: 0;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e5dfd5;
  box-shadow: 0 9px 28px rgba(52, 46, 36, .055);
  backdrop-filter: blur(13px);
}

.hotel-section-nav-inner {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hotel-section-links {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

.hotel-section-links a {
  position: relative;
  height: 62px;
  display: inline-flex;
  align-items: center;
  color: #737068;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .18s ease;
}

.hotel-section-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: #c9953b;
  border-radius: 4px 4px 0 0;
  transform: scaleX(0);
  transition: transform .18s ease;
}

.hotel-section-links a:hover,
.hotel-section-links a.is-active {
  color: #8e621c;
}

.hotel-section-links a.is-active::after {
  transform: scaleX(1);
}

.hotel-section-cta {
  min-width: 150px;
  height: 39px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #29271f;
  background: linear-gradient(135deg, #efd184, #d7a744);
  border: 1px solid #d7aa51;
  border-radius: 11px;
  box-shadow: 0 7px 18px rgba(172, 119, 26, .16);
  font-size: 12px;
  font-weight: 760;
}

.hotel-detail-section {
  padding: 82px 0;
  scroll-margin-top: 70px;
}

.hotel-section-heading > span:not(.hotel-room-count),
.hotel-section-heading > div > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a06e1f;
  font-size: 12px;
  font-weight: 740;
}

.hotel-section-heading > span:not(.hotel-room-count)::before,
.hotel-section-heading > div > span::before {
  content: "";
  width: 22px;
  height: 1px;
  background: #c89742;
}

.hotel-section-heading h2 {
  margin: 5px 0 0;
  color: #292923;
  font-size: clamp(25px, 2.45vw, 35px);
  font-weight: 820;
  line-height: 1.5;
  letter-spacing: -.4px;
}

.hotel-section-heading p {
  margin: 5px 0 0;
  color: #77736c;
  font-size: 12.5px;
  line-height: 1.9;
}

.hotel-section-heading--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.hotel-room-count {
  padding: 8px 12px;
  color: #7d5b22;
  background: #f8efe0;
  border: 1px solid #e7d4b3;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 710;
  white-space: nowrap;
}

/* پیام «چرا اتاقی نیامد» — قبلاً یک خط متن خاکستری کم‌رنگ بود که کاربر اصلاً نمی‌دیدش
   (مخصوصاً وقتی یک قانون تقویم مثل حداقل اقامت باعث می‌شد هیچ اتاقی نمایش داده نشود، خالی
   بودن لیست اتاق‌ها بدون این توضیح گیج‌کننده بود). حالا یک چیپ رنگی با آیکون، هم‌الگوی
   .site-announcement (styles.css) — سه حالت مجزا: خنثی (در حال بارگذاری)، سبز (موجود)،
   کهربایی (چرا موجود نیست). */
.hotel-availability-status {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #7c776e;
  background: #f4f2ed;
  border: 1px solid #eee8de;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 570;
  line-height: 1.6;
}

.hotel-availability-status svg {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 16px;
}

.hotel-availability-status.is-ready {
  color: #2f6b4f;
  background: #eef8f1;
  border-color: #cfe9d9;
}

.hotel-availability-status.is-blocked {
  color: #8a5a12;
  background: #fdf3e2;
  border-color: #f2dcae;
  font-weight: 650;
}

.hotel-rooms-layout {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 262px;
  gap: 20px;
  align-items: start;
}

.hotel-room-list {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.hotel-room-results {
  min-width: 0;
}

.hotel-room-empty {
  min-height: 150px;
  padding: 24px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px dashed #d8c6a7;
  border-radius: 17px;
}

/* هم‌الگوی override بالای .hotel-outline-action/.hotel-room-more — بدون این، JS که
   [data-room-empty].hidden را toggle می‌کند بی‌اثر می‌ماند چون این کلاس خودش display
   ست کرده (باگ پنهانِ پیش از این تغییرات، همین‌جا هم رفع شد). */
.hotel-room-empty[hidden] {
  display: none;
}

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

.hotel-room-empty > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #95691f;
  background: #fbf2e3;
  border-radius: 13px;
}

.hotel-room-empty > span svg {
  font-size: 22px;
}

.hotel-room-empty strong {
  color: #39362f;
  font-size: 12px;
}

.hotel-room-empty p {
  margin: 3px 0 0;
  color: #7d776e;
  font-size: 12px;
}

.hotel-room-unavailable {
  position: relative;
  min-height: 130px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 200px;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 8% 10%, rgba(226, 178, 86, .19), transparent 28%),
    linear-gradient(148deg, #20211d, #2e2e28);
  border: 1px solid #414038;
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(35, 32, 25, .14);
}

.hotel-room-unavailable-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #29261f;
  background: linear-gradient(135deg, #f2d28a, #d4a243);
  border-radius: 16px;
}

.hotel-room-unavailable-icon svg {
  font-size: 26px;
}

.hotel-room-unavailable-body strong {
  display: block;
  font-size: 15px;
  font-weight: 790;
}

.hotel-room-unavailable-body p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  line-height: 1.8;
}

.hotel-room-unavailable-cta {
  min-height: 58px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #27251f;
  background: #f1d18b;
  border-radius: 13px;
  text-align: right;
}

.hotel-room-unavailable-cta svg {
  flex-shrink: 0;
  font-size: 19px;
}

.hotel-room-unavailable-cta small {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: #655432;
}

.hotel-room-unavailable-cta b {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  font-weight: 830;
}

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

.hotel-room-more {
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #76531c;
  background: #fffaf0;
  border: 1px solid #dfc594;
  border-radius: 13px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 740;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

/* هم‌الگوی override بالای .hotel-outline-action — .hotel-room-more هم خودش display:flex
   ست می‌کند، پس [hidden] پیش‌فرض مرورگر بدون این override بی‌اثر می‌ماند. */
button.hotel-room-more[hidden] {
  display: none;
}

.hotel-room-more:hover,
.hotel-room-more:focus-visible {
  background: #fff5df;
  border-color: #cfa75e;
  transform: translateY(-1px);
}

.hotel-room-more svg {
  font-size: 16px;
}

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

.hotel-room-card {
  padding: 19px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 226px;
  gap: 17px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e3dcd1;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(57, 47, 31, .045);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hotel-room-card:hover {
  border-color: #d9c39d;
  box-shadow: 0 14px 34px rgba(57, 47, 31, .075);
  transform: translateY(-1px);
}

.hotel-room-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #9d6c1e;
  background: linear-gradient(145deg, #fbf4e8, #f3e5cd);
  border: 1px solid #e9d7b8;
  border-radius: 15px;
}

.hotel-room-icon svg {
  font-size: 24px;
}

.hotel-room-info {
  min-width: 0;
}

.hotel-room-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.hotel-room-heading > div > span {
  color: #9a6a1d;
  font-size: 12px;
  font-weight: 720;
}

.hotel-room-heading h3 {
  margin: 2px 0 0;
  color: #2f2e29;
  font-size: 16px;
  font-weight: 790;
  line-height: 1.55;
}

.hotel-room-instant {
  flex: 0 0 auto;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #24724f;
  background: #edf8f2;
  border: 1px solid #cde9da;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.hotel-room-instant i {
  width: 5px;
  height: 5px;
  background: #36a974;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(54, 169, 116, .12);
}

.hotel-room-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 15px;
}

.hotel-room-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6f6b63;
  font-size: 12px;
  font-weight: 590;
}

.hotel-room-meta svg {
  color: #a77729;
  font-size: 14px;
}

.hotel-room-features {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hotel-room-features span {
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #626058;
  background: #f8f6f1;
  border: 1px solid #eae4da;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 610;
}

.hotel-room-features svg {
  color: #3d956d;
  font-size: 12px;
}

.hotel-room-offer {
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  border-right: 1px solid #ebe5dc;
  text-align: left;
}

.hotel-room-offer > span {
  color: #8b877f;
  font-size: 12px;
}

.hotel-room-offer p {
  margin: 3px 0 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  direction: rtl;
}

.hotel-room-offer p strong {
  color: #2d2c27;
  font-size: 20px;
  font-weight: 840;
  letter-spacing: -.35px;
}

.hotel-room-offer p small {
  color: #69655e;
  font-size: 12px;
  font-weight: 620;
}

.hotel-room-offer > button {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #29271f;
  background: linear-gradient(135deg, #efd184, #d7a744);
  border: 1px solid #d5a54c;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}

.hotel-room-offer > button svg {
  font-size: 15px;
}

/* ۱۴۰۵/۰۶/۲۷: کارت اتاق «تکمیل ظرفیت» — اتاق بدون نرخ/ظرفیت حالا آخر فهرست می‌آید (به‌جای
   حذف‌شدن) و به‌جای قیمت/«انتخاب اتاق»، «لیست انتظار» می‌گیرد. رنگ عمداً خنثی است نه قرمز:
   یک حالت موجودی است نه خطا، و نباید چشم را از اتاق‌های قابل‌رزرو بالای فهرست بدزدد. */
.hotel-room-card--soldout {
  background: #faf9f7;
  border-color: #e7e3db;
}

.hotel-room-card--soldout .hotel-room-icon {
  opacity: .55;
}

.hotel-room-card--soldout .hotel-room-info h3 {
  color: #5f5a51;
}

.hotel-room-soldout-chip {
  flex: 0 0 auto;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  color: #6b6559;
  background: #eeece7;
  border: 1px solid #ddd8ce;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.hotel-room-offer--soldout > span {
  color: #7d786f;
  font-weight: 700;
}

.hotel-room-soldout-note {
  margin: 4px 0 0;
  max-width: 230px;
  color: #8b877f;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.75;
  text-align: right;
  direction: rtl;
}

.hotel-room-offer--soldout > button {
  color: #3c382f;
  background: #fff;
  border-color: #dcd6cb;
  box-shadow: 0 6px 16px rgba(60, 54, 40, .07);
}

.hotel-room-offer--soldout > button:hover,
.hotel-room-offer--soldout > button:focus-visible {
  background: #fbf9f5;
  border-color: #cdc5b6;
}

.hotel-room-nightly {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 2px;
}

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

.hotel-room-nightly-toggle {
  width: 100%;
  min-height: 54px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  color: #4b4438;
  background: linear-gradient(135deg, #fbf8f2, #f8f1e5);
  border: 1px solid #e7d9c1;
  border-radius: 12px;
  cursor: pointer;
  text-align: right;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hotel-room-nightly-toggle:hover,
.hotel-room-nightly-toggle:focus-visible,
.hotel-room-nightly-toggle[aria-expanded="true"] {
  background: #fff8e9;
  border-color: #d9ba80;
  box-shadow: 0 7px 20px rgba(113, 81, 29, .07);
}

.hotel-room-nightly-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #96681f;
  background: #fff;
  border: 1px solid #e7d5b7;
  border-radius: 10px;
}

.hotel-room-nightly-icon svg {
  font-size: 18px;
}

.hotel-room-nightly-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.hotel-room-nightly-copy b {
  color: #423d34;
  font-size: 12px;
  font-weight: 760;
}

.hotel-room-nightly-copy small {
  overflow: hidden;
  color: #81796e;
  font-size: 12px;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotel-room-nightly-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #95691f;
  background: rgba(255, 255, 255, .72);
  border-radius: 9px;
}

.hotel-room-nightly-arrow svg {
  font-size: 15px;
  transition: transform .2s ease;
}

.hotel-room-nightly-toggle[aria-expanded="true"] .hotel-room-nightly-arrow svg {
  transform: rotate(180deg);
}

.hotel-room-nightly-panel {
  margin-top: 8px;
  overflow: hidden;
  background: #fffdfa;
  border: 1px solid #e5d8c4;
  border-radius: 12px;
  animation: hotel-nightly-open .2s ease both;
}

.hotel-room-nightly-panel[hidden] {
  display: none;
}

.hotel-room-nightly-panel > header {
  min-height: 46px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f7f1e6;
  border-bottom: 1px solid #e8dcc9;
}

.hotel-room-nightly-panel > header span {
  color: #4e473b;
  font-size: 12px;
  font-weight: 760;
}

.hotel-room-nightly-panel > header small {
  color: #847b6e;
  font-size: 12px;
}

.hotel-room-nightly-list {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
}

.hotel-room-nightly-row {
  min-width: 0;
  min-height: 92px;
  padding: 11px;
  display: grid;
  align-content: space-between;
  gap: 9px;
  background: linear-gradient(145deg, #fff, #fbf7f0);
  border: 1px solid #e8ded0;
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(76, 59, 31, .045);
}

.hotel-room-nightly-row > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.hotel-room-nightly-row > span small {
  color: #98702e;
  font-size: 12px;
  font-weight: 690;
}

.hotel-room-nightly-row > span b {
  overflow-wrap: anywhere;
  color: #555047;
  font-size: 12px;
  font-weight: 690;
  line-height: 1.65;
}

.hotel-room-nightly-row > b {
  min-width: 0;
  color: #2f2d28;
  font-size: 12px;
  font-weight: 800;
  direction: rtl;
  white-space: nowrap;
}

.hotel-room-nightly-row > b small {
  margin-right: 3px;
  color: #777168;
  font-size: 12px;
  font-weight: 590;
}

.hotel-room-nightly-empty {
  margin: 0;
  padding: 14px 0 8px;
  color: #756f66;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

.hotel-room-nightly-date {
  min-height: 38px;
  margin: 0 13px 13px;
  padding: 0 14px;
  color: #76521a;
  background: #fff8e9;
  border: 1px solid #dcbf89;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
}

.hotel-room-nightly-date[hidden] {
  display: none;
}

.hotel-room-assurance {
  position: sticky;
  top: 82px;
  padding: 24px 20px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 8% 0%, rgba(226, 178, 86, .2), transparent 30%),
    linear-gradient(150deg, #22231f, #2e2e28);
  border: 1px solid #3f3e36;
  border-radius: 19px;
  box-shadow: 0 18px 45px rgba(31, 29, 24, .15);
}

.hotel-room-assurance::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: -75px;
  bottom: -85px;
  border: 1px solid rgba(223, 178, 91, .16);
  border-radius: 50%;
}

.hotel-room-assurance-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #26241e;
  background: linear-gradient(135deg, #f1d18b, #d5a344);
  border-radius: 14px;
}

.hotel-room-assurance-icon svg {
  font-size: 23px;
}

.hotel-room-assurance h3 {
  margin: 15px 0 0;
  font-size: 17px;
  font-weight: 790;
  line-height: 1.6;
}

.hotel-room-assurance > p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  line-height: 1.9;
}

.hotel-room-assurance > a {
  min-height: 58px;
  margin-top: 17px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #27251f;
  background: #f1d18b;
  border-radius: 12px;
  text-align: center;
}

.hotel-room-assurance > a small {
  font-size: 12px;
  font-weight: 650;
}

.hotel-room-assurance > a b {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 830;
}

.hotel-room-assurance ul {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.hotel-room-assurance li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
}

.hotel-room-assurance li svg {
  color: #e4b55e;
  font-size: 13px;
}

.hotel-about-section {
  background: #fff;
  border-block: 1px solid #e8e2d8;
}

.hotel-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 72px;
  align-items: center;
}

.hotel-about-copy > p,
.hotel-about-more p {
  margin: 18px 0 0;
  color: #625f57;
  font-size: 13px;
  line-height: 2.15;
}

.hotel-about-more p {
  margin-top: 8px;
}

.hotel-text-toggle {
  margin-top: 12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #95671f;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
}

.hotel-text-toggle svg {
  font-size: 13px;
  transition: transform .18s ease;
}

.hotel-text-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.hotel-special-offer {
  margin-top: 22px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(135deg, #fbf5ea, #f8efe0);
  border: 1px solid #ead8ba;
  border-radius: 14px;
}

.hotel-special-offer > span {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #91621b;
  background: #fff;
  border: 1px solid #ead9bd;
  border-radius: 11px;
}

.hotel-special-offer > span svg {
  font-size: 19px;
}

.hotel-special-offer b {
  color: #433c31;
  font-size: 12px;
  font-weight: 770;
}

.hotel-special-offer p {
  margin: 2px 0 0;
  color: #786f62;
  font-size: 12px;
  line-height: 1.7;
}

.hotel-fact-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hotel-fact-grid > div {
  min-height: 142px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f8f5ef;
  border: 1px solid #e6dfd4;
  border-radius: 17px;
}

.hotel-fact-grid dt {
  color: #777269;
  font-size: 12px;
  font-weight: 620;
}

.hotel-fact-grid dd {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.hotel-fact-grid dd b {
  color: #292823;
  font-size: 25px;
  font-weight: 830;
}

.hotel-fact-grid dd svg {
  color: #b27c25;
  font-size: 23px;
}

.hotel-facilities-section {
  background:
    radial-gradient(circle at 95% 15%, rgba(215, 171, 90, .08), transparent 21%),
    #f5f2ec;
}

.hotel-outline-action {
  min-height: 41px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #826026;
  background: #fff;
  border: 1px solid #d9c6a5;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hotel-outline-action:hover {
  border-color: #c79a4a;
  box-shadow: 0 8px 20px rgba(84, 64, 31, .07);
  transform: translateY(-1px);
}

/* .hotel-outline-action خودش display:inline-flex ست می‌کند — بدون این override با همون
   specificity، وقتی JS (hotel-detail.js، «مشاهده نظرهای بیشتر») مستقیم روی خودِ این المان
   attribute بومی hidden را می‌گذارد، مرورگر [hidden] پیش‌فرض را نادیده می‌گیرد و دکمه با
   وجود hidden=true دیده می‌ماند. */
button.hotel-outline-action[hidden] {
  display: none;
}

.hotel-outline-action svg {
  font-size: 14px;
}

.hotel-facility-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* ۱۴۰۵/۰۷/۰۱: فهرست امکانات تا دو ردیف باز است؛ مابقی پشت دکمه‌ی
   «مشاهده همه امکانات» می‌رود (قبلاً کل فهرست باز بود و دکمه فقط سه باکس
   توضیحی پایین را باز می‌کرد). تعداد ستون‌ها در هر بریک‌پوینت فرق دارد (۴/۳/۲/۱)، پس
   مرزِ دو ردیف هم در همان media queryها تنظیم می‌شود. */
.hotel-facility-grid--clamped > article:nth-child(n+9) {
  display: none;
}

.hotel-facility-grid--clamped.is-expanded > article {
  display: flex;
}

.hotel-facility-grid article {
  min-height: 72px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #e1d9cd;
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(57, 47, 31, .035);
}

.hotel-facility-grid article > span {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #9e6d1f;
  background: #f8efe1;
  border-radius: 9px;
}

.hotel-facility-grid article > span svg {
  font-size: 16px;
}

.hotel-facility-grid h3 {
  margin: 0;
  color: #35332d;
  font-size: 12px;
  font-weight: 740;
}

.hotel-facility-grid p {
  margin: 3px 0 0;
  color: #89847b;
  font-size: 12px;
  line-height: 1.5;
}

.hotel-facilities-more {
  margin-top: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: #fff;
  border: 1px solid #e1d9cd;
  border-radius: 16px;
}

.hotel-facilities-more[hidden] {
  display: none;
}

.hotel-facilities-more section {
  padding: 5px 13px;
  border-left: 1px solid #ece5da;
}

.hotel-facilities-more section:last-child {
  border-left: 0;
}

.hotel-facilities-more h3 {
  margin: 0;
  color: #3c3932;
  font-size: 12px;
  font-weight: 760;
}

.hotel-facilities-more p {
  margin: 5px 0 0;
  color: #79746c;
  font-size: 12px;
  line-height: 1.9;
}

.hotel-location-section {
  background: #fff;
  border-block: 1px solid #e8e2d8;
}

.hotel-location-layout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: start;
  gap: 18px;
}

.hotel-map-card {
  overflow: hidden;
  background: #f4efe6;
  border: 1px solid #ded5c7;
  border-radius: 19px;
}

.hotel-map-image {
  display: block;
  width: 100%;
  height: 338px;
  object-fit: cover;
}

.hotel-map-canvas {
  position: relative;
  height: 338px;
  overflow: hidden;
  background:
    linear-gradient(30deg, transparent 24%, rgba(255, 255, 255, .72) 25%, rgba(255, 255, 255, .72) 27%, transparent 28%, transparent 73%, rgba(255, 255, 255, .72) 74%, rgba(255, 255, 255, .72) 76%, transparent 77%),
    linear-gradient(150deg, transparent 24%, rgba(255, 255, 255, .72) 25%, rgba(255, 255, 255, .72) 27%, transparent 28%, transparent 73%, rgba(255, 255, 255, .72) 74%, rgba(255, 255, 255, .72) 76%, transparent 77%),
    #e8e1d4;
  background-size: 92px 52px;
}

.hotel-map-canvas::before,
.hotel-map-canvas::after {
  content: "";
  position: absolute;
  background: rgba(124, 151, 126, .18);
  border-radius: 38% 62% 58% 42%;
}

.hotel-map-canvas::before {
  width: 180px;
  height: 130px;
  top: 18px;
  left: -35px;
  transform: rotate(-8deg);
}

.hotel-map-canvas::after {
  width: 160px;
  height: 110px;
  right: 15%;
  bottom: -45px;
  transform: rotate(15deg);
}

.hotel-map-road {
  position: absolute;
  z-index: 1;
  height: 13px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(177, 165, 145, .34);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(215, 205, 188, .36);
}

.hotel-map-road--one {
  width: 120%;
  top: 48%;
  right: -10%;
  transform: rotate(-12deg);
}

.hotel-map-road--two {
  width: 80%;
  top: 29%;
  left: -8%;
  transform: rotate(58deg);
}

.hotel-map-road--three {
  width: 74%;
  right: 5%;
  bottom: 19%;
  transform: rotate(24deg);
}

.hotel-map-pin,
.hotel-map-shrine {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
}

.hotel-map-pin {
  top: 37%;
  right: 28%;
  color: #29261f;
}

.hotel-map-pin svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  color: #2c291f;
  background: linear-gradient(135deg, #f3d38c, #d4a244);
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 12px;
  box-shadow: 0 10px 25px rgba(65, 49, 24, .22);
  transform: rotate(-12deg);
}

.hotel-map-pin b {
  margin-top: 5px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .92);
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(52, 46, 36, .12);
  font-size: 12px;
}

.hotel-map-shrine {
  left: 16%;
  bottom: 18%;
}

.hotel-map-shrine i {
  width: 20px;
  height: 20px;
  background: #5b8668;
  border: 5px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(45, 66, 52, .18);
}

.hotel-map-shrine b {
  margin-top: 4px;
  padding: 3px 7px;
  color: #45604c;
  background: rgba(255, 255, 255, .88);
  border-radius: 6px;
  font-size: 12px;
}

.hotel-map-route {
  position: absolute;
  z-index: 3;
  width: 31%;
  height: 85px;
  right: 36%;
  bottom: 25%;
  border-bottom: 3px dashed #b78129;
  border-left: 3px dashed #b78129;
  border-radius: 0 0 0 38px;
  transform: rotate(-6deg);
}

.hotel-map-card > small {
  min-height: 40px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  color: #7c776e;
  background: #faf8f4;
  border-top: 1px solid #ded5c7;
  font-size: 12px;
}

.hotel-distance-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 380px;
  padding-inline-start: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d8c29d transparent;
}

.hotel-distance-list::-webkit-scrollbar {
  width: 6px;
}

.hotel-distance-list::-webkit-scrollbar-thumb {
  background: #d8c29d;
  border-radius: 999px;
}

.hotel-distance-list::-webkit-scrollbar-track {
  background: transparent;
}

.hotel-distance-list article {
  min-height: 82px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  background: #faf8f4;
  border: 1px solid #e4ddd2;
  border-radius: 14px;
}

.hotel-distance-list article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #9c6b1f;
  background: #f4ead9;
  border-radius: 11px;
}

.hotel-distance-list article > span svg {
  font-size: 19px;
}

.hotel-distance-list h3 {
  margin: 0;
  color: #393730;
  font-size: 12px;
  font-weight: 740;
}

.hotel-distance-list p {
  margin: 3px 0 0;
  color: #8a857c;
  font-size: 12px;
}

.hotel-distance-list article > b {
  color: #7d5a20;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.hotel-rules-section {
  background: #f5f2ec;
}

.hotel-rules-layout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 18px;
}

.hotel-rule-summary {
  padding: 10px;
  display: grid;
  gap: 6px;
  background: #262722;
  border: 1px solid #3a3a34;
  border-radius: 18px;
}

.hotel-rule-summary article {
  min-height: 82px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
}

.hotel-rule-summary article > span {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #e3b45a;
  background: rgba(227, 180, 90, .12);
  border-radius: 10px;
}

.hotel-rule-summary article > span svg {
  font-size: 18px;
}

.hotel-rule-summary h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 730;
}

.hotel-rule-summary p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  line-height: 1.7;
}

.hotel-rule-accordions,
.hotel-faq-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

/* حداکثر ارتفاع ~۳ آیتم (اولی باز پیش‌فرض: ۱۱۳px + دوتای بسته: ۶۲px هرکدام + ۲ گپ ۸px) —
   بیشتر از سه‌تا داخل خودِ باکس اسکرول بخورد، نه اینکه کل سکشن کش بیاید. */
.hotel-rule-accordions,
.hotel-faq-list {
  max-height: 253px;
  padding-inline-start: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d8c29d transparent;
}

.hotel-rule-accordions::-webkit-scrollbar,
.hotel-faq-list::-webkit-scrollbar {
  width: 6px;
}

.hotel-rule-accordions::-webkit-scrollbar-thumb,
.hotel-faq-list::-webkit-scrollbar-thumb {
  background: #d8c29d;
  border-radius: 999px;
}

.hotel-rule-accordions::-webkit-scrollbar-track,
.hotel-faq-list::-webkit-scrollbar-track {
  background: transparent;
}

.hotel-accordion {
  overflow: hidden;
  /* overflow:hidden صفر می‌کند min-height خودکار گرید را؛ بدون این خط، وقتی والد اسکرول‌دار
     (.hotel-rule-accordions/.hotel-faq-list) جا کم می‌آورد، بجای اسکرول، ردیف‌های گرید را
     له می‌کند تا همه را در max-height جا بدهد. */
  min-height: min-content;
  background: #fff;
  border: 1px solid #e1d9cd;
  border-radius: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.hotel-accordion.is-open {
  border-color: #d8c29d;
  box-shadow: 0 9px 26px rgba(67, 54, 33, .055);
}

.hotel-accordion > button {
  width: 100%;
  min-height: 60px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #38362f;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: right;
  font-size: 12px;
  font-weight: 720;
}

.hotel-accordion > button svg {
  flex: 0 0 auto;
  color: #9e742d;
  font-size: 15px;
  transition: transform .18s ease;
}

.hotel-accordion > button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.hotel-accordion > div {
  padding: 0 16px 15px;
}

.hotel-accordion > div[hidden] {
  display: none;
}

/* قاب جواب روی wrapper است نه روی `p`: جواب واقعی از CKEditor پنل می‌آید و می‌تواند چند
   پاراگراف/لیست باشد — با استایل قدیمی هر پاراگراف یک خط جداکننده‌ی تکراری می‌گرفت و جوابِ
   بدون <p> اصلاً بی‌استایل می‌ماند (همان ایراد قالب FAQ لندینگ‌ها). */
.hotel-accordion-body {
  padding-top: 12px;
  color: #726e66;
  border-top: 1px solid #eee8df;
  font-size: 12px;
  line-height: 1.95;
}

.hotel-accordion-body > :first-child { margin-top: 0; }
.hotel-accordion-body > :last-child { margin-bottom: 0; }

.hotel-accordion-body p {
  margin: 0 0 9px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.hotel-accordion-body ul,
.hotel-accordion-body ol {
  margin: 0 0 9px;
  padding-inline-start: 18px;
}

.hotel-accordion-body li { margin-bottom: 4px; }

.hotel-accordion-body a {
  color: #9e742d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hotel-reviews-section {
  background: #fff;
  border-block: 1px solid #e8e2d8;
}

.hotel-reviews-overview {
  margin-top: 28px;
  padding: 16px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  background: #f8f5ef;
  border: 1px solid #e3dcd1;
  border-radius: 18px;
}

.hotel-review-score {
  min-height: 210px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #252621, #34342e);
  border-radius: 14px;
}

.hotel-review-score > span {
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
}

.hotel-review-score strong {
  margin-top: 5px;
  color: #efc873;
  font-size: 46px;
  font-weight: 860;
  line-height: 1.15;
}

.hotel-review-score b {
  font-size: 12px;
  font-weight: 750;
}

.hotel-review-score small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
}

.hotel-review-bars {
  padding: 5px 10px;
  display: grid;
  align-content: center;
  gap: 13px;
}

.hotel-review-bars p {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
}

.hotel-review-bars p > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.hotel-review-bars b {
  color: #55524b;
  font-size: 12px;
  font-weight: 650;
}

.hotel-review-bars i {
  height: 7px;
  overflow: hidden;
  background: #e5dfd5;
  border-radius: 999px;
}

.hotel-review-bars em {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #d9a748, #efcc7e);
  border-radius: inherit;
}

.hotel-review-bars p > strong {
  color: #76541f;
  font-size: 12px;
  font-weight: 760;
}

.hotel-review-photo-gallery {
  margin-top: 18px;
  padding: 15px;
  background: #faf8f4;
  border: 1px solid #e4ded3;
  border-radius: 17px;
}

.hotel-review-photo-gallery > header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hotel-review-photo-gallery > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hotel-review-photo-gallery > header > div > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #93651d;
  background: #f1e3c6;
  border-radius: 10px;
}

.hotel-review-photo-gallery > header h3 {
  margin: 0;
  color: #414038;
  font-size: 12px;
}

.hotel-review-photo-gallery > header p {
  margin: 2px 0 0;
  color: #8b867d;
  font-size: 12px;
}

.hotel-review-photo-gallery > header > small {
  color: #8d6830;
  font-size: 12px;
  font-weight: 750;
}

.hotel-review-photo-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.hotel-review-photo-track button,
.hotel-review-photo-track .hotel-review-photo-static {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: #ddd6ca;
  border: 0;
  border-radius: 11px;
}

.hotel-review-photo-track button { cursor: zoom-in; }

.hotel-review-photo-track button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18, 18, 15, .72));
  transition: background-color .2s ease;
}

.hotel-review-photo-track button:hover::after { background-color: rgba(0, 0, 0, .13); }
.hotel-review-photo-track img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.hotel-review-photo-track button:hover img,
.hotel-review-photo-track .hotel-review-photo-static:hover img { transform: scale(1.045); }
.hotel-review-photo-track button > span { position: absolute; z-index: 1; right: 9px; bottom: 7px; left: 9px; overflow: hidden; color: #fff; font-size: 12px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.hotel-review-filters {
  margin-top: 19px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.hotel-review-filters button {
  min-height: 35px;
  padding: 0 12px;
  color: #716d65;
  background: #f8f6f1;
  border: 1px solid #e4ded3;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.hotel-review-filters button.is-active {
  color: #fff;
  background: #33332d;
  border-color: #33332d;
}

.hotel-review-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hotel-review-submit {
  min-height: 41px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #29271f;
  background: linear-gradient(135deg, #f0d183, #d8a844);
  border: 1px solid #d2a044;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 770;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(121, 87, 31, .1);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hotel-review-submit:hover,
.hotel-review-submit:focus-visible {
  box-shadow: 0 11px 24px rgba(121, 87, 31, .17);
  transform: translateY(-1px);
}

.hotel-review-submit svg {
  font-size: 15px;
}

/* پازلی/masonry نه با ستون‌های CSS (column-count) — چون توازن بین ستون‌ها برای بلوک‌های
   break-inside:avoid تقریبی است و با تعداد کارت کم (مثلاً ۴) گاهی یک ستون کامل خالی
   می‌ماند (فضای خالی سمت چپ در RTL). به‌جایش hotel-detail.js خودش کارت‌ها را با الگوریتم
   «کوتاه‌ترین ستون بعدی» بین چند div.hotel-review-column واقعی پخش می‌کند — هر ستون تا
   وقتی کارتی برایش نمانده خالی نمی‌ماند. */
.hotel-review-list {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hotel-review-column {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hotel-review-list article {
  min-width: 0;
  padding: 17px;
  background: #fff;
  border: 1px solid #e3dcd1;
  border-radius: 15px;
}

.hotel-review-list article[hidden] {
  display: none;
}

/* ۱۴۰۵/۰۶/۱۲: تا وقتی صفحه‌ی اول نظرات (بعد از لود صفحه از hotel-reviews.php) جواب بدهد —
   هم‌الگوی .nearby-skeleton/.destination-skeleton، همون shimmer مشترک (styles.css). */
.hotel-review-skeleton {
  margin-top: 12px;
  column-count: 3;
  column-gap: 10px;
}
.hotel-review-skeleton[hidden] { display: none; }
.hotel-review-skeleton span {
  display: block;
  height: 168px;
  margin-bottom: 10px;
  border-radius: 15px;
  background: linear-gradient(100deg, #f0ede5 30%, #f8f5ee 50%, #f0ede5 70%);
  background-size: 220% 100%;
  animation: hotel-compare-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hotel-review-skeleton span { animation: none; background: #f0ede5; }
}

.hotel-review-empty {
  margin-top: 12px;
  padding: 24px;
  text-align: center;
  color: #8d887f;
  font-size: 13px;
  background: #fff;
  border: 1px dashed #d8c6a7;
  border-radius: 17px;
}

.hotel-review-more {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.hotel-review-more .hotel-outline-action {
  width: min(100%, 245px);
}

.hotel-review-list header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hotel-review-list header > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.hotel-review-list header b {
  color: #38362f;
  font-size: 12px;
  font-weight: 730;
}

.hotel-review-list header small {
  color: #8d887f;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-review-list header > strong {
  width: 37px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: #4d8d68;
  border-radius: 8px 8px 8px 2px;
  font-size: 12px;
  font-weight: 800;
}

.hotel-review-list article > p {
  min-height: 75px;
  margin: 14px 0 0;
  color: #66625a;
  font-size: 12px;
  line-height: 1.95;
}

.hotel-review-card-photos {
  margin-top: 11px;
  display: flex;
  gap: 6px;
}

.hotel-review-card-photos button,
.hotel-review-card-photos span {
  width: 58px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  background: #eee9df;
  border: 1px solid #ddd5c9;
  border-radius: 9px;
  display: block;
}

.hotel-review-card-photos button { cursor: zoom-in; }
.hotel-review-card-photos img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s ease; }
.hotel-review-card-photos button:hover img { transform: scale(1.07); }

.hotel-review-list footer {
  margin-top: 14px;
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #918c84;
  border-top: 1px solid #eee8df;
  font-size: 12px;
}

.hotel-review-list footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #3f8764;
}

.hotel-review-card--answered {
  border-color: #dbc69f !important;
  box-shadow: 0 10px 26px rgba(75, 58, 30, .06);
}

.hotel-review-reply {
  margin-top: 14px;
  padding: 12px;
  background: #f8f3e9;
  border: 1px solid #e7d9c1;
  border-radius: 12px 3px 12px 12px;
}

.hotel-review-reply-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hotel-review-reply-heading > span {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #95691f;
  background: #fff;
  border: 1px solid #e3d2b4;
  border-radius: 9px;
}

.hotel-review-reply-heading svg {
  font-size: 16px;
}

.hotel-review-reply-heading b,
.hotel-review-reply-heading time {
  display: block;
}

.hotel-review-reply-heading b {
  color: #554329;
  font-size: 12px;
  font-weight: 760;
}

.hotel-review-reply-heading time {
  margin-top: 1px;
  color: #989086;
  font-size: 12px;
}

.hotel-review-reply > p {
  margin: 9px 0 0;
  color: #676158;
  font-size: 12px;
  line-height: 1.9;
}

.hotel-faq-section {
  background: #f5f2ec;
}

.hotel-faq-layout {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}

.hotel-similar-section {
  padding-top: 0;
  background: #f5f2ec;
}

.hotel-similar-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hotel-similar-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2dbcf;
  border-radius: 17px;
  box-shadow: 0 8px 24px rgba(57, 47, 31, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hotel-similar-card:hover {
  border-color: #d4be99;
  box-shadow: 0 15px 34px rgba(57, 47, 31, .08);
  transform: translateY(-3px);
}

.hotel-similar-media {
  height: 180px;
  display: block;
  overflow: hidden;
  background: #ddd8ce;
}

.hotel-similar-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.hotel-similar-card:hover .hotel-similar-media img {
  transform: scale(1.035);
}

.hotel-similar-body {
  padding: 14px;
  display: grid;
}

.hotel-similar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hotel-similar-top small {
  color: #9b6d23;
  font-size: 12px;
  font-weight: 680;
}

.hotel-similar-top b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #625e56;
  font-size: 12px;
}

.hotel-similar-top svg {
  width: 12px;
  height: 12px;
}

.hotel-similar-body > strong {
  margin-top: 4px;
  color: #33312b;
  font-size: 13px;
  font-weight: 760;
}

.hotel-similar-price {
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  border-top: 1px solid #eee8df;
}

.hotel-similar-price small {
  margin-left: auto;
  color: #8e8980;
  font-size: 12px;
}

.hotel-similar-price b {
  color: #38362f;
  font-size: 13.5px;
  font-weight: 800;
}

.hotel-similar-price em {
  color: #777169;
  font-size: 12px;
  font-style: normal;
}

.hotel-support-banner {
  padding: 0 0 82px;
  background: #f5f2ec;
}

.hotel-support-banner article {
  position: relative;
  min-height: 178px;
  padding: 32px 38px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 210px;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 10% 20%, rgba(225, 177, 84, .19), transparent 25%),
    linear-gradient(145deg, #20211d, #30312b);
  border: 1px solid #414038;
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(41, 37, 29, .14);
}

.hotel-support-banner article::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  left: -120px;
  bottom: -185px;
  border: 1px solid rgba(227, 180, 90, .17);
  border-radius: 50%;
}

.hotel-support-banner article > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #29261f;
  background: linear-gradient(135deg, #f2d28a, #d4a243);
  border-radius: 17px;
}

.hotel-support-banner article > span svg {
  font-size: 29px;
}

.hotel-support-banner div > small {
  color: #dcb15d;
  font-size: 12px;
  font-weight: 700;
}

.hotel-support-banner h2 {
  margin: 3px 0 0;
  font-size: 22px;
  font-weight: 790;
  line-height: 1.6;
}

.hotel-support-banner p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
}

.hotel-support-banner a {
  min-height: 64px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #28261f;
  background: #f0cd80;
  border-radius: 13px;
}

.hotel-support-banner a b {
  font-size: 15px;
  font-weight: 820;
}

.hotel-support-banner a small {
  color: #655432;
  font-size: 12px;
}

.hotel-gallery-modal,
.hotel-room-modal,
.hotel-review-photo-modal,
.hotel-review-modal {
  position: fixed;
  z-index: 260;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
}

.hotel-gallery-modal[hidden],
.hotel-room-modal[hidden],
.hotel-review-photo-modal[hidden],
.hotel-review-modal[hidden] {
  display: none;
}

.hotel-gallery-modal-backdrop,
.hotel-room-modal-backdrop,
.hotel-review-photo-modal-backdrop,
.hotel-review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 9, .78);
  backdrop-filter: blur(9px);
}

.hotel-gallery-modal > section {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 16px;
  overflow: auto;
  color: #fff;
  background: #1f201c;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 21px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .46);
}

.hotel-gallery-modal header,
.hotel-room-modal header,
.hotel-review-photo-modal header,
.hotel-review-modal header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hotel-gallery-modal header span,
.hotel-room-modal header span,
.hotel-review-photo-modal header span,
.hotel-review-modal header span {
  color: #dcb15e;
  font-size: 12px;
  font-weight: 680;
}

.hotel-gallery-modal header h2,
.hotel-room-modal header h2,
.hotel-review-photo-modal header h2,
.hotel-review-modal header h2 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 760;
}

.hotel-gallery-modal header > button,
.hotel-room-modal header > button,
.hotel-review-photo-modal header > button,
.hotel-review-modal header > button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #efc874;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  cursor: pointer;
}

.hotel-gallery-modal-stage {
  position: relative;
  height: min(64vh, 620px);
  overflow: hidden;
  background: #11120f;
  border-radius: 15px;
}

.hotel-gallery-modal-stage > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hotel-gallery-modal-stage > button {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(23, 23, 20, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(7px);
}

.hotel-gallery-modal-stage > button:first-of-type {
  right: 15px;
}

.hotel-gallery-modal-stage > button:nth-of-type(2) {
  left: 15px;
}

.hotel-gallery-modal-stage > button:first-of-type svg {
  transform: rotate(180deg);
}

.hotel-gallery-modal-count {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 14px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(23, 23, 20, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(7px);
}

.hotel-gallery-modal-thumbs {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.hotel-gallery-modal-thumbs button {
  min-width: 0;
  padding: 4px;
  display: grid;
  grid-template-columns: 53px 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .64);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  cursor: pointer;
  text-align: right;
}

.hotel-gallery-modal-thumbs button[aria-current="true"] {
  color: #f0ca78;
  border-color: rgba(231, 185, 103, .6);
  background: rgba(231, 185, 103, .11);
}

.hotel-gallery-modal-thumbs img {
  width: 53px;
  height: 43px;
  object-fit: cover;
  border-radius: 7px;
}

.hotel-gallery-modal-thumbs span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotel-room-modal > section {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  color: #35332d;
  background: #fff;
  border: 1px solid #e0d8cc;
  border-radius: 20px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .38);
}

.hotel-review-photo-modal > section {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 14px;
  overflow: auto;
  color: #fff;
  background: #1f201c;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 21px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .46);
}

.hotel-review-photo-stage {
  position: relative;
  height: min(60vh, 580px);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #11120f;
  border-radius: 15px;
}

.hotel-review-photo-stage > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hotel-review-photo-stage > button { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: rgba(21,22,19,.7); border: 1px solid rgba(255,255,255,.22); border-radius: 50%; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(5px); }
.hotel-review-photo-stage > button:first-of-type { right: 14px; }
.hotel-review-photo-stage > button:last-of-type { left: 14px; }
.hotel-review-photo-stage > button:last-of-type svg { transform: rotate(180deg); }
.hotel-review-photo-count { position: absolute; right: 50%; bottom: 13px; padding: 6px 11px; color: rgba(255,255,255,.78); background: rgba(18,18,15,.72); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: 12px; transform: translateX(50%); backdrop-filter: blur(5px); }
.hotel-review-photo-count b { color: #efc874; }

.hotel-review-photo-comment {
  margin-top: 10px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  color: #e9e5dc;
  background: #292a25;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
}

.hotel-review-photo-comment > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #ecc46e;
  background: rgba(236, 196, 110, .1);
  border: 1px solid rgba(236, 196, 110, .18);
  border-radius: 12px;
}

.hotel-review-photo-comment > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hotel-review-photo-comment b { color: #fff; font-size: 12px; }
.hotel-review-photo-comment small { display: inline-flex; align-items: center; gap: 4px; color: #79c49a; font-size: 12px; white-space: nowrap; }
.hotel-review-photo-comment small svg { font-size: 12px; }
.hotel-review-photo-comment p { margin: 5px 0 0; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.85; }

.hotel-room-modal header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 13px 16px;
  color: #fff;
  background: #262722;
  border-radius: 19px 19px 0 0;
}

.hotel-room-modal-body {
  padding: 17px;
}

.hotel-room-modal-hotel {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f8f4ec;
  border: 1px solid #e7ddcd;
  border-radius: 13px;
}

.hotel-room-modal-hotel > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #8f621c;
  background: #fff;
  border: 1px solid #e6d8bf;
  border-radius: 11px;
}

.hotel-room-modal-hotel b {
  display: block;
  font-size: 12px;
  font-weight: 750;
}

.hotel-room-modal-hotel small {
  color: #8b857b;
  font-size: 12px;
}

.hotel-room-modal dl {
  margin: 13px 0 0;
  padding: 4px 13px;
  background: #fbfaf7;
  border: 1px solid #e8e2d8;
  border-radius: 13px;
}

.hotel-room-modal dl div {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #ece6dc;
}

.hotel-room-modal dl div:last-child {
  border-bottom: 0;
}

.hotel-room-modal dt {
  color: #807b72;
  font-size: 12px;
}

.hotel-room-modal dd {
  margin: 0;
  color: #3f3c35;
  font-size: 12px;
  font-weight: 700;
}

.hotel-room-modal-body > p {
  margin: 13px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #777168;
  font-size: 12px;
  line-height: 1.75;
}

.hotel-room-modal-body > p svg {
  flex: 0 0 auto;
  color: #31805a;
  font-size: 15px;
}

.hotel-room-modal-body > button {
  width: 100%;
  height: 46px;
  margin-top: 14px;
  color: #29271f;
  background: linear-gradient(135deg, #efd184, #d7a744);
  border: 1px solid #d5a54c;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 770;
}

.hotel-room-contact-form {
  display: grid;
  gap: 14px;
}

.hotel-room-contact-intro {
  padding: 13px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  background: #f8f4ec;
  border: 1px solid #e7ddcd;
  border-radius: 13px;
}

.hotel-room-contact-intro > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #8e611c;
  background: #fff;
  border: 1px solid #e5d6bd;
  border-radius: 11px;
}

.hotel-room-contact-intro > span svg {
  font-size: 20px;
}

.hotel-room-contact-intro b {
  display: block;
  color: #403b32;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.7;
}

.hotel-room-contact-intro p {
  margin: 2px 0 0;
  color: #777067;
  font-size: 12px;
  line-height: 1.75;
}

.hotel-room-contact-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.hotel-room-contact-field > span:first-child {
  color: #514c44;
  font-size: 12px;
  font-weight: 700;
}

.hotel-room-contact-field > span:first-child i {
  color: #a73e32;
  font-style: normal;
}

.hotel-room-contact-control {
  min-height: 49px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #dcd4c8;
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.hotel-room-contact-control:focus-within {
  border-color: #c99b49;
  box-shadow: 0 0 0 3px rgba(201, 155, 73, .13);
}

.hotel-room-contact-control svg {
  flex: 0 0 auto;
  color: #9b6c22;
  font-size: 17px;
}

.hotel-room-contact-control input {
  width: 100%;
  min-width: 0;
  height: 47px;
  padding: 0;
  color: #34312b;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 680;
  text-align: left;
}

.hotel-room-contact-control input::placeholder {
  color: #aaa49a;
  opacity: 1;
}

.hotel-room-contact-field > small {
  color: #8a8379;
  font-size: 12px;
  line-height: 1.6;
}

.hotel-room-contact-field.is-invalid .hotel-room-contact-control {
  border-color: #c75b50;
  box-shadow: 0 0 0 3px rgba(199, 91, 80, .1);
}

.hotel-room-contact-field .hotel-room-contact-error {
  color: #a63d34;
  font-weight: 680;
}

.hotel-room-contact-field .hotel-room-contact-error[hidden] {
  display: none;
}

.hotel-room-contact-privacy {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #716b62;
  font-size: 12px;
  line-height: 1.75;
}

.hotel-room-contact-privacy svg {
  flex: 0 0 auto;
  color: #31805a;
  font-size: 15px;
}

.hotel-room-contact-form > button {
  width: 100%;
  height: 48px;
  color: #29271f;
  background: linear-gradient(135deg, #efd184, #d7a744);
  border: 1px solid #d5a54c;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 780;
}

.hotel-room-contact-form > button:hover,
.hotel-room-contact-form > button:focus-visible {
  background: linear-gradient(135deg, #f3d995, #ddaf50);
}

.hotel-review-modal > section {
  position: relative;
  z-index: 1;
  width: min(650px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  color: #35332d;
  background: #fff;
  border: 1px solid #e0d8cc;
  border-radius: 20px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .38);
}

.hotel-review-modal header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 13px 16px;
  color: #fff;
  background: #262722;
  border-radius: 19px 19px 0 0;
}

.hotel-review-form {
  padding: 18px;
}

.hotel-review-form > p {
  margin: 0;
  padding: 11px 12px;
  color: #6f6a62;
  background: #f8f4ec;
  border: 1px solid #e8ddca;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.8;
}

.hotel-review-form-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hotel-review-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.hotel-review-form label > span {
  color: #514d46;
  font-size: 12px;
  font-weight: 700;
}

.hotel-review-form label > span small {
  color: #999188;
  font-size: 12px;
  font-weight: 550;
}

.hotel-review-form input:not([type="radio"]),
.hotel-review-form select,
.hotel-review-form textarea {
  width: 100%;
  color: #34322d;
  background: #fbfaf7;
  border: 1px solid #ddd6cb;
  border-radius: 10px;
  outline: 0;
  font: inherit;
  font-size: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hotel-review-form input:not([type="radio"]),
.hotel-review-form select {
  height: 43px;
  padding: 0 11px;
}

.hotel-review-form textarea {
  min-height: 116px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.8;
}

.hotel-review-form input:not([type="radio"]):focus,
.hotel-review-form select:focus,
.hotel-review-form textarea:focus {
  background: #fff;
  border-color: #b98a3e;
  box-shadow: 0 0 0 3px rgba(185, 138, 62, .12);
}

.hotel-review-form-booking,
.hotel-review-form-message {
  grid-column: 1 / -1;
}

.hotel-review-photo-upload {
  padding: 13px;
  grid-column: 1 / -1;
  background: #f9f6ef;
  border: 1px solid #e5dccd;
  border-radius: 13px;
}

.hotel-review-photo-upload-heading,
.hotel-review-photo-upload-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hotel-review-photo-upload-heading { justify-content: space-between; }
.hotel-review-photo-upload-heading > div > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #93651d; background: #f0e1c2; border-radius: 10px; }
.hotel-review-photo-upload-heading b,.hotel-review-photo-upload-heading small { display: block; }
.hotel-review-photo-upload-heading b { color: #4b473f; font-size: 12px; }
.hotel-review-photo-upload-heading small { margin-top: 1px; color: #918a80; font-size: 12px; }
.hotel-review-photo-upload-heading em { color: #866029; font-size: 12px; font-style: normal; font-weight: 750; white-space: nowrap; }

.hotel-review-photo-picker {
  min-height: 70px;
  margin-top: 10px;
  padding: 12px;
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
  color: #695d4a;
  background: #fff;
  border: 1.5px dashed #ccb78e;
  border-radius: 11px;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease;
}

.hotel-review-photo-picker:hover,
.hotel-review-photo-picker.is-dragging { background: #fffaf0; border-color: #aa7b2d; }
.hotel-review-photo-picker input { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.hotel-review-photo-picker > svg { flex: 0 0 auto; color: #a27326; font-size: 23px; }
.hotel-review-photo-picker > span { display: block; text-align: right; }
.hotel-review-photo-picker > span b,.hotel-review-photo-picker > span small { display: block; }
.hotel-review-photo-picker > span b { color: #5a5040; font-size: 12px; }
.hotel-review-photo-picker > span small { margin-top: 2px; color: #999187; font-size: 12px; font-weight: 500; }

.hotel-review-photo-preview { margin-top: 9px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.hotel-review-photo-preview[hidden] { display: none; }
.hotel-review-photo-preview figure { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; background: #e8e2d8; border: 1px solid #d8d0c4; border-radius: 10px; }
.hotel-review-photo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hotel-review-photo-preview button { position: absolute; top: 5px; left: 5px; width: 25px; height: 25px; padding: 0; display: grid; place-items: center; color: #fff; background: rgba(37,34,29,.78); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; cursor: pointer; }
.hotel-review-photo-error { min-height: 14px; margin: 6px 0 0; color: #a3443b; font-size: 12px; }

.hotel-review-ratings {
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  grid-column: 1 / -1;
  border: 0;
}

.hotel-review-ratings legend {
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hotel-review-ratings legend span {
  color: #3f3b34;
  font-size: 12px;
  font-weight: 780;
}

.hotel-review-ratings legend small {
  color: #8e887e;
  font-size: 12px;
}

.hotel-review-rating-list {
  overflow: hidden;
  border: 1px solid #e4dcd0;
  border-radius: 14px;
}

.hotel-review-rating-row {
  min-height: 66px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto 67px;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ebe5dc;
  transition: background-color .18s ease;
}

.hotel-review-rating-row:last-child {
  border-bottom: 0;
}

.hotel-review-rating-row.is-rated {
  background: #fffdf8;
}

.hotel-review-rating-copy {
  min-width: 0;
}

.hotel-review-rating-copy > span,
.hotel-review-rating-copy > small {
  display: block;
}

.hotel-review-rating-copy > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #464139;
  font-size: 12px;
  font-weight: 740;
}

.hotel-review-rating-copy > span svg {
  color: #c59036;
  font-size: 14px;
}

.hotel-review-rating-copy > small {
  margin-top: 2px;
  overflow: hidden;
  color: #928b82;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotel-review-rating-options {
  display: flex;
  align-items: center;
  gap: 5px;
  direction: ltr;
}

.hotel-review-rating-options label {
  position: relative;
  display: block;
}

.hotel-review-rating-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hotel-review-rating-options label > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #777168;
  background: #f8f6f1;
  border: 1px solid #ded8ce;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.hotel-review-rating-options label:hover > span {
  color: #79551d;
  border-color: #c8a66b;
  transform: translateY(-1px);
}

.hotel-review-rating-options input:focus-visible + span {
  outline: 3px solid rgba(196, 145, 61, .2);
  outline-offset: 2px;
}

.hotel-review-rating-options input:checked + span {
  color: #2e2c27;
  background: #efd083;
  border-color: #d5a648;
  box-shadow: 0 5px 12px rgba(122, 88, 30, .13);
}

.hotel-review-rating-row output {
  color: #999187;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.hotel-review-rating-row.is-rated output {
  color: #76531c;
  font-weight: 720;
}

.hotel-review-rating-summary {
  margin-top: 9px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, #292a25, #37372f);
  border-radius: 13px;
}

.hotel-review-rating-summary > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #efc86f;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}

.hotel-review-rating-summary > span svg {
  font-size: 19px;
}

.hotel-review-rating-summary small {
  display: block;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.hotel-review-rating-summary strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.hotel-review-rating-summary strong b {
  color: #f0cb78;
  font-size: 19px;
  font-weight: 830;
}

.hotel-review-rating-summary strong em {
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-style: normal;
  font-weight: 550;
}

.hotel-review-rating-summary p {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

.hotel-review-form-message > small {
  color: #908980;
  font-size: 12px;
  text-align: left;
}

.hotel-review-form-message > small b {
  color: #795722;
  font-weight: 750;
}

.hotel-review-form-submit {
  margin-top: 15px;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #ebe5db;
}

.hotel-review-form-submit > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7c766d;
  font-size: 12px;
}

.hotel-review-form-submit > span svg {
  color: #35835e;
  font-size: 15px;
}

.hotel-review-form-submit > button {
  min-width: 150px;
  height: 45px;
  color: #29271f;
  background: linear-gradient(135deg, #efd184, #d7a744);
  border: 1px solid #d5a54c;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 770;
}

body.hotel-modal-open {
  overflow: hidden;
}

.hotel-mobile-bar {
  display: none;
}

.hotel-detail-body.mobile-hotel-search-open .hotel-mobile-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .hotel-title-row {
    gap: 25px;
  }

  .hotel-gallery {
    height: 400px;
  }

  .hotel-room-card {
    grid-template-columns: 48px minmax(0, 1fr) 210px;
    gap: 14px;
  }

  .hotel-room-icon {
    width: 48px;
    height: 48px;
  }

  .hotel-about-layout,
  .hotel-faq-layout {
    gap: 44px;
  }
}

@media (max-width: 1000px) {
  .hotel-detail-hero {
    padding-top: calc(var(--header-top) + var(--header-height) + 30px);
  }

  .hotel-title-row {
    align-items: flex-start;
  }

  .hotel-title-side {
    flex-direction: column;
    align-items: flex-end;
  }

  .hotel-gallery {
    height: 360px;
  }

  .hotel-detail-trust-grid > span {
    padding: 0 11px;
    grid-template-columns: 37px 1fr;
    column-gap: 7px;
  }

  .hotel-detail-trust-grid svg {
    width: 37px;
    height: 37px;
    padding: 9px;
  }

  .hotel-section-links {
    gap: 20px;
  }

  .hotel-section-cta {
    display: none;
  }

  .hotel-availability-status {
    grid-column: 1 / -1;
  }

  .hotel-rooms-layout {
    grid-template-columns: 1fr;
  }

  .hotel-room-assurance {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 205px;
    gap: 14px;
    align-items: center;
  }

  .hotel-room-assurance h3,
  .hotel-room-assurance > p {
    grid-column: 2;
  }

  .hotel-room-assurance h3 {
    margin: 0;
  }

  .hotel-room-assurance > p {
    margin-top: -8px;
  }

  .hotel-room-assurance > a {
    grid-column: 3;
    grid-row: 1 / 3;
    margin-top: 0;
  }

  .hotel-room-assurance ul {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    margin-top: 2px;
  }

  .hotel-about-layout,
  .hotel-location-layout,
  .hotel-faq-layout {
    grid-template-columns: 1fr;
  }

  .hotel-facility-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hotel-facility-grid--clamped > article:nth-child(n+7) {
    display: none;
  }

  .hotel-facility-grid--clamped.is-expanded > article {
    display: flex;
  }

  .hotel-location-layout {
    gap: 12px;
  }

  .hotel-rules-layout {
    grid-template-columns: 1fr;
  }

  .hotel-rule-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hotel-review-photo-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hotel-review-photo-track button:last-child { display: none; }

  .hotel-review-list article > p {
    min-height: auto;
  }

  .hotel-support-banner article {
    grid-template-columns: 58px minmax(0, 1fr) 180px;
  }
}

@media (max-width: 760px) {
  .hotel-title-row {
    flex-direction: column;
    gap: 20px;
  }

  .hotel-title-side {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .hotel-gallery {
    height: 330px;
  }

  .hotel-detail-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 8px;
  }

  .hotel-detail-trust-grid > span {
    min-height: 62px;
  }

  .hotel-detail-trust-grid > span:nth-child(2) {
    border-left: 0;
  }

  .hotel-detail-trust-grid > span:nth-child(-n+2) {
    border-bottom: 1px solid #ebe5db;
  }

  .hotel-room-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  

  .hotel-room-offer {
    grid-column: 1 / -1;
    padding: 14px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-top: 1px solid #ebe5dc;
    border-right: 0;
  }

  .hotel-room-offer > span,
  .hotel-room-offer p {
    grid-column: 1;
  }

  .hotel-room-offer > button {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 190px;
    margin: 0;
  }

  .hotel-room-nightly {
    padding-top: 0;
  }

  .hotel-rule-summary {
    grid-template-columns: 1fr;
  }

  .hotel-reviews-overview {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .hotel-review-bars p > span {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .hotel-support-banner article {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .hotel-support-banner a {
    grid-column: 1 / -1;
    min-height: 55px;
  }

  .hotel-room-unavailable {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .hotel-room-unavailable-cta {
    grid-column: 1 / -1;
    min-height: 52px;
  }
}

@media (max-width: 680px) {
  .hotel-detail-body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .hotel-detail-hero {
    padding: calc(var(--header-top) + var(--header-height) + 22px) 0 24px;
  }

  .hotel-breadcrumb {
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
  }

  .hotel-breadcrumb span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hotel-title-row {
    margin-top: 18px;
    gap: 14px;
  }

  .hotel-title-side {
    --hotel-title-control-size: 48px;
  }

  .hotel-kicker {
    font-size: 12px;
  }

  .hotel-title-line {
    margin-top: 5px;
    gap: 10px;
  }

  .hotel-title-line h1 {
    font-size: 25px;
    line-height: 1.48;
  }

  .hotel-title-stars svg {
    width: 14px;
    height: 14px;
  }

  .hotel-title-meta {
    margin-top: 8px;
    display: grid;
    gap: 6px;
    font-size: 12px;
  }

  .hotel-title-meta svg {
    font-size: 14px;
  }

  .hotel-rating-card {
    min-width: 124px;
    padding: 4px 8px;
  }

  .hotel-rating-card > strong {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .hotel-title-actions button {
    width: 48px;
    height: 48px;
  }

  .hotel-gallery {
    position: relative;
    height: auto;
    margin-top: 18px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    direction: rtl;
  }

  .hotel-gallery::-webkit-scrollbar {
    display: none;
  }

  .hotel-gallery-item,
  .hotel-gallery-item--main,
  .hotel-gallery-item--small:nth-of-type(n) {
    width: 91%;
    height: 256px;
    flex: 0 0 91%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    scroll-snap-align: start;
  }

  .hotel-gallery-item img {
    object-position: center;
  }

  .hotel-gallery-badge {
    top: 11px;
    right: 11px;
    padding: 6px 9px;
    font-size: 12px;
  }

  .hotel-gallery-all {
    right: 9px;
    bottom: 9px;
    left: auto;
    min-height: 34px;
    font-size: 12px;
  }

  .hotel-gallery-mobile-count {
    position: sticky;
    z-index: 4;
    left: 10px;
    bottom: 10px;
    align-self: flex-end;
    margin-right: -60px;
    margin-bottom: 10px;
    padding: 5px 8px;
    display: inline-flex;
    gap: 3px;
    color: #fff;
    background: rgba(20, 20, 18, .76);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 12px;
    backdrop-filter: blur(7px);
  }

  .hotel-detail-trust {
    overflow: hidden;
  }

  .hotel-detail-trust-grid {
    min-height: 76px;
    padding: 9px 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .hotel-detail-trust-grid::-webkit-scrollbar {
    display: none;
  }

  .hotel-detail-trust-grid > span {
    min-width: 190px;
    min-height: 58px;
    padding: 7px 10px;
    flex: 0 0 190px;
    grid-template-columns: 36px 1fr;
    background: #faf8f4;
    border: 1px solid #e9e2d7 !important;
    border-radius: 12px;
    scroll-snap-align: start;
  }

  .hotel-detail-trust-grid svg {
    width: 36px;
    height: 36px;
    padding: 8px;
  }

  .hotel-detail-trust-grid b {
    font-size: 12px;
  }

  .hotel-detail-trust-grid small {
    font-size: 12px;
  }

  .hotel-section-nav-inner {
    min-height: 49px;
    padding: 0;
  }

  .hotel-section-links {
    width: 100%;
    padding-inline: 12px;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hotel-section-links::-webkit-scrollbar {
    display: none;
  }

  .hotel-section-links a {
    height: 49px;
    font-size: 12px;
  }

  .hotel-detail-section {
    padding: 56px 0;
    scroll-margin-top: 56px;
  }

  .hotel-section-heading h2 {
    font-size: 24px;
  }

  .hotel-section-heading p {
    font-size: 12px;
    line-height: 1.8;
  }

  .hotel-section-heading--split {
    align-items: flex-start;
  }

  .hotel-room-count {
    margin-top: 5px;
    padding: 6px 9px;
    font-size: 12px;
  }

  .hotel-availability-status {
    padding: 9px 10px;
    font-size: 12px;
  }

  .hotel-rooms-layout {
    margin-top: 14px;
  }

  

  

  

  

  .hotel-room-empty {
    padding: 20px;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .hotel-room-unavailable {
    padding: 20px;
    border-radius: 17px;
  }

  .hotel-room-unavailable-icon {
    width: 47px;
    height: 47px;
    border-radius: 13px;
  }

  .hotel-room-unavailable-icon svg {
    font-size: 22px;
  }

  .hotel-room-list {
    gap: 9px;
  }

  .hotel-room-card {
    padding: 14px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    border-radius: 16px;
  }

  .hotel-room-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .hotel-room-icon svg {
    font-size: 20px;
  }

  .hotel-room-heading h3 {
    font-size: 14px;
  }

  .hotel-room-instant {
    display: none;
  }

  .hotel-room-meta {
    gap: 6px 11px;
  }

  .hotel-room-meta span {
    font-size: 12px;
  }

  .hotel-room-features {
    margin-right: -54px;
  }

  .hotel-room-offer {
    grid-template-columns: minmax(0, 1fr) 145px;
  }

  .hotel-room-offer p strong {
    font-size: 17px;
  }

  .hotel-room-offer > button {
    width: 145px;
    height: 44px;
  }

  .hotel-room-nightly-toggle {
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr) 32px;
  }

  .hotel-room-nightly-copy b,
  .hotel-room-nightly-panel > header span,
  .hotel-room-nightly-row > span b {
    font-size: 12px;
  }

  .hotel-room-nightly-copy small,
  .hotel-room-nightly-panel > header small,
  .hotel-room-nightly-row > span small,
  .hotel-room-nightly-empty {
    font-size: 12px;
  }

  .hotel-room-nightly-list {
    padding: 10px;
  }

  .hotel-room-nightly-row {
    min-height: 96px;
  }

  .hotel-room-contact-intro b {
    font-size: 13px;
  }

  .hotel-room-contact-intro p,
  .hotel-room-contact-field > small,
  .hotel-room-contact-privacy {
    font-size: 12px;
  }

  .hotel-room-contact-field > span:first-child {
    font-size: 12px;
  }

  .hotel-room-contact-form > button {
    min-height: 50px;
    font-size: 12px;
  }

  .hotel-room-assurance {
    padding: 18px;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .hotel-room-assurance-icon {
    width: 43px;
    height: 43px;
  }

  .hotel-room-assurance h3 {
    grid-column: 2;
    font-size: 14px;
  }

  .hotel-room-assurance > p {
    grid-column: 1 / -1;
    margin-top: 2px;
  }

  .hotel-room-assurance > a {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hotel-room-assurance ul {
    grid-template-columns: 1fr;
    justify-content: start;
  }

  .hotel-about-layout {
    gap: 28px;
  }

  .hotel-about-copy > p,
  .hotel-about-more p {
    font-size: 12px;
    line-height: 2;
  }

  .hotel-fact-grid {
    gap: 8px;
  }

  .hotel-fact-grid > div {
    min-height: 116px;
    padding: 15px;
  }

  .hotel-fact-grid dd b {
    font-size: 21px;
  }

  .hotel-facility-grid {
    margin-top: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hotel-facility-grid--clamped > article:nth-child(n+5) {
    display: none;
  }

  .hotel-facility-grid--clamped.is-expanded > article {
    display: flex;
  }

  .hotel-facility-grid article {
    min-height: 68px;
    padding: 9px;
    gap: 8px;
  }

  .hotel-facility-grid article > span {
    width: 32px;
    height: 32px;
  }

  .hotel-facility-grid h3 {
    font-size: 12px;
  }

  .hotel-facilities-more {
    grid-template-columns: 1fr;
  }

  .hotel-facilities-more section {
    padding: 8px 4px;
    border-bottom: 1px solid #ece5da;
    border-left: 0;
  }

  .hotel-facilities-more section:last-child {
    border-bottom: 0;
  }

  .hotel-location-section .hotel-section-heading--split,
  .hotel-similar-section .hotel-section-heading--split {
    display: grid;
  }

  .hotel-location-section .hotel-outline-action,
  .hotel-similar-section .hotel-outline-action {
    justify-self: start;
  }

  .hotel-map-image,
  .hotel-map-canvas {
    height: 270px;
  }

  .hotel-distance-list {
    max-height: 320px;
  }

  .hotel-distance-list article {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .hotel-distance-list article > span {
    width: 38px;
    height: 38px;
  }

  .hotel-rule-summary article {
    min-height: 73px;
  }

  .hotel-reviews-overview {
    margin-top: 20px;
    padding: 10px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hotel-review-score {
    min-height: 145px;
  }

  .hotel-review-score strong {
    font-size: 38px;
  }

  .hotel-review-bars {
    padding: 7px 4px;
  }

  .hotel-review-bars p > span {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .hotel-review-photo-gallery {
    margin-right: -4px;
    margin-left: -4px;
    padding: 12px;
  }

  .hotel-review-photo-gallery > header p { display: none; }

  .hotel-review-photo-track {
    margin-left: -12px;
    padding-left: 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hotel-review-photo-track::-webkit-scrollbar { display: none; }
  .hotel-review-photo-track button,
  .hotel-review-photo-track button:last-child {
    width: 142px;
    min-width: 142px;
    display: block;
    flex: 0 0 142px;
    scroll-snap-align: start;
  }

  .hotel-review-filters {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hotel-reviews-section .hotel-section-heading--split {
    display: grid;
  }

  .hotel-review-actions {
    width: 100%;
  }

  .hotel-review-actions > button {
    flex: 1 1 0;
  }

  .hotel-review-reply > p {
    font-size: 12px;
  }

  .hotel-review-filters::-webkit-scrollbar {
    display: none;
  }

  .hotel-review-filters button {
    flex: 0 0 auto;
  }

  .hotel-faq-layout {
    gap: 24px;
  }

  .hotel-similar-section {
    padding-top: 0;
  }

  .hotel-similar-grid {
    margin-right: -12px;
    margin-left: -12px;
    padding-inline: 12px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hotel-similar-grid::-webkit-scrollbar {
    display: none;
  }

  .hotel-similar-card {
    width: 82%;
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .hotel-similar-media {
    height: 165px;
  }

  .hotel-support-banner {
    padding-bottom: 55px;
  }

  .hotel-support-banner article {
    min-height: 0;
    padding: 23px 18px;
    grid-template-columns: 47px minmax(0, 1fr);
    gap: 13px;
    border-radius: 18px;
  }

  .hotel-support-banner article > span {
    width: 47px;
    height: 47px;
    border-radius: 13px;
  }

  .hotel-support-banner article > span svg {
    font-size: 23px;
  }

  .hotel-support-banner h2 {
    font-size: 16px;
  }

  .hotel-support-banner p {
    font-size: 12px;
  }

  .hotel-gallery-modal,
  .hotel-room-modal,
  .hotel-review-photo-modal,
  .hotel-review-modal {
    padding: 0;
    place-items: end center;
  }

  .hotel-gallery-modal > section,
  .hotel-room-modal > section,
  .hotel-review-photo-modal > section,
  .hotel-review-modal > section {
    width: 100%;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
    animation: hotel-sheet-in .24s ease both;
  }

  .hotel-gallery-modal > section {
    padding: 11px;
  }

  .hotel-review-photo-modal > section { padding: 10px; }
  .hotel-review-photo-stage { height: min(56vh, 520px); }
  .hotel-review-photo-comment { margin-bottom: calc(2px + env(safe-area-inset-bottom)); }

  .hotel-gallery-modal-stage {
    height: min(57vh, 480px);
  }

  .hotel-gallery-modal-stage > button {
    width: 41px;
    height: 41px;
  }

  .hotel-gallery-modal-thumbs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hotel-gallery-modal-thumbs button {
    min-width: 148px;
    flex: 0 0 148px;
  }

  .hotel-room-modal-body {
    padding-bottom: calc(17px + env(safe-area-inset-bottom));
  }

  .hotel-review-form {
    padding: 15px 14px calc(18px + env(safe-area-inset-bottom));
  }

  .hotel-review-form-grid {
    grid-template-columns: 1fr;
  }

  .hotel-review-form-booking,
  .hotel-review-form-message,
  .hotel-review-photo-upload {
    grid-column: 1;
  }

  .hotel-review-ratings {
    grid-column: 1;
  }

  .hotel-review-ratings legend {
    display: grid;
    gap: 2px;
  }

  .hotel-review-rating-row {
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
  }

  .hotel-review-rating-copy {
    grid-column: 1 / -1;
  }

  .hotel-review-rating-copy > small {
    white-space: normal;
  }

  .hotel-review-rating-options {
    grid-column: 1;
  }

  .hotel-review-rating-row output {
    grid-column: 2;
    text-align: left;
  }

  .hotel-review-rating-summary {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .hotel-review-rating-summary p {
    grid-column: 1 / -1;
  }

  .hotel-review-form-submit {
    display: grid;
  }

  .hotel-review-form-submit > button {
    width: 100%;
  }

  .hotel-review-photo-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hotel-mobile-bar {
    position: fixed;
    z-index: 140;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(70px + env(safe-area-inset-bottom));
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 166px;
    gap: 10px;
    align-items: center;
    color: #fff;
    background: rgba(31, 32, 28, .97);
    border-top: 1px solid rgba(227, 180, 90, .3);
    box-shadow: 0 -12px 35px rgba(25, 24, 20, .2);
    backdrop-filter: blur(15px);
  }

  .hotel-mobile-bar div {
    min-width: 0;
    display: grid;
  }

  .hotel-mobile-bar small {
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
  }

  .hotel-mobile-bar b {
    margin-top: 1px;
    overflow: hidden;
    color: #f0cc7c;
    font-size: 12px;
    font-weight: 790;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hotel-mobile-bar em {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    font-style: normal;
  }

  .hotel-mobile-bar button {
    height: 48px;
    color: #29271f;
    background: linear-gradient(135deg, #f0d286, #d6a442);
    border: 1px solid #d7aa50;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 770;
  }

  .hotel-detail-body .site-footer {
    margin-bottom: 0;
  }

  .hotel-detail-body .toast {
    z-index: 190;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100% - 24px);
    font-size: 12px;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .hotel-title-meta span:first-child {
    align-items: flex-start;
  }

  .hotel-title-side {
    --hotel-title-control-size: 44px;
    gap: 8px;
  }

  .hotel-rating-card {
    min-width: 116px;
    padding: 4px 7px;
  }

  .hotel-rating-card > strong {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .hotel-title-actions {
    gap: 5px;
  }

  .hotel-title-actions button {
    width: 44px;
    height: 44px;
  }

  .hotel-gallery-item,
  .hotel-gallery-item--main,
  .hotel-gallery-item--small:nth-of-type(n) {
    height: 232px;
  }

  .hotel-section-heading--split {
    display: grid;
  }

  .hotel-room-count {
    justify-self: start;
  }

  .hotel-room-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .hotel-room-icon {
    width: 38px;
    height: 38px;
  }

  .hotel-room-features {
    margin-right: -48px;
  }

  .hotel-room-offer {
    grid-template-columns: 1fr;
  }

  .hotel-room-offer > button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 8px;
  }

  .hotel-room-nightly-toggle {
    padding-inline: 8px;
    grid-template-columns: 35px minmax(0, 1fr) 30px;
    gap: 8px;
  }

  .hotel-room-nightly-icon {
    width: 35px;
    height: 35px;
  }

  .hotel-room-nightly-panel > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .hotel-room-nightly-row {
    gap: 8px;
  }

  .hotel-room-nightly-row > span b {
    font-size: 12px;
  }

  .hotel-room-nightly-row > b {
    font-size: 12px;
  }

  .hotel-facility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotel-facility-grid article {
    min-height: 66px;
  }

  .hotel-review-bars p > span {
    grid-template-columns: 79px minmax(0, 1fr);
  }

  .hotel-mobile-bar {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
}

/* Keep Persian interface copy comfortably readable across the booking journey. */
.hotel-rating-card small,
.hotel-title-actions span,
.hotel-detail-trust-grid small,
.hotel-availability-status,
.hotel-room-heading > div > span,
.hotel-room-instant,
.hotel-room-offer > span,
.hotel-room-offer p small,
.hotel-room-assurance > a small,
.hotel-special-offer p,
.hotel-fact-grid dt,
.hotel-facility-grid p,
.hotel-facilities-more p,
.hotel-distance-list p,
.hotel-distance-list article > b,
.hotel-rule-summary p,
.hotel-review-score > span,
.hotel-review-score small,
.hotel-review-bars b,
.hotel-review-list header small,
.hotel-review-list footer,
.hotel-similar-top small,
.hotel-similar-price small,
.hotel-similar-price em,
.hotel-support-banner div > small,
.hotel-support-banner a small,
.hotel-gallery-modal header span,
.hotel-room-modal header span,
.hotel-review-modal header span,
.hotel-room-modal-hotel small,
.hotel-room-modal dt,
.hotel-room-modal dd,
.hotel-room-modal li {
  font-size: 12px;
}

.hotel-room-meta span,
.hotel-room-assurance > p,
.hotel-facility-grid h3,
.hotel-review-list header b,
.hotel-review-list article > p,
.hotel-support-banner p {
  font-size: 12px;
}

.hotel-room-features span {
  font-size: 12px;
}

.hotel-text-toggle {
  min-height: 44px;
}

.hotel-review-filters button {
  min-height: 42px;
  font-size: 12px;
}

@media (max-width: 680px) {
  .hotel-breadcrumb,
  .hotel-kicker,
  .hotel-title-meta,
  .hotel-gallery-caption,
  .hotel-gallery-mobile-index,
  .hotel-detail-trust-grid small,
  .hotel-section-links a,
  .hotel-room-count,
  .hotel-availability-status,
  .hotel-room-meta span,
  .hotel-facility-grid h3,
  .hotel-support-banner p,
  .hotel-mobile-bar small,
  .hotel-mobile-bar button {
    font-size: 12px;
  }

  .hotel-section-heading p,
  .hotel-about-copy > p,
  .hotel-about-more p,
  .hotel-review-list article > p {
    font-size: 12px;
  }
}

@media (max-width: 350px) {
  .hotel-facility-grid {
    grid-template-columns: 1fr;
  }

  .hotel-facility-grid--clamped > article:nth-child(n+3) {
    display: none;
  }

  .hotel-facility-grid--clamped.is-expanded > article {
    display: flex;
  }
}

@keyframes hotel-sheet-in {
  from { transform: translateY(28px); opacity: .75; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes hotel-nightly-open {
  from { transform: translateY(-4px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hotel-detail-page *,
  .hotel-gallery-modal *,
  .hotel-room-modal *,
  .hotel-review-modal *,
  .hotel-mobile-bar * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.hotel-room-offer > .hotel-room-extra-note {
  margin-top: 2px;
  color: #8a6424;
  font-size: 11.5px;
  font-weight: 650;
}

.hotel-room-nightly-extra {
  display: block;
  color: #8a6424;
  font-size: 11px;
  font-weight: 600;
}