/* ایران‌سنس (نسخه‌ی FaNum — ارقام فارسی) در پنج وزن استاتیک. بازه‌ی font-weight هر وزن
   عمداً پیوسته است تا وزن‌های میانیِ استفاده‌شده در CSS (مثل ۶۵۰/۷۵۰/۸۵۰) به نزدیک‌ترین
   فایل واقعی بخورند و مرورگر bold مصنوعی نسازد: ۴۰۰–۴۹۹ معمولی، ۵۰۰–۵۹۹ مدیوم، ۶۰۰ به بالا بولد. */
@font-face {
  font-family: "IRANSans";
  src: url("fonts/iransans-fanum-ultralight.woff2") format("woff2"),
       url("fonts/iransans-fanum-ultralight.woff") format("woff");
  font-style: normal;
  font-weight: 100 299;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("fonts/iransans-fanum-light.woff2") format("woff2"),
       url("fonts/iransans-fanum-light.woff") format("woff");
  font-style: normal;
  font-weight: 300 399;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("fonts/iransans-fanum-regular.woff2") format("woff2"),
       url("fonts/iransans-fanum-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400 499;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("fonts/iransans-fanum-medium.woff2") format("woff2"),
       url("fonts/iransans-fanum-medium.woff") format("woff");
  font-style: normal;
  font-weight: 500 599;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("fonts/iransans-fanum-bold.woff2") format("woff2"),
       url("fonts/iransans-fanum-bold.woff") format("woff");
  font-style: normal;
  font-weight: 600 1000;
  font-display: swap;
}

:root {
  --charcoal: #232421;
  --charcoal-2: #2b2c29;
  --gold: #d7ab5a;
  --gold-light: #f0c961;
  --gold-dark: #b98528;
  --ink: #34342f;
  --muted: #77746d;
  --paper: #fbfaf7;
  --line: #e8e3da;
  --container: 1370px;
  --booking-width: 1312px;
  --shadow: 0 18px 55px rgba(40, 36, 29, .12), 0 2px 8px rgba(40, 36, 29, .08);
  --header-top: 10px;
  --header-height: 72px;
  --header-content-gap: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: "IRANSans", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea, optgroup { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* پیام سیستمی صفحه (شهر/لندینگ/هتل — includes/partials/system-announcement.php).
   کلاس عمومی (نه hotels.css/hotel-detail.css) چون هم بالای لیست هتل‌ها هم بالای کارت
   ظرفیت اتاق صفحه‌ی جزئیات هتل رندر می‌شود. */
.site-announcement {
  margin: 16px 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 570;
  line-height: 1.7;
}

.site-announcement svg {
  flex: 0 0 auto;
  font-size: 17px;
}

.site-announcement--success {
  color: #2f6b4f;
  background: #eef8f1;
  border-color: #cfe9d9;
}

.site-announcement--warning {
  color: #8a5a12;
  background: #fdf3e2;
  border-color: #f2dcae;
}

.site-announcement--danger {
  color: #a23636;
  background: #fdecec;
  border-color: #f3c8c8;
}

svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header */
.site-header {
  position: absolute;
  z-index: 100;
  top: var(--header-top);
  right: 0;
  left: 0;
  height: auto;
  color: #fff;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.header-inner {
  width: min(calc(100% - 48px), 1180px);
  height: var(--header-height);
  margin-inline: auto;
  padding: 8px 12px 8px 18px;
  display: flex;
  align-items: center;
  gap: 0;
  color: #fff;
  background: rgba(27, 28, 25, .97);
  border: 1px solid rgba(225, 184, 105, .3);
  border-radius: 22px;
  box-shadow: 0 15px 45px rgba(22, 21, 18, .24), inset 0 0 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  pointer-events: auto;
}

.brand {
  width: 43px;
  height: 56px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.main-nav {
  height: 42px;
  margin-right: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  border-radius: 13px;
}

.main-nav a {
  position: relative;
  height: 28px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .12);
  font-size: 14.5px;
  font-weight: 650;
  transition: color .2s ease, background-color .2s ease;
}

.main-nav a:last-child { border-left: 0; }

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.is-active { color: #e7b967; }

.main-nav a.is-active::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -7px;
  left: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d5a54e 18%, #d5a54e 82%, transparent);
  border-radius: 9px;
}

.header-actions {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  direction: rtl;
}

.login {
  min-width: 132px;
  height: 44px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #24231f;
  background: linear-gradient(135deg, #f1cf83, #d9a846);
  border: 1px solid #e2b75e;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(7, 7, 6, .22), inset 0 1px 0 rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: .2s ease;
}

.login svg { color: #312c22; font-size: 20px; }
.login span { font-size: 14.5px; font-weight: 720; }

.login:hover,
.login:focus-visible {
  color: #191914;
  background: linear-gradient(135deg, #f7dea4, #e7b967);
  border-color: #f0cb7c;
  transform: translateY(-1px);
}

.login:hover svg,
.login:focus-visible svg { color: #191914; }

.menu-toggle {
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  color: var(--gold-light);
  background: transparent;
  border: 1px solid rgba(215, 171, 90, .55);
  border-radius: 8px;
  cursor: pointer;
}

.menu-toggle svg { font-size: 23px; }

.mobile-menu {
  position: absolute;
  z-index: 40;
  top: calc(var(--header-height) + 8px);
  right: max(16px, calc((100% - 1180px) / 2));
  left: max(16px, calc((100% - 1180px) / 2));
  padding: 10px;
  color: #fff;
  background: rgba(27, 28, 25, .985);
  border: 1px solid rgba(225, 184, 105, .32);
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(42, 39, 30, .2);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu a {
  min-height: 50px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 650;
}

.mobile-menu a:last-child { border-bottom: 0; }

.mobile-menu a svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  color: #e7b967;
  background: rgba(231, 185, 103, .12);
  border-radius: 9px;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a.is-active {
  color: #e7b967;
  background: rgba(231, 185, 103, .1);
}

@media (max-width: 1000px) {
  :root {
    --header-height: 62px;
    --header-content-gap: 16px;
  }

  .header-inner {
    width: calc(100% - 24px);
    padding: 6px 8px 6px 10px;
    gap: 9px;
    border-radius: 18px;
  }

  .brand { width: 38px; height: 49px; }
  .main-nav { display: none; }

  .menu-toggle {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    display: grid;
    color: #e7b967;
    background: rgba(231, 185, 103, .1);
    border: 1px solid rgba(231, 185, 103, .32);
    border-radius: 12px;
  }

  .login { min-width: 116px; height: 40px; border-radius: 12px; }
  .mobile-menu { right: 12px; left: 12px; }
}

@media (max-width: 680px) {
  :root {
    --header-height: 60px;
    --header-content-gap: 12px;
  }

  .header-inner { width: calc(100% - 16px); gap: 5px; border-radius: 16px; }
  .brand { width: 32px; height: 41px; }
  .menu-toggle { width: 36px; height: 36px; margin-right: 7px; }
  .login { width: auto; min-width: 70px; height: 35px; padding: 0 11px; gap: 6px; }
  .login span { display: inline; font-size: 12.5px; }
  .login svg { font-size: 17px; }
  .mobile-menu { right: 8px; left: 8px; border-radius: 16px; }
}

@media (max-width: 400px) {
  :root { --header-height: 58px; }
  .header-inner { gap: 4px; }
  .brand { width: 30px; height: 39px; }
  .menu-toggle { width: 34px; height: 34px; }
  .login { min-width: 68px; }
}

/* Hero */
.hero {
  position: relative;
  z-index: 20;
  min-height: 634px;
  overflow: visible;
  background: #fbfaf7;
}

.hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 470px;
  background-image: url("images/hero-desktop.webp");
  background-position: center 88%;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-copy {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-top) + var(--header-height) + var(--header-content-gap));
  right: max(32px, calc((100vw - var(--booking-width)) / 2));
  width: min(650px, calc(100% - 64px));
  color: #292821;
  text-align: right;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58), 0 5px 20px rgba(255, 255, 255, .42);
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(34px, 3.05vw, 45px);
  font-weight: 780;
  line-height: 1.43;
  letter-spacing: -.55px;
}

.hero-copy p {
  margin: 15px 0 0;
  color: rgba(41, 40, 33, .82);
  font-size: 16px;
  font-weight: 450;
}

/* Booking panel */
.booking-card {
  position: absolute;
  z-index: 10;
  top: 365px;
  right: 50%;
  width: min(calc(100% - 64px), 1190px);
  min-height: 198px;
  margin: 0;
  padding: 22px 20px 18px;
  background: rgba(255, 255, 255, .975);
  border: 1px solid rgba(226, 221, 211, .82);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transform: translateX(50%);
  backdrop-filter: blur(9px);
}

.booking-row {
  display: grid;
  grid-template-columns: minmax(330px, 1.45fr) repeat(2, minmax(185px, 1fr)) 195px;
  gap: 12px;
  align-items: end;
  direction: rtl;
}

.field {
  position: relative;
  height: auto;
  min-width: 0;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
}

/* Keep the hotel picker above the booking card and the following section. */
.field--destination:focus-within,
.field--destination:has(.destination-trigger[aria-expanded="true"]) {
  z-index: 100;
}

.field:focus-within .field-control {
  border-color: rgba(190, 137, 39, .72);
  box-shadow: 0 0 0 3px rgba(215, 171, 90, .12);
}

.field-label {
  display: block;
  padding-inline: 2px;
  color: #615e57;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.4;
}

.field-control {
  width: 100%;
  height: 50px;
  min-width: 0;
  margin-top: 6px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #6f6c65;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field-control > svg {
  flex: 0 0 auto;
  color: #77746d;
  font-size: 21px;
}

.field-control input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: #3d3c37;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
  font-weight: 620;
}

.field-control select {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: #3d3c37;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 620;
  cursor: pointer;
}

.destination-trigger {
  cursor: pointer;
  text-align: right;
}

.destination-trigger b {
  flex: 1 1 auto;
  overflow: hidden;
  color: #3d3c37;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-trigger .chevron {
  color: #99958d;
  font-size: 16px;
  transition: transform .18s ease;
}

.destination-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.destination-panel {
  position: absolute;
  z-index: 110;
  top: calc(100% + 8px);
  right: 0;
  width: min(620px, calc(100vw - 48px));
  padding: 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e4ddcf;
  border-radius: 14px;
  box-shadow: 0 24px 55px rgba(37, 35, 31, .2);
}

.destination-panel[hidden] { display: none; }

.destination-search {
  height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fbfaf7;
  border: 1px solid #e6dfd3;
  border-radius: 9px;
}

.destination-search svg { flex: 0 0 auto; color: #80796e; font-size: 19px; }
.destination-search input { width: 100%; color: #34322e; background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; }

.destination-results {
  max-height: 345px;
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.destination-option {
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #34322e;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: right;
  transition: background .16s ease, color .16s ease;
}

.destination-option:hover,
.destination-option:focus-visible,
.destination-option[aria-selected="true"] { color: #77551a; background: #fff8e8; }
.destination-option[hidden] { display: none; }
.destination-option-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #966a1f; background: #f7ead0; border-radius: 10px; font-size: 12px; font-weight: 800; }
.destination-option-icon svg { width: 19px; height: 19px; }
.destination-option > span:last-child { min-width: 0; display: grid; gap: 3px; }
.destination-option b { font-size: 13px; }
.destination-option small { color: #89847b; font-size: 12px; }
.destination-group-title { margin: 9px 10px 4px; color: #8c8579; font-size: 12px; font-weight: 700; }
.destination-empty { margin: 20px; color: #858078; text-align: center; font-size: 12px; }

/* ۱۴۰۵/۰۶/۱۲: تا وقتی فهرست پیش‌فرض مقصد (بدون q) از /hotel-search-suggestions.php
   بعد از لود صفحه جواب بدهد — هم‌الگوی .nearby-skeleton، همون shimmer مشترک. */
.destination-skeleton { display: grid; gap: 6px; padding: 0 10px; }
.destination-skeleton[hidden] { display: none; }
.destination-skeleton span {
  height: 50px;
  border-radius: 9px;
  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) {
  .destination-skeleton span { animation: none; background: #f0ede5; }
}

/* Shared check-in calendar and stay duration picker */
.booking-picker-trigger {
  width: 100%;
  min-width: 0;
  font: inherit;
  text-align: right;
  cursor: pointer;
}

.booking-picker-trigger:disabled {
  color: #9b978f;
  background: #f6f4ef;
  cursor: not-allowed;
  opacity: .7;
}

.booking-picker-value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #3d3c37;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-picker-value.is-placeholder {
  color: #8c877e;
  font-weight: 540;
}

.booking-picker-trigger > .booking-picker-chevron,
.field-control > .booking-picker-chevron {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #a19b91;
  font-size: 17px;
  transition: transform .18s ease;
}

.booking-picker-trigger[aria-expanded="true"] > .booking-picker-chevron {
  color: #a16f20;
  transform: rotate(180deg);
}

.booking-picker-backdrop {
  position: fixed;
  z-index: 500;
  inset: 0;
  background: rgba(24, 24, 21, .42);
  backdrop-filter: blur(2px);
  animation: booking-backdrop-in .18s ease both;
}

.booking-calendar,
.booking-duration {
  position: fixed;
  z-index: 510;
  overflow: hidden;
  color: #34332f;
  background: #fff;
  border: 1px solid rgba(216, 205, 187, .9);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(24, 23, 20, .27), 0 4px 16px rgba(24, 23, 20, .1);
  direction: rtl;
  animation: booking-picker-in .2s ease both;
}

.booking-calendar {
  width: min(760px, calc(100vw - 32px));
}

.booking-duration {
  width: min(560px, calc(100vw - 32px));
}

.booking-picker-backdrop[hidden],
.booking-calendar[hidden],
.booking-duration[hidden] {
  display: none;
}

.booking-picker-header {
  min-height: 72px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(110deg, #fff 0%, #fffcf5 100%);
  border-bottom: 1px solid #eee8de;
}

.booking-picker-header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.booking-picker-header span {
  color: #a17225;
  font-size: 12px;
  font-weight: 720;
}

.booking-picker-header h2 {
  margin: 0;
  color: #252520;
  font-size: 17px;
  font-weight: 790;
  line-height: 1.5;
}

.booking-picker-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: #625e56;
  background: #f7f4ee;
  border: 1px solid #e9e2d7;
  border-radius: 50%;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.booking-picker-close:hover,
.booking-picker-close:focus-visible {
  color: #815917;
  background: #fff8e8;
  border-color: #dfbd7d;
}

.booking-picker-close svg {
  width: 18px;
  height: 18px;
}

.booking-calendar-toolbar {
  padding: 10px 18px 2px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
}

.booking-calendar-toolbar button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a4741;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 690;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.booking-calendar-toolbar button:first-child,
.booking-calendar-toolbar button:last-child {
  color: #8e651f;
  background: #fff9ec;
  border-color: #ead7b4;
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
}

.booking-calendar-toolbar button:hover:not(:disabled),
.booking-calendar-toolbar button:focus-visible:not(:disabled) {
  color: #6f4a0f;
  background: #fff4d8;
  border-color: #d7ac5e;
}

.booking-calendar-toolbar button:disabled {
  color: #c8c3ba;
  background: #f7f5f1;
  border-color: #efebe4;
  cursor: not-allowed;
}

.booking-calendar-months {
  padding: 10px 18px 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  direction: rtl;
}

.booking-calendar-month {
  min-width: 0;
}

.booking-calendar-month + .booking-calendar-month {
  padding-right: 20px;
  border-right: 1px solid #eee9e0;
}

.booking-calendar-month h3 {
  margin: 0 0 13px;
  color: #2e2d28;
  font-size: 14px;
  font-weight: 760;
  text-align: center;
}

.booking-calendar-month h3 b {
  color: #8b8174;
  font-size: 12px;
  font-weight: 570;
}

.booking-calendar-weekdays,
.booking-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.booking-calendar-weekdays {
  margin-bottom: 7px;
}

.booking-calendar-weekdays span {
  height: 26px;
  display: grid;
  place-items: center;
  color: #989187;
  font-size: 12px;
  font-weight: 640;
}

.booking-calendar-weekdays .is-friday {
  color: #ce554e;
}

.booking-calendar-empty,
.booking-calendar-day {
  min-width: 0;
  height: 52px;
}

.booking-calendar-day {
  position: relative;
  padding: 4px 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #3d3b35;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 610;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease, transform .14s ease;
}

.booking-calendar-day:hover:not(:disabled),
.booking-calendar-day:focus-visible:not(:disabled) {
  color: #6f4b12;
  background: #fff8e9;
  border-color: #e5c98f;
  transform: translateY(-1px);
}

.booking-calendar-day.is-friday:not(:disabled) {
  color: #d64b45;
}

.booking-calendar-day.is-today:not(.is-selected) {
  border-color: #c69a4c;
}

.booking-calendar-day.is-selected {
  color: #201f1a;
  background: linear-gradient(135deg, #e0ac3c, #f1d074);
  border-color: #d9a438;
  box-shadow: 0 6px 14px rgba(177, 126, 33, .22);
  font-weight: 800;
}

.booking-calendar-day:disabled {
  color: #cbc7c0;
  cursor: not-allowed;
  text-decoration: line-through;
}

.booking-calendar-day small {
  color: #95671d;
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
}

.booking-calendar-day.is-selected small {
  color: #3f321c;
}

/* ADR-028-ادامه: قیمت فقط وقتی روی این گرید نشون داده می‌شه که context هتل مشخص باشه
   (hotel.php) — hotelCalendar() از قبل ارزون‌ترین قیمت هر روز را برمی‌گرداند، اینجا فقط
   نمایشش می‌دهیم. فقط ۱۴ روز آینده قیمت می‌گیرند (عمداً، نه کل تقویم) تا هم درخواست کارفرما
   رعایت شود هم گرید شلوغ نشود. */
.booking-calendar-day-price {
  color: #8a8378;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: -.2px;
}

.booking-calendar-day:disabled .booking-calendar-day-price {
  color: #cbc7c0;
}

.booking-calendar-day.is-cheapest {
  background: rgba(43, 148, 92, .1);
  border-color: rgba(43, 148, 92, .38);
}

.booking-calendar-day.is-cheapest:hover:not(:disabled),
.booking-calendar-day.is-cheapest:focus-visible:not(:disabled) {
  background: rgba(43, 148, 92, .16);
  border-color: rgba(43, 148, 92, .5);
}

.booking-calendar-day.is-cheapest .booking-calendar-day-price {
  color: #1f8a55;
  font-weight: 800;
}

.booking-calendar-day.is-cheapest.is-selected .booking-calendar-day-price {
  color: #274d20;
}

.booking-calendar-price-hint {
  margin: 0;
  padding: 0 18px 10px;
  color: #8b6a2a;
  font-size: 12px;
  font-weight: 600;
}

.booking-calendar-price-hint b {
  color: #1f8a55;
  font-weight: 780;
}

.booking-picker-footer {
  min-height: 54px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #8b857c;
  background: #fbfaf7;
  border-top: 1px solid #eee8de;
  font-size: 12px;
}

.booking-picker-footer button {
  min-width: 70px;
  height: 34px;
  color: #6c665e;
  background: #fff;
  border: 1px solid #ded7cb;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 670;
}

.booking-duration-hint {
  margin: 0;
  padding: 10px 18px 0;
  color: #8b6a2a;
  background: #fdf7ea;
  font-size: 12px;
  font-weight: 620;
}

.booking-duration-grid {
  max-height: 310px;
  padding: 18px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  overscroll-behavior: contain;
}

.booking-duration-grid button {
  min-width: 0;
  height: 52px;
  padding: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: #4d4942;
  background: #fbfaf7;
  border: 1px solid #e8e1d6;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.booking-duration-grid button:hover,
.booking-duration-grid button:focus-visible {
  color: #765015;
  background: #fff8e8;
  border-color: #dcb96f;
  transform: translateY(-1px);
}

.booking-duration-grid button.is-selected {
  color: #29251e;
  background: linear-gradient(135deg, #e2b044, #f2d379);
  border-color: #d7a43a;
  box-shadow: 0 7px 15px rgba(177, 126, 33, .18);
}

.booking-duration-grid button:disabled {
  color: #cbc7c0;
  background: #fbfaf7;
  border-color: #eee8de;
  cursor: not-allowed;
  text-decoration: line-through;
  transform: none;
}

.booking-duration-grid b {
  font-size: 15px;
  font-weight: 790;
}

.booking-duration-grid span {
  font-size: 12px;
  font-weight: 620;
}

.booking-duration-summary {
  min-height: 62px;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fbfaf7;
  border-top: 1px solid #eee8de;
}

.booking-duration-summary span {
  color: #8d877e;
  font-size: 12px;
  font-weight: 620;
}

.booking-duration-summary b {
  color: #5f4418;
  font-size: 12px;
  font-weight: 750;
}

@keyframes booking-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes booking-picker-in {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.search-button {
  height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #29271f;
  background: linear-gradient(100deg, #e4b63f 0%, #f1cf6c 100%);
  border: 1px solid #e0b243;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(191, 138, 34, .19);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}

.search-button svg { font-size: 21px; stroke-width: 2; }
.search-button span { font-size: 15px; font-weight: 760; white-space: nowrap; }
.search-button:hover { filter: brightness(1.035); transform: translateY(-1px); }
.search-button:active { transform: translateY(0); }

.quick-filters {
  width: min(1030px, 100%);
  max-width: 100%;
  margin: 18px auto 0;
  padding: 15px 0 0;
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  gap: 14px;
  border-top: 1px solid #ede8df;
  direction: rtl;
}

.quick-filters button {
  min-width: 0;
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #4d4a44;
  background: #fff;
  border: 1px solid #e7e1d8;
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(38, 35, 29, .035);
  cursor: pointer;
  transition: .18s ease;
}

.quick-filters button svg {
  flex: 0 0 auto;
  color: #a77a2b;
  font-size: 24px;
}

.quick-filters button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 540;
}

.quick-filters button:hover,
.quick-filters button:focus-visible,
.quick-filters button.is-active {
  color: #7f5c1d;
  background: #fffaf0;
  border-color: #dcbc7d;
}

/* Shared width for the approved content sections */
.content-container {
  width: min(calc(100% - 64px), var(--booking-width));
  margin-inline: auto;
}

/* Trust strip */
.trust-strip {
  color: #373630;
  background: #fff;
  border-top: 1px solid #f3efe8;
  border-bottom: 1px solid #eee9e0;
}

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

.trust-item {
  min-width: 0;
  min-height: 82px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  border-left: 1px solid #eee9e1;
}

.trust-item:last-child { border-left: 0; }

.trust-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  color: #d3a153;
}

.trust-icon svg {
  width: 33px;
  height: 33px;
  stroke-width: 1.45;
}

.trust-item b,
.trust-item small { display: block; white-space: nowrap; }

.trust-item b {
  color: #3b3934;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.65;
}

.trust-item small {
  margin-top: 1px;
  color: #8b8880;
  font-size: 12px;
  font-weight: 430;
}

/* Promotional banners */
.promo-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.promo-section--installment { padding: 42px 0 34px; }
.promo-section--cashback { padding: 0 0 70px; background: var(--paper); }

.promo-banner {
  position: relative;
  isolation: isolate;
  min-height: 286px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 22px 55px rgba(31, 31, 27, .14);
}

.promo-banner::before,
.promo-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.installment-banner {
  padding: 42px 64px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(390px, .93fr);
  align-items: center;
  gap: 58px;
  color: #fff;
  background:
    radial-gradient(circle at 87% 110%, rgba(255, 237, 177, .5), transparent 39%),
    radial-gradient(circle at 18% -20%, rgba(255, 249, 225, .22), transparent 34%),
    linear-gradient(118deg, #765019 0%, #a87325 49%, #d0a451 100%);
  border: 1px solid rgba(255, 226, 158, .7);
  box-shadow: 0 23px 58px rgba(125, 83, 20, .24);
}

.installment-banner::before {
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent 12%, #000 90%);
}

.installment-banner::after {
  width: 360px;
  height: 360px;
  left: -132px;
  top: -205px;
  border: 1px solid rgba(255, 239, 191, .42);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 239, 191, .055), 0 0 0 98px rgba(255, 239, 191, .035);
}

.installment-banner .promo-eyebrow {
  color: #fff3cf;
  background: rgba(85, 51, 8, .22);
  border-color: rgba(255, 240, 199, .48);
}

.installment-banner .promo-eyebrow i { box-shadow: 0 0 0 4px rgba(255, 243, 207, .18); }
.installment-banner .promo-copy h2 strong { color: #fff2c3; }
.installment-banner .promo-copy > p { color: rgba(255, 255, 255, .84); }
.installment-banner .promo-facts li { color: rgba(255, 255, 255, .88); }

.promo-copy { position: relative; z-index: 2; min-width: 0; }

.promo-eyebrow {
  width: fit-content;
  margin-bottom: 12px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f2cb7a;
  background: rgba(237, 197, 116, .1);
  border: 1px solid rgba(237, 197, 116, .28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 680;
}

.promo-eyebrow i {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(242, 203, 122, .12);
}

.promo-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 2.55vw, 40px);
  font-weight: 520;
  line-height: 1.5;
  letter-spacing: -.65px;
}

.promo-copy h2 strong { color: #f2c76d; font-weight: 850; }

.promo-copy > p {
  max-width: 600px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  line-height: 2;
}

.promo-footer {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 23px;
}

.promo-cta {
  min-width: 184px;
  height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 780;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.promo-cta svg { width: 18px; height: 18px; }

.promo-cta:hover,
.promo-cta:focus-visible { transform: translateY(-2px); }

.promo-cta--gold {
  color: #27231b;
  background: linear-gradient(135deg, #f5d58f, #dba64d);
  box-shadow: 0 10px 28px rgba(218, 167, 77, .24);
}

.promo-cta--gold:hover,
.promo-cta--gold:focus-visible { box-shadow: 0 14px 32px rgba(218, 167, 77, .34); }

.promo-facts {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 15px;
  list-style: none;
}

.promo-facts li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  white-space: nowrap;
}

.promo-facts li span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #2f2b21;
  background: #e8bf6e;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.installment-visual {
  position: relative;
  width: min(100%, 445px);
  height: 210px;
  justify-self: end;
  perspective: 900px;
}

.installment-halo {
  position: absolute;
  inset: 12px 42px 2px 27px;
  background: radial-gradient(circle, rgba(229, 179, 82, .23), transparent 68%);
  filter: blur(8px);
  border-radius: 50%;
}

.travel-credit-card {
  position: absolute;
  z-index: 2;
  right: 34px;
  top: 20px;
  width: 330px;
  height: 185px;
  padding: 23px 25px 21px;
  color: #29261f;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, .74), transparent 32%),
    linear-gradient(135deg, #f7e4b5 0%, #e3b963 52%, #f5d796 100%);
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 20px;
  box-shadow: 0 23px 50px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .75);
  transform: rotateY(-9deg) rotateZ(-4deg);
}

.travel-credit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background: repeating-linear-gradient(120deg, transparent 0 16px, rgba(255, 255, 255, .28) 17px 18px);
  border-radius: inherit;
}

.credit-card-head,
.credit-card-balance,
.credit-card-dots { position: relative; z-index: 1; }

.credit-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-brand { display: flex; align-items: center; gap: 7px; font-size: 12px; }

.mini-brand i {
  width: 20px;
  height: 20px;
  display: block;
  background: #2e2a22;
  border-radius: 50% 50% 46% 54%;
  clip-path: polygon(50% 0, 64% 31%, 96% 39%, 72% 60%, 78% 94%, 50% 76%, 22% 94%, 28% 60%, 4% 39%, 36% 31%);
}

.credit-card-contactless { direction: ltr; font-size: 12px; font-weight: 900; letter-spacing: -2px; transform: rotate(-8deg); }

.credit-card-chip {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 27px;
  margin-top: 19px;
  display: block;
  background: linear-gradient(135deg, #fff4cc, #c99943);
  border: 1px solid rgba(86, 64, 27, .32);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.credit-card-dots {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  font-size: 13px;
  letter-spacing: 1px;
}

.credit-card-balance {
  margin-top: 9px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.credit-card-balance > small { font-size: 12px; font-weight: 650; }
.credit-card-balance b { font-size: 14px; }
.credit-card-balance em { font-size: 12px; font-style: normal; font-weight: 600; }

.installment-badge {
  position: absolute;
  z-index: 4;
  left: 4px;
  top: 18px;
  width: 86px;
  height: 86px;
  display: grid;
  place-content: center;
  color: #fff;
  text-align: center;
  background: rgba(83, 51, 9, .88);
  border: 1px solid rgba(255, 236, 184, .7);
  border-radius: 50%;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .24), inset 0 0 0 6px rgba(255, 255, 255, .025);
  backdrop-filter: blur(10px);
}

.installment-badge b { color: #f4ce80; font-size: 30px; line-height: 1; }
.installment-badge small { margin-top: 4px; font-size: 12px; }

.installment-note {
  position: absolute;
  z-index: 5;
  padding: 8px 12px;
  color: rgba(255, 255, 255, .84);
  background: rgba(83, 51, 9, .28);
  border: 1px solid rgba(255, 247, 221, .24);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 680;
}

.installment-note--top { right: 0; top: 3px; }
.installment-note--bottom { left: 47px; bottom: 0; }

.cashback-banner {
  min-height: 276px;
  padding: 36px 64px;
  display: grid;
  grid-template-columns: minmax(390px, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 58px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 16%, rgba(172, 255, 218, .15), transparent 32%),
    radial-gradient(circle at 94% 120%, rgba(255, 219, 143, .13), transparent 38%),
    linear-gradient(116deg, #073d35 0%, #0b5c50 56%, #10715f 100%);
  border: 1px solid rgba(178, 246, 218, .24);
  box-shadow: 0 22px 55px rgba(2, 63, 53, .18);
}

.cashback-banner::before {
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -333px;
  border: 1px solid rgba(200, 255, 232, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(200, 255, 232, .025), 0 0 0 124px rgba(200, 255, 232, .018);
}

.cashback-banner::after {
  inset: 0;
  opacity: .25;
  background-image: radial-gradient(rgba(255, 255, 255, .38) .7px, transparent .7px);
  background-size: 20px 20px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}

.cashback-copy { grid-column: 2; grid-row: 1; }
.cashback-copy h2 strong { color: #b8f3d8; }
.promo-eyebrow--mint { color: #b8f3d8; background: rgba(184, 243, 216, .1); border-color: rgba(184, 243, 216, .26); }
.promo-eyebrow--mint i { box-shadow: 0 0 0 4px rgba(184, 243, 216, .12); }

.cashback-caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 600;
}

.promo-footer--cashback { margin-top: 18px; }

.promo-footer--cashback .cashback-caption {
  padding: 8px 12px;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(184, 243, 216, .22);
  border-radius: 999px;
}

.cashback-caption i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #0b5c50;
  background: #b8f3d8;
  border-radius: 50%;
  font-style: normal;
  font-weight: 900;
}

.cashback-visual {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 430px);
  height: 205px;
  justify-self: start;
}

.cashback-wallet {
  position: absolute;
  right: 22px;
  bottom: 4px;
  width: 305px;
  height: 132px;
  background: linear-gradient(145deg, #c6f3dc, #82d5b5);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 26px 26px 32px 32px;
  box-shadow: 0 22px 42px rgba(1, 36, 31, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
  transform: rotate(2deg);
}

.cashback-wallet::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed rgba(7, 78, 65, .24);
  border-radius: 19px;
}

.cashback-wallet-card {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 46px;
  width: 238px;
  height: 126px;
  padding: 19px 20px;
  display: flex;
  flex-direction: column;
  color: #0c443b;
  background: linear-gradient(145deg, #fffdf7, #eafbf3);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  box-shadow: 0 15px 32px rgba(2, 52, 44, .22);
  transform: rotate(-5deg);
}

.cashback-wallet-card i {
  width: 32px;
  height: 9px;
  margin-bottom: 13px;
  display: block;
  background: #e2ae50;
  border-radius: 99px;
}

.cashback-wallet-card b { font-size: 12px; font-weight: 650; }
.cashback-wallet-card strong { margin-top: 4px; color: #0a6a59; direction: ltr; text-align: right; font-size: 22px; line-height: 1; }
.cashback-wallet-card small { margin-top: 4px; color: #68887f; font-size: 12px; }

.cashback-wallet-pocket {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 43px;
  width: 74px;
  height: 50px;
  background: #0d6959;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 16px 8px 8px 16px;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .17);
}

.cashback-wallet-pocket::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: 13px;
  top: 50%;
  background: #d7af5e;
  border-radius: 50%;
  transform: translateY(-50%);
}

.cashback-meter {
  position: absolute;
  z-index: 6;
  left: 4px;
  top: 5px;
  width: 93px;
  height: 93px;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(4, 54, 46, .82);
  border: 1px solid rgba(184, 243, 216, .45);
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(1, 38, 32, .28), inset 0 0 0 7px rgba(255, 255, 255, .035);
  backdrop-filter: blur(9px);
}

.cashback-meter b { color: #d9ffe9; font-size: 24px; line-height: 1.1; }
.cashback-meter small { margin-top: 4px; color: rgba(255, 255, 255, .72); font-size: 12px; }

.cashback-coin {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  color: #2f5e4f;
  background: linear-gradient(145deg, #ffe6a5, #dba74e);
  border: 2px solid rgba(255, 246, 210, .8);
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(1, 45, 38, .28);
  font-weight: 850;
}

.cashback-coin--one { width: 47px; height: 47px; right: 3px; top: 4px; font-size: 19px; transform: rotate(12deg); }
.cashback-coin--two { width: 34px; height: 34px; left: 109px; bottom: 1px; font-size: 20px; transform: rotate(-9deg); }

.cashback-spark { position: absolute; z-index: 6; color: #e9c46e; line-height: 1; }
.cashback-spark--one { right: 4px; top: 72px; font-size: 18px; }
.cashback-spark--two { left: 121px; top: 4px; color: #b8f3d8; font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .travel-credit-card { animation: credit-card-float 5.5s ease-in-out infinite; }
  .cashback-meter { animation: cashback-meter-float 4.8s ease-in-out infinite; }
  .cashback-coin--one { animation: cashback-coin-float 4.2s ease-in-out infinite; }
  .cashback-spark--one { animation: promo-spark 2.4s ease-in-out infinite; }
}

@keyframes credit-card-float {
  0%, 100% { transform: rotateY(-9deg) rotateZ(-4deg) translateY(0); }
  50% { transform: rotateY(-9deg) rotateZ(-4deg) translateY(-6px); }
}

@keyframes cashback-meter-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes cashback-coin-float {
  0%, 100% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(-8px) rotate(20deg); }
}

@keyframes promo-spark {
  0%, 100% { opacity: .55; transform: scale(.75) rotate(0); }
  50% { opacity: 1; transform: scale(1.15) rotate(24deg); }
}

/* Distance to shrine */
.distance-section {
  padding: 32px 0 78px;
  overflow: hidden;
  background: #fff;
}

.distance-heading {
  margin: 0 0 10px;
  text-align: right;
}

.distance-heading h2 {
  margin: 0;
  color: #2f2e2a;
  font-size: 31px;
  font-weight: 760;
  line-height: 1.55;
  letter-spacing: -.35px;
}

.distance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .92fr);
  gap: 52px;
  align-items: start;
  direction: rtl;
}

.nearby-list {
  display: grid;
  gap: 16px;
  align-content: start;
}

.distance-results-summary {
  margin: 0 2px -3px;
  color: #858178;
  font-size: 12px;
  font-weight: 540;
  line-height: 1.8;
}

.nearby-row {
  position: relative;
  min-width: 0;
  height: 128px;
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr) 160px;
  align-items: stretch;
  overflow: hidden;
  color: #35342f;
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 9px;
  box-shadow: 0 3px 12px rgba(76, 61, 38, .035);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nearby-row:hover,
.nearby-row:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(76, 61, 38, .085);
}

.nearby-row[hidden] { display: none; }

/* ۱۴۰۵/۰۶/۱۱: تا وقتی home-nearby-hotels.php (fetch لحظه‌ی لود صفحه) جواب بده — نگاه کن
   کامنت بالای همون فایل برای این‌که چرا سنکرون نیست. */
.nearby-skeleton { display: grid; gap: 16px; }
/* [hidden] و .nearby-skeleton هر دو specificity یکسان دارن؛ بدون این override صریح،
   استایل نویسنده (display: grid) روی stylesheet مرورگر (display: none) برنده می‌شه و
   toggle کردن compareSkeleton.hidden از جاوااسکریپت بی‌اثر می‌مونه. هم‌الگوی
   .nearby-row[hidden] بالاتر همین فایل. */
.nearby-skeleton[hidden] { display: none; }
.nearby-skeleton span {
  height: 128px;
  border-radius: 9px;
  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) {
  .nearby-skeleton span { animation: none; background: #f0ede5; }
}
.nearby-error { padding: 22px; display: grid; justify-items: center; gap: 10px; text-align: center; background: #fff; border: 1px solid #eadfce; border-radius: 9px; }
.nearby-error[hidden] { display: none; }
.nearby-error p { margin: 0; color: #8b857c; font-size: 13px; font-weight: 650; }
.nearby-error button {
  min-width: 110px;
  min-height: 34px;
  padding: 0 14px;
  color: #75511a;
  background: #f2e3c4;
  border: 1px solid #e5cca0;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.nearby-error button:hover { background: #ecd8ae; }

.nearby-row > img {
  width: 276px;
  height: 128px;
  display: block;
  object-fit: cover;
}

.nearby-info {
  min-width: 0;
  padding: 13px 21px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nearby-name {
  overflow: hidden;
  color: #302f2b;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-rating {
  margin: 1px 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nearby-rating .stars {
  color: #e2a228;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 1.1px;
  line-height: 1;
}

.nearby-rating > b {
  color: #56534c;
  font-size: 12px;
  font-weight: 680;
}

.nearby-info small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8b887f;
  font-size: 12px;
  font-weight: 430;
  white-space: nowrap;
}

.nearby-info small svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #c89135;
  stroke-width: 1.6;
}

.nearby-price {
  padding: 8px 15px;
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: center;
  column-gap: 5px;
  border-right: 1px solid #eee4d5;
  text-align: center;
}

.nearby-price small,
.nearby-price b {
  align-self: center;
  color: #403e38;
  white-space: nowrap;
}

.nearby-price small {
  font-size: 12px;
  font-weight: 500;
}

.nearby-price b {
  font-size: 16px;
  font-weight: 750;
}

.nearby-price span {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: #817e76;
  font-size: 12px;
  white-space: nowrap;
}

.distance-more {
  min-height: 49px;
  margin-top: 1px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #5c431d;
  background: linear-gradient(180deg, #fffdf9, #fff8eb);
  border: 1px solid #d8b36b;
  border-radius: 8px;
  box-shadow: 0 4px 13px rgba(103, 76, 33, .055);
  font-size: 12px;
  font-weight: 720;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.distance-more svg {
  width: 18px;
  height: 18px;
  color: #b47720;
  stroke-width: 1.8;
}

.distance-more:hover,
.distance-more:focus-visible {
  color: #30281c;
  background: #f8d98c;
  border-color: #cc9639;
  box-shadow: 0 8px 19px rgba(103, 76, 33, .12);
  transform: translateY(-1px);
}

.distance-visual {
  min-width: 0;
  margin-top: -80px;
  text-align: center;
}

.distance-map {
  position: relative;
  width: min(600px, calc(100vw - 30px));
  aspect-ratio: 600 / 520;
  margin-right: auto;
  margin-left: 0;
  isolation: isolate;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 52%, rgba(223, 180, 91, .08) 0 17%, transparent 17.4%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(250, 247, 239, .18));
}

.map-linework {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #b58a3f;
  pointer-events: none;
}

.map-linework path {
  vector-effect: non-scaling-stroke;
}

.map-minor-streets {
  fill: none;
  stroke: rgba(181, 138, 63, .16);
  stroke-width: 1;
}

.map-blocks {
  fill: rgba(194, 151, 74, .055);
  stroke: rgba(181, 138, 63, .12);
  stroke-width: .85;
}

.map-main-roads {
  fill: none;
  stroke: rgba(181, 138, 63, .22);
  stroke-width: 2;
}

.distance-rings {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.distance-ring {
  position: absolute;
  top: 52%;
  left: 50%;
  padding: 0;
  color: #3f3d37;
  background: rgba(247, 235, 203, .065);
  border: 1px solid rgba(194, 145, 59, .48);
  border-radius: 50%;
  box-shadow: inset 0 0 32px rgba(210, 166, 78, .025);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.distance-ring--15 {
  z-index: 1;
  width: 82%;
  aspect-ratio: 1;
}

.distance-ring--10 {
  z-index: 2;
  width: 62%;
  aspect-ratio: 1;
  background: rgba(247, 235, 203, .085);
}

.distance-ring--6 {
  z-index: 3;
  width: 42%;
  aspect-ratio: 1;
  background: rgba(232, 198, 126, .15);
}

.distance-ring > span {
  position: absolute;
  top: -18px;
  left: 50%;
  min-width: 94px;
  height: 36px;
  padding: 0 15px;
  display: grid;
  place-items: center;
  color: #45423c;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #e8dfcf;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(72, 56, 29, .08);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
  transform: translateX(-50%);
}

.distance-ring:hover,
.distance-ring:focus-visible,
.distance-ring[aria-pressed="true"] {
  background: rgba(235, 204, 138, .2);
  border-color: rgba(178, 121, 28, .78);
  box-shadow: inset 0 0 42px rgba(204, 151, 53, .08), 0 0 0 3px rgba(215, 171, 90, .08);
}

.distance-ring:hover > span,
.distance-ring:focus-visible > span,
.distance-ring[aria-pressed="true"] > span {
  color: #76531d;
  border-color: #d8b46e;
  background: #fffaf0;
}

.shrine-center {
  position: absolute;
  z-index: 5;
  top: 52%;
  left: 50%;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #242521;
  text-align: center;
  transform: translate(-50%, -43%);
  pointer-events: none;
}

.shrine-pin {
  position: relative;
  width: 35px;
  height: 35px;
  display: block;
  background: #22231f;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 4px 10px rgba(34, 35, 31, .2);
  transform: rotate(-45deg);
}

.shrine-pin i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #efbd47;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.shrine-center b {
  font-size: 14px;
  font-weight: 760;
  white-space: nowrap;
}

/* Selected hotels */
.selected-section {
  padding: 21px 0 86px;
  overflow: hidden;
  background: #fff;
}

.selected-heading {
  margin: 0 0 18px;
  text-align: right;
}

.selected-heading h2 {
  margin: 0;
  color: #2f2e2a;
  font-size: 31px;
  font-weight: 760;
  line-height: 1.55;
  letter-spacing: -.35px;
}

.selected-layout {
  display: grid;
  grid-template-areas: "featured compact";
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 24px;
  direction: ltr;
}

.featured-hotel-card {
  position: relative;
  grid-area: featured;
  height: 420px;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background: #2b2b28;
  border: 1px solid rgba(126, 96, 50, .26);
  border-radius: 13px;
  box-shadow: 0 12px 34px rgba(49, 42, 31, .16);
  direction: rtl;
  isolation: isolate;
}

.featured-hotel-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}

.featured-hotel-card:hover > img { transform: scale(1.025); }

.featured-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 19, 17, .74) 0, rgba(20, 19, 17, .12) 48%, rgba(20, 19, 17, .82) 100%),
    linear-gradient(90deg, rgba(20, 19, 17, .06), rgba(20, 19, 17, .44));
}

.featured-copy {
  position: absolute;
  top: 24px;
  right: 25px;
  text-align: right;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.featured-copy h3,
.compact-body h3 {
  margin: 0;
  font-weight: 780;
}

.featured-copy h3 {
  font-size: 24px;
  line-height: 1.55;
}

.hotel-score {
  display: flex;
  align-items: center;
  gap: 9px;
}

.featured-copy .hotel-score { margin-top: 2px; }

.hotel-stars {
  color: #f6bd36;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 1.2px;
  line-height: 1;
}

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

.hotel-features {
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
}

.hotel-features li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.hotel-features svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke-width: 1.6;
}

.featured-price {
  position: absolute;
  right: 25px;
  bottom: 73px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .48);
}

.featured-price small { font-size: 12px; font-weight: 480; }
.featured-price strong { color: #f4c750; font-size: 27px; font-weight: 810; letter-spacing: -.3px; }
.featured-price span { font-size: 12px; }

.rooms-button {
  min-width: 0;
  height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #46433d;
  background: rgba(255, 255, 255, .97);
  border: 0;
  border-top: 1px solid #e9e2d7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 690;
  transition: color .18s ease, background .18s ease;
}

.rooms-button svg { width: 18px; height: 18px; color: #b7822c; }

.rooms-button:hover,
.rooms-button:focus-visible {
  color: #704e17;
  background: #fff8e9;
}

.rooms-button--featured {
  position: absolute;
  right: 17px;
  bottom: 14px;
  left: 17px;
  width: calc(100% - 34px);
  height: 47px;
  border: 1px solid rgba(229, 218, 199, .88);
  border-radius: 7px;
  font-size: 13px;
}

.selected-compact-carousel {
  grid-area: compact;
  min-width: 0;
}

.compact-hotels {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 198px;
  gap: 24px;
  direction: rtl;
  list-style: none;
}

.compact-hotel-card {
  min-width: 0;
  height: 198px;
  display: flex;
  overflow: hidden;
  color: #383731;
  background: #fff;
  border: 1px solid #e6dccb;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(64, 51, 31, .055);
  direction: rtl;
  transition: transform .2s ease, box-shadow .2s ease;
}

.compact-hotel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(64, 51, 31, .1);
}

.compact-media {
  width: 45%;
  min-width: 0;
  flex: 0 0 45%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 44px;
  overflow: hidden;
  border-left: 1px solid #e8dfd2;
}

.compact-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

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

.compact-media .rooms-button {
  width: 100%;
  border-radius: 0;
}

.compact-body {
  min-width: 0;
  flex: 1;
  padding: 15px 17px 12px;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.compact-body h3 {
  overflow: hidden;
  color: #35342f;
  font-size: 17px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-body .hotel-score { margin-top: 1px; }
.compact-body .hotel-stars { font-size: 12px; letter-spacing: .7px; }
.compact-body .hotel-score b { color: #5e5b54; font-size: 12px; }
.compact-body .hotel-features { margin-top: 6px; gap: 3px; }
.compact-body .hotel-features li { color: #77736b; font-size: 12px; }
.compact-body .hotel-features svg { width: 14px; height: 14px; flex-basis: 14px; color: #b98a3d; }

.compact-price {
  margin-top: auto;
  padding-top: 7px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  border-top: 1px solid #eee8df;
  color: #4b4942;
  white-space: nowrap;
}

.compact-price small,
.compact-price span { color: #817d74; font-size: 12px; }
.compact-price strong { color: #bf8427; font-size: 16px; font-weight: 790; letter-spacing: -.1px; }

/* Best hotels */
.best-hotels-section {
  position: relative;
  padding: 8px 0 78px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(215, 171, 90, .1), transparent 25%),
    linear-gradient(180deg, #fff 0%, #f8f5ef 100%);
}

.best-hotels-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.best-hotels-heading > div { min-width: 0; }

.best-hotels-kicker {
  display: block;
  margin-bottom: 2px;
  color: #b27a26;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .2px;
}

.best-hotels-heading h2 {
  margin: 0;
  color: #2f2e2a;
  font-size: 31px;
  font-weight: 790;
  line-height: 1.55;
  letter-spacing: -.35px;
}

.best-hotels-heading p {
  margin: 0 0 6px;
  color: #858178;
  font-size: 12px;
  line-height: 1.8;
}

.best-hotels-grid {
  height: 520px;
  display: grid;
  grid-template-areas:
    "almas madineh featured featured"
    "darvishi jahan featured featured";
  grid-template-columns: repeat(2, minmax(0, .92fr)) repeat(2, minmax(0, 1.15fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  direction: ltr;
}

.best-hotel-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  color: #fff;
  background: #2b2b28;
  border: 1px solid rgba(180, 139, 70, .24);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(50, 42, 30, .12);
  isolation: isolate;
  direction: rtl;
}

.best-hotel-card--featured { grid-area: featured; }
.best-hotel-card--almas { grid-area: almas; }
.best-hotel-card--madineh { grid-area: madineh; }
.best-hotel-card--darvishi { grid-area: darvishi; }
.best-hotel-card--jahan { grid-area: jahan; }

.best-hotel-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}

.best-hotel-card--featured > img { object-position: center 52%; }

.best-hotel-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 19, 17, .08) 25%, rgba(20, 19, 17, .82) 100%),
    linear-gradient(90deg, rgba(20, 19, 17, .08), rgba(20, 19, 17, .22));
  transition: background .35s ease;
}

.best-hotel-card:hover > img,
.best-hotel-card:focus-visible > img { transform: scale(1.045); filter: saturate(1.06); }

.best-hotel-card:hover .best-hotel-overlay,
.best-hotel-card:focus-visible .best-hotel-overlay {
  background:
    linear-gradient(180deg, rgba(20, 19, 17, .03) 20%, rgba(20, 19, 17, .76) 100%),
    linear-gradient(90deg, transparent, rgba(20, 19, 17, .14));
}

.best-hotel-copy {
  position: absolute;
  right: 18px;
  bottom: 17px;
  left: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .58);
}

.best-hotel-copy small {
  margin-bottom: 2px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 560;
}

.best-hotel-copy strong {
  font-size: 16px;
  font-weight: 790;
  line-height: 1.65;
}

.best-hotel-card--featured .best-hotel-copy {
  right: 28px;
  bottom: 27px;
  left: 80px;
}

.best-hotel-card--featured .best-hotel-copy small { font-size: 12px; }
.best-hotel-card--featured .best-hotel-copy strong { font-size: 28px; }

.best-hotel-stars {
  margin-top: 5px;
  color: #f5c14b;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
}

.best-hotel-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 7px 11px;
  color: #2f281c;
  background: linear-gradient(135deg, #f9df9d, #d8a747);
  border: 1px solid rgba(255, 245, 214, .72);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(36, 27, 12, .2);
  font-size: 12px;
  font-weight: 800;
}

.best-hotel-arrow {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.best-hotel-arrow svg { width: 17px; height: 17px; }

.best-hotel-card:hover .best-hotel-arrow,
.best-hotel-card:focus-visible .best-hotel-arrow {
  color: #2f281c;
  background: #edc56f;
  border-color: #edc56f;
  transform: translateX(-2px);
}

/* Hotel comparison */
.compare-section {
  padding: 28px 0 42px;
  overflow: hidden;
  background: #fff;
}

.compare-panel {
  width: min(100%, var(--booking-width));
  min-height: 198px;
  margin-inline: auto;
  padding: 26px 20px;
  display: grid;
  grid-template-areas: "second metrics first intro";
  grid-template-columns: minmax(220px, .95fr) minmax(270px, 1.1fr) minmax(220px, .95fr) minmax(250px, 1fr);
  align-items: stretch;
  gap: 18px;
  color: #f5f2eb;
  background:
    radial-gradient(circle at 48% 10%, rgba(255, 255, 255, .055), transparent 32%),
    linear-gradient(104deg, #252623 0%, #30312e 50%, #242522 100%);
  border: 1px solid rgba(199, 157, 82, .24);
  border-radius: 14px;
  box-shadow: 0 13px 34px rgba(29, 29, 26, .16), inset 0 1px rgba(255, 255, 255, .025);
  direction: ltr;
}

/* بدون جفت هتل پیش‌فرض (کارفرما هنوز از پنل «هوم‌پیج» تنظیمش نکرده) — فقط دکمه‌ی باز کردن
   مودال مقایسه (روی کل هتل‌ها) می‌ماند، بدون کارت/جدول شکسته. */
.compare-panel--no-pair {
  grid-template-areas: "intro";
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.compare-panel--no-pair .compare-intro {
  direction: rtl;
  padding: 0;
  align-items: center;
  text-align: center;
}

.compare-intro {
  grid-area: intro;
  min-width: 0;
  padding: 7px 2px 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  direction: rtl;
}

.compare-intro h2 {
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 790;
  line-height: 1.55;
}

.compare-intro p {
  width: 100%;
  margin: 3px 0 14px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.8;
}

.compare-action {
  width: 205px;
  height: 53px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #282620;
  background: linear-gradient(180deg, #f6cf63, #e3b743);
  border: 1px solid #eac45a;
  border-radius: 7px;
  box-shadow: 0 7px 16px rgba(8, 8, 7, .18), inset 0 1px rgba(255, 255, 255, .38);
  cursor: pointer;
  font-size: 13px;
  font-weight: 770;
  transition: transform .18s ease, filter .18s ease;
}

.compare-action svg { width: 22px; height: 22px; stroke-width: 1.55; }
.compare-action:hover, .compare-action:focus-visible { filter: brightness(1.05); transform: translateY(-1px); }

.compare-hotel {
  min-width: 0;
  height: 148px;
  align-self: center;
  padding: 9px;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(201, 158, 78, .58);
  border-radius: 10px;
  direction: rtl;
}

.compare-hotel--first { grid-area: first; }
.compare-hotel--second { grid-area: second; }

.compare-hotel img {
  width: 124px;
  height: 128px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 7px;
}

.compare-hotel div { min-width: 0; text-align: right; }

.compare-hotel h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-hotel p {
  margin: 9px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  white-space: nowrap;
}

.compare-hotel p svg { width: 14px; height: 14px; color: #d8a944; }

.compare-metrics {
  --metric-heading-height: 41px;
  --metric-body-height: 53px;
  grid-area: metrics;
  width: 100%;
  min-width: 0;
  height: 148px;
  align-self: center;
  border-collapse: collapse;
  table-layout: fixed;
  direction: rtl;
}

.compare-metrics th,
.compare-metrics td {
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.compare-metrics thead tr {
  height: var(--metric-heading-height);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.compare-metrics tbody tr { height: var(--metric-body-height); }
.compare-metrics tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .1); }

.compare-metrics th {
  color: #d7aa50;
  font-size: 12px;
  font-weight: 720;
}

.compare-metrics td {
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 650;
}

/* Stay style Bento */
.stay-style-section {
  padding: 18px 0 92px;
  overflow: hidden;
  background: #fff;
}

.stay-style-heading {
  width: min(100%, var(--booking-width));
  margin: 0 auto 21px;
}

.stay-style-heading h2 {
  margin: 0;
  color: #292a27;
  font-size: 31px;
  font-weight: 820;
  line-height: 1.55;
  letter-spacing: -.45px;
}

.stay-style-carousel { min-width: 0; }

/* موزاییک «مشهد را به سبک خودت رزرو کن» بر اساس تعداد واقعی لندینگ‌های انتخاب‌شده در پنل
   (۱۴۰۵/۰۶/۳۰). قبلاً grid-template-areas ثابتِ پنج‌ناحیه‌ای بود؛ با ۳ لندینگ، دو ناحیه
   خالی می‌ماند و یک ستون/ردیف سفید وسط سکشن می‌افتاد. حالا هر حالت ۱..۶ چیدمان خودش را
   دارد و هیچ ناحیه‌ای بی‌کارت نمی‌ماند. حالت ۵ عیناً همان موزاییک اصلی قالب است. */
.stay-style-grid {
  width: min(100%, var(--booking-width));
  height: 354px;
  margin-inline: auto;
  display: grid;
  grid-template-areas:
    "s1 s2 s3 s4"
    "s1 s5 s5 s4";
  grid-template-columns: 1.18fr .72fr .72fr .96fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 13px;
  direction: ltr;
}

.stay-style-grid[data-count="1"] {
  grid-template-areas: "s1";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.stay-style-grid[data-count="2"] {
  grid-template-areas: "s1 s2";
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: minmax(0, 1fr);
}

.stay-style-grid[data-count="3"] {
  grid-template-areas:
    "s1 s2"
    "s1 s3";
  grid-template-columns: 1.25fr .95fr;
}

.stay-style-grid[data-count="4"] {
  grid-template-areas:
    "s1 s2 s3"
    "s1 s4 s4";
  grid-template-columns: 1.22fr .89fr .89fr;
}

.stay-style-grid[data-count="6"] {
  grid-template-areas:
    "s1 s2 s3"
    "s4 s5 s6";
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stay-style-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: block;
  color: #fff;
  background: #292a27;
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(35, 34, 30, .12);
  isolation: isolate;
  direction: rtl;
}

/* جای کارت در گرید فقط با ترتیبش تعیین می‌شود (--pos{n})، نه با کلاس تزئینی --luxury/
   --near/... — آن‌ها الان فقط object-position عکس را تنظیم می‌کنند (پایین‌تر). */
.stay-style-card--pos1 { grid-area: s1; }
.stay-style-card--pos2 { grid-area: s2; }
.stay-style-card--pos3 { grid-area: s3; }
.stay-style-card--pos4 { grid-area: s4; }
.stay-style-card--pos5 { grid-area: s5; }
.stay-style-card--pos6 { grid-area: s6; }

.stay-style-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}

.stay-style-card--luxury img { object-position: center; }
.stay-style-card--near img { object-position: center 52%; }
.stay-style-card--street img { object-position: center 56%; }
.stay-style-card--budget img { object-position: center 57%; }
.stay-style-card--family img { object-position: center; }

.stay-style-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 18, .47) 0%, transparent 37%),
    linear-gradient(0deg, rgba(15, 15, 14, .55) 0%, transparent 29%);
  pointer-events: none;
}

.stay-style-card h3 {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 17px;
  left: 14px;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 19px;
  font-weight: 780;
  line-height: 1.55;
  text-align: right;
  text-overflow: ellipsis;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .72);
  white-space: nowrap;
}

.stay-style-card--near h3,
.stay-style-card--street h3 { font-size: 17px; }

.stay-style-arrow {
  position: absolute;
  z-index: 2;
  bottom: 11px;
  left: 11px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: #f0c45a;
  background: rgba(24, 24, 22, .78);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.stay-style-arrow svg { width: 17px; height: 17px; stroke-width: 1.8; }

.stay-style-card:hover img,
.stay-style-card:focus-visible img { transform: scale(1.035); }

.stay-style-card:hover .stay-style-arrow,
.stay-style-card:focus-visible .stay-style-arrow {
  color: #282720;
  background: #f0c45a;
  transform: translateX(-2px);
}

/* Guest reviews */
.guest-reviews-section {
  padding: 16px 0 86px;
  overflow: hidden;
  background: #fbfaf7;
}

.guest-reviews-layout {
  width: min(calc(100% - 64px), var(--booking-width));
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.guest-reviews-heading h2 {
  margin: 0;
  color: #292a27;
  font-size: 31px;
  font-weight: 820;
  line-height: 1.55;
  letter-spacing: -.45px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.site-overlay-open { overflow: hidden; }

.guest-reviews-all {
  margin-top: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #946820;
  font-size: 12px;
  font-weight: 800;
}

.guest-reviews-all svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform .2s ease;
}

.guest-reviews-all:hover svg { transform: translateX(-3px); }

.guest-reviews-carousel { min-width: 0; }

.guest-reviews-panel {
  min-width: 0;
  height: 218px;
  overflow: hidden;
  background: rgba(255, 255, 255, .76);
  border: 1px solid #ece8e0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(53, 50, 43, .035);
}

.guest-reviews-track {
  width: 100%;
  height: 100%;
}

.guest-reviews-slide {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  direction: rtl;
}

.guest-review {
  position: relative;
  min-width: 0;
  padding: 26px 42px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.guest-review + .guest-review { border-right: 1px solid #e8e4dc; }

.review-quote {
  position: absolute;
  top: 17px;
  right: 34px;
  color: #d9b96f;
  font-family: Georgia, serif;
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
}

.guest-review blockquote {
  margin: 21px auto 0;
  max-width: 390px;
  color: #4d4c47;
  text-align: center;
}

.guest-review blockquote p {
  margin: 0;
  font-size: 13px;
  font-weight: 450;
  line-height: 2;
}

.review-guest {
  min-width: 0;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  direction: rtl;
}

.review-avatar {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #282926;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: 28px;
  font-weight: 760;
}

.review-guest cite {
  min-width: 0;
  color: #77746d;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.review-stars {
  color: #e7a900;
  font-family: Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

/* Travel guide */
.travel-guide-section {
  padding: 34px 0 84px;
  overflow: hidden;
  background: #fff;
}

.travel-guide-layout {
  width: min(calc(100% - 64px), var(--booking-width));
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  direction: rtl;
}

.travel-articles-carousel { min-width: 0; }

.travel-guide-intro {
  min-width: 0;
  padding: 8px 0 0 18px;
  text-align: right;
}

.travel-guide-kicker {
  margin: 0;
  color: #272824;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
}

.travel-guide-intro h2 {
  margin: -2px 0 8px;
  color: #c88a25;
  font-size: 35px;
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: -.5px;
}

.travel-guide-lead {
  max-width: 270px;
  margin: 0;
  color: #737169;
  font-size: 12px;
  font-weight: 440;
  line-height: 2.05;
}

.travel-guide-more {
  width: 150px;
  height: 47px;
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #57544e;
  background: #fff;
  border: 1px solid #e7e2d9;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(46, 43, 36, .055);
  font-size: 12px;
  font-weight: 650;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.travel-guide-more svg {
  width: 21px;
  height: 21px;
  color: #bd7f22;
  stroke-width: 1.55;
}

.travel-guide-more:hover,
.travel-guide-more:focus-visible {
  color: #8b5b13;
  border-color: #d8b574;
  transform: translateY(-1px);
}

.travel-articles {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  direction: rtl;
}

.travel-article {
  position: relative;
  min-width: 0;
  height: 270px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 132px minmax(0, 1fr);
  color: #fff;
  background: linear-gradient(160deg, #252623, #1d1e1c);
  border: 1px solid rgba(208, 169, 94, .22);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(32, 31, 27, .12);
  direction: rtl;
  transition: transform .2s ease, box-shadow .2s ease;
}

.travel-article::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
  pointer-events: none;
}

.travel-article img {
  width: 100%;
  height: 132px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}

.travel-article-body {
  position: relative;
  min-height: 0;
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 86% 0, rgba(255, 255, 255, .035), transparent 42%),
    linear-gradient(150deg, #272825, #1e1f1d);
}

.travel-article-body b {
  color: #e3b64f;
  font-size: 14px;
  font-weight: 790;
  line-height: 1.58;
}

.travel-article-body small {
  max-width: calc(100% - 28px);
  margin-top: 5px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 430;
  line-height: 1.85;
}

/* عنوان/خلاصه‌ی پست‌های واقعی بلاگ طول ثابتی ندارند (برخلاف کارت‌های قبلی) — بیش از دو خط
   نباید از کارت بیرون بزند. */
.travel-article-body b,
.travel-article-body small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.travel-article-arrow {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #d8a842;
  border: 1px solid rgba(218, 172, 78, .62);
  border-radius: 50%;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.travel-article-arrow svg { width: 13px; height: 13px; stroke-width: 1.65; }

.travel-article:hover,
.travel-article:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(32, 31, 27, .17);
}

.travel-article:hover img,
.travel-article:focus-visible img { transform: scale(1.045); }

.travel-article:hover .travel-article-arrow,
.travel-article:focus-visible .travel-article-arrow {
  color: #25231f;
  background: #e0b14e;
  transform: translateX(-2px);
}

/* Reusable, touch-friendly carousels */
.carousel-shell { min-width: 0; }

.carousel-viewport { min-width: 0; }

.carousel-shell--mobile:not(.is-carousel-active) > .carousel-viewport {
  overflow: visible;
}

.carousel-shell.is-carousel-active > .carousel-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.carousel-shell.is-carousel-active [data-carousel-track] {
  --carousel-index: 0;
  width: 100%;
  display: flex;
  gap: 0;
  direction: ltr;
  transform: translate3d(calc(var(--carousel-index) * -100%), 0, 0);
  transition: transform .42s cubic-bezier(.22, .76, .28, 1);
  will-change: transform;
}

.carousel-shell.is-carousel-active [data-carousel-slide] {
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  direction: rtl;
}

.carousel-controls {
  min-height: 38px;
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  direction: ltr;
}

.carousel-controls[hidden] { display: none; }

.carousel-button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #75521d;
  background: #fff;
  border: 1px solid #dec38d;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(73, 57, 31, .08);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.carousel-button:hover,
.carousel-button:focus-visible {
  color: #29271f;
  background: var(--gold-light);
  transform: translateY(-1px);
}

.carousel-button svg { width: 18px; height: 18px; stroke-width: 1.9; }
.carousel-button--prev svg { transform: rotate(180deg); }

.carousel-dots {
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: #d5d0c6;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}

.carousel-dot[aria-current="true"] {
  width: 22px;
  background: #c38a2e;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 50%;
  bottom: 24px;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  color: #fff;
  background: rgba(34, 35, 32, .97);
  border: 1px solid rgba(215, 171, 90, .5);
  border-radius: 8px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .2);
  font-size: 13px;
  transform: translateX(50%);
}

.toast[hidden] { display: none; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

@media (max-width: 1220px) {
  .booking-card { width: calc(100% - 40px); }
  .booking-row { grid-template-columns: minmax(280px, 1.35fr) repeat(2, minmax(145px, 1fr)) 185px; gap: 8px; }
  .search-button span { font-size: 15px; }
  .quick-filters { width: 100%; gap: 12px; }
  .content-container { width: calc(100% - 40px); }
  .trust-item { padding-inline: 20px; gap: 13px; }
  .installment-banner,
  .cashback-banner { padding-inline: 42px; gap: 34px; }
  .installment-banner { grid-template-columns: minmax(0, 1fr) minmax(350px, .85fr); }
  .cashback-banner { grid-template-columns: minmax(350px, .85fr) minmax(0, 1fr); }
  .promo-facts { gap: 10px; }
  .distance-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 30px; }
  .nearby-row { height: 118px; grid-template-columns: 230px minmax(0, 1fr) 145px; }
  .nearby-row > img { width: 230px; height: 118px; }
  .nearby-info { padding-inline: 16px; }
  .distance-map { width: min(560px, calc(100vw - 30px)); }
  .selected-layout { grid-template-columns: 440px minmax(0, 1fr); gap: 18px; }
  .featured-hotel-card { height: 370px; }
  .compact-hotels { grid-auto-rows: 176px; gap: 18px; }
  .compact-hotel-card { height: 176px; }
  .compact-media { grid-template-rows: minmax(0, 1fr) 40px; }
  .compact-body { padding: 12px 13px 10px; }
  .compact-body h3 { font-size: 15px; }
  .compact-price strong { font-size: 14px; }
  .compare-panel {
    grid-template-columns: minmax(190px, .9fr) minmax(250px, 1.1fr) minmax(190px, .9fr) minmax(220px, 1fr);
    gap: 12px;
  }
  .compare-hotel { grid-template-columns: 104px minmax(0, 1fr); gap: 11px; }
  .compare-hotel img { width: 104px; }
  .compare-intro h2 { font-size: 21px; }
  .compare-action { width: 190px; }
  .stay-style-grid { height: 320px; }
  .stay-style-heading h2 { font-size: 28px; }
  .stay-style-card h3 { font-size: 16px; }
  .stay-style-card--near h3,
  .stay-style-card--street h3 { font-size: 14px; }
  .guest-reviews-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 24px; }
  .guest-reviews-heading h2 { font-size: 28px; }
  .guest-review { padding-inline: 28px; }
  .review-guest { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
  .review-avatar { width: 58px; height: 58px; font-size: 24px; }
  .travel-guide-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
  .travel-guide-kicker { font-size: 22px; }
  .travel-guide-intro h2 { font-size: 31px; }
  .travel-articles { gap: 11px; }
  .travel-article-body { padding-inline: 11px; }
  .travel-article-body b { font-size: 12.5px; }
  .travel-article-body small { font-size: 12px; }
}

@media (max-width: 1120px) {
  .compare-panel {
    padding: 20px;
    grid-template-areas:
      "intro intro"
      "first second"
      "metrics metrics";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .compare-intro {
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: center;
  }

  .compare-intro h2 { grid-column: 1; grid-row: 1; }
  .compare-intro p { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .compare-action { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .compare-hotel { width: 100%; }
  .compare-metrics { --metric-body-height: 43px; height: 128px; }
}

@media (max-width: 1000px) {
  .hero { min-height: 792px; }
  .hero-photo { height: 455px; }
  .hero-copy { right: 28px; }
  .booking-card { top: 340px; min-height: 0; }
  .booking-row { grid-template-columns: repeat(2, 1fr); }
  .field--destination { grid-column: 1 / -1; }
  .search-button { grid-column: 1 / -1; height: 50px; }
  .quick-filters { width: 100%; grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; justify-content: start; }
  .content-container { width: min(calc(100% - 32px), 760px); }
  .trust-grid { min-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 10px; }
  .trust-item { min-height: 88px; border-left: 0; }
  .trust-item:nth-child(odd) { border-left: 1px solid #eee9e1; }
  .trust-item:nth-child(-n + 2) { border-bottom: 1px solid #eee9e1; }
  .promo-section--installment { padding: 30px 0; }
  .promo-section--cashback { padding-bottom: 60px; }
  .promo-banner { min-height: 260px; border-radius: 24px; }
  .installment-banner,
  .cashback-banner { padding: 30px 32px; gap: 22px; }
  .installment-banner { grid-template-columns: minmax(0, 1fr) 300px; }
  .cashback-banner { grid-template-columns: 300px minmax(0, 1fr); }
  .promo-copy h2 { font-size: 27px; }
  .promo-copy > p { font-size: 12px; }
  .promo-footer { flex-wrap: wrap; gap: 14px; }
  .promo-facts li { font-size: 12px; }
  .travel-credit-card { right: 18px; width: 278px; height: 166px; padding: 19px 21px; }
  .installment-badge { left: 0; width: 72px; height: 72px; }
  .installment-badge b { font-size: 25px; }
  .cashback-wallet { right: 6px; width: 270px; }
  .cashback-wallet-card { width: 214px; }
  .distance-section { padding-top: 48px; }
  .distance-heading h2 { font-size: 28px; }
  .distance-layout { grid-template-columns: 1fr; gap: 25px; }
  .distance-visual { grid-row: 1; margin-top: -48px; }
  .nearby-list { grid-row: 2; }
  .distance-map { width: min(600px, calc(100vw - 30px)); margin-inline: auto; }
  .nearby-row { height: 120px; grid-template-columns: 240px minmax(0, 1fr) 155px; }
  .nearby-row > img { width: 240px; height: 120px; }
  .selected-section { padding-top: 34px; }
  .selected-heading h2 { font-size: 28px; }
  .selected-layout {
    grid-template-areas: "featured" "compact";
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .featured-hotel-card { height: 420px; }
  .compact-hotels { grid-auto-rows: 184px; gap: 16px; }
  .compact-hotel-card { height: 184px; }
  .compare-panel {
    padding: 20px;
    grid-template-areas:
      "intro intro"
      "first second"
      "metrics metrics";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .compare-intro {
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: center;
  }
  .compare-intro h2 { grid-column: 1; grid-row: 1; }
  .compare-intro p { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .compare-action { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .compare-hotel { width: 100%; }
  .compare-metrics { --metric-body-height: 43px; height: 128px; }
  .stay-style-section { padding-top: 10px; }
  /* تبلت: همان موزاییک دوستونی قالب برای ۵ کارت، و معادل متناسبش برای بقیه‌ی تعدادها. */
  .stay-style-grid {
    height: 610px;
    grid-template-areas:
      "s1 s5"
      "s2 s3"
      "s4 s4";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px 150px 164px;
  }
  .stay-style-grid[data-count="1"] {
    height: auto;
    grid-template-areas: "s1";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 270px;
  }
  .stay-style-grid[data-count="2"] {
    height: auto;
    grid-template-areas: "s1 s2";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px;
  }
  .stay-style-grid[data-count="3"] {
    height: auto;
    grid-template-areas:
      "s1 s2"
      "s3 s3";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px 150px;
  }
  .stay-style-grid[data-count="4"] {
    height: auto;
    grid-template-areas:
      "s1 s2"
      "s3 s4";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px 150px;
  }
  .stay-style-grid[data-count="6"] {
    height: auto;
    grid-template-areas:
      "s1 s2"
      "s3 s4"
      "s5 s6";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 270px 150px 164px;
  }
  .stay-style-card h3,
  .stay-style-card--near h3,
  .stay-style-card--street h3 { font-size: 17px; }
  .guest-reviews-section { padding-top: 4px; }
  .guest-reviews-layout { grid-template-columns: 1fr; gap: 15px; }
  .guest-reviews-panel { height: 216px; }
  .guest-reviews-heading h2 { font-size: 28px; }
  .travel-guide-section { padding-top: 18px; }
  .travel-guide-layout { grid-template-columns: 1fr; gap: 18px; }
  .travel-guide-intro { padding: 0; }
  .travel-guide-lead { max-width: 510px; }
  .travel-guide-more { margin-top: 12px; }
  .travel-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .travel-article { height: 250px; grid-template-rows: 124px minmax(0, 1fr); }
  .travel-article img { height: 124px; }
  .travel-article-body b { font-size: 14px; }
  .travel-article-body small { font-size: 12px; }
}

@media (max-width: 680px) {
  .promo-section--installment { padding: 22px 0 30px; }
  .promo-section--cashback { padding-bottom: 52px; }
  .promo-section .content-container { width: calc(100% - 24px); }
  .promo-banner { min-height: 0; border-radius: 20px; }
  .installment-banner,
  .cashback-banner {
    padding: 25px 20px 22px;
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .installment-copy,
  .cashback-copy { grid-column: 1; grid-row: 1; }
  .installment-visual,
  .cashback-visual {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 330px);
    height: 166px;
    justify-self: center;
  }
  .promo-eyebrow { margin-bottom: 9px; padding: 5px 9px; font-size: 12px; }
  .promo-copy h2 { font-size: clamp(22px, 7vw, 27px); line-height: 1.55; }
  .promo-copy > p { margin-top: 7px; font-size: 12px; line-height: 1.9; }
  .promo-footer { margin-top: 16px; flex-wrap: wrap; gap: 11px; }
  .promo-cta { min-width: 162px; height: 43px; padding-inline: 16px; font-size: 12px; border-radius: 10px; }
  .promo-facts { gap: 9px; }
  .promo-facts li { font-size: 12px; }
  .promo-facts li span { width: 16px; height: 16px; }
  .travel-credit-card { right: 18px; top: 13px; width: 256px; height: 145px; padding: 16px 18px; border-radius: 16px; }
  .credit-card-chip { width: 31px; height: 22px; margin-top: 12px; }
  .credit-card-dots { margin-top: 8px; font-size: 12px; }
  .credit-card-balance { margin-top: 6px; }
  .credit-card-balance b { font-size: 12px; }
  .installment-badge { left: 0; top: 10px; width: 65px; height: 65px; }
  .installment-badge b { font-size: 23px; }
  .installment-note--top { right: 0; top: -2px; }
  .installment-note--bottom { left: 29px; bottom: -1px; }
  .cashback-wallet { right: 24px; bottom: 0; width: 240px; height: 105px; border-radius: 21px 21px 26px 26px; }
  .cashback-wallet-card { right: 18px; bottom: 37px; width: 184px; height: 105px; padding: 14px 16px; border-radius: 16px; }
  .cashback-wallet-card i { margin-bottom: 9px; }
  .cashback-wallet-card strong { font-size: 17px; }
  .cashback-wallet-pocket { left: 12px; bottom: 32px; width: 61px; height: 42px; }
  .cashback-meter { left: 2px; top: 2px; width: 74px; height: 74px; }
  .cashback-meter b { font-size: 20px; }
  .cashback-coin--one { width: 39px; height: 39px; right: 6px; }
  .cashback-coin--two { width: 29px; height: 29px; left: 79px; }

  .hero { min-height: 680px; }
  .hero-photo {
    height: 410px;
    background-image: url("images/hero-mobile.webp");
    background-position: center 48%;
  }

  .hero-copy {
    right: 18px;
    left: 18px;
    width: auto;
    text-align: center;
  }

  .hero-copy h1 { font-size: clamp(26px, 8.2vw, 34px); line-height: 1.5; }
  .hero-copy p { max-width: 340px; margin: 10px auto 0; font-size: 13px; line-height: 1.9; }

  .booking-card {
    top: 278px;
    width: calc(100% - 24px);
    min-height: 0;
    padding: 12px;
    border-radius: 12px;
  }

  .booking-row { grid-template-columns: 1fr; gap: 7px; }
  .field--destination, .search-button { grid-column: auto; }
  .field { height: auto; padding: 0; }
  .field-label { font-size: 12px; }
  .field-control { height: 40px; margin-top: 3px; padding-inline: 10px; gap: 7px; }
  .field-control > svg { font-size: 17px; }
  .field-control input, .field-control select, .destination-trigger b { font-size: 12.5px; }
  .booking-picker-value { font-size: 12.5px; }
  .search-button { height: 44px; gap: 9px; }
  .search-button svg { font-size: 19px; }
  .search-button span { font-size: 14px; }
  .destination-panel { top: calc(100% + 6px); width: 100%; padding: 9px; }
  .destination-results { max-height: 280px; }

  body.booking-picker-open { overflow: hidden; }
  .booking-picker-backdrop { background: rgba(20, 20, 18, .54); }
  .booking-calendar,
  .booking-duration {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
    max-height: calc(100dvh - 18px);
    overflow-y: auto;
    border-width: 1px 0 0;
    border-radius: 23px 23px 0 0;
    box-shadow: 0 -20px 60px rgba(20, 19, 17, .28);
  }
  .booking-picker-header { min-height: 67px; padding: 12px 14px; }
  .booking-picker-header h2 { font-size: 15px; }
  .booking-picker-close { width: 36px; height: 36px; flex-basis: 36px; }
  .booking-calendar-toolbar { padding: 8px 12px 1px; }
  .booking-calendar-months { padding: 8px 12px 13px; grid-template-columns: 1fr; }
  .booking-calendar-month + .booking-calendar-month { display: none; }
  .booking-calendar-month h3 { margin-bottom: 8px; }
  .booking-calendar-weekdays,
  .booking-calendar-days { gap: 3px; }
  .booking-calendar-empty,
  .booking-calendar-day { height: 50px; }
  .booking-calendar-day { border-radius: 10px; font-size: 12px; }
  .booking-calendar-day-price { font-size: 9.5px; }
  .booking-picker-footer { min-height: 50px; padding: 8px 13px; }
  .booking-duration-grid { max-height: min(52vh, 330px); padding: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .booking-duration-grid button { height: 48px; }
  .booking-duration-summary { min-height: 58px; padding-inline: 14px; }

  .quick-filters {
    width: 100%;
    margin-top: 10px;
    padding: 10px 0 1px;
    grid-template-columns: repeat(5, max-content);
    gap: 8px;
    scrollbar-width: thin;
  }

  .quick-filters button { height: 36px; padding: 0 13px; gap: 7px; }
  .quick-filters button svg { font-size: 18px; }
  .quick-filters button span { font-size: 12px; }

  .content-container { width: calc(100% - 24px); }
  .trust-grid { padding-block: 6px; }
  .trust-item { min-height: 76px; padding-inline: 9px; gap: 7px; justify-content: flex-start; }
  .trust-icon { width: 37px; height: 37px; flex-basis: 37px; }
  .trust-icon svg { width: 27px; height: 27px; }
  .trust-item b { font-size: 12px; }
  .trust-item small { font-size: 12px; }

  .distance-section { padding: 35px 0 40px; }
  .distance-heading { margin-bottom: 14px; }
  .distance-heading h2 { font-size: 23px; letter-spacing: -.2px; }
  .distance-layout { gap: 20px; }
  .distance-visual { margin-top: -22px; }
  .distance-map { width: min(500px, calc(100vw - 12px)); }
  .distance-ring > span { top: -15px; min-width: 76px; height: 30px; padding-inline: 11px; font-size: 12px; }
  .shrine-center { width: 120px; gap: 8px; }
  .shrine-pin { width: 29px; height: 29px; }
  .shrine-pin i { width: 9px; height: 9px; }
  .shrine-center b { font-size: 12px; }
  .nearby-list { gap: 10px; }
  .distance-results-summary { margin-bottom: -1px; font-size: 12px; }
  .nearby-row { height: 103px; grid-template-columns: 104px minmax(0, 1fr) 106px; border-radius: 8px; }
  .nearby-row > img { width: 104px; height: 103px; }
  .nearby-skeleton span { height: 103px; border-radius: 8px; }
  .nearby-info { padding: 8px 10px; }
  .nearby-name { font-size: 13px; }
  .nearby-rating { gap: 5px; margin-block: 0 2px; }
  .nearby-rating .stars { font-size: 12px; letter-spacing: .5px; }
  .nearby-rating > b { font-size: 12px; }
  .nearby-info small { gap: 3px; font-size: 12px; }
  .nearby-info small svg { width: 12px; height: 12px; flex-basis: 12px; }
  .nearby-price { padding-inline: 7px; column-gap: 3px; }
  .nearby-price small, .nearby-price span { font-size: 12px; }
  .nearby-price b { font-size: 12px; }
  .distance-more { min-height: 45px; font-size: 12px; }

  .selected-section { padding: 30px 0 52px; }
  .selected-heading { margin-bottom: 13px; }
  .selected-heading h2 { font-size: 23px; letter-spacing: -.2px; }
  .featured-hotel-card { height: 396px; border-radius: 11px; }
  .featured-copy { top: 19px; right: 19px; }
  .featured-copy h3 { font-size: 20px; }
  .featured-copy .hotel-stars { font-size: 13px; }
  .featured-price { right: 19px; bottom: 69px; }
  .featured-price strong { font-size: 23px; }
  .rooms-button--featured { right: 12px; bottom: 11px; left: 12px; width: calc(100% - 24px); }
  .compact-hotels { grid-template-columns: 1fr; grid-auto-rows: 154px; gap: 11px; }
  .compact-hotel-card { height: 154px; border-radius: 8px; }
  .compact-media { width: 44%; flex-basis: 44%; grid-template-rows: minmax(0, 1fr) 39px; }
  .compact-media .rooms-button { height: 39px; padding-inline: 8px; font-size: 12px; }
  .compact-body { padding: 10px 11px 8px; }
  .compact-body h3 { font-size: 14px; }
  .compact-body .hotel-stars { font-size: 12px; }
  .compact-body .hotel-score b { font-size: 12px; }
  .compact-body .hotel-features { margin-top: 4px; gap: 2px; }
  .compact-body .hotel-features li { font-size: 12px; }
  .compact-body .hotel-features svg { width: 12px; height: 12px; flex-basis: 12px; }
  .compact-price { padding-top: 5px; }
  .compact-price strong { font-size: 13px; }
  .compact-price small, .compact-price span { font-size: 12px; }
  .compare-panel {
    padding: 16px;
    grid-template-areas: "intro" "first" "metrics" "second";
    grid-template-columns: 1fr;
    gap: 13px;
    border-radius: 11px;
  }
  .compare-intro {
    display: flex;
    align-items: stretch;
    text-align: center;
  }
  .compare-intro h2 { font-size: 21px; text-align: center; }
  .compare-intro p { margin: 3px 0 11px; text-align: center; }
  .compare-action { width: 100%; height: 48px; }
  .compare-hotel { height: 110px; grid-template-columns: 92px minmax(0, 1fr); }
  .compare-hotel img { width: 92px; height: 90px; }
  .compare-hotel h3 { font-size: 15px; }
  .compare-metrics { --metric-heading-height: 34px; --metric-body-height: 42px; height: 118px; }
  .compare-metrics th,
  .compare-metrics td { font-size: 12px; }
  .stay-style-section { padding: 6px 0 56px; }
  .stay-style-heading { margin-bottom: 13px; }
  .stay-style-heading h2 { font-size: 23px; letter-spacing: -.2px; }
  /* موبایل: تک‌ستونی — جای نام‌گذاری ناحیه (که باید برای هر تعداد جدا نوشته می‌شد) خودِ
     چیدمان خودکار گرید به ترتیب DOM می‌چیند، پس برای ۱ تا ۶ کارت یکسان کار می‌کند.
     ارتفاع‌ها عیناً همان الگوی قالب است: کارت اول و آخر بلند، میانی‌ها کوتاه. */
  /* موبایل: تک‌ستونی — به‌جای نام‌گذاری ناحیه (که باید برای هر تعداد جدا نوشته می‌شد)،
     چیدمان خودکار گرید به ترتیب DOM می‌چیند، پس برای ۱ تا ۶ کارت یکسان کار می‌کند.
     ارتفاع‌ها عیناً همان الگوی قالب است: کارت اول و آخر بلند، میانی‌ها کوتاه. */
  /* `[data-count]` اینجا لازم است، نه تزئینی: قاعده‌های `[data-count="N"]` بریک‌پوینت
     تبلت (بالاتر) وزن سلکتور بیشتری دارند و بدون این، ستون‌بندی دوتایی تبلت روی موبایل
     هم می‌ماند (اندازه‌گیری شد: ۳۷۵px دو ستونه می‌شد). */
  .stay-style-grid[data-count] {
    height: auto;
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 11px;
  }
  .stay-style-card[class*="stay-style-card--pos"] { grid-area: auto; height: 158px; }
  .stay-style-grid > .stay-style-card:first-child,
  .stay-style-grid > .stay-style-card:last-child { height: 255px; }
  .stay-style-carousel.is-carousel-active .stay-style-grid { height: 255px; }
  .stay-style-carousel.is-carousel-active .stay-style-card { height: 255px; }
  .stay-style-card { border-radius: 9px; }
  .stay-style-card h3,
  .stay-style-card--near h3,
  .stay-style-card--street h3 { top: 13px; right: 14px; font-size: 17px; }
  .stay-style-arrow { bottom: 9px; left: 9px; width: 32px; height: 32px; }
  .guest-reviews-section { padding: 0 0 56px; }
  .guest-reviews-layout { width: calc(100% - 24px); gap: 12px; }
  .guest-reviews-heading h2 { font-size: 23px; letter-spacing: -.2px; }
  .guest-reviews-panel { height: auto; }
  .guest-reviews-track { height: auto; }
  .guest-reviews-slide { height: auto; grid-template-columns: 1fr; }
  .guest-review { min-height: 196px; padding: 24px 20px 19px; }
  .guest-review + .guest-review { border-top: 1px solid #e8e4dc; border-right: 0; }
  .review-quote { top: 15px; right: 20px; font-size: 28px; }
  .guest-review blockquote { margin-top: 17px; }
  .guest-review blockquote p { font-size: 12px; line-height: 1.95; }
  .review-guest { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; }
  .review-avatar { width: 52px; height: 52px; font-size: 22px; }
  .review-guest cite { font-size: 12px; }
  .review-stars { font-size: 12px; letter-spacing: 1.5px; }
  .travel-guide-section { padding: 2px 0 56px; }
  .travel-guide-layout { width: calc(100% - 24px); gap: 14px; }
  .travel-guide-intro { text-align: center; }
  .travel-guide-kicker { font-size: 18px; }
  .travel-guide-intro h2 { margin-top: 0; font-size: 28px; }
  .travel-guide-lead { max-width: 330px; margin-inline: auto; font-size: 12px; }
  .travel-guide-more { width: 144px; height: 44px; margin-top: 12px; }
  .travel-articles { grid-template-columns: 1fr; gap: 11px; }
  .travel-article {
    height: 156px;
    grid-template-columns: 43% minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
  .travel-article img { width: 100%; height: 156px; }
  .travel-article-body { padding: 14px 15px 12px; }
  .travel-article-body b { font-size: 14px; }
  .travel-article-body small { max-width: calc(100% - 22px); font-size: 12px; }
  .travel-articles-carousel.is-carousel-active .travel-article {
    height: 250px;
    grid-template-columns: 1fr;
    grid-template-rows: 124px minmax(0, 1fr);
  }
  .travel-articles-carousel.is-carousel-active .travel-article img { height: 124px; }
}

@media (max-width: 400px) {
  .promo-section .content-container { width: calc(100% - 16px); }
  .installment-banner,
  .cashback-banner { padding: 22px 15px 19px; }
  .promo-copy h2 { font-size: 21px; }
  .promo-facts { width: 100%; }
  .installment-visual,
  .cashback-visual { width: 100%; height: 158px; }
  .travel-credit-card { right: 10px; width: 228px; height: 139px; padding: 15px 16px; }
  .installment-badge { width: 58px; height: 58px; }
  .installment-badge b { font-size: 20px; }
  .installment-note { padding: 6px 9px; font-size: 12px; }
  .cashback-wallet { right: 10px; width: 220px; }
  .cashback-wallet-card { width: 169px; }
  .cashback-meter { width: 66px; height: 66px; }
  .cashback-meter b { font-size: 18px; }
  .hero-copy h1 { font-size: 26px; }
  .trust-item { min-height: 72px; padding-inline: 5px; gap: 4px; }
  .trust-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .trust-icon svg { width: 23px; height: 23px; }
  .trust-item b { font-size: 12px; }
  .trust-item small { font-size: 12px; }
  .distance-heading h2 { font-size: 21px; }
  .nearby-row { grid-template-columns: 86px minmax(0, 1fr) 90px; }
  .nearby-row > img { width: 86px; }
  .nearby-info { padding-inline: 7px; }
  .nearby-name { font-size: 12px; }
  .nearby-rating .stars { font-size: 12px; }
  .nearby-rating > b { font-size: 12px; }
  .nearby-info small { font-size: 12px; }
  .nearby-price b { font-size: 12px; }
  .nearby-price small, .nearby-price span { font-size: 12px; }
  .selected-heading h2 { font-size: 21px; }
  .featured-hotel-card { height: 360px; }
  .featured-copy h3 { font-size: 18px; }
  .featured-price strong { font-size: 20px; }
  .compact-hotels { grid-auto-rows: 146px; }
  .compact-hotel-card { height: 146px; }
  .compact-media { flex-basis: 42%; width: 42%; }
  .compact-body { padding-inline: 9px; }
  .compact-body h3 { font-size: 13px; }
  .compact-price strong { font-size: 12px; }
  .stay-style-heading h2 { font-size: 21px; }
  .guest-reviews-heading h2 { font-size: 21px; }
  .review-guest { grid-template-columns: 48px minmax(0, 1fr); }
  .review-avatar { width: 48px; height: 48px; }
  .review-stars { grid-column: 2; justify-self: start; margin-top: -10px; }
  .travel-guide-intro h2 { font-size: 26px; }
  .travel-article { grid-template-columns: 40% minmax(0, 1fr); }
  .travel-article-body { padding-inline: 12px; }
  .travel-article-body b { font-size: 13px; }
}

/* Booking confidence and FAQ */
.booking-confidence-section {
  padding: 34px 0 82px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 7%, rgba(216, 172, 82, .06), transparent 31%),
    #fbfaf7;
}

.booking-confidence-wrap {
  width: min(calc(100% - 64px), var(--booking-width));
}

.confidence-overview {
  min-height: 154px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  direction: rtl;
}

.confidence-copy {
  min-width: 0;
  display: grid;
  grid-template-areas: "text shrine";
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 25px;
  align-items: center;
  direction: ltr;
}

.confidence-shrine {
  grid-area: shrine;
  width: 142px;
  height: 102px;
  color: #c99134;
  stroke-width: 1.55;
}

.confidence-text {
  grid-area: text;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.confidence-text h2 {
  margin: 0 0 7px;
  color: #2d2e2a;
  font-size: 27px;
  font-weight: 830;
  line-height: 1.55;
  letter-spacing: -.35px;
}

.confidence-text p {
  max-width: 930px;
  margin: 0;
  color: #747168;
  font-size: 12px;
  font-weight: 430;
  line-height: 2.05;
}

.confidence-more {
  max-width: 930px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #e8e1d6;
}

.confidence-more[hidden] { display: none; }
.confidence-more p + p { margin-top: 7px; }

.confidence-action {
  width: 145px;
  height: 43px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #332b1f;
  background: linear-gradient(180deg, #efc858, #dda93d);
  border: 1px solid #d5a23a;
  border-radius: 7px;
  box-shadow: 0 5px 13px rgba(178, 127, 35, .18);
  font-size: 12px;
  font-weight: 740;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.confidence-action:hover,
.confidence-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 17px rgba(178, 127, 35, .24);
}

.faq-heading {
  margin: 24px 0 10px;
  text-align: right;
}

.faq-heading h2 {
  margin: 0;
  color: #2d2e2a;
  font-size: 24px;
  font-weight: 830;
  line-height: 1.6;
  letter-spacing: -.3px;
}

.faq-list {
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 1px solid #dedbd3;
  border-radius: 11px;
  box-shadow: 0 7px 22px rgba(47, 44, 38, .035);
}

.faq-item + .faq-item {
  border-top: 1px solid #e5e2dc;
}

.faq-item h3 {
  margin: 0;
}

.faq-question {
  width: 100%;
  min-height: 42px;
  padding: 8px 18px 8px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25px;
  gap: 14px;
  align-items: center;
  color: #6a6861;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 580;
  line-height: 1.7;
  text-align: right;
  cursor: pointer;
}

.faq-item.is-open .faq-question {
  color: #3d3c37;
  font-weight: 730;
}

.faq-symbol {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #929087;
  border: 1px solid #a9a69e;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.faq-symbol::before { content: "+"; }

.faq-question[aria-expanded="true"] .faq-symbol {
  color: #c28c2f;
  border-color: #d6a64b;
}

.faq-question[aria-expanded="true"] .faq-symbol::before {
  content: "−";
  transform: translateY(-1px);
}

.faq-answer {
  padding: 0 18px 15px 59px;
  color: #77746c;
  direction: rtl;
  text-align: right;
}

.faq-answer[hidden] { display: none; }

.faq-answer p {
  margin: 0;
  font-size: 12px;
  font-weight: 420;
  line-height: 1.95;
}

.landing-links-panel {
  margin-top: 28px;
  padding: 23px;
  background:
    radial-gradient(circle at 8% 0, rgba(224, 177, 82, .1), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(250, 246, 237, .96));
  border: 1px solid #e3d8c5;
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(57, 48, 34, .055);
}

.landing-links-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.landing-links-heading > div > span {
  display: block;
  color: #b27a24;
  font-size: 12px;
  font-weight: 730;
  letter-spacing: .1px;
}

.landing-links-heading h2 {
  margin: 3px 0 0;
  color: #2f302c;
  font-size: 22px;
  font-weight: 820;
  line-height: 1.55;
  letter-spacing: -.25px;
}

.landing-links-heading p {
  max-width: 360px;
  margin: 0 0 3px;
  color: #817e76;
  font-size: 12px;
  font-weight: 430;
  line-height: 1.9;
  text-align: left;
}

.landing-links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.landing-link-card {
  min-width: 0;
  min-height: 76px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  color: #3b3934;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #e7dfd1;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(54, 45, 30, .035);
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.landing-link-icon {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  color: #a96f1f;
  background: #fff6e3;
  border: 1px solid #ead3a5;
  border-radius: 10px;
}

.landing-link-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.65;
}

.landing-link-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.landing-link-copy b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.75;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-link-copy small {
  color: #929087;
  font-size: 12px;
  font-weight: 480;
}

.landing-link-arrow {
  width: 17px;
  height: 17px;
  color: #c39039;
  stroke-width: 1.8;
  transition: transform .22s ease;
}

.landing-link-card:hover,
.landing-link-card:focus-visible {
  color: #292822;
  background: #fffaf0;
  border-color: #d9b66f;
  box-shadow: 0 8px 19px rgba(78, 57, 25, .1);
  transform: translateY(-2px);
}

.landing-link-card:hover .landing-link-arrow,
.landing-link-card:focus-visible .landing-link-arrow {
  transform: translateX(-3px);
}

@media (max-width: 1220px) {
  .confidence-overview {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .confidence-copy { grid-template-columns: minmax(0, 1fr) 120px; gap: 18px; }
  .confidence-shrine { width: 120px; height: 92px; }
  .confidence-text h2 { font-size: 24px; }
}

@media (max-width: 1000px) {
  .booking-confidence-section { padding-top: 18px; }
  .booking-confidence-wrap { width: min(calc(100% - 32px), 760px); }
  .confidence-overview { grid-template-columns: 1fr; gap: 18px; }
  .confidence-copy { grid-template-columns: minmax(0, 1fr) 128px; }
  .confidence-shrine { width: 128px; height: 96px; }
  .faq-heading { margin-top: 23px; }
  .landing-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .booking-confidence-section { padding: 4px 0 56px; }
  .booking-confidence-wrap { width: calc(100% - 24px); }
  .confidence-overview { gap: 16px; }
  .confidence-copy { grid-template-columns: minmax(0, 1fr) 94px; gap: 12px; }
  .confidence-shrine { width: 94px; height: 78px; stroke-width: 1.8; }
  .confidence-text h2 { margin-bottom: 4px; font-size: 19px; }
  .confidence-text p { font-size: 12px; line-height: 1.95; }
  .confidence-action { width: 126px; height: 39px; margin-top: 8px; font-size: 12px; }
  .faq-heading { margin: 18px 0 8px; }
  .faq-heading h2 { font-size: 21px; }
  .faq-question { min-height: 48px; padding: 9px 12px; gap: 9px; font-size: 12px; }
  .faq-answer { padding: 0 12px 13px 46px; }
  .faq-answer p { font-size: 12px; }
  .landing-links-panel { margin-top: 20px; padding: 16px; border-radius: 12px; }
  .landing-links-heading { margin-bottom: 12px; display: block; text-align: right; }
  .landing-links-heading h2 { font-size: 19px; }
  .landing-links-heading p { max-width: none; margin-top: 3px; font-size: 12px; text-align: right; }
  .landing-links-grid { gap: 8px; }
  .landing-link-card { min-height: 70px; padding: 9px; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 8px; }
  .landing-link-icon { width: 36px; height: 36px; border-radius: 8px; }
  .landing-link-icon svg { width: 19px; height: 19px; }
  .landing-link-copy b { font-size: 12px; }
  .landing-link-copy small { font-size: 12px; }
}

@media (max-width: 500px) {
  .landing-links-grid { grid-template-columns: 1fr; }
  .landing-link-card { min-height: 66px; }
  .landing-link-copy b { white-space: normal; }
}

@media (max-width: 400px) {
  .confidence-copy {
    grid-template-areas: "shrine" "text";
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .confidence-shrine { width: 118px; height: 83px; }
  .confidence-text { text-align: center; }
  .confidence-text p { margin-inline: auto; }
  .faq-heading { text-align: center; }
}

/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 44px 0 0;
  color: rgba(255, 255, 255, .76);
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .035), transparent 28%),
    radial-gradient(circle at 80% 120%, rgba(215, 171, 90, .055), transparent 35%),
    linear-gradient(100deg, #20211f 0%, #2b2c29 50%, #20211f 100%);
  border-top: 1px solid rgba(215, 171, 90, .25);
}

.footer-main {
  width: min(calc(100% - 64px), var(--container));
  display: grid;
  grid-template-columns: minmax(310px, 1.45fr) repeat(3, minmax(110px, .72fr)) minmax(250px, 1.12fr);
  gap: 42px;
  align-items: start;
  direction: rtl;
}

.footer-brand-panel,
.footer-column,
.footer-contact { min-width: 0; }

.footer-brand-panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "copy"
    "social";
  align-items: start;
}

.footer-logo {
  grid-area: logo;
  width: 210px;
  height: auto;
  padding: 5px 8px;
  object-fit: contain;
  background: #fbfaf7;
  border: 1px solid rgba(215, 171, 90, .42);
  border-radius: 9px;
}

.footer-brand-copy {
  grid-area: copy;
  padding-top: 11px;
}

.footer-brand-copy h2,
.footer-column h2,
.footer-contact h2 {
  margin: 0 0 15px;
  color: #f4f0e7;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.7;
}

.footer-brand-copy h2 { margin-bottom: 7px; font-size: 15px; }

.footer-brand-copy p {
  max-width: 285px;
  margin: 0;
  color: rgba(255, 255, 255, .57);
  font-size: 12px;
  font-weight: 420;
  line-height: 1.95;
}

.footer-brand-copy b {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .87);
  font-size: 12px;
  font-weight: 620;
}

.footer-socials {
  grid-area: social;
  width: 100%;
  margin-top: 17px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  direction: rtl;
  border: 1px solid rgba(215, 171, 90, .72);
  border-radius: 999px;
}

.footer-socials a {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .9);
  border-radius: 50%;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: #22231f;
  background: var(--gold-light);
  transform: translateY(-1px);
}

.footer-socials svg { font-size: 18px; stroke-width: 1.55; }

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-column a {
  position: relative;
  color: rgba(255, 255, 255, .63);
  font-size: 12px;
  font-weight: 430;
  line-height: 1.65;
  transition: color .18s ease, transform .18s ease;
}

.footer-column a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  width: 4px;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .18s ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--gold-light);
  transform: translateX(-2px);
}

.footer-column a:hover::before,
.footer-column a:focus-visible::before { opacity: 1; }

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-contact h2 { margin-bottom: 7px; }

.footer-contact a,
.footer-contact p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-style: normal;
  font-weight: 430;
  line-height: 1.8;
}

.footer-contact a { transition: color .18s ease; }
.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--gold-light); }

.footer-contact svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--gold);
  font-size: 16px;
  stroke-width: 1.65;
}

.footer-divider {
  width: min(calc(100% - 64px), var(--container));
  height: 1px;
  margin-top: 27px;
  background: linear-gradient(90deg, transparent, rgba(215, 171, 90, .82) 12%, rgba(215, 171, 90, .82) 88%, transparent);
}

.footer-bottom {
  width: min(calc(100% - 64px), var(--container));
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  direction: rtl;
}

.footer-assurances {
  display: flex;
  align-items: center;
  gap: 46px;
}

.footer-assurances span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.footer-assurances svg {
  color: var(--gold);
  font-size: 26px;
  stroke-width: 1.45;
}

.footer-assurances b,
.footer-bottom p {
  color: rgba(255, 255, 255, .67);
  font-size: 12px;
  font-weight: 520;
}

.footer-bottom p { margin: 0; font-weight: 420; }

@media (max-width: 1180px) {
  .footer-main {
    grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(100px, .7fr)) minmax(220px, 1fr);
    gap: 25px;
  }
  .footer-brand-panel { grid-template-columns: 1fr; gap: 0; }
  .footer-logo { width: 185px; }
  .footer-assurances { gap: 28px; }
}

@media (max-width: 900px) {
  .site-footer { padding-top: 36px; }
  .footer-main {
    width: min(calc(100% - 40px), 760px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 24px;
  }
  .footer-brand-panel {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .footer-logo { width: 210px; }
  .footer-brand-copy p { max-width: 450px; }
  .footer-socials { max-width: 420px; }
  .footer-contact { grid-column: span 1; }
  .footer-divider,
  .footer-bottom { width: min(calc(100% - 40px), 760px); }
  .footer-bottom { align-items: flex-start; padding: 17px 0; flex-direction: column; gap: 14px; }
  .footer-assurances { width: 100%; justify-content: space-between; }
}

@media (max-width: 620px) {
  .site-footer { padding-top: 30px; }
  .footer-main {
    width: calc(100% - 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 29px 24px;
  }
  .footer-brand-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-logo { width: 190px; }
  .footer-brand-copy { text-align: center; }
  .footer-brand-copy h2 { font-size: 13px; }
  .footer-brand-copy p { font-size: 12px; }
  .footer-socials {
    width: min(100%, 360px);
    margin: 14px auto 0;
    padding: 8px 14px;
    justify-content: center;
    gap: 22px;
  }
  .footer-column h2,
  .footer-contact h2 { margin-bottom: 10px; font-size: 13px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-contact a,
  .footer-contact p,
  .footer-column a { font-size: 12px; }
  .footer-divider,
  .footer-bottom { width: calc(100% - 32px); }
  .footer-divider { margin-top: 24px; }
  .footer-assurances { gap: 10px; flex-wrap: wrap; }
  .footer-assurances span { flex: 1 1 30%; justify-content: center; }
  .footer-assurances svg { font-size: 22px; }
  .footer-assurances b,
  .footer-bottom p { font-size: 12px; }
}

@media (max-width: 390px) {
  .footer-brand-panel {
    grid-template-areas: "logo" "copy" "social";
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-logo { width: 176px; }
  .footer-brand-copy { text-align: center; }
  .footer-socials { width: 100%; }
  .footer-assurances span { flex-basis: 45%; }
}

/* Final responsive refinements */
@media (max-width: 1220px) {
  .best-hotels-grid { height: 470px; gap: 14px; }
  .best-hotel-card--featured .best-hotel-copy strong { font-size: 25px; }
}

@media (max-width: 1000px) {
  .compare-section { padding: 24px 0 32px; }

  .best-hotels-section { padding: 4px 0 66px; }
  .best-hotels-heading h2 { font-size: 28px; }
  .best-hotels-grid {
    height: auto;
    grid-template-areas:
      "featured featured"
      "almas madineh"
      "darvishi jahan";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 360px repeat(2, 220px);
  }
}

@media (max-width: 680px) {
  .compare-section { padding: 20px 0 30px; }

  .best-hotels-section { padding: 0 0 52px; }
  .best-hotels-heading {
    margin-bottom: 13px;
    display: block;
  }
  .best-hotels-kicker { font-size: 12px; }
  .best-hotels-heading h2 { font-size: 23px; letter-spacing: -.2px; }
  .best-hotels-heading p { margin-top: 3px; font-size: 12px; }
  .best-hotels-grid {
    width: calc(100vw - 12px);
    height: auto;
    margin-inline: calc((100vw - 100% - 12px) / -2);
    padding: 0 12px 9px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    direction: rtl;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .best-hotel-card,
  .best-hotel-card--featured {
    width: 84%;
    height: 286px;
    flex: 0 0 84%;
    border-radius: 14px;
    scroll-snap-align: center;
  }
  .best-hotel-card--featured .best-hotel-copy,
  .best-hotel-copy {
    right: 18px;
    bottom: 17px;
    left: 58px;
  }
  .best-hotel-card--featured .best-hotel-copy small,
  .best-hotel-copy small { font-size: 12px; }
  .best-hotel-card--featured .best-hotel-copy strong,
  .best-hotel-copy strong { font-size: 18px; }
  .best-hotel-badge { top: 14px; right: 14px; }
  .best-hotel-arrow { left: 14px; bottom: 14px; }
}

@media (max-width: 400px) {
  .best-hotel-card,
  .best-hotel-card--featured {
    width: 88%;
    height: 252px;
    flex-basis: 88%;
  }
  .best-hotel-card--featured .best-hotel-copy strong,
  .best-hotel-copy strong { font-size: 16px; }
}

/* Homepage mobile search mirrors the landing search experience. */
.home-mobile-search-summary-slot,
.home-mobile-search-summary,
.home-mobile-search-header,
.home-destination-panel-header {
  display: none;
}

.home-mobile-search-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(24, 23, 20, .56);
  backdrop-filter: blur(3px);
}

.home-mobile-search-backdrop[hidden] {
  display: none;
}

.home-destination-panel.destination-panel--portaled {
  position: fixed;
  z-index: 560;
  max-height: calc(100dvh - 32px);
  margin: 0;
  overflow: hidden;
}

.home-destination-panel.destination-panel--portaled .destination-results {
  max-height: min(345px, calc(100dvh - 150px));
}

.home-destination-panel.destination-panel--portaled[hidden] {
  display: none !important;
}

@media (max-width: 680px) {
  body.home-search-enhanced .hero {
    min-height: 410px;
  }

  body.home-search-enhanced .home-mobile-search-summary-slot {
    position: absolute;
    z-index: 11;
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    min-height: 76px;
    display: block;
  }

  body.home-search-enhanced .home-mobile-search-summary {
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: #36342e;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #e6dbc8;
    border-radius: 19px;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    text-align: right;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease, border-color .18s ease;
  }

  body.home-search-enhanced .home-mobile-search-summary.is-scroll-sticky {
    position: fixed;
    z-index: 520;
    top: max(8px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
    min-height: 70px;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.home-search-enhanced .home-mobile-search-summary.is-scroll-sticky.is-scroll-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(-100% - 20px), 0);
  }

  .home-mobile-search-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #efc653;
    background: #242522;
    border: 1px solid #8f743d;
    border-radius: 14px;
  }

  .home-mobile-search-icon svg {
    width: 22px;
    height: 22px;
  }

  .home-mobile-search-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .home-mobile-search-copy > b,
  .home-mobile-search-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-mobile-search-copy > b {
    font-size: 14px;
    font-weight: 760;
  }

  .home-mobile-search-copy small {
    color: #817b70;
    font-size: 12px;
    font-weight: 560;
  }

  .home-mobile-search-action {
    min-width: 78px;
    min-height: 38px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    color: #292823;
    background: linear-gradient(135deg, #efb53a, #f3d172);
    border: 1px solid #dda121;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 730;
    white-space: nowrap;
  }

  body.home-search-enhanced.mobile-home-search-open {
    overflow: hidden;
  }

  body.home-search-enhanced .booking-card {
    position: fixed;
    z-index: 1010;
    top: var(--home-search-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--home-search-viewport-height, 100dvh);
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(180deg, #fff 0%, #fbf8f2 54%, #f1eadf 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 104%, 0);
    animation: none !important;
    backdrop-filter: none;
    will-change: transform;
    overscroll-behavior: contain;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, visibility 0s linear .42s;
  }

  body.home-search-enhanced.mobile-home-search-open .booking-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  body.home-search-enhanced .home-mobile-search-header {
    position: sticky;
    z-index: 4;
    top: 0;
    width: 100%;
    min-height: calc(78px + env(safe-area-inset-top));
    padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #eee5d8;
    box-shadow: 0 8px 26px rgba(63, 49, 28, .06);
    backdrop-filter: blur(14px);
  }

  .home-mobile-search-header > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .home-mobile-search-header > div > span {
    color: #a17225;
    font-size: 12px;
    font-weight: 730;
  }

  .home-mobile-search-header h2 {
    margin: 0;
    color: #292823;
    font-size: 19px;
    font-weight: 790;
  }

  .home-mobile-search-header button,
  .home-destination-panel-header button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #625e56;
    background: #f7f4ee;
    border: 1px solid #e6ded1;
    border-radius: 50%;
    cursor: pointer;
  }

  .home-mobile-search-header button svg,
  .home-destination-panel-header button svg {
    width: 17px;
    height: 17px;
  }

  body.home-search-enhanced .home-mobile-search-fields {
    width: 100%;
    margin-top: auto;
    padding: 17px 16px calc(17px + env(safe-area-inset-bottom));
    display: block;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #e7dece;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -18px 52px rgba(63, 49, 28, .12);
  }

  body.home-search-enhanced .home-mobile-search-fields .booking-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  body.home-search-enhanced .home-mobile-search-fields .field--destination,
  body.home-search-enhanced .home-mobile-search-fields .search-button {
    grid-column: 1 / -1;
  }

  body.home-search-enhanced .home-mobile-search-fields .field-control,
  body.home-search-enhanced .home-mobile-search-fields .search-button {
    height: 54px;
    border-radius: 14px;
  }

  body.home-search-enhanced .home-mobile-search-fields .field-label {
    margin: 0 3px 8px;
    padding: 0;
    font-size: 12px;
  }

  body.home-search-enhanced .home-mobile-search-fields .destination-trigger b,
  body.home-search-enhanced .home-mobile-search-fields .booking-picker-value {
    font-size: 12px;
  }

  body.home-search-enhanced .home-mobile-search-fields .search-button {
    margin-top: 1px;
  }

  body.home-search-enhanced .home-mobile-search-fields .search-button span {
    font-size: 13px;
  }

  body.home-search-enhanced .booking-card > .quick-filters {
    display: none;
  }

  body.home-search-enhanced .home-destination-panel.destination-panel--portaled {
    position: fixed;
    z-index: 1040;
    top: var(--home-search-viewport-top, 0px) !important;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100% !important;
    height: var(--home-search-viewport-height, 100dvh);
    max-height: none;
    padding: 0 13px calc(13px + env(safe-area-inset-bottom));
    overflow: hidden;
    flex-direction: column;
    background: #fff;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: 0 0 70px rgba(24, 23, 20, .3);
    overscroll-behavior: contain;
  }

  body.home-search-enhanced .home-destination-panel.destination-panel--portaled:not([hidden]) {
    display: flex;
  }

  .home-destination-panel-header {
    flex: 0 0 auto;
    min-height: 70px;
    margin: 0 -13px 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(110deg, #fff, #fffbf2);
    border-bottom: 1px solid #eee5d8;
  }

  .home-destination-panel-header > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .home-destination-panel-header > div span {
    color: #a17225;
    font-size: 12px;
    font-weight: 720;
  }

  .home-destination-panel-header > div b {
    color: #292823;
    font-size: 15px;
    font-weight: 780;
  }

  body.home-search-enhanced .home-destination-panel .destination-search {
    flex: 0 0 auto;
    height: 48px;
    border-radius: 12px;
  }

  body.home-search-enhanced .home-destination-panel .destination-search input {
    font-size: 16px;
  }

  body.home-search-enhanced .home-destination-panel .destination-results {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    margin-top: 9px;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-overflow-scrolling: touch;
  }

  body.home-search-enhanced.booking-picker-open .booking-picker-backdrop {
    z-index: 1060;
  }

  body.home-search-enhanced.booking-picker-open .booking-calendar,
  body.home-search-enhanced.booking-picker-open .booking-duration {
    z-index: 1070;
  }

  .home-mobile-search-backdrop:not([hidden]) {
    animation: home-search-backdrop-in .3s ease both;
  }
}

@media (max-width: 420px) {
  body.home-search-enhanced .home-mobile-search-summary-slot {
    min-height: 70px;
  }

  body.home-search-enhanced .home-mobile-search-summary {
    min-height: 70px;
    padding: 7px 8px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 17px;
  }

  .home-mobile-search-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .home-mobile-search-icon svg {
    width: 20px;
    height: 20px;
  }

  .home-mobile-search-copy > b { font-size: 13px; }
  .home-mobile-search-copy small { font-size: 12px; }
  .home-mobile-search-action { min-width: 70px; min-height: 36px; padding-inline: 8px; font-size: 12px; }
}

@keyframes home-search-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Motion and interaction polish */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready [data-reveal] {
    opacity: 0;
  }

  html.motion-ready [data-reveal].is-visible {
    animation: motion-reveal-up .76s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
  }

  html.motion-ready [data-reveal="heading"].is-visible {
    animation-name: motion-reveal-heading;
  }

  html.motion-ready [data-reveal="scale"].is-visible {
    animation-name: motion-reveal-scale;
  }

  html.motion-ready [data-reveal="from-left"].is-visible {
    animation-name: motion-reveal-left;
  }

  html.motion-ready [data-reveal="from-right"].is-visible {
    animation-name: motion-reveal-right;
  }

  html.motion-ready .hero-photo {
    animation: motion-hero-photo-in 1.25s .04s cubic-bezier(.16, 1, .3, 1) both;
  }

  html.motion-ready .hero-copy h1 {
    animation: motion-hero-copy-in .82s .2s cubic-bezier(.16, 1, .3, 1) both;
  }

  html.motion-ready .hero-copy p {
    animation: motion-hero-copy-in .82s .34s cubic-bezier(.16, 1, .3, 1) both;
  }

  html.motion-ready .booking-card {
    animation: motion-booking-in .9s .42s cubic-bezier(.16, 1, .3, 1) both;
  }

  .mobile-menu:not([hidden]) {
    transform-origin: top center;
    animation: motion-menu-in .28s cubic-bezier(.16, 1, .3, 1) both;
  }

  .toast:not([hidden]) {
    animation: motion-toast-in .34s cubic-bezier(.16, 1, .3, 1) both;
  }

  .faq-answer:not([hidden]) {
    transform-origin: top center;
    animation: motion-faq-in .3s cubic-bezier(.16, 1, .3, 1) both;
  }

  .menu-toggle svg {
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  }

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

  .quick-filters button.is-active svg {
    animation: motion-filter-pop .34s cubic-bezier(.16, 1, .3, 1);
  }

  .distance-visual.is-visible .map-main-roads {
    stroke-dasharray: 9 8;
    animation: motion-map-road 10s linear infinite;
  }

  .distance-visual.is-visible .distance-ring[aria-pressed="true"] {
    animation: motion-ring-pulse 2.8s ease-in-out infinite;
  }

  .promo-eyebrow i {
    animation: motion-dot-pulse 2.2s ease-in-out infinite;
  }

  .best-hotel-badge {
    animation: motion-badge-float 3.6s ease-in-out infinite;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .promo-banner,
  .compare-panel,
  .featured-hotel-card {
    transition: transform .32s cubic-bezier(.2, .75, .25, 1), box-shadow .32s ease;
  }

  .promo-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 64px rgba(31, 31, 27, .18);
  }

  .compare-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 19px 42px rgba(29, 29, 26, .21), inset 0 1px rgba(255, 255, 255, .035);
  }

  .featured-hotel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 19px 42px rgba(49, 42, 31, .21);
  }

  .compare-hotel {
    transition: transform .26s ease, border-color .26s ease, background-color .26s ease;
  }

  .compare-hotel img { transition: transform .4s cubic-bezier(.2, .75, .25, 1), filter .3s ease; }

  .compare-hotel:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .025);
    border-color: rgba(226, 183, 98, .82);
  }

  .compare-hotel:hover img { transform: scale(1.035); filter: saturate(1.08); }

  .trust-item {
    position: relative;
    transition: background-color .25s ease;
  }

  .trust-item:hover { background: rgba(244, 221, 171, .13); }

  .trust-icon {
    transition: color .28s ease, transform .38s cubic-bezier(.16, 1, .3, 1);
  }

  .trust-item:hover .trust-icon {
    color: #bd8127;
    transform: translateY(-4px) rotate(-4deg) scale(1.06);
  }

  .nearby-row > img { transition: transform .46s cubic-bezier(.2, .75, .25, 1), filter .3s ease; }
  .nearby-row:hover > img { transform: scale(1.045); filter: saturate(1.06); }

  .compact-hotel-card:hover { transform: translateY(-5px); }

  .guest-review {
    transition: background-color .25s ease, box-shadow .25s ease;
  }

  .guest-review:hover { background: rgba(255, 250, 238, .74); }

  .review-quote,
  .review-avatar {
    transition: transform .34s cubic-bezier(.16, 1, .3, 1), color .25s ease;
  }

  .guest-review:hover .review-quote { color: #c58a28; transform: translateY(-3px) scale(1.1); }
  .guest-review:hover .review-avatar { transform: scale(1.045); }

  .faq-item { transition: background-color .22s ease; }
  .faq-item:hover { background: rgba(246, 224, 180, .12); }

  .faq-symbol { transition: color .22s ease, border-color .22s ease, transform .28s ease; }
  .faq-question[aria-expanded="true"] .faq-symbol { transform: rotate(180deg); }

  :is(
    .login,
    .search-button,
    .promo-cta--gold,
    .compare-action,
    .confidence-action,
    .listing-search-submit,
    .listing-filter-apply,
    .hotel-list-promo > button,
    .hotel-result-offer > button,
    .hotel-policy-dialog > footer button,
    .hotel-guide-more-toggle,
    .listing-support-card > a
  ),
  .home-mobile-search-action,
  .listing-mobile-search-action {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  :is(
    .login,
    .search-button,
    .promo-cta--gold,
    .compare-action,
    .confidence-action,
    .listing-search-submit,
    .listing-filter-apply,
    .hotel-list-promo > button,
    .hotel-result-offer > button,
    .hotel-policy-dialog > footer button,
    .hotel-guide-more-toggle,
    .listing-support-card > a
  )::after,
  .home-mobile-search-action::after,
  .listing-mobile-search-action::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -45%;
    bottom: -45%;
    left: -42%;
    width: 27%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform .68s ease;
  }

  :is(
    .login,
    .search-button,
    .promo-cta--gold,
    .compare-action,
    .confidence-action,
    .listing-search-submit,
    .listing-filter-apply,
    .hotel-list-promo > button,
    .hotel-result-offer > button,
    .hotel-policy-dialog > footer button,
    .hotel-guide-more-toggle,
    .listing-support-card > a
  ):is(:hover, :focus-visible)::after,
  .home-mobile-search-summary:is(:hover, :focus-visible) .home-mobile-search-action::after,
  .listing-mobile-search-summary:is(:hover, :focus-visible) .listing-mobile-search-action::after {
    transform: translateX(650%) skewX(-18deg);
  }

  :is(.promo-cta, .compare-action, .rooms-button, .travel-guide-more):hover svg {
    animation: motion-arrow-nudge .55s ease;
  }
}

@keyframes motion-reveal-up {
  from { opacity: 0; translate: 0 30px; scale: .985; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}

@keyframes motion-reveal-heading {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes motion-reveal-scale {
  from { opacity: 0; translate: 0 20px; scale: .965; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}

@keyframes motion-reveal-left {
  from { opacity: 0; translate: -38px 0; scale: .985; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}

@keyframes motion-reveal-right {
  from { opacity: 0; translate: 38px 0; scale: .985; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}

@keyframes motion-hero-photo-in {
  from { opacity: .35; transform: scale(1.1); filter: saturate(.72) brightness(.78); }
  to { opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); }
}

@keyframes motion-hero-copy-in {
  from { opacity: 0; translate: 0 25px; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes motion-booking-in {
  from { opacity: 0; transform: translate3d(50%, 34px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(50%, 0, 0) scale(1); }
}

@keyframes motion-menu-in {
  from { opacity: 0; transform: translateY(-9px) scaleY(.94); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes motion-toast-in {
  from { opacity: 0; transform: translate(50%, 18px) scale(.96); }
  to { opacity: 1; transform: translate(50%, 0) scale(1); }
}

@keyframes motion-faq-in {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes motion-map-road {
  to { stroke-dashoffset: -68; }
}

@keyframes motion-ring-pulse {
  0%, 100% { box-shadow: inset 0 0 32px rgba(210, 166, 78, .025), 0 0 0 0 rgba(211, 164, 74, .12); }
  50% { box-shadow: inset 0 0 36px rgba(210, 166, 78, .075), 0 0 0 9px rgba(211, 164, 74, 0); }
}

@keyframes motion-dot-pulse {
  0%, 100% { opacity: .62; scale: .82; }
  50% { opacity: 1; scale: 1.15; }
}

@keyframes motion-badge-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes motion-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(-4px); }
}

@keyframes motion-filter-pop {
  0% { transform: scale(.78) rotate(-8deg); }
  70% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  html.motion-ready [data-reveal].is-visible { animation-duration: .66s; }

  @keyframes motion-reveal-left {
    from { opacity: 0; translate: -20px 0; scale: .99; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }

  @keyframes motion-reveal-right {
    from { opacity: 0; translate: 20px 0; scale: .99; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  html.motion-ready [data-reveal] {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    filter: none !important;
  }
}

/* Detailed hotel comparison modal */
.hotel-compare-modal,
.site-promo-popup {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.hotel-compare-modal { z-index: 205; padding: 20px; }
.hotel-compare-modal[hidden],
.site-promo-popup[hidden],
.site-promo-template[hidden] { display: none; }

.hotel-compare-backdrop,
.site-promo-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(18, 18, 15, .76);
  border: 0;
  cursor: default;
  backdrop-filter: blur(7px);
}

.hotel-compare-modal > section {
  position: relative;
  width: min(96vw, 1030px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  color: #494740;
  background: #f8f7f3;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 24px;
  box-shadow: 0 35px 110px rgba(0,0,0,.38);
  scrollbar-width: thin;
}

.hotel-compare-modal-header {
  position: sticky;
  z-index: 5;
  top: 0;
  min-height: 104px;
  padding: 20px 25px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  background: radial-gradient(circle at 10% 0, rgba(219,174,82,.2), transparent 35%), linear-gradient(125deg, #24251f, #35362f);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hotel-compare-modal-header > div > span { display: inline-flex; align-items: center; gap: 6px; color: #e3b65a; font-size: 12px; font-weight: 800; }
.hotel-compare-modal-header > div > span svg { font-size: 15px; }
.hotel-compare-modal-header h2 { margin: 5px 0 2px; color: #fff; font-size: 20px; line-height: 1.5; }
.hotel-compare-modal-header p { margin: 0; color: rgba(255,255,255,.54); font-size: 12px; }
.hotel-compare-modal-header > button,
.site-promo-close {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  cursor: pointer;
}
.hotel-compare-modal-header > button:hover { color: #fff; background: rgba(255,255,255,.12); }
.hotel-compare-modal-header > button svg { font-size: 18px; }

.hotel-compare-selectors {
  padding: 17px 25px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
  align-items: end;
  gap: 13px;
  background: #fff;
  border-bottom: 1px solid #e6e1d8;
}

.hotel-compare-versus { height: 30px; display: grid; place-items: center; color: #a57527; font-size: 12px; font-weight: 850; }

/* انتخابگر هتل مودال مقایسه (۱۴۰۵/۰۶/۳۰) — جایگزین دو <select> قبلی که کل فهرست هتل‌ها
   داخلش بود. قاب/رنگ‌ها عمداً همان سرچ‌باکس مقصد هوم‌پیج (.destination-panel) است تا
   کاربر دو جور تجربه‌ی متفاوت برای یک کار یکسان نبیند. */
.hotel-compare-picker { position: relative; min-width: 0; }
.hotel-compare-picker-label { margin-bottom: 6px; display: block; color: #827c72; font-size: 12px; font-weight: 750; }

.hotel-compare-picker-trigger {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #403f38;
  background: #f8f7f4;
  border: 1px solid #ddd6ca;
  border-radius: 11px;
  outline: 0;
  cursor: pointer;
  text-align: right;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.hotel-compare-picker-trigger:focus-visible,
.hotel-compare-picker.is-open .hotel-compare-picker-trigger { border-color: #b2812f; box-shadow: 0 0 0 3px rgba(178,129,47,.12); }
.hotel-compare-picker-trigger > svg { flex: 0 0 auto; width: 17px; height: 17px; color: #9b7228; }
.hotel-compare-picker-trigger b { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.hotel-compare-picker-trigger .chevron { width: 15px; height: 15px; color: #8d877c; transition: transform .16s ease; }
.hotel-compare-picker.is-open .hotel-compare-picker-trigger .chevron { transform: rotate(180deg); }

.hotel-compare-picker-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e4ddcf;
  border-radius: 13px;
  box-shadow: 0 20px 46px rgba(37, 35, 31, .19);
}

.hotel-compare-picker-panel[hidden] { display: none; }

.hotel-compare-picker-search {
  height: 42px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbfaf7;
  border: 1px solid #e6dfd3;
  border-radius: 9px;
}

.hotel-compare-picker-search svg { flex: 0 0 auto; width: 17px; height: 17px; color: #80796e; }
.hotel-compare-picker-search input { width: 100%; color: #34322e; background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; }

.hotel-compare-picker-results { max-height: 292px; margin-top: 7px; overflow-y: auto; overscroll-behavior: contain; }

.hotel-compare-picker-option {
  width: 100%;
  min-height: 54px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #34322e;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: right;
  font: inherit;
  transition: background .16s ease, color .16s ease;
}

.hotel-compare-picker-option:hover:not([disabled]),
.hotel-compare-picker-option:focus-visible,
.hotel-compare-picker-option[aria-selected="true"] { color: #77551a; background: #fff8e8; }
.hotel-compare-picker-option[disabled] { cursor: default; opacity: .45; }
.hotel-compare-picker-option-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: #966a1f; background: #f7ead0; border-radius: 10px; font-size: 12px; font-weight: 800; }
.hotel-compare-picker-option > span:last-child { min-width: 0; display: grid; gap: 3px; }
.hotel-compare-picker-option b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hotel-compare-picker-option small { overflow: hidden; color: #89847b; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hotel-compare-picker-loading,
.hotel-compare-picker-empty { display: block; margin: 18px 10px; color: #858078; text-align: center; font-size: 12px; }
.hotel-compare-picker-empty[hidden] { display: none; }

.hotel-compare-summary { position: relative; padding: 18px 25px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; background: #f3f0e9; border-bottom: 1px solid #dfd9cf; }
.hotel-compare-summary-divider { position: absolute; top: 18px; bottom: 18px; right: 50%; width: 1px; background: #ddd5c9; }
.hotel-compare-summary article { min-width: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 14px; }
.hotel-compare-card-image { position: relative; width: 116px; height: 92px; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 20px rgba(42,39,32,.12); }
.hotel-compare-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hotel-compare-card-image span { position: absolute; right: 7px; top: 7px; padding: 3px 7px; color: #2c2923; background: #ebc469; border-radius: 7px; font-size: 12px; font-weight: 900; }
.hotel-compare-card-copy { min-width: 0; }
.hotel-compare-card-stars { color: #dcaa42; font-size: 12px; letter-spacing: 1px; }
.hotel-compare-card-copy h3 { margin: 3px 0; overflow: hidden; color: #363730; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hotel-compare-card-copy p { margin: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #817c73; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hotel-compare-card-copy p svg { color: #ae7b29; font-size: 12px; }
.hotel-compare-card-bottom { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hotel-compare-card-bottom strong { color: #3e7b54; font-size: 14px; }
.hotel-compare-card-bottom strong small { color: #90897f; font-size: 12px; font-weight: 650; }
.hotel-compare-card-bottom a { padding: 6px 9px; color: #75511a; background: #f2e3c4; border: 1px solid #e5cca0; border-radius: 8px; font-size: 12px; font-weight: 850; }

.hotel-compare-table-wrap { padding: 18px 25px 8px; }
.hotel-compare-table { width: 100%; overflow: hidden; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; border: 1px solid #e1dcd3; border-radius: 13px; }
.hotel-compare-table th,
.hotel-compare-table td { height: 43px; padding: 7px 13px; text-align: center; border-bottom: 1px solid #eeeae3; }
.hotel-compare-table thead th { height: 38px; color: #746e65; background: #f6f4ef; font-size: 12px; }
.hotel-compare-table thead th:nth-child(2) { width: 25%; color: #8d6526; background: #f3e7d0; }
.hotel-compare-table tbody tr:last-child td { border-bottom: 0; }
.hotel-compare-table tbody td { color: #4f4d45; font-size: 12px; font-weight: 750; }
.hotel-compare-table tbody td:nth-child(2) { color: #8b8378; background: #fcfaf6; font-size: 12px; font-weight: 650; }
.hotel-compare-table td.is-better { color: #34724b; background: #edf7f0; }
.hotel-compare-table td.is-worse { color: #7c766d; }
.hotel-compare-feature-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.hotel-compare-feature-list span { padding: 3px 6px; color: #76551f; background: #f7edda; border-radius: 6px; font-size: 12px; }
.hotel-compare-yes { color: #34734b; }
.hotel-compare-no { color: #a0665d; }

/* ۱۴۰۵/۰۶/۱۱: فهرست هتل‌های مودال مقایسه دیگه با صفحه embed نمی‌شه، وقتی مودال باز می‌شه
   fetch می‌شه (app.js:loadCompareHotels) — تا اون لحظه این اسکلتون دیده می‌شه؛ اگه fail بشه
   hotel-compare-error جایگزینش می‌شه (نه سکوت قبلی). هر سه بخش با [hidden] رد و بدل می‌شن. */
.hotel-compare-skeleton { padding: 17px 25px 18px; }
.hotel-compare-skeleton-selectors,
.hotel-compare-skeleton-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; margin-bottom: 18px; }
.hotel-compare-skeleton-selectors span { height: 44px; border-radius: 11px; }
.hotel-compare-skeleton-cards span { height: 92px; border-radius: 12px; }
.hotel-compare-skeleton-rows { display: grid; gap: 8px; }
.hotel-compare-skeleton-rows span { height: 43px; border-radius: 9px; }
.hotel-compare-skeleton span {
  display: block;
  background: linear-gradient(100deg, #f0ede5 30%, #f8f5ee 50%, #f0ede5 70%);
  background-size: 220% 100%;
  animation: hotel-compare-shimmer 1.3s ease-in-out infinite;
}
@keyframes hotel-compare-shimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hotel-compare-skeleton span { animation: none; background: #f0ede5; }
}

.hotel-compare-error { padding: 46px 25px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.hotel-compare-error[hidden] { display: none; }
.hotel-compare-error p { margin: 0; color: #8b857c; font-size: 13px; font-weight: 650; }
.hotel-compare-error button {
  min-width: 115px;
  min-height: 36px;
  padding: 0 16px;
  color: #75511a;
  background: #f2e3c4;
  border: 1px solid #e5cca0;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.hotel-compare-error button:hover { background: #ecd8ae; }

.hotel-compare-modal-footer { min-height: 65px; padding: 12px 25px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.hotel-compare-modal-footer p { margin: 0; display: flex; align-items: flex-start; gap: 6px; color: #8b857c; font-size: 12px; line-height: 1.8; }
.hotel-compare-modal-footer p svg { margin-top: 1px; flex: 0 0 auto; color: #4f8b63; font-size: 12px; }
.hotel-compare-modal-footer > button { min-width: 115px; min-height: 36px; padding: 0 13px; color: #fff; background: #3d3e37; border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

/* Shared promotional popup — lead and offer variants */
.site-promo-popup { z-index: 215; padding: 18px; }
.site-promo-popup > section { position: relative; width: min(95vw, 860px); max-height: calc(100vh - 36px); overflow: auto; background: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 25px; box-shadow: 0 35px 110px rgba(0,0,0,.42); }
.site-promo-close { position: absolute; z-index: 5; top: 14px; left: 14px; color: #4f4c45; background: rgba(255,255,255,.9); border-color: rgba(66,62,54,.16); box-shadow: 0 7px 18px rgba(31,29,25,.12); }
.site-promo-close:hover { color: #252620; background: #fff; }
.site-promo-close svg { font-size: 18px; }

.site-promo-template--lead { min-height: 485px; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); }
.site-promo-visual { position: relative; min-height: 485px; overflow: hidden; color: #fff; background: #24251f; isolation: isolate; }
.site-promo-visual > img,
.site-promo-visual-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.site-promo-visual > img { object-fit: cover; }
.site-promo-visual-shade { z-index: -1; background: linear-gradient(to top, rgba(23,23,20,.94), rgba(23,23,20,.04) 70%); }
.site-promo-discount { position: absolute; top: 25px; right: 25px; width: 82px; height: 82px; display: grid; place-content: center; text-align: center; color: #29261f; background: linear-gradient(135deg, #f0d184, #d8a647); border: 5px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 13px 28px rgba(0,0,0,.2); }
.site-promo-discount b,
.site-promo-discount small { display: block; }
.site-promo-discount b { font-size: 16px; }
.site-promo-discount small { margin-top: 1px; font-size: 12px; }
.site-promo-visual > div { position: absolute; right: 25px; bottom: 25px; left: 25px; }
.site-promo-visual > div span,
.site-promo-visual > div b { display: block; }
.site-promo-visual > div span { margin-bottom: 4px; color: #e2b258; font-size: 12px; font-weight: 800; }
.site-promo-visual > div b { color: #fff; font-size: 15px; line-height: 1.7; }

.site-promo-content { padding: 54px 43px 37px; }
.site-promo-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #a97525; font-size: 12px; font-weight: 850; }
.site-promo-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 99px; }
.site-promo-content h2,
.site-promo-offer-copy h2 { margin: 9px 0 8px; color: #30312b; font-size: 25px; line-height: 1.55; letter-spacing: -.5px; }
.site-promo-content > p,
.site-promo-offer-copy > p { margin: 0; color: #77736a; font-size: 12px; line-height: 2; }
.site-promo-content ul { margin: 17px 0 21px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.site-promo-content li { padding: 6px 8px; display: flex; align-items: center; gap: 4px; color: #5d665d; background: #f2f6f1; border: 1px solid #e0e9df; border-radius: 8px; font-size: 12px; font-weight: 750; }
.site-promo-content li svg { color: #438059; font-size: 12px; }
.site-promo-form > label { margin-bottom: 6px; display: block; color: #57554e; font-size: 12px; font-weight: 800; }
.site-promo-form > div { padding: 5px 6px 5px 11px; display: flex; align-items: center; gap: 7px; background: #f7f5f0; border: 1px solid #dcd6cb; border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.site-promo-form > div:focus-within { border-color: #b3802f; box-shadow: 0 0 0 3px rgba(179,128,47,.11); }
.site-promo-form input { min-width: 0; height: 42px; flex: 1; color: #36362f; background: transparent; border: 0; outline: 0; font-size: 12px; text-align: left; }
.site-promo-form button { min-width: 124px; height: 42px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #292720; background: linear-gradient(135deg, #efd081, #d4a143); border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.site-promo-form button svg { font-size: 13px; }
.site-promo-form > small { min-height: 19px; margin-top: 6px; display: block; color: #9a948a; font-size: 12px; }
.site-promo-form > small.is-error { color: #a34f46; }
.site-promo-form > small.is-success { color: #3e7a53; font-weight: 750; }

.site-promo-template--offer { min-height: 430px; padding: 52px 47px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: center; gap: 42px; overflow: hidden; background: radial-gradient(circle at 17% 12%, rgba(215,171,90,.14), transparent 30%), linear-gradient(130deg, #fdfcf9, #f2eee5); }
.site-promo-offer-mark { position: absolute; top: 0; right: 47px; padding: 12px 13px 14px; color: #fff; background: #34352f; border-radius: 0 0 13px 13px; }
.site-promo-offer-mark span { width: 27px; height: 27px; margin: 0 auto 3px; display: grid; place-items: center; color: #e3b45a; }
.site-promo-offer-mark span svg { font-size: 22px; }
.site-promo-offer-mark b { display: block; font-size: 12px; }
.site-promo-offer-copy { padding-top: 22px; }
.site-promo-offer-facts { margin: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #ded8ce; }
.site-promo-offer-facts span { padding: 12px 5px; text-align: center; border-left: 1px solid #ded8ce; }
.site-promo-offer-facts span:last-child { border-left: 0; }
.site-promo-offer-facts b,
.site-promo-offer-facts small { display: block; }
.site-promo-offer-facts b { color: #3d3e37; font-size: 13px; }
.site-promo-offer-facts small { margin-top: 2px; color: #918b81; font-size: 12px; }
.site-promo-offer-copy > a { min-height: 43px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #28261f; background: linear-gradient(135deg, #f0ce7d, #d5a143); border-radius: 10px; box-shadow: 0 10px 22px rgba(165,114,30,.18); font-size: 12px; font-weight: 850; }
.site-promo-offer-copy > a svg { font-size: 14px; }
.site-promo-offer-copy > button { margin-right: 11px; color: #817b72; background: transparent; border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.site-promo-offer-image { position: relative; width: 270px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 135px 135px 20px 20px; box-shadow: 0 22px 45px rgba(40,37,31,.2); }
.site-promo-offer-image img,
.site-promo-offer-image span { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-promo-offer-image img { object-fit: cover; }
.site-promo-offer-image span { background: linear-gradient(to top, rgba(30,29,25,.35), transparent 55%); }

@media (max-width: 760px) {
  .hotel-compare-modal { padding: 0; place-items: end center; }
  .hotel-compare-modal > section { width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; }
  .hotel-compare-modal-header { min-height: 92px; padding: 17px; }
  .hotel-compare-modal-header h2 { font-size: 16px; }
  .hotel-compare-modal-header p { display: none; }
  .hotel-compare-selectors { padding: 13px; grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr); gap: 6px; }
  .hotel-compare-versus { font-size: 0; }
  .hotel-compare-versus::after { content: "↔"; font-size: 14px; }
  .hotel-compare-picker-trigger { height: 42px; padding-inline: 8px; gap: 6px; font-size: 12px; }
  .hotel-compare-picker-trigger > svg:first-child { display: none; }
  /* پنل روی موبایل از عرض ستون خودش پهن‌تر می‌شود وگرنه نام هتل‌ها جا نمی‌گیرد. */
  .hotel-compare-picker[data-compare-picker="first"] .hotel-compare-picker-panel { left: -105%; }
  .hotel-compare-picker[data-compare-picker="second"] .hotel-compare-picker-panel { right: -105%; }
  .hotel-compare-picker-results { max-height: 232px; }
  .hotel-compare-summary { padding: 13px; gap: 17px; }
  .hotel-compare-summary article { grid-template-columns: 1fr; gap: 8px; }
  .hotel-compare-card-image { width: 100%; height: 105px; }
  .hotel-compare-card-copy h3 { font-size: 12px; }
  .hotel-compare-card-copy p { font-size: 12px; }
  .hotel-compare-card-bottom { align-items: flex-start; flex-direction: column; }
  .hotel-compare-card-bottom a { width: 100%; text-align: center; }
  .hotel-compare-table-wrap { padding: 12px 8px 4px; overflow-x: auto; }
  .hotel-compare-table { min-width: 0; }
  .hotel-compare-table th,
  .hotel-compare-table td { padding-inline: 7px; }
  .hotel-compare-modal-footer { padding: 10px 13px 16px; }
  .hotel-compare-modal-footer p { max-width: 210px; }

  .site-promo-popup { padding: 8px; }
  .site-promo-popup > section { width: 100%; max-height: calc(100vh - 16px); border-radius: 19px; }
  .site-promo-template--lead { grid-template-columns: 1fr; }
  .site-promo-visual { min-height: 210px; }
  .site-promo-discount { top: 17px; right: 17px; width: 68px; height: 68px; }
  .site-promo-discount b { font-size: 13px; }
  .site-promo-content { padding: 28px 22px 24px; }
  .site-promo-content h2,
  .site-promo-offer-copy h2 { font-size: 21px; }
  .site-promo-content ul { margin-block: 13px 16px; }
  .site-promo-form > div { align-items: stretch; flex-direction: column; background: transparent; border: 0; padding: 0; }
  .site-promo-form input { width: 100%; padding: 0 12px; flex: none; background: #f7f5f0; border: 1px solid #dcd6cb; border-radius: 10px; }
  .site-promo-form button { width: 100%; }
  .site-promo-template--offer { min-height: 0; padding: 68px 22px 26px; grid-template-columns: 1fr; gap: 21px; }
  .site-promo-offer-mark { right: 22px; }
  .site-promo-offer-image { grid-row: 1; width: 100%; height: 190px; aspect-ratio: auto; border-radius: 90px 90px 16px 16px; }
  .site-promo-offer-copy { grid-row: 2; padding-top: 0; }
  .site-promo-offer-copy > a { width: 100%; }
  .site-promo-offer-copy > button { width: 100%; margin: 12px 0 0; }
}

@media (max-width: 420px) {
  .hotel-compare-modal-footer { align-items: stretch; flex-direction: column; }
  .hotel-compare-modal-footer > button { width: 100%; }
  .site-promo-visual { min-height: 180px; }
  .site-promo-visual > div { right: 18px; bottom: 15px; }
}


/* ==========================================================================
   ۱۴۰۵/۰۶/۲۷ — حالت لودینگ مشترک (درخواست صریح کارفرما)

   تا امروز فقط «لود اول صفحه» اسکلتون داشت؛ تغییر فیلتر/جست‌وجو و کلیک روی
   «نمایش بیشتر» هیچ بازخورد بصری نداشتند — روی اینترنت کند یعنی کاربر فکر کند
   دکمه کار نکرده و دوباره بزند. دو کلاس عمومی، قابل استفاده روی هر دکمه/هر فهرست:

   - `.is-loading` روی دکمه: متن در جای خودش می‌ماند (پرش لایه‌چینی نداریم) و
     یک اسپینر رویش می‌نشیند.
   - `.is-refreshing` روی کانتینر نتایج: محتوای قبلی کمرنگ و غیرقابل‌کلیک می‌شود
     (نه حذف — تا صفحه نپرد و اسکرول حفظ شود) با یک اسپینر شناور وسط.
   ========================================================================== */

@keyframes mr-spin {
  to { transform: rotate(360deg); }
}

button.is-loading {
  position: relative;
  cursor: progress;
  pointer-events: none;
}

button.is-loading > * {
  opacity: .28;
}

button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .9;
  animation: mr-spin .65s linear infinite;
}

.is-refreshing {
  position: relative;
  min-height: 140px;
}

.is-refreshing > * {
  opacity: .38;
  pointer-events: none;
  transition: opacity .18s ease;
}

.is-refreshing::after {
  content: "";
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid rgba(154, 122, 40, .22);
  border-top-color: #cfa441;
  border-radius: 50%;
  animation: mr-spin .7s linear infinite;
}

/* روی فهرستی که فقط دارد صفحه‌ی بعدی را append می‌کند، کم‌رنگ‌کردن کل فهرست غلط
   است — آنجا فقط خود دکمه (بالا) اسپینر می‌گیرد، نه این کلاس. */

@media (prefers-reduced-motion: reduce) {
  button.is-loading::after,
  .is-refreshing::after {
    animation-duration: 1.6s;
  }
}