/* زِدفلای — one stylesheet, light only, every corner capped at 5px.
   The @font-face blocks must stay at the very top: body asks for "Vazirmatn" and these
   are the only place that says where to find it. tools/font-test.mjs guards them. */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/vazirmatn-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* -- The palette --
     Brand Yellow  #ffd200   the identity, and the colour that means "act"
     Outer Space   #202954   every piece of text and structure, and the dark surfaces
     Perfect White #ffffff   the page itself

     Yellow is a *light* colour: white on #ffd200 is 1.45:1, so anything sitting on the
     brand takes DARK text, never white. Text that is itself yellow uses --brand-800
     (5.49:1 on white); 700 only reaches 3.60 and is for large type at most. Dark navy on
     brand-400 is 12.21:1, which is why buttons, score pills and map pins all read easily.

     The greys are not grey: the --ink-* ramp is Outer Space mixed toward white in OKLab,
     so the whole interface is tinted by the brand navy rather than a neutral that belongs
     to no one. Navy and yellow carry the entire site between them. */
  --brand-50:  #fffbeb;
  --brand-100: #fff3c4;
  --brand-200: #ffe88a;
  --brand-300: #ffdd57;
  --brand-400: #ffd200;   /* the brand: dark text on it, always */
  --brand-500: #fbc800;
  --brand-600: #e0a800;
  --brand-700: #b07e00;   /* 3.60:1 — large text only */
  --brand-800: #8a6200;   /* 5.49:1 — this is the one small yellow text may use */
  --brand-900: #6b4c00;

  /* There is no fourth hue: anything that used to reach for orange lands on the brand. */
  --accent-50:  var(--brand-50);
  --accent-100: var(--brand-100);
  --accent-200: var(--brand-200);
  --accent-300: var(--brand-300);
  --accent-400: var(--brand-500);
  --accent-500: var(--brand-600);
  --accent-600: var(--brand-700);
  --accent-700: var(--brand-800);

  --ink-0:   #ffffff;
  --ink-25:  #f9f9fb;
  --ink-50:  #f2f3f6;
  --ink-100: #e6e8ed;
  --ink-200: #cdd0db;
  --ink-300: #a2a8bc;
  --ink-400: #616a8a;   /* the lightest ink small text may use: 5.33:1 on white and
                           still 4.81:1 on the ink-50 tint, which is where muted counts sit */
  --ink-500: #4e587c;
  --ink-600: #3a446b;
  --ink-700: #2b345e;
  --ink-800: #202954;   /* Outer Space */
  --ink-900: #121631;

  /* No green and no amber — amber would fight the brand. "good" is the calm navy and
     "warn"/"bad" are the brand yellow, which is why the pros/cons pair reads navy vs
     yellow rather than green vs orange. */
  --good-50:  var(--ink-50);   --good-500: var(--ink-600);  --good-700: var(--ink-800);
  --warn-50:  var(--brand-50); --warn-500: var(--brand-500); --warn-700: var(--brand-800);
  --bad-50:   var(--brand-50); --bad-500:  var(--brand-600); --bad-700:  var(--brand-900);

  --bg:        var(--ink-0);
  --bg-soft:   var(--ink-25);
  --bg-mute:   var(--ink-50);
  --surface:   #ffffff;
  --surface-2: var(--ink-25);
  --line:      var(--ink-100);
  --line-2:    var(--ink-200);
  --fg:        var(--ink-900);
  --fg-soft:   var(--ink-500);
  --fg-mute:   var(--ink-400);   /* 5.33:1 on white */
  --link:      var(--brand-800); /* 5.49:1 on white; brand-700 only reaches 3.60 */

  /* Brand identity: the design caps every corner at 5px. Do not increase these. */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius:    5px;
  --radius-lg: 5px;
  --radius-xl: 5px;
  --shadow-xs: 0 1px 2px rgba(19, 26, 36, .05);
  --shadow-sm: 0 1px 3px rgba(19, 26, 36, .07), 0 1px 2px rgba(19, 26, 36, .04);
  --shadow:    0 4px 16px rgba(19, 26, 36, .07), 0 1px 3px rgba(19, 26, 36, .04);
  --shadow-lg: 0 14px 40px rgba(19, 26, 36, .11), 0 3px 10px rgba(19, 26, 36, .05);
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 62px;
  --toc-h: 50px;      /* the sticky in-page tab bar on hotel pages */
}

/* The site is light-only by design — there is no dark theme. */

/* -------------------------------- reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
/* anchored sections must not land under the sticky header — and hotel pages have a
   second sticky bar (the in-page tabs), so they need more room */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }
.has-toc [id] { scroll-margin-top: calc(var(--header-h) + var(--toc-h) + 12px); }
body {
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { background-color: var(--bg-mute); }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { line-height: 1.4; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.35rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); }
h3 { font-size: 1.06rem; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: var(--brand-200); color: var(--ink-900); }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* ------------------------------- layout --------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 26px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.hide-sm { display: none; }
@media (min-width: 860px) { .hide-sm { display: initial; } .only-sm { display: none !important; } }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.section { padding-block: 34px; }
.section-tight { padding-block: 22px; }
@media (max-width: 700px) {
  .section { padding-block: 24px; }
  .section-tight { padding-block: 16px; }
  .stack-lg > * + * { margin-top: 16px; }
  .panel { padding: 16px; }
}
.divider { height: 1px; background: var(--line); border: 0; margin-block: 26px; }

.grid { display: grid; gap: 16px; }
/* grid/flex items default to min-content width; without this a wide table or a
   long unbreakable string makes the whole page scroll sideways on mobile */
.grid > *, .with-side > *, .facts > *, .amen-grid > *, .cmp-heads > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* portrait city tile: tall photo, name and count under it as plain text */
.city-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.city-tile-media {
  display: block; aspect-ratio: 3/4; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-mute); margin-bottom: 7px;
  border: 1px solid var(--line);
}
.city-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.city-tile:hover .city-tile-media img { transform: scale(1.05); }
.city-tile > b { font-size: .95rem; }
.city-tile:hover > b { color: var(--link); }

/* the 12 city tiles land in complete rows at every width: 6 / 4 / 3 / 2 columns */
.g-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .g-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .g-cities { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .g-cities { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2 { grid-template-columns: 1fr; } }

.with-side { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .with-side { grid-template-columns: 292px minmax(0, 1fr); } }
/* on narrow screens the main column must come first, the rail after it */
@media (max-width: 999px) {
  .with-side > aside { order: 2; }
  .with-side > :not(aside) { order: 1; }
}

/* ---------------------------- text helpers ------------------------------ */
.t-xs { font-size: .74rem; }
.t-sm { font-size: .84rem; }
.t-md { font-size: .93rem; }
.t-lg { font-size: 1.06rem; }
.muted { color: var(--fg-mute); }
.soft { color: var(--fg-soft); }
.b { font-weight: 700; }
.bb { font-weight: 800; }
.lead { font-size: 1.02rem; line-height: 1.95; color: var(--fg-soft); text-wrap: pretty; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--brand-800); }

/* ------------------------------ buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .9rem; line-height: 1.2;
  border: 1px solid transparent; transition: background .16s, border-color .16s, color .16s, transform .1s, box-shadow .16s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* The brand is yellow, so its buttons carry dark type: navy on brand-400 is 12.21:1,
   white on it would be 1.45:1. */
.btn-primary { background: var(--brand-400); color: var(--ink-900); box-shadow: var(--shadow-sm); font-weight: 800; }
.btn-primary:hover { background: var(--brand-500); }
.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-800); }
.btn-accent { background: var(--brand-400); color: var(--ink-900); }
.btn-accent:hover { background: var(--brand-500); }
.btn-ghost { border-color: var(--line-2); color: var(--fg-soft); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand-400); color: var(--brand-800); background: var(--brand-50); }
/* Tertiary: a calm navy-tinted soft button. Yellow is reserved for the real actions
   (btn-primary/btn-accent) — when every "see all" link was yellow too, yellow stopped
   meaning "act". */
.btn-soft { background: var(--ink-50); color: var(--ink-700); }
.btn-soft:hover { background: var(--ink-100); color: var(--ink-800); }
.btn-sm { padding: 7px 12px; font-size: .82rem; border-radius: var(--radius-xs); }
.btn-lg { padding: 13px 24px; font-size: .98rem; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-icon { padding: 8px; width: 38px; height: 38px; }

/* ------------------------------- chips ---------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--bg-mute); color: var(--fg-soft);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.chip svg { flex: none; }
.chip-brand { background: var(--brand-50); color: var(--brand-800); }
.chip-accent { background: var(--accent-50); color: var(--accent-700); }
.chip-good { background: var(--good-50); color: var(--good-700); }
.chip-warn { background: var(--warn-50); color: var(--warn-700); }
.chip-bad { background: var(--bad-50); color: var(--bad-700); }
.chip-line { background: transparent; border: 1px solid var(--line-2); }
a.chip:hover { background: var(--brand-100); color: var(--brand-800); }

/* Star rating drawn with text glyphs — a listing page renders hundreds of these,
   so a 5-icon SVG group per hotel was pure page weight. */
.stars {
  position: relative; display: inline-block; direction: ltr;
  font-size: 14px; line-height: 1; color: var(--ink-200); letter-spacing: 1px;
  vertical-align: -1px; white-space: nowrap;
}
.stars::before { content: "★★★★★"; }
.stars > i { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; color: var(--accent-400); }
.stars > i::before { content: "★★★★★"; }
.stars > i[data-n="1"] { width: 20%; }
.stars > i[data-n="2"] { width: 40%; }
.stars > i[data-n="3"] { width: 60%; }
.stars > i[data-n="4"] { width: 80%; }
.stars > i[data-n="5"] { width: 100%; }
.stars-sm { font-size: 12px; letter-spacing: .5px; }
.ic { flex: none; }

/* ------------------------------- cards ---------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card-pad { padding: 18px; }
.card-hover { transition: box-shadow .18s, border-color .18s, transform .18s; }
.card-hover:hover { box-shadow: var(--shadow); border-color: var(--line-2); transform: translateY(-2px); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.panel-soft { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }

/* hotel card */
.hcard { display: flex; flex-direction: column; height: 100%; }
.hcard-media { position: relative; aspect-ratio: 16/10; background: var(--bg-mute); overflow: hidden; flex: 0 0 auto; }
.hcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hcard:hover .hcard-media img { transform: scale(1.045); }
.hcard-badges { position: absolute; inset-block-start: 9px; inset-inline-start: 9px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 18px); }
.hcard-badges .chip { background: rgba(255, 255, 255, .93); color: var(--ink-800); backdrop-filter: blur(6px); box-shadow: var(--shadow-xs); }
.hcard-score {
  position: absolute; inset-block-start: 9px; inset-inline-end: 9px;
  min-width: 42px; padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(19, 26, 36, .82); color: #fff; backdrop-filter: blur(6px);
  font-weight: 800; font-size: .85rem; text-align: center;
}
.hcard-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 15px 15px; gap: 8px; }
.hcard-title { font-size: 1rem; font-weight: 800; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--fg-mute); }
.hcard-desc { font-size: .86rem; line-height: 1.8; color: var(--fg-soft); }
.hcard-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.hcard-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }

/* brand icon tile — the one square that marks a feature block */
.ic-tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--brand-400); color: var(--ink-900); }

/* compact link card: icon + title + one meta line — areas, attraction stubs, picker rows */
.mini-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s, box-shadow .16s;
}
.mini-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow-sm); }
.mini-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--ink-50); color: var(--ink-700); flex: none; }
.mini-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mini-b b { font-size: .92rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-b span { font-size: .76rem; color: var(--fg-mute); }

/* horizontal list variant */
.hrow { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; }
.hrow .hcard-media { aspect-ratio: 1/1; border-radius: var(--radius-sm); }
@media (max-width: 520px) { .hrow { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; } }

/* ------------------------------ header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; gap: 14px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 900; font-size: 1.16rem; letter-spacing: -.02em; }
.brand img, .brand-mark { width: 30px; height: 30px; border-radius: var(--radius-sm); flex: none; }
.brand { color: var(--ink-900); }
.brand small { display: block; font-size: 11.5px; font-weight: 600; color: var(--fg-mute); letter-spacing: 0; line-height: 1.35; margin-top: 2px; }
@media (max-width: 420px) { .brand small { display: none; } .brand { font-size: 1.08rem; } }
.nav { display: none; align-items: center; gap: 2px; margin-inline-start: 8px; }
@media (min-width: 1000px) { .nav { display: flex; } }
.nav a, .nav button {
  padding: 8px 11px; border-radius: var(--radius-xs);
  font-size: .875rem; font-weight: 700; color: var(--fg-soft);
  transition: background .15s, color .15s;
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"] { background: var(--brand-50); color: var(--brand-800); }
.header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-xs);
  color: var(--fg-soft); border: 1px solid var(--line);
  background: var(--surface); transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-200); }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer[data-open="1"] { display: block; }
.drawer-veil { position: absolute; inset: 0; background: rgba(9, 13, 19, .5); backdrop-filter: blur(2px); }
.drawer-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(320px, 88vw);
  background: var(--surface); padding: 16px; overflow-y: auto;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 6px;
}
.drawer-panel a, .drawer-panel button {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
  border-radius: var(--radius-sm); font-weight: 700; font-size: .92rem; color: var(--fg-soft); text-align: start;
}
.drawer-panel a:hover, .drawer-panel button:hover { background: var(--bg-mute); color: var(--fg); }
.drawer-sep { height: 1px; background: var(--line); margin-block: 8px; }

/* modal sheet (city picker, search) — one column, scrolls cleanly on phones */
.sheet {
  position: absolute; inset-inline: 0; inset-block-start: 0;
  margin-inline: auto; width: min(560px, 100%);
  max-height: 100dvh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
}
@media (min-width: 620px) { .sheet { inset-block-start: 64px; max-height: min(76vh, 640px); border-radius: var(--radius); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.sheet-search { position: relative; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.sheet-search input {
  width: 100%; padding: 10px 40px 10px 12px; font-size: .95rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--fg);
}
.sheet-search input:focus { border-color: var(--brand-400); background: var(--surface); }
.sheet-search .searchbox-ico { inset-block: 12px auto; inset-inline-start: 27px; height: 42px; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 15px 15px; -webkit-overflow-scrolling: touch; }
.sheet-group + .sheet-group { margin-top: 14px; }
.sheet-group > h4 { font-size: .74rem; font-weight: 800; color: var(--fg-mute); padding-block: 8px 4px; position: sticky; top: 0; background: var(--surface); }
.sheet-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 600;
}
.sheet-row:hover, .sheet-row:focus-visible { color: var(--link); }
.sheet-row .n { font-size: .74rem; font-weight: 600; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.ac-plain .ac-item { border-bottom: 1px solid var(--line); border-radius: 0; }

/* ------------------------------ footer ---------------------------------- */
.site-footer { margin-top: 54px; background: var(--bg-soft); border-top: 1px solid var(--line); }
/* The palette's third job: one large, calm block of Outer Space to close the page.
   The whole footer is a dark surface, so it re-points the semantic tokens rather than
   overriding each descendant — otherwise anything using --fg-soft or --line keeps the
   light-background value and disappears. Every pair below clears AA on #121631:
   white 17.7, ink-200 10.2, ink-300 6.7, brand-300 13.3. */
.site-footer {
  background: var(--ink-900);
  --fg:        #ffffff;
  --fg-soft:   var(--ink-200);
  --fg-mute:   var(--ink-300);
  --line:      color-mix(in srgb, #fff 14%, transparent);
  --line-2:    color-mix(in srgb, #fff 22%, transparent);
  --link:      var(--brand-300);   /* 13.28:1 on the navy */
  --surface:   var(--ink-800);
  --surface-2: var(--ink-800);
  --bg-mute:   var(--ink-800);
  --bg-soft:   var(--ink-800);
  --brand-50:  color-mix(in srgb, #fff 10%, transparent);
  --brand-800: var(--brand-300);
  color: var(--fg-soft);
}
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer b, .site-footer strong { color: #fff; }
.footer-grid { display: grid; gap: 26px; padding-block: 38px 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-grid h3 { font-size: .92rem; margin-bottom: 12px; }
.footer-grid li + li { margin-top: 7px; }
.footer-grid a { font-size: .86rem; color: var(--fg-soft); }
.footer-grid a:hover { color: var(--link); }
@media (max-width: 520px) { .site-footer { padding-bottom: 62px; } }
.footer-bar { border-top: 1px solid var(--line); padding-block: 15px; font-size: .8rem; color: var(--fg-mute); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
/* Navigation blocks are tidy link columns, not clouds of pill-shaped tags:
   a long list of chips at the foot of a page reads as visual noise. */
.lnk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0 22px; }
.lnk-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: .86rem; color: var(--fg-soft);
  border-bottom: 1px solid var(--line);
}
.lnk-list a:hover { color: var(--link); }
.lnk-list a .n { font-size: .74rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; flex: none; }
.lnk-list.tight a { padding: 5px 0; font-size: .84rem; }
.lnk-list.plain a { border-bottom: 0; padding: 4px 0; }

/* plain text POI lists (attractions, shops, transit) */
.poi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 2px 18px; }
.poi-list li { display: flex; gap: 7px; font-size: .86rem; line-height: 1.9; color: var(--fg-soft); }
.poi-list li::before { content: "—"; color: var(--ink-300); flex: none; }

/* --------------------------- breadcrumbs -------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: .8rem; color: var(--fg-mute); padding-block: 10px 0; }
.crumbs a, .crumbs > span { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs > span:last-child { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 760px) { .crumbs > span:last-child { max-width: none; } }
.crumbs a:hover { color: var(--link); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ------------------------------- hero ----------------------------------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--brand-50), var(--bg) 78%); border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 46%; height: 100%; opacity: .5; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, transparent, var(--bg) 88%); }
[dir="rtl"] .hero-bg::after { background: linear-gradient(to right, transparent, var(--bg) 88%); }
@media (max-width: 860px) { .hero-bg { width: 100%; opacity: .22; } .hero-bg::after { background: linear-gradient(to top, var(--bg), transparent 70%); } }
/* The home hero: the photograph spans the whole band. It stays at full strength on the
   side away from the copy and is washed out only behind the headline, so the picture is
   plainly visible and the dark text still reads. */
.hero-wide .hero-bg { inset: 0; width: 100%; opacity: 1; }
.hero-wide .hero-bg img { opacity: .92; }
.hero-wide .hero-bg::after {
  background: linear-gradient(to left,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 86%, transparent) 34%,
    color-mix(in srgb, var(--bg) 22%, transparent) 68%,
    transparent 100%);
}
[dir="rtl"] .hero-wide .hero-bg::after {
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--bg) 22%, transparent) 32%,
    color-mix(in srgb, var(--bg) 86%, transparent) 66%,
    var(--bg) 100%);
}
/* on a phone the copy runs the full width, so the wash has to cover the whole frame */
@media (max-width: 720px) {
  .hero-wide .hero-bg img { opacity: .8; }
  .hero-wide .hero-bg::after,
  [dir="rtl"] .hero-wide .hero-bg::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 55%, transparent) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 55%,
      var(--bg) 100%);
  }
}
.hero-in { position: relative; padding-block: 52px 42px; }
.hero-in h1 { color: var(--fg); }
.hero-in .lead { color: var(--fg-soft); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-stats .chip { background: var(--surface); border: 1px solid var(--line); color: var(--fg-soft); }

/* Magazine articles keep the photo header they always had: full-bleed image with a
   dark scrim so the title stays readable. The homepage hero is the light one. */
.hero-photo { background: var(--ink-900); border-bottom: 0; }
.hero-photo .hero-bg { position: absolute; inset: 0; width: 100%; opacity: 1; }
.hero-photo .hero-bg img { opacity: .55; }
.hero-photo .hero-bg::after,
[dir="rtl"] .hero-photo .hero-bg::after {
  background: linear-gradient(to top, rgba(11, 16, 22, .96), rgba(11, 16, 22, .58) 55%, rgba(11, 16, 22, .34));
}
.hero-photo .hero-in h1 { color: #fff; }
.hero-photo .hero-in .lead, .hero-photo .hero-meta { color: rgba(255, 255, 255, .84); }
.hero-photo .hero-meta a { color: #fff; }
.hero-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .85rem; margin-top: 14px; }
.hero-meta .sep { opacity: .45; }

/* home search */
.searchbox { position: relative; }
.searchbox input {
  width: 100%; padding: 15px 46px 15px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  font-size: 1rem; font-weight: 600; box-shadow: var(--shadow);
}
.searchbox input::placeholder { font-weight: 500; color: var(--fg-mute); }
.searchbox .searchbox-ico { position: absolute; inset-block: 0; inset-inline-start: 15px; display: flex; align-items: center; color: var(--fg-mute); pointer-events: none; }
.ac-list {
  position: absolute; inset-inline: 0; top: calc(100% + 7px); z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto; padding: 6px;
}
.ac-list:empty { display: none; }
.ac-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--radius-xs); text-align: start; }
.ac-item:hover, .ac-item[data-active="1"] { background: var(--brand-50); }
.ac-item .ac-kind { margin-inline-start: auto; font-size: .72rem; color: var(--fg-mute); flex: none; }
.ac-thumb { width: 38px; height: 38px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-mute); flex: none; }

/* a single calm navigation strip (city page: "ready-made lists") */
.quick-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding-block: 12px; border-block: 1px solid var(--line);
}
.quick-nav > a {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: .85rem; font-weight: 700; color: var(--fg-soft);
}
.quick-nav > a:hover { color: var(--link); }
.quick-nav > a .n { font-size: .72rem; font-weight: 600; color: var(--fg-mute); font-variant-numeric: tabular-nums; }

/* --------------------------- section heads ------------------------------ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.sec-head p { font-size: .88rem; color: var(--fg-mute); margin-top: 4px; }
.sec-head a { font-size: .85rem; font-weight: 700; color: var(--link); white-space: nowrap; }

/* ------------------------------- filters -------------------------------- */
/* The rail is taller than the screen in big cities. It scrolls inside itself, so reaching
   the last filter never means scrolling past a hundred hotel cards first. */
/* Side rails scroll on their own.
 *
 * The sticky used to sit on the inner .filters panel, whose parent was exactly as tall as
 * it was — so there was nowhere to travel and the rail simply scrolled away with the page.
 * The grid item is the sticky element now, capped at the viewport and scrolling inside
 * itself, which is what makes the rail and the list independent: the wheel moves whichever
 * one the pointer is over, and `contain` stops the page taking over at the ends.
 * Deliberately unmarked — no extra scrollbar chrome, it just behaves. */
@media (min-width: 1000px) {
  .filters-col, .sticky-side {
    position: sticky; top: calc(var(--header-h) + 12px); align-self: start;
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-gutter: stable;
  }
  /* hotel pages have a second sticky bar (the in-page tabs) between the header and the
     rail; without this the booking button parks half-hidden underneath it */
  .has-toc .filters-col, .has-toc .sticky-side {
    top: calc(var(--header-h) + var(--toc-h) + 12px);
    max-height: calc(100vh - var(--header-h) - var(--toc-h) - 24px);
  }
  .filters-col::-webkit-scrollbar, .sticky-side::-webkit-scrollbar { width: 8px; }
  .filters-col::-webkit-scrollbar-thumb, .sticky-side::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
  .filters-col::-webkit-scrollbar-thumb:hover, .sticky-side::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
}

/* The map that used to sit at the foot of the page, now the first thing in the rail. */
.rail-map { padding: 8px; margin-bottom: 14px; }
.rail-map .zmap-wrap { border-radius: var(--radius-xs); overflow: hidden; }
.rail-map-btn { margin-top: 8px; }
/* while the map is fullscreen, the whole rail (a sticky stacking context) must sit
   above the page — without this the hotel cards painted over the open map */
.zmap-front { z-index: 140 !important; }
.rail-map.zmap-open {
  position: fixed; inset: 12px; z-index: 140; margin: 0; padding: 10px;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px;
  box-shadow: 0 24px 60px rgba(11, 16, 22, .28);
}
.rail-map.zmap-open .zmap-wrap, .rail-map.zmap-open .zmap { height: 100% !important; }
.rail-map.zmap-open .rail-map-btn { margin: 0; }
.fgroup + .fgroup { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.fgroup > h3 { font-size: .87rem; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
.fopt { display: flex; align-items: center; gap: 9px; padding: 5px 2px; cursor: pointer; font-size: .87rem; color: var(--fg-soft); border-radius: var(--radius-xs); }
.fopt:hover { color: var(--fg); }
.fopt input { appearance: none; width: 17px; height: 17px; flex: none; border: 1.6px solid var(--line-2); border-radius: 5px; background: var(--surface); position: relative; transition: background .15s, border-color .15s; }
.fopt input[type="radio"] { border-radius: 50%; }
.fopt input:checked { background: var(--brand-400); border-color: var(--brand-500); }
.fopt input:checked::after { content: ""; position: absolute; inset: 0; background: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121631' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.fopt input[type="radio"]:checked::after { background: none; border: 4.5px solid var(--ink-900); border-radius: 50%; inset: 3.5px; }
.fopt .fcount { margin-inline-start: auto; font-size: .76rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.fopt input:disabled + span { opacity: .45; }
/* ---------------------------- form controls -----------------------------
   Native selects, range sliders and search inputs are drawn by the OS, which on
   Windows looks nothing like the rest of the site. Every control is restyled from
   scratch here; the site is RTL, so the select arrow sits on the physical left. */
select.input, input.input, textarea.input {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg);
  font-family: inherit; font-size: .88rem; line-height: 1.6;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select.input {
  padding-inline-end: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667283' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 15px;
}
select.input::-ms-expand { display: none; }
select.input option { background: var(--surface); color: var(--fg); font-family: inherit; }

/* The option list of a native <select> is drawn by Windows itself and cannot be styled,
 * so any select marked data-selectx is swapped for this listbox once JS runs. The real
 * <select> stays in the DOM (hidden) and keeps carrying the value, so nothing breaks
 * without JS and existing change handlers keep working. */
.selectx { position: relative; display: inline-flex; }
.selectx > select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.selectx-btn {
  display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  padding: 9px 12px; padding-inline-end: 34px; cursor: pointer; text-align: start;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667283' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 11px center / 15px;
  color: var(--fg); font-family: inherit; font-size: .88rem; line-height: 1.6;
  transition: border-color .15s, box-shadow .15s;
}
.selectx-btn:hover { border-color: var(--ink-300); }
.selectx-btn:focus-visible, .selectx[data-open="1"] .selectx-btn {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 22%, transparent);
}
.selectx-menu {
  position: absolute; z-index: 60; inset-inline-start: 0; top: calc(100% + 6px); min-width: 100%;
  max-height: 288px; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); display: none;
}
.selectx[data-open="1"] .selectx-menu { display: block; }
.selectx-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--radius-xs); background: none; cursor: pointer;
  font-family: inherit; font-size: .87rem; color: var(--fg-soft); text-align: start; white-space: nowrap;
}
.selectx-opt:hover, .selectx-opt[data-active="1"] { background: var(--bg-soft); color: var(--fg); }
.selectx-opt[aria-selected="true"] { color: var(--brand-800); font-weight: 700; background: var(--brand-50); }
.selectx-opt .tick { flex: none; width: 14px; opacity: 0; }
.selectx-opt[aria-selected="true"] .tick { opacity: 1; }
textarea.input { line-height: 1.9; resize: vertical; min-height: 116px; }
/* the standalone search fields keep their own sizing but share the look */
.searchbox input, .sheet-search input, .asst-foot input {
  appearance: none; -webkit-appearance: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .sheet-search input:hover, .searchbox input:hover { border-color: var(--ink-300); }
.input:focus, .input:focus-visible,
.sheet-search input:focus, .asst-foot input:focus, .searchbox input:focus {
  outline: none; border-color: var(--brand-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 22%, transparent);
}
.searchbox input:focus { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--brand-400) 22%, transparent); }
.input::placeholder, .sheet-search input::placeholder { color: var(--fg-mute); }
/* the browser's own search affordances don't match the design */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 15px; height: 15px; cursor: pointer;
  background: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667283' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.field { display: block; }
.field > span { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--fg-soft); }

/* range slider — track and thumb drawn to match the buttons */
.range-wrap { padding-inline: 2px; }
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--ink-200);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; margin-top: -6px;
  border-radius: var(--radius-sm); background: var(--brand-500);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(19, 26, 36, .3);
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--ink-200); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: var(--radius-sm);
  background: var(--brand-500); border: 2px solid var(--ink-900); box-shadow: 0 1px 4px rgba(19, 26, 36, .3);
}
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 30%, transparent); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 30%, transparent); }

.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.active-filters .chip { background: var(--brand-50); color: var(--brand-800); padding-inline-end: 5px; }
.active-filters .chip button { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--brand-200); color: var(--brand-800); font-size: .7rem; line-height: 1; }
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .count { font-size: .88rem; color: var(--fg-mute); }
.filter-bar select { max-width: 210px; }
.filters-toggle { display: inline-flex; }
@media (min-width: 1000px) { .filters-toggle { display: none; } }
/* On a phone the filters live in a drawer, but the map must not go with them — it stays
 * in the flow after the list, which is where it always was on a phone. */
@media (max-width: 999px) {
  .filters-col .filters { display: none; }
  .filters-col[data-open="1"] { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow-y: auto; padding: 16px; }
  .filters-col[data-open="1"] .filters { display: block; position: static; }
  .filters-col[data-open="1"] .rail-map { display: none; }
  .rail-map { max-width: 520px; margin-inline: auto; }
}

/* ------------------------------- scores --------------------------------- */
.score-big { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 900; }
.score-big b { font-size: 1.7rem; line-height: 1; }
.score-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-xs); background: var(--ink-800); color: #fff; font-weight: 800; }
.score-pill .t-xs { opacity: 1; font-weight: 700; }
.meter { height: 7px; border-radius: 3px; background: var(--bg-mute); overflow: hidden; }
/* One colour for every value bar: the length is the information, the colour is identity.
   (Bars used to switch navy/yellow on an 8 / 6.5 threshold, which read as random.) */
.meter > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ink-700), var(--ink-500)); }
/* the one compact way a rating number appears in lists and sidebars: navy, tabular */
.score-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 2px 8px; border-radius: var(--radius-xs);
  background: var(--ink-800); color: #fff;
  font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.score-rows { display: grid; gap: 11px; }
.score-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; font-size: .85rem; }
.score-row .num { text-align: end; font-weight: 800; }

/* price band meter (relative — no absolute price anywhere on the site) */
.band { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; row-gap: 3px; }
.band-dots { display: inline-flex; gap: 3px; }
.band-dots i { width: 15px; height: 6px; border-radius: 3px; background: var(--ink-200); }
.band-dots i[data-on="1"] { background: var(--ink-600); }
.band-label { font-size: .8rem; font-weight: 700; color: var(--fg-soft); }

/* ------------------------------ pros/cons ------------------------------- */
.pc { display: grid; gap: 14px; }
@media (min-width: 760px) { .pc { grid-template-columns: 1fr 1fr; } }
.pc-box { border-radius: var(--radius); padding: 16px; border: 1px solid var(--line); }
.pc-box h3 { display: flex; align-items: center; gap: 7px; font-size: .93rem; margin-bottom: 10px; }
.pc-good { background: var(--good-50); border-color: color-mix(in srgb, var(--good-500) 24%, transparent); }
.pc-good h3 { color: var(--good-700); }
.pc-bad { background: var(--warn-50); border-color: color-mix(in srgb, var(--warn-500) 26%, transparent); }
.pc-bad h3 { color: var(--warn-700); }
.pc-box li { display: flex; gap: 8px; font-size: .87rem; line-height: 1.85; color: var(--fg-soft); }
.pc-box li + li { margin-top: 7px; }
.pc-box li::before { content: "•"; color: currentColor; opacity: .55; flex: none; }
.pc-box li em { font-style: normal; color: var(--fg-mute); font-size: .78rem; white-space: nowrap; }

/* ------------------------------- tables --------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tbl { font-size: .88rem; min-width: 520px; }
.tbl th, .tbl td { padding: 11px 13px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl thead th { background: var(--bg-mute); font-size: .82rem; font-weight: 800; white-space: nowrap; position: sticky; top: 0; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--bg-soft); }
.tbl { font-variant-numeric: tabular-nums; }
.tbl .lbl {
  font-weight: 700; color: var(--fg-soft); white-space: nowrap; background: var(--bg-soft);
  position: sticky; inset-inline-start: 0; z-index: 1;
  box-shadow: 1px 0 0 var(--line) inset;
}
.tbl thead th:first-child { z-index: 2; }
/* a hint that the table scrolls sideways on narrow screens */
.table-scroll { position: relative; }
@media (max-width: 760px) {
  .table-scroll::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 26px;
    background: linear-gradient(to left, var(--surface), transparent); pointer-events: none;
  }
  [dir="rtl"] .table-scroll::after { background: linear-gradient(to right, var(--surface), transparent); }
}
.yes { color: var(--ink-700); }
.no { color: var(--ink-300); }
.winner { background: color-mix(in srgb, var(--good-500) 8%, transparent); }
.tbl td.winner { font-weight: 800; }

/* On a phone a wide table is unreadable, so each row becomes its own small card:
 * the first cell is the card title and every other cell shows its column label. */
@media (max-width: 760px) {
  .table-scroll.stacky { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .table-scroll.stacky::after { content: none; }
  .tbl-stack { min-width: 0; width: 100%; display: block; font-size: .88rem; }
  .tbl-stack thead { display: none; }
  .tbl-stack tbody { display: grid; gap: 9px; }
  .tbl-stack tr {
    display: block; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
  }
  .tbl-stack tbody tr:hover { background: var(--surface); }
  .tbl-stack td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start;
  }
  .tbl-stack tr td:last-child { border-bottom: 0; }
  .tbl-stack td.rowhead {
    position: static; inset-inline-start: auto; box-shadow: none; z-index: auto;
    display: block; background: var(--bg-mute); white-space: normal; font-weight: 800;
    color: var(--fg); padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  .tbl-stack td[data-l]::before {
    content: attr(data-l); flex: none; font-size: .8rem; font-weight: 700; color: var(--fg-mute);
  }
  /* the value side keeps its own alignment and may wrap */
  .tbl-stack td[data-l] { min-width: 0; }
  .tbl-stack td.winner { background: color-mix(in srgb, var(--good-500) 10%, transparent); }
  .tbl-stack td .meter { flex: none; }
}

/* ---------------------- the comparison builder ------------------------- */
/* Two dashed boxes that read as "drop a hotel here", a + to add a third, and one
   button underneath. Everything else on the page is a way of filling these boxes. */
.cmp-build { padding: 22px 18px; }
.cmp-build-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cmp-slots { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cmp-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 200px; min-height: 132px; padding: 14px 12px; text-align: center;
  border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--bg-soft);
  color: var(--fg-soft); font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.cmp-slot[data-filled="0"]:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--fg); }
.cmp-slot[data-filled="1"] { border-style: solid; border-color: var(--line); background: var(--surface); padding: 0; }
.cmp-slot-plus {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-xs); background: var(--surface); color: var(--brand-600); border: 1px solid var(--line);
}
.cmp-slot-label { font-weight: 800; font-size: .95rem; color: var(--fg); }
.cmp-slot-main {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; height: 100%;
  padding: 12px; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: center;
}
.cmp-slot-main img {
  width: 100%; height: 62px; object-fit: cover; border-radius: var(--radius-xs); background: var(--bg-mute);
}
.cmp-slot-name {
  font-weight: 800; font-size: .87rem; color: var(--fg); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-slot-clear {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 2;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-mute); cursor: pointer;
}
.cmp-slot-clear:hover { color: var(--bad-700); border-color: var(--bad-300, var(--line-2)); }
.cmp-add {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--surface);
  color: var(--brand-600); cursor: pointer; transition: border-color .15s, background .15s;
}
.cmp-add:hover { border-color: var(--brand-500); background: var(--brand-50); }
.cmp-add[hidden] { display: none; }
.cmp-build-go { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cmp-build-hint { text-align: center; margin-top: 10px; }
.cmp-city-btn { flex: none; }
@media (max-width: 620px) {
  .cmp-build { padding: 16px 14px; }
  .cmp-slots { width: 100%; flex-direction: column; }
  .cmp-slot { width: 100%; min-height: 96px; flex-direction: row; text-align: start; justify-content: flex-start; gap: 12px; }
  .cmp-slot-main { flex-direction: row; align-items: center; text-align: start; }
  .cmp-slot-main img { width: 68px; height: 56px; flex: none; }
  .cmp-slot-main > span:not(.cmp-slot-name):not(.cmp-slot-plus) { display: block; }
  .cmp-build-row { flex-direction: column; align-items: stretch; }
  .cmp-add { width: 100%; height: 40px; }
  .cmp-build-go .btn { flex: 1 1 auto; }
}
/* hotel cards in the city browser under the builder: thumb + name + one meta line */
.cmp-pick2 {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-family: inherit; cursor: pointer; text-align: start; color: var(--fg);
  transition: border-color .15s, box-shadow .15s;
}
.cmp-pick2:hover { border-color: var(--brand-400); box-shadow: var(--shadow-sm); }
.cmp-pick2.on { border-color: var(--brand-400); background: var(--brand-50); }
.cmp-pick2 img { width: 52px; height: 44px; object-fit: cover; border-radius: var(--radius-xs); flex: none; background: var(--bg-mute); }
.cmp-pick2 .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cmp-pick2 .b b { font-size: .84rem; line-height: 1.55; }
.cmp-pick2 .b span { font-size: .74rem; color: var(--fg-mute); }
.cmp-pick2 .ok { color: var(--brand-800); font-weight: 900; flex: none; }

/* rows inside the picker sheet */
.cmp-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; text-align: start;
  border: 1px solid transparent; border-radius: var(--radius-xs); background: none;
  font-family: inherit; cursor: pointer; color: var(--fg);
}
.cmp-pick:hover { background: var(--bg-soft); border-color: var(--line); }
.cmp-pick img { width: 46px; height: 40px; object-fit: cover; border-radius: var(--radius-xs); flex: none; background: var(--bg-mute); }
.cmp-pick .n { font-weight: 700; font-size: .87rem; display: block; }
.cmp-pick .m { font-size: .76rem; color: var(--fg-mute); display: block; margin-top: 2px; }
.cmp-pick[data-on="1"] { border-color: var(--brand-400); background: var(--brand-50); }
.sheet-foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); }

/* «به تفکیک شهر و رده»: one tidy row per city instead of twelve chip-cloud cards */
.cityrank { padding: 6px 18px; }
.cityrank-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 2px; flex-wrap: wrap; }
.cityrank-row + .cityrank-row { border-top: 1px solid var(--line); }
.cityrank-city { font-weight: 800; font-size: .95rem; min-width: 88px; }
.cityrank-city:hover { color: var(--link); }
.cityrank-stars { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.cityrank-stars a { font-size: .84rem; font-weight: 700; color: var(--fg-soft); white-space: nowrap; }
.cityrank-stars a:hover { color: var(--link); }
.cityrank-stars .n { font-size: .74rem; color: var(--fg-mute); font-weight: 600; }
.cityrank-all { margin-inline-start: auto; font-size: .8rem; font-weight: 700; color: var(--link); white-space: nowrap; }
@media (max-width: 620px) { .cityrank-all { margin-inline-start: 0; width: 100%; } }

/* comparison teaser card: both hotels visible side by side */
.cmpc { display: flex; flex-direction: column; height: 100%; }
.cmpc-media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16/8; background: var(--bg-mute); flex: 0 0 auto; }
.cmpc-side { position: relative; overflow: hidden; background: var(--bg-mute); }
.cmpc-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cmpc:hover .cmpc-side img { transform: scale(1.05); }
.cmpc-score {
  position: absolute; inset-block-start: 7px; inset-inline-start: 7px;
  padding: 2px 7px; border-radius: var(--radius-xs);
  background: rgba(19, 26, 36, .82); color: #fff; backdrop-filter: blur(6px);
  font-size: .78rem; font-weight: 800;
}
.cmpc-vs {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: var(--ink-900); color: #fff;
  font-size: .7rem; font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--surface);
}
.cmpc-body { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 14px; flex: 1 1 auto; }
.cmpc-title { font-size: .95rem; font-weight: 800; line-height: 1.6; }
.cmpc-meta { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--fg-mute); flex-wrap: wrap; }
.cmpc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.cmpc-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--brand-800); }

/* compare */
.cmp-heads { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-heads.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-heads.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cmp-heads.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cmp-head { text-align: center; }
.cmp-head img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-mute); }
.cmp-head h2 { font-size: .98rem; margin-top: 10px; }
/* reads as a deliberate divider between the two hotel headers */
.cmp-vs { display: flex; align-items: center; gap: 14px; margin-block: 10px 20px; }
.cmp-vs::before, .cmp-vs::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.cmp-vs span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--ink-900); color: #fff; font-weight: 900; font-size: .82rem; flex: none; }
.cmp-verdict { border-inline-start: 4px solid var(--brand-500); background: var(--brand-50); padding: 16px 18px; border-radius: var(--radius); }
.cmp-verdict h3 { color: var(--brand-800); margin-bottom: 8px; }
.cmp-verdict p { font-size: .92rem; line-height: 1.95; color: var(--fg-soft); }
.cmp-verdict p + p { margin-top: 8px; }
.pick-slot {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1.6px dashed var(--line-2); border-radius: var(--radius); background: var(--surface-2);
  min-height: 68px; width: 100%; text-align: start;
}
.pick-slot[data-filled="1"] { border-style: solid; border-color: var(--brand-300); background: var(--brand-50); }
.pick-slot img { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }

/* ------------------------------ gallery --------------------------------- */
/* Gallery — the column layout follows the number of photos so there is never an
   empty cell (the dataset is mostly 4- and 6-photo hotels). */
/* Full-width mosaic: the hero photo owns the start side, small shots stack beside it.
   The variant classes are «hero + N thumbs» — the hero is always the first button. */
.gal { display: grid; gap: 8px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/8; max-height: 520px; width: 100%; }
.gal > button { background: var(--bg-mute); overflow: hidden; position: relative; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gal > button:hover img { transform: scale(1.05); }
.gal-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 16, 22, .55); color: #fff; font-weight: 800; font-size: .9rem; gap: 6px; grid-auto-flow: column; }
.gal-count {
  position: absolute; inset-block-end: 9px; inset-inline-start: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--radius-sm);
  background: rgba(11, 16, 22, .68); color: #fff; backdrop-filter: blur(6px);
  font-size: .74rem; font-weight: 700;
}
.gal-2 { grid-template-columns: 1.7fr 1fr; aspect-ratio: 21/7; }
.gal-3 { grid-template-columns: 2.4fr 1fr; grid-template-rows: repeat(2, 1fr); }
.gal-3 > button:first-child { grid-row: span 2; }
.gal-4 { grid-template-columns: 2.7fr 1fr; grid-template-rows: repeat(3, 1fr); }
.gal-4 > button:first-child { grid-row: span 3; }
.gal-5 { grid-template-columns: 2.4fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); }
.gal-5 > button:first-child { grid-row: span 2; }
.gal-7 { grid-template-columns: 2.6fr 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.gal-7 > button:first-child { grid-row: span 3; }
@media (max-width: 700px) {
  .gal { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(2, 1fr) !important; aspect-ratio: 4/3; max-height: none; }
  .gal > button:first-child { grid-column: span 2 !important; grid-row: span 1 !important; }
  .gal > button:nth-child(n+4) { display: none; }
  .gal-2, .gal-3, .gal-4 { grid-template-rows: 1.4fr 1fr !important; }
}
.gal-single { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/8; max-height: 520px; background: var(--bg-mute); }

/* Room cards: photo at the start, the registered details beside it, capacity badge.
   One card per room type — replaced the photo strip + table (owner, 2026-08-23). */
.room-cards { display: grid; gap: 12px; }
.room-card {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.room-card-media {
  flex: 0 0 218px; min-height: 128px; padding: 0; cursor: zoom-in;
  background: var(--bg-mute); position: relative; overflow: hidden;
}
.room-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.room-card-media:hover img { transform: scale(1.05); }
.room-card-media:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -3px; }
.room-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0; flex: 1 1 auto; }
.room-card-name { font-size: .98rem; font-weight: 800; }
.room-card-details { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.room-card-details li { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--fg-soft); }
.room-card-details li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-300); flex: none; }
.room-card-cap {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 700; color: var(--ink-700);
}
@media (max-width: 620px) {
  .room-card { flex-direction: column; }
  .room-card-media { flex: none; width: 100%; aspect-ratio: 16/8; min-height: 0; }
}

/* Room photos above the room table. A strip rather than a mosaic: the pictures belong to
 * the hotel's rooms but nothing records which photo is which room type, so they read as
 * a set instead of pretending to caption individual rows. Scrolls inside itself. */
.room-shots {
  display: flex; gap: 8px; overflow-x: auto; padding-block-end: 4px; margin-block-end: 14px;
  scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: thin;
}
.room-shots > button {
  flex: 0 0 auto; inline-size: 186px; aspect-ratio: 4/3; scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-mute); padding: 0; cursor: zoom-in;
}
.room-shots img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.room-shots > button:hover img { transform: scale(1.05); }
.room-shots > button:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
@media (max-width: 700px) { .room-shots > button { inline-size: 148px; } }
.gal-single img { width: 100%; height: 100%; object-fit: cover; }

.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(6, 9, 13, .93); display: none; align-items: center; justify-content: center; }
.lightbox[data-open="1"] { display: flex; }
/* Some hotels only have ~400px photos; without the min-height they float as a tiny
   stamp in the dark overlay. A moderate upscale reads better than a lost thumbnail. */
.lightbox img { max-width: 94vw; max-height: 84vh; min-height: min(58vh, 520px); width: auto; object-fit: contain; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); }
.lightbox nav { position: absolute; inset-block-end: 22px; display: flex; gap: 10px; align-items: center; color: #fff; font-size: .85rem; }
.lightbox nav button { color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .16); font-weight: 700; }
.lightbox > button.close { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; color: #fff; width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .16); font-size: 1.1rem; }

/* ---------------------------- glance strip ------------------------------ */
/* The hotel header's single facts strip: hairline-separated cells on one surface,
   replacing the old chip row + floating boxes + stat grid that repeated each other. */
.glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.glance-cell { background: var(--surface); padding: 13px 16px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.glance-cell .gk { font-size: .74rem; color: var(--fg-mute); font-weight: 600; }
.glance-cell .gv { display: flex; align-items: center; min-height: 26px; flex-wrap: wrap; row-gap: 4px; }
.glance-cell .gv.gb { font-weight: 800; font-size: 1.02rem; color: var(--ink-800); }
.glance-cell .gs { font-size: .74rem; color: var(--fg-soft); }
/* the inline padding keeps the 44px-ish tap size without growing the caption visually */
.glance-cell .gs a { color: var(--link); font-weight: 700; display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (max-width: 700px) {
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance-cell:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ------------------------------- facts ---------------------------------- */
.facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; }
.fact .k { font-size: .74rem; color: var(--fg-mute); }
.fact .v { font-size: .95rem; font-weight: 800; margin-top: 3px; }
.amen-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.amen { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .87rem; background: var(--surface); }
.amen svg { color: var(--brand-600); flex: none; }
.amen.off { color: var(--fg-mute); background: var(--bg-soft); }
.amen.off svg { color: var(--ink-300); }

/* distance / access list */
.dist-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dist { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.dist-ico { display: grid; place-items: center; width: 33px; height: 33px; border-radius: var(--radius-sm); background: var(--brand-50); color: var(--brand-800); flex: none; }
.dist-ico.car { background: var(--ink-50); color: var(--ink-700); }
.dist .grow { font-size: .89rem; font-weight: 600; }
.dist .val { font-size: .82rem; color: var(--fg-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------ accordion ------------------------------- */
.acc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.acc details + details { border-top: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: .92rem; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; margin-inline-start: auto; font-size: 1.15rem; color: var(--fg-mute); font-weight: 500; }
.acc details[open] summary::after { content: "−"; }
.acc details[open] summary { color: var(--brand-800); }
.acc .acc-body { padding: 0 16px 15px; font-size: .89rem; line-height: 1.95; color: var(--fg-soft); }

/* ------------------------------ comments -------------------------------- */
.cm-list { display: grid; gap: 12px; }
.cm { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.cm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cm-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--brand-100); color: var(--brand-800); font-weight: 800; font-size: .84rem; flex: none; }
.cm-name { font-weight: 700; font-size: .9rem; }
.cm-date { font-size: .75rem; color: var(--fg-mute); }
.cm-body { font-size: .89rem; line-height: 1.95; color: var(--fg-soft); }
.cm-reply { margin-top: 11px; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--brand-50); border-inline-start: 3px solid var(--brand-400); font-size: .86rem; }
.cm-reply b { color: var(--brand-800); }
/* Rating is a 1–10 scale, not stars: stars already mean the hotel's official class,
   and 1–10 is the same scale every guest score on the site uses. */
.rate-scale { display: flex; flex-wrap: wrap; gap: 5px; }
.rate-scale input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rate-scale label {
  display: grid; place-items: center; min-width: 34px; height: 36px; padding-inline: 4px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg-soft);
  font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .13s, border-color .13s, color .13s;
}
.rate-scale label:hover { border-color: var(--brand-400); color: var(--brand-800); background: var(--brand-50); }
.rate-scale input:checked + label {
  background: var(--brand-400); border-color: var(--brand-500); color: var(--ink-900);
}
.rate-scale input:focus-visible + label {
  outline: 2px solid var(--brand-500); outline-offset: 2px;
}
.form-note { font-size: .8rem; color: var(--fg-mute); }
.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: .87rem; font-weight: 600; }
.alert-good { background: var(--good-50); color: var(--good-700); }
.alert-bad { background: var(--bad-50); color: var(--bad-700); }
.alert-info { background: var(--brand-50); color: var(--brand-800); }

/* ------------------------------ assistant ------------------------------- */
.asst-fab {
  position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 17px; border-radius: var(--radius-sm);
  background: var(--ink-900); color: #fff; font-weight: 800; font-size: .88rem;
  box-shadow: var(--shadow-lg);
}
.asst-fab:hover { background: var(--ink-800); }
/* The dot is the brand, not a foreign "online" green — green does not exist in this palette. */
.asst-fab i { display: grid; place-items: center; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-400); box-shadow: 0 0 0 3px rgba(255, 210, 0, .22); }
.asst {
  position: fixed; inset-block-end: 0; inset-inline-end: 0; z-index: 100;
  width: min(410px, 100vw); height: min(660px, 100dvh);
  display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (min-width: 520px) { .asst { inset-block-end: 16px; inset-inline-end: 16px; border-radius: var(--radius-lg); } }
.asst[data-open="1"] { display: flex; }
/* The head is the same Outer Space block as the footer — the assistant belongs to the
   site, not to a third-party chat vendor. Semantic tokens are redefined the same way. */
.asst-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ink-900); color: #fff; }
.asst-head .ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--brand-400); color: var(--ink-900); flex: none; }
.asst-head b { font-size: .93rem; display: block; }
.asst-head small { font-size: .74rem; color: var(--ink-300); }
.asst-head .icon-btn { background: transparent; border-color: var(--ink-600); color: var(--ink-200); }
.asst-head .icon-btn:hover { background: var(--ink-800); color: #fff; border-color: var(--ink-500); }
.asst-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: var(--radius); font-size: .88rem; line-height: 1.85; white-space: pre-wrap; }
.msg.bot { background: var(--ink-50); color: var(--ink-800); align-self: flex-start; border-start-start-radius: 4px; }
.msg.me { background: var(--brand-400); color: var(--ink-900); align-self: flex-end; border-start-end-radius: 4px; }
.msg.typing { display: inline-flex; gap: 4px; align-items: center; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); animation: blink 1.2s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .2s; }
.msg.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.asst-cards { display: grid; gap: 7px; align-self: stretch; }
.asst-card { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.asst-card:hover { border-color: var(--brand-300); background: var(--brand-50); }
.asst-card img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--bg-mute); }
.asst-card b { font-size: .85rem; display: block; }
.asst-card small { font-size: .74rem; color: var(--fg-mute); }
.asst-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.asst-chips button { font-size: .78rem; padding: 6px 11px; border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-soft); font-weight: 600; border: 1px solid var(--line-2); }
.asst-chips button:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-800); }
.asst-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.asst-foot input { flex: 1 1 auto; padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); font-size: .89rem; }
.asst-foot button { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--brand-400); color: var(--ink-900); display: grid; place-items: center; flex: none; }
.asst-foot button:hover { background: var(--brand-500); }

/* the assistant's "have someone follow this up" form, collapsed until asked for */
.asst-lead { border-top: 1px solid var(--line); background: var(--surface); padding: 10px 12px; }
.asst-lead-open {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px;
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--bg-soft);
  color: var(--fg-soft); font-family: inherit; font-size: .82rem; cursor: pointer;
}
.asst-lead-open:hover { color: var(--fg); border-color: var(--ink-300); }
.asst-lead-form { display: none; }
.asst-lead[data-step="form"] .asst-lead-open { display: none; }
.asst-lead[data-step="form"] .asst-lead-form { display: block; }
.asst-lead[data-step="done"] { display: none; }
.asst-lead .input { min-height: 36px; padding: 7px 10px; font-size: .84rem; }

/* ------------------------------ سفرنامه --------------------------------- */
/* Visitor stories are the one place on the site with a personal voice, so they get a
   warmer, more editorial treatment than the hotel pages — while staying inside the
   same palette and the 5px radius. */
/* the hand-made banner: the picture is the section, one line of type sits over it */
.jr-banner { position: relative; overflow: hidden; background: var(--ink-900); }
.jr-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,17,24,.18) 0%, rgba(12,17,24,.42) 55%, rgba(12,17,24,.72) 100%);
}
.jr-banner-in { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2; padding-block: 26px; }
/* the line and the button below it share one centre axis */
.jr-banner h1 {
  color: #fff; font-size: clamp(1.15rem, .85rem + 1.5vw, 2.05rem); line-height: 1.7;
  max-width: 26ch; margin-inline: auto; text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
@media (min-width: 900px) { .jr-banner { max-height: 420px; } }
.jr-banner-cta { display: flex; justify-content: center; margin-top: -26px; position: relative; z-index: 3; }
.jr-banner-cta .btn { box-shadow: var(--shadow-lg); }

.jr-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.jr-card {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jr-card:hover { border-color: var(--ink-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.jr-media { position: relative; display: block; aspect-ratio: 16/10; background: var(--bg-mute); overflow: hidden; }
.jr-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.jr-card:hover .jr-media img { transform: scale(1.04); }
.jr-media-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-300); }
.jr-badge {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  border-radius: var(--radius-xs); background: var(--surface); color: var(--brand-800);
  font-size: .74rem; font-weight: 800; box-shadow: var(--shadow-sm);
}
.jr-body { display: flex; flex-direction: column; gap: 8px; padding: 15px; min-width: 0; }
.jr-title { font-size: .98rem; line-height: 1.7; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jr-excerpt { font-size: .85rem; line-height: 1.9; color: var(--fg-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jr-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--fg-mute); }
.jr-ava {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-800); font-weight: 800; font-size: .8rem;
}
.jr-ava-lg { width: 42px; height: 42px; font-size: 1.05rem; }
@media (min-width: 760px) {
  .jr-card-big { flex-direction: row; align-items: stretch; }
  .jr-card-big .jr-media { flex: 0 0 46%; aspect-ratio: auto; }
  .jr-card-big .jr-body { padding: 24px; justify-content: center; }
  .jr-card-big .jr-title { font-size: 1.3rem; -webkit-line-clamp: 3; }
  .jr-card-big .jr-excerpt { font-size: .92rem; -webkit-line-clamp: 4; }
}
.jr-idea-ic {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-xs);
  background: var(--brand-50); color: var(--brand-800);
}
.jr-single-hero { min-height: 340px; display: grid; align-items: end; }
.jr-single-hero .hero-in { padding-block: 70px 30px; }
.jr-single-hero h1, .jr-single-hero .eyebrow { color: #fff; }
.jr-single-hero h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, .45); }
.jr-single-hero-plain { background: linear-gradient(140deg, var(--ink-900), var(--brand-700)); min-height: 250px; }
.jr-byline { display: flex; align-items: center; gap: 11px; margin-top: 18px; color: #fff; }
.jr-byline b { display: block; font-size: .95rem; }
.jr-byline .t-sm { opacity: .8; }
.jr-byline .jr-ava { background: rgba(255, 255, 255, .16); color: #fff; }
.jr-likes { display: inline-flex; align-items: center; gap: 4px; color: var(--bad-500); }

/* like + share, the two things a reader does with a story */
.jr-react {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.jr-like, .jr-share-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface);
  font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--fg-soft);
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.jr-like:hover, .jr-share-btn:hover { border-color: var(--ink-300); color: var(--fg); }
.jr-like { color: var(--fg); }
.jr-like .ic { color: var(--bad-500); }
.jr-like[aria-pressed="true"] { background: var(--bad-50); border-color: color-mix(in srgb, var(--bad-500) 35%, transparent); color: var(--bad-700); }
.jr-like[aria-pressed="true"] .ic { fill: var(--bad-500); }
.jr-like:active { transform: scale(.96); }
.jr-like-n { font-variant-numeric: tabular-nums; min-width: 1ch; }
.jr-share-btn:last-child { margin-inline-start: auto; }
@media (max-width: 560px) { .jr-share-btn:last-child { margin-inline-start: 0; } }
.jr-prose p { font-size: 1.02rem; }
.jr-shots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.jr-shot { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.jr-shot img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.jr-author {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
/* the writing page */
.jr-textarea { min-height: 260px; line-height: 2.05; }
.jr-drop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px;
  border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--bg-soft);
}
.jr-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.jr-thumb { position: relative; width: 96px; height: 74px; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--line); }
.jr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jr-thumb button {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: var(--radius-xs); border: 0;
  background: rgba(19, 26, 36, .72); color: #fff; cursor: pointer; font-size: .8rem;
}
.jr-thumb.is-cover::after {
  content: "عکس اصلی"; position: absolute; inset-block-end: 0; inset-inline: 0;
  background: rgba(19, 26, 36, .72); color: #fff; font-size: .66rem; text-align: center; padding: 2px;
}
.adm-shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.adm-shots img { width: 92px; height: 70px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--line); }
.adm-jr-body { margin-top: 10px; white-space: pre-wrap; max-height: 190px; overflow: auto; }

/* the write-up shows its first paragraph; the rest waits behind the button */
.hotel-about .hotel-about-rest { display: none; }
.hotel-about[data-open="1"] .hotel-about-rest { display: block; }
.hotel-about[data-open="1"] .hotel-about-rest > p:first-child { margin-top: 1.1em; }

/* On a phone there is no sidebar to hold the booking button, and the box itself scrolls
   out of sight — so the most important action on the page rides along in a slim bar. */
.book-bar { display: none; }
@media (max-width: 1000px) {
  .book-bar {
    display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 82;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(8px); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(19, 26, 36, .1);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  }
  .book-bar-in { display: flex; align-items: center; gap: 12px; max-width: 720px; margin-inline: auto; }
  .book-bar-text { display: grid; min-width: 0; line-height: 1.5; }
  .book-bar-text b {
    font-size: .85rem; color: var(--fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .book-bar-text .t-xs { color: var(--fg-mute); }
  .book-bar .btn { flex: none; margin-inline-start: auto; }
  /* room for the bar, and the assistant button steps above it */
  body.has-book-bar { padding-block-end: 68px; }
  body.has-book-bar .asst-fab { inset-block-end: calc(68px + env(safe-area-inset-bottom)); }
  body.has-book-bar .asst { max-height: calc(100dvh - 96px); }
}

/* ------------------------------ booking box ------------------------------ */
/* The one place on a hotel page that leads somewhere else, so it is allowed to be loud
   — but it stays a card, not a banner, and it never claims to know the price. */
.book-box {
  border: 1px solid var(--brand-300); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-50), var(--surface) 70%);
  padding: 18px;
}
.book-box-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.book-ic {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-sm); background: var(--brand-400); color: var(--ink-900);
}
.book-box-head .btn { flex: none; }
.book-list { display: grid; gap: 10px; }
.book-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.book-row:hover { border-color: var(--brand-400); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.book-name { display: grid; gap: 3px; min-width: 0; }
.book-name b { font-size: .95rem; color: var(--fg); }
@media (max-width: 560px) {
  .book-box-head { flex-direction: column; align-items: stretch; text-align: start; }
  .book-box-head .btn { width: 100%; justify-content: center; }
  .book-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .book-row .btn { width: 100%; justify-content: center; }
}

/* magazine hub: the newest article as a wide split card above the grid */
.post-feature { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 280px; }
.post-feature-media { position: relative; background: var(--bg-mute); overflow: hidden; }
.post-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-feature:hover .post-feature-media img { transform: scale(1.04); }
.post-feature-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; min-width: 0; }
.post-feature-body > b { font-size: 1.28rem; font-weight: 800; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-feature-excerpt { font-size: .9rem; line-height: 1.95; color: var(--fg-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-feature-cta { margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--link); }
@media (max-width: 760px) {
  .post-feature { grid-template-columns: 1fr; min-height: 0; }
  .post-feature-media { aspect-ratio: 16/9; }
  .post-feature-body { padding: 16px; }
}

/* ----------------------------- single post ------------------------------ */
/* A standard article page: header block, big cover, prose, author box.
   The rail sits on the LEFT here (owner's request) — same grid, mirrored. */
.with-side.side-left > aside { order: 2; }
.with-side.side-left > :not(aside) { order: 1; }
@media (min-width: 1000px) {
  .with-side.side-left { grid-template-columns: minmax(0, 1fr) 292px; }
}
.post-head { padding-block: 10px 4px; }
.post-head h1 { margin-top: 10px; max-width: 30ch; }
.post-byline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.post-author { display: inline-flex; align-items: center; gap: 9px; }
.post-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.post-author b { display: block; font-size: .88rem; line-height: 1.5; }
.post-author small { display: block; font-size: .72rem; color: var(--fg-mute); }
.post-byline-meta { font-size: .8rem; color: var(--fg-mute); }
.post-cover { margin-block: 18px 24px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-mute); border: 1px solid var(--line); }
.post-cover img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.post-prose { max-width: 76ch; }
.post-authorbox {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 34px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--bg-soft);
}
.post-authorbox img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; }
.post-authorbox b { font-size: .95rem; }

/* ------------------------------- prose ---------------------------------- */
.prose { font-size: 1rem; line-height: 2.05; color: var(--fg-soft); }
/* Persian body copy reads best justified; headings and short lines stay ragged. */
.prose p, .prose li { text-align: justify; text-justify: inter-word; }
.prose > * + * { margin-top: 1.1em; }
.prose > p:first-child { margin-top: 0; }
.prose h2 { font-size: 1.32rem; color: var(--fg); margin-top: 1.9em; }
.prose h3 { font-size: 1.1rem; color: var(--fg); margin-top: 1.6em; }
.prose h4 { font-size: 1rem; color: var(--fg); margin-top: 1.4em; }
.prose a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong, .prose b { color: var(--fg); font-weight: 800; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose ul > li { list-style: disc; }
.prose ol > li { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--brand-400); }
.prose img, .prose figure img { border-radius: var(--radius); width: 100%; }
.prose figure { margin-block: 1.6em; }
.prose figcaption { font-size: .82rem; color: var(--fg-mute); text-align: center; margin-top: .6em; }
.prose blockquote { border-inline-start: 3px solid var(--brand-400); background: var(--bg-soft); padding: 12px 16px; border-radius: var(--radius-sm); font-size: .96rem; }
.prose table { font-size: .88rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 11px; }
.prose th { background: var(--bg-mute); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.prose code { background: var(--bg-mute); padding: 2px 6px; border-radius: 5px; font-size: .88em; }
.prose iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }

/* ---------------------- magazine explorer map --------------------------- */
/* The hub header's Iran map: city pills on a country view, article pins with a
   card (read + directions) once a city is picked. position:relative + z-index:0
   fences Leaflet's tall pane z-indexes in, so the site header stays on top. */
.magmap-wrap {
  position: relative; z-index: 0; margin-top: 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-mute);
}
#magmap { height: clamp(420px, 56vh, 560px); width: 100%; }
@media (max-width: 700px) { #magmap { height: 420px; } }
.magmap-chips {
  position: absolute; z-index: 900; inset-inline: 10px; top: 10px;
  display: flex; gap: 6px; overflow-x: auto; padding: 2px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(to left, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.magmap-chips::-webkit-scrollbar { display: none; }
.mm-chip {
  flex: none; padding: 6px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); font-size: .8rem; font-weight: 700; color: var(--fg-soft);
  box-shadow: var(--shadow-xs); white-space: nowrap; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mm-chip:hover { border-color: var(--brand-400); color: var(--brand-800); }
.mm-chip.is-on { background: var(--brand-400); border-color: var(--brand-500); color: var(--ink-900); }
.magmap-back { position: absolute; z-index: 900; inset-inline-start: 12px; bottom: 12px; box-shadow: var(--shadow); }
.magmap-hint {
  position: absolute; z-index: 900; inset-inline-start: 12px; bottom: 12px; margin: 0;
  padding: 6px 11px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--fg-soft); max-width: min(70%, 460px);
}
.mm-wrap { background: none; border: 0; }
.mm-city {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-block; padding: 4px 11px; border-radius: var(--radius-sm);
  background: var(--ink-900); color: #fff; font-size: .78rem; font-weight: 800;
  white-space: nowrap; border: 1.5px solid #fff;
  box-shadow: 0 2px 8px rgba(19, 26, 36, .4); cursor: pointer;
  transition: background .12s, transform .12s;
}
.mm-city:hover { background: var(--ink-700); transform: translate(-50%, -50%) scale(1.07); }
.mm-pin { transition: transform .12s; transform-origin: bottom center; cursor: pointer; }
.mm-wrap:hover .mm-pin { transform: scale(1.15); }
.mm-pop { direction: rtl; }
.mm-pop img { width: 100%; height: 108px; object-fit: cover; display: block; background: var(--bg-mute); }
.mm-pop-b { display: block; padding: 10px 12px 12px; }
.mm-pop-b > b { display: block; font-size: .88rem; font-weight: 800; line-height: 1.6; color: var(--fg); }
.mm-pop-m { display: block; font-size: .74rem; color: var(--fg-mute); margin-top: 2px; }
.mm-pop-acts { display: flex; gap: 6px; margin-top: 10px; }
.mm-pop-acts .btn-sm { padding: 6px 10px; font-size: .78rem; }

/* --------------------------- map & misc --------------------------------- */
.zmap-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-mute); }
.zmap { width: 100%; height: 420px; }
@media (max-width: 700px) { .zmap { height: 330px; } }
.zmap .leaflet-container { font: inherit; background: var(--bg-mute); }
/* stock OSM tiles are loud; desaturating them makes the navy/yellow pins the subject */
.zmap .leaflet-tile-pane { filter: grayscale(.45) saturate(.75) contrast(.97) brightness(1.02); }
.zmap .leaflet-control-attribution { font-size: .66rem; }
.zmap .leaflet-bar a, .zmap .leaflet-control-zoom a { border-radius: var(--radius-xs) !important; color: var(--fg) !important; }
.zmark-wrap { background: none; border: 0; }
.zmark {
  display: grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-xs); background: var(--brand-400); color: var(--ink-900);
  font-size: .7rem; font-weight: 800; font-family: inherit;
  box-shadow: 0 1px 4px rgba(19, 26, 36, .35); border: 1px solid rgba(255, 255, 255, .8);
  transition: transform .12s;
}
.zmark-wrap:hover .zmark { transform: scale(1.14); z-index: 5; }
.zcluster {
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--ink-900); color: #fff; font-size: .8rem; font-weight: 800;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(19, 26, 36, .4);
  transition: transform .12s;
}
.zmark-wrap:hover .zcluster { transform: scale(1.1); }
.zmap .leaflet-popup-content-wrapper { border-radius: var(--radius); padding: 0; overflow: hidden; box-shadow: var(--shadow-lg); }
/* Leaflet measures the content and writes an inline width; "auto" defeated that and the
   card collapsed to one word per line. A fixed card width is what Leaflet expects. */
.zmap .leaflet-popup-content { margin: 0; width: 224px !important; }
.zmap .leaflet-popup-close-button {
  inset-inline-end: 4px !important; inset-inline-start: auto !important; top: 3px !important;
  color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); z-index: 2;
}
.zmap .leaflet-popup-tip { box-shadow: none; }
.zmap-card { display: block; width: 224px; color: var(--fg); }
.zmap-card img { width: 100%; height: 104px; object-fit: cover; display: block; }
.zmap-card-b { display: block; padding: 9px 11px 11px; }
.zmap-card-b b { font-size: .88rem; font-weight: 800; display: block; line-height: 1.6; }
.zmap-card-m { display: block; font-size: .74rem; color: var(--fg-mute); margin-top: 2px; }
/* Leaflet's stylesheet is injected at runtime, so it lands after ours and wins on
   equal specificity — hence the !important. Its stock link blue belongs to no part
   of this palette, and its grey attribution strip fails AA at 11px. */
.leaflet-container .leaflet-control-attribution { background: #fff !important; color: var(--ink-600) !important; }
.leaflet-container .leaflet-control-attribution a { color: var(--brand-800) !important; }
.zmap-card-cta { display: block; margin-top: 7px; font-size: .78rem; font-weight: 800; color: var(--brand-800); }

.toc { display: flex; gap: 4px; overflow-x: auto; padding-block: 8px; border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); z-index: 40; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc { -webkit-mask-image: linear-gradient(to left, transparent, #000 18px, #000 calc(100% - 18px), transparent);
       mask-image: linear-gradient(to left, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
@media (min-width: 1000px) { .toc { -webkit-mask-image: none; mask-image: none; } }
.toc a { padding: 7px 12px; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 700; color: var(--fg-mute); white-space: nowrap; }
.toc a:hover, .toc a[aria-current="true"] { background: var(--brand-50); color: var(--brand-800); }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 38px; padding: 8px 11px; border-radius: var(--radius-xs); border: 1px solid var(--line); text-align: center; font-size: .86rem; font-weight: 700; color: var(--fg-soft); }
.pager a:hover { border-color: var(--brand-300); color: var(--brand-800); }
.pager [aria-current="page"] { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.empty { text-align: center; padding: 46px 20px; color: var(--fg-mute); }
.empty svg { margin: 0 auto 12px; color: var(--ink-300); }
.ribbon { display: inline-block; padding: 3px 9px; border-radius: var(--radius-xs); background: var(--accent-100); color: var(--accent-700); font-size: .74rem; font-weight: 800; }

/* --------------------------------- admin -------------------------------- */
.adm-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 20px; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button { padding: 10px 14px; font-size: .88rem; font-weight: 700; color: var(--fg-mute); border-bottom: 2px solid transparent; white-space: nowrap; }
.adm-tabs button[aria-selected="true"] { color: var(--brand-800); border-bottom-color: var(--brand-600); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; }
.kpi .k { font-size: .78rem; color: var(--fg-mute); }
.kpi .v { font-size: 1.5rem; font-weight: 900; margin-top: 4px; font-variant-numeric: tabular-nums; }
.adm-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.adm-row + .adm-row { margin-top: 10px; }

/* one collapsible card per person in the «مشتریان» tab */
.adm-person { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.adm-person + .adm-person { margin-top: 10px; }
.adm-person > summary {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; cursor: pointer; list-style: none;
}
.adm-person > summary::-webkit-details-marker { display: none; }
.adm-person > summary:hover { background: var(--bg-soft); }
.adm-person[open] > summary { border-bottom: 1px solid var(--line); }
.adm-person-body { padding: 6px 14px 14px; }
.adm-act { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.adm-act:last-child { border-bottom: 0; }
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: .74rem; font-weight: 800; }
.badge-pending { background: var(--warn-50); color: var(--warn-700); }
.badge-ok { background: var(--good-50); color: var(--good-700); }
.badge-no { background: var(--bad-50); color: var(--bad-700); }

.media-failed { display: none !important; }
img.media-failed { visibility: hidden; }
/* a card keeps its media box when the photo dies — hiding it broke the grid's rhythm */
.hcard-media.media-failed { display: block !important; }
.hcard-media.media-failed img { display: none; }

/* ------------------------------ animation ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }