/* ==========================================================================
   ۳۲۰۸ — سیستم طراحی دایرکتوری عمومی
   RTL، تاریک/روشن خودکار، بدون وابستگی خارجی
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
}

@layer tokens {
  :root {
    /* رنگ برند — بنفش/آبی با لهجه‌ی گرم */
    --brand-50:  #fdecef;
    --brand-100: #f9d2d9;
    --brand-200: #f3a8b6;
    --brand-400: #f06b86;
    --brand-500: #ED3354;
    --brand-600: #d11e44;
    --brand-700: #a11635;
    --accent:    #0c6b6e;
    --accent-2:  #ED3354;
    --mint:      #0c6b6e;

    --bg:        #f6f3ee;
    --bg-soft:   #efe8dc;
    --surface:   #ffffff;
    --surface-2: #f8fafc;
    --border:    #e6e9f0;
    --border-strong: #d3d8e4;
    --text:      #0f172a;
    --text-soft: #475569;
    --text-mute: #94a3b8;

    --danger: #e11d48;
    --star:   #f59e0b;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .07);
    --shadow:    0 10px 30px -12px rgba(15, 23, 42, .18);
    --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .28);
    --ring: 0 0 0 3px var(--brand-100);

    --header-h: 78px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --font: Vazirmatn, 'Segoe UI', Tahoma, system-ui, sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:        #0b1020;
      --bg-soft:   #0f1629;
      --surface:   #131a2e;
      --surface-2: #182238;
      --border:    #24304a;
      --border-strong: #33415f;
      --text:      #eef2ff;
      --text-soft: #b7c0d8;
      --text-mute: #7f8bab;
      --brand-50:  #1a2140;
      --brand-100: #22305c;
      --shadow:    0 10px 30px -12px rgba(0, 0, 0, .6);
      --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
      --ring: 0 0 0 3px rgba(99, 102, 241, .35);
    }
  }

  :root[data-theme="dark"] {
    --bg:        #0b1020;
    --bg-soft:   #0f1629;
    --surface:   #131a2e;
    --surface-2: #182238;
    --border:    #24304a;
    --border-strong: #33415f;
    --text:      #eef2ff;
    --text-soft: #b7c0d8;
    --text-mute: #7f8bab;
    --brand-50:  #1a2140;
    --brand-100: #22305c;
    --shadow:    0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
    --ring: 0 0 0 3px rgba(99, 102, 241, .35);
  }
}

@layer base {
  /* در RTL، سرریز افقی یک ناحیه‌ی اسکرول به چپ می‌سازد؛ clip بدون ساختن
     scroll container جلوی آن را می‌گیرد و sticky بودن هدر را هم خراب نمی‌کند */
  html { overflow-x: clip; }

  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.85;
    overflow-x: hidden;
    overflow-x: clip;
  }

  h1, h2, h3, h4 { line-height: 1.45; font-weight: 800; letter-spacing: -.01em; }
  h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
  h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
  h3 { font-size: 1.05rem; }

  ::selection { background: var(--brand-500); color: #fff; }

  :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }

  /* نوار اسکرول باریک و هماهنگ */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }
}

@layer layout {
  .wrap { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }
  .wrap-wide { width: min(1500px, 100% - 2rem); margin-inline: auto; }

  section.band { padding-block: clamp(2.2rem, 5vw, 3.8rem); }
  .band-soft { background: var(--bg-soft); }

  /* آیتم‌های گرید به‌صورت پیش‌فرض min-width:auto دارند؛ بدون این خط، یک ریلِ
     پهن ستون را باز می‌کند و کل صفحه افقی اسکرول می‌شود */
  .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .stack > * { min-width: 0; }
  .row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
  .row-tight { display: flex; gap: .4rem; align-items: center; }
  .between { justify-content: space-between; }
  .grow { flex: 1; min-width: 0; }

  .grid { display: grid; gap: 1.1rem; }
  .g-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .g-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .g-4 { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .g-5 { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* ==========================================================================
   کامپوننت‌ها
   ========================================================================== */
@layer components {

  /* ---------- سربرگ شیشه‌ای ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 60;
    min-height: var(--header-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s var(--ease);
  }
  .site-header.scrolled { box-shadow: var(--shadow-sm); }

  .brand { display: flex; align-items: center; gap: .55rem; font-weight: 900; font-size: 1.22rem; }
  .brand-logo { display: block; width: auto; object-fit: contain; }
  .brand-logo-header { height: 58px; }
  .brand-logo-footer { height: 96px; }
  @media (max-width: 860px) {
    .brand-logo-header { height: 48px; }
    .brand-logo-footer { height: 80px; }
  }
  .brand-mark {
    width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: linear-gradient(135deg, var(--brand-500), var(--accent-2));
    box-shadow: 0 6px 18px -6px var(--brand-500);
  }

  .nav { display: flex; gap: .2rem; align-items: center; }
  .nav a {
    padding: .45rem .85rem; border-radius: 10px; font-size: .93rem;
    color: var(--text-soft); font-weight: 600;
    transition: background .2s, color .2s;
  }
  .nav a:hover, .nav a.active { background: var(--brand-50); color: var(--brand-600); }

  .icon-btn {
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface); display: grid; place-items: center; cursor: pointer;
    transition: transform .2s var(--ease), border-color .2s;
  }
  .icon-btn:hover { transform: translateY(-2px); border-color: var(--brand-400); }

  /* ---------- دکمه‌ها ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .72rem 1.4rem; border-radius: 12px; border: 1px solid transparent;
    font-weight: 700; font-size: .95rem; cursor: pointer; white-space: nowrap;
    background: var(--brand-600); color: #fff;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .2s;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px var(--brand-600); }
  .btn:active { transform: translateY(0); }
  .btn-lg { padding: .95rem 1.9rem; font-size: 1.02rem; border-radius: 14px; }
  .btn-sm { padding: .42rem .9rem; font-size: .85rem; border-radius: 9px; }
  .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-ghost:hover { border-color: var(--brand-400); color: var(--brand-600); box-shadow: var(--shadow-sm); }
  .btn-glass { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(10px); }
  .btn-glass:hover { background: rgba(255, 255, 255, .26); }
  .btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .btn:disabled { opacity: .55; cursor: default; transform: none; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 7vw, 5.5rem);
    color: #fff;
    background:
      radial-gradient(1100px 600px at 78% -10%, rgba(236, 72, 153, .55), transparent 62%),
      radial-gradient(900px 520px at 12% 0%, rgba(56, 189, 248, .5), transparent 60%),
      linear-gradient(150deg, #312e81 0%, #4338ca 42%, #6d28d9 100%);
  }
  .hero::after {
    /* شبکه‌ی نقطه‌ای ظریف */
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
  }
  .hero-blob {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: -1;
    animation: float 16s ease-in-out infinite;
  }
  .hero-blob.b1 { width: 380px; height: 380px; background: #22d3ee; top: -110px; inset-inline-end: -60px; }
  .hero-blob.b2 { width: 320px; height: 320px; background: #f472b6; bottom: -140px; inset-inline-start: 6%; animation-delay: -6s; }
  @keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -28px, 0) scale(1.08); }
  }

  .hero h1 { color: #fff; max-width: 20ch; }
  .hero .lead { color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.7vw, 1.15rem); max-width: 56ch; }

  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .9rem; border-radius: 99px; font-size: .82rem; font-weight: 700;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
  }

  /* ---------- جستجوی بزرگ ---------- */
  .searchbar {
    position: relative; display: flex; gap: .5rem; align-items: center;
    background: var(--surface); border-radius: 18px; padding: .5rem;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  }
  .searchbar input[type="search"], .searchbar input[type="text"] {
    flex: 1; min-width: 0; border: 0; background: transparent;
    padding: .75rem .9rem; font-size: 1.02rem; outline: none;
  }
  .searchbar .sep { width: 1px; align-self: stretch; background: var(--border); margin-block: .35rem; }
  .searchbar select {
    border: 0; background: transparent; padding: .6rem .5rem; font-size: .93rem;
    color: var(--text-soft); outline: none; cursor: pointer; max-width: 150px;
  }

  .suggest {
    position: absolute; inset-inline: 0; top: calc(100% + .55rem); z-index: 70;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-lg); overflow: hidden; display: none;
    max-height: 60vh; overflow-y: auto;
  }
  .suggest.open { display: block; animation: pop .18s var(--ease); }
  .suggest a { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; }
  .suggest a:hover, .suggest a.hl { background: var(--brand-50); }
  .suggest .s-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; }
  .suggest .s-sub { font-size: .78rem; color: var(--text-mute); }
  @keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .chips { display: flex; gap: .45rem; flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .38rem .85rem; border-radius: 99px; font-size: .85rem; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-soft);
    cursor: pointer; transition: all .2s var(--ease);
  }
  .chip:hover { border-color: var(--brand-400); color: var(--brand-600); transform: translateY(-1px); }
  .chip.on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
  .chip-glass { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
  .chip-glass:hover { background: rgba(255,255,255,.26); color: #fff; }

  /* ---------- کارت کسب‌وکار ---------- */
  .card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; position: relative;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s;
  }
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--border-strong); }

  .biz-cover {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(135deg, var(--c1, var(--brand-500)), var(--c2, var(--brand-700)));
    display: grid; place-items: center;
  }
  .biz-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .card:hover .biz-cover img { transform: scale(1.07); }
  .biz-cover .glyph { font-size: 2.6rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }

  .biz-body { padding: .9rem 1rem 1.05rem; display: grid; gap: .4rem; }
  .biz-title { font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: .35rem; }
  .biz-meta { font-size: .84rem; color: var(--text-mute); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  .biz-desc { font-size: .87rem; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .18rem .55rem; border-radius: 8px; font-size: .72rem; font-weight: 700;
    background: var(--brand-50); color: var(--brand-600);
  }
  .badge-verified { background: #dcfce7; color: #15803d; }
  .badge-featured { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
  .badge-unclaimed { background: #fef3c7; color: #92400e; }
  .badge-float { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2; box-shadow: var(--shadow-sm); }

  .rating { display: inline-flex; align-items: center; gap: .22rem; font-weight: 700; font-size: .85rem; }
  .rating .star { color: var(--star); }

  .cat-pill {
    position: absolute; bottom: .6rem; inset-inline-start: .6rem; z-index: 2;
    padding: .22rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 700;
    background: rgba(255,255,255,.92); color: #0f172a; backdrop-filter: blur(6px);
  }

  /* ---------- ریل افقی روان ---------- */
  .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .rail-wrap { position: relative; min-width: 0; }
  .rail {
    min-width: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr);
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .3rem .3rem 1.2rem; margin-inline: -.3rem;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  @media (max-width: 640px) { .rail { grid-auto-columns: minmax(215px, 1fr); } }

  .rail-nav {
    position: absolute; top: 38%; z-index: 5;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); box-shadow: var(--shadow); cursor: pointer;
    display: grid; place-items: center; font-size: 1.1rem;
    transition: transform .2s var(--ease), opacity .2s;
  }
  .rail-nav:hover { transform: scale(1.1); color: var(--brand-600); }
  .rail-nav[hidden] { display: none; }
  .rail-nav.prev { inset-inline-end: -14px; }
  .rail-nav.next { inset-inline-start: -14px; }
  @media (max-width: 900px) { .rail-nav { display: none; } }

  /* ---------- نوار روان تبلیغاتی (marquee) ---------- */
  .marquee {
    overflow: hidden; position: relative;
    background: linear-gradient(90deg, var(--brand-700), var(--brand-500) 45%, var(--accent-2));
    color: #fff; padding-block: .62rem;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 32s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; white-space: nowrap; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

  /* ---------- کاشی دسته‌ها ---------- */
  .cat-tile {
    display: grid; gap: .5rem; place-items: center; text-align: center;
    padding: 1.15rem .7rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
  }
  .cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
  .cat-tile .ico {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.5rem; background: color-mix(in srgb, var(--tint, var(--brand-500)) 14%, transparent);
    transition: transform .3s var(--ease);
  }
  .cat-tile:hover .ico { transform: scale(1.12) rotate(-6deg); }
  .cat-tile .name { font-weight: 700; font-size: .92rem; }
  .cat-tile .count { font-size: .76rem; color: var(--text-mute); }

  /* ---------- کارت شهر ---------- */
  .city-card {
    position: relative; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 4 / 3; display: grid; align-items: end;
    color: #fff; padding: 1rem; isolation: isolate;
    background: linear-gradient(150deg, var(--c1, #4f46e5), var(--c2, #0f172a));
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .city-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--shadow-lg); }
  .city-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .3;
    background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  .city-card .cname { font-size: 1.18rem; font-weight: 900; }
  .city-card .cmeta { font-size: .8rem; opacity: .9; }

  /* ---------- بنر تبلیغاتی ---------- */
  .promo {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    padding: 1.7rem 1.6rem; color: #fff; min-height: 172px;
    display: grid; align-content: center; gap: .4rem; isolation: isolate;
    background: linear-gradient(135deg, var(--p1, #6366f1), var(--p2, #ec4899));
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .promo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .promo::after {
    content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,.16); inset-inline-end: -60px; top: -80px;
  }
  .promo .p-badge {
    align-self: start; padding: .2rem .7rem; border-radius: 99px; font-size: .74rem; font-weight: 800;
    background: rgba(255,255,255,.24); backdrop-filter: blur(6px);
  }
  .promo h3 { font-size: 1.25rem; }
  .promo p { font-size: .9rem; opacity: .92; }

  /* ---------- آمار ---------- */
  .stat {
    text-align: center; padding: 1.1rem .8rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
  }
  .stat .n {
    font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; line-height: 1.2;
    background: linear-gradient(135deg, var(--brand-500), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat .l { font-size: .84rem; color: var(--text-mute); }

  /* ---------- نقشه ---------- */
  #map { width: 100%; height: 100%; min-height: 420px; background: var(--surface-2); z-index: 1; }
  .map-shell { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - var(--header-h)); }
  .map-list { overflow-y: auto; border-inline-end: 1px solid var(--border); background: var(--surface); }
  @media (max-width: 900px) {
    .map-shell { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
    .map-list { border-inline-end: 0; border-top: 1px solid var(--border); order: 2; }
  }
  .map-item { display: flex; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .2s; }
  .map-item:hover, .map-item.active { background: var(--brand-50); }
  .map-thumb { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; color: #fff; }

  .leaflet-popup-content-wrapper { border-radius: 14px !important; }
  .leaflet-popup-content { margin: .75rem .9rem !important; font-family: var(--font); direction: rtl; }
  .map-pin {
    width: 34px; height: 34px; border-radius: 50% 50% 50% 8px; transform: rotate(45deg);
    display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.3);
    border: 2px solid #fff;
  }
  .map-pin span { transform: rotate(-45deg); font-size: .95rem; }

  /* ---------- پروفایل کسب‌وکار ---------- */
  .biz-hero {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; color: #fff;
    padding: clamp(1.6rem, 4vw, 2.6rem); min-height: 230px;
    display: grid; align-items: end; isolation: isolate;
    background: linear-gradient(135deg, var(--c1, #4f46e5), var(--c2, #0f172a));
  }
  .biz-hero .cover-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  .biz-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2,6,23,.85), rgba(2,6,23,.25)); }
  .biz-logo {
    width: 88px; height: 88px; border-radius: 22px; background: var(--surface); color: var(--text);
    display: grid; place-items: center; font-size: 2.1rem; font-weight: 900;
    box-shadow: var(--shadow-lg); overflow: hidden; flex-shrink: 0;
  }
  .biz-logo img { width: 100%; height: 100%; object-fit: cover; }

  .info-row { display: flex; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
  .info-row:last-child { border-bottom: 0; }
  .info-row .k { color: var(--text-mute); font-size: .85rem; min-width: 84px; }

  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; }
  .panel h2, .panel h3 { margin-bottom: .8rem; }

  .review-item { padding: .85rem 0; border-bottom: 1px solid var(--border); }
  .review-item:last-child { border-bottom: 0; }

  /* ---------- فرم ---------- */
  .field { display: grid; gap: .35rem; }
  .field label { font-size: .86rem; color: var(--text-soft); font-weight: 600; }
  .field input, .field textarea, .field select {
    padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface); outline: none; transition: border-color .2s, box-shadow .2s;
  }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand-500); box-shadow: var(--ring); }
  .field .hint { font-size: .78rem; color: var(--text-mute); }
  .field .err { font-size: .8rem; color: var(--danger); }

  .alert { padding: .85rem 1.1rem; border-radius: 12px; font-size: .9rem; }
  .alert-ok { background: #dcfce7; color: #14532d; }
  .alert-info { background: var(--brand-50); color: var(--brand-700); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-ok { background: #052e1a; color: #86efac; }
  }

  /* ---------- صفحه‌بندی ---------- */
  .pager { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
  .pager a, .pager span {
    min-width: 40px; height: 40px; padding-inline: .6rem; border-radius: 11px;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-soft);
  }
  .pager a:hover { border-color: var(--brand-500); color: var(--brand-600); }
  .pager .cur { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
  .pager .off { opacity: .4; }

  /* ---------- پاورقی ---------- */
  .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: 2.6rem 1.6rem; margin-top: 3rem; }
  .site-footer h4 { font-size: .95rem; margin-bottom: .7rem; }
  .site-footer a { color: var(--text-soft); font-size: .88rem; display: block; padding: .18rem 0; }
  .site-footer a:hover { color: var(--brand-600); }

  /* ---------- اسکلت بارگذاری ---------- */
  .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--radius); }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

  .empty { text-align: center; padding: 3.4rem 1rem; color: var(--text-mute); }
  .empty .big { font-size: 3rem; margin-bottom: .4rem; }
}

@layer utilities {
  .muted { color: var(--text-mute); }
  .soft { color: var(--text-soft); }
  .sm { font-size: .86rem; }
  .xs { font-size: .78rem; }
  .b { font-weight: 700; }
  .center { text-align: center; }
  .mt { margin-top: 1rem; }
  .mt2 { margin-top: 1.8rem; }
  .hide { display: none !important; }
  .ltr { direction: ltr; text-align: right; }
  @media (max-width: 860px) { .hide-sm { display: none !important; } }
  @media (min-width: 861px) { .only-sm { display: none !important; } }

  /* ظاهر شدن هنگام اسکرول */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  .sobhe-band { padding-block: 1.6rem; }
  .sobhe-news, .sobhe-media { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  @media (max-width: 980px) { .sobhe-news, .sobhe-media { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .sobhe-news, .sobhe-media { grid-template-columns: 1fr; } }
  .sobhe-card { overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  .sobhe-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
  .sobhe-card-body { padding: .75rem .9rem; }
  .sobhe-ph { aspect-ratio: 16/10; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); font-weight: 800; }
  .sobhe-video { position: relative; }
  .sobhe-video .play { position: absolute; top: 38%; right: 50%; transform: translate(50%,-50%); background: #ED3354; color: #fff; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
}