/* ===== Self-hosted Vazirmatn (OFL) ===== */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Regular.cdc140628f11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Medium.dd2193b32cbe.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-SemiBold.9260c1927872.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Bold.7958481fe611.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-ExtraBold.a0f99309cd35.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ===== Design tokens ===== */
:root {
  --font-sans: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, Arial, sans-serif;

  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  --pink-500: #ec4899;
  --amber-500: #f59e0b;

  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --danger-500: #ef4444;
  --danger-600: #dc2626;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.14);
}

/* ===== Base ===== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1, h2, h3 {
  line-height: 1.35;
  margin: 0;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header ===== */
.site-header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-block نه شورت‌هند: شورت‌هند، پدینگ افقی خودِ .container رو صفر می‌کرد
     و لوگو/دکمه‌ی منو می‌چسبید به لبه‌ی صفحه */
  padding-block: 14px;
  gap: 16px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-mark {
  flex-shrink: 0;
  display: block;
}

.logotype-text {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

.logotype-accent {
  background: linear-gradient(90deg, var(--brand-600), var(--pink-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-links > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav-links > a:hover {
  color: var(--gray-900);
}

.nav-links > a.btn,
.nav-links > a.btn:hover,
.mobile-menu > a.btn,
.mobile-menu > a.btn:hover {
  color: #fff;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-700);
  cursor: pointer;
}

.mobile-menu {
  display: none;
}

[x-cloak] {
  display: none !important;
}

@media (max-width: 720px) {
  .desktop-only {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 20px 18px;
    border-top: 1px solid var(--gray-200);
    background: #fff;
  }

  .mobile-menu > a,
  .mobile-menu > form {
    padding: 10px 4px;
    border-bottom: 1px solid var(--gray-100);
  }

  .mobile-menu > a {
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
  }

  .mobile-menu > form {
    border-bottom: none;
  }

  .mobile-menu .btn {
    width: 100%;
  }
}

.articles-page { padding-bottom: 64px; }
.articles-hero { max-width: 720px; margin: 18px auto 46px; text-align: center; }
.articles-hero > span, .not-found-eyebrow { color: var(--brand-600); font-size: 12px; font-weight: 800; }
.articles-hero h1 { margin: 10px 0 12px; font-size: clamp(28px, 5vw, 43px); line-height: 1.45; letter-spacing: -.02em; }
.articles-hero p { max-width: 610px; margin: 0 auto; color: var(--gray-500); font-size: 15px; line-height: 2; }
.articles-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-200); }
.article-category-filter { display: flex; flex-wrap: wrap; gap: 7px; }
.article-category-filter a { padding: 7px 13px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--gray-600); font-size: 12px; font-weight: 700; text-decoration: none; }
.article-category-filter a:hover, .article-category-filter a.is-active { border-color: var(--gray-900); background: var(--gray-900); color: #fff; }
.articles-result-count { flex: 0 0 auto; color: var(--gray-400); font-size: 12px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 42px; }
.article-card { min-width: 0; }
.article-card > a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.article-card-media { position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 17px; background: var(--gray-100); }
.article-card-media img, .article-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; object-fit: cover; color: var(--brand-700); font-weight: 900; transition: transform .3s ease; }
.article-card:hover .article-card-media img { transform: scale(1.025); }
.article-card-media b { position: absolute; top: 11px; right: 11px; padding: 4px 9px; border-radius: 999px; background: rgb(255 255 255 / 92%); color: #c2410c; font-size: 10px; box-shadow: var(--shadow-sm); }
.article-card-content { display: flex; flex: 1; flex-direction: column; padding-top: 16px; }
.article-card-meta { display: flex; align-items: center; gap: 8px; color: var(--brand-600); font-size: 11px; font-weight: 800; }
.article-card-meta i, .article-detail-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); }
.article-card-meta time { color: var(--gray-400); font-weight: 600; }
.article-card h2 { margin: 8px 0; color: var(--gray-900); font-size: 18px; line-height: 1.65; transition: color .15s ease; }
.article-card:hover h2 { color: var(--brand-600); }
.article-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--gray-500); font-size: 13px; line-height: 1.9; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.article-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.article-card-footer small { color: var(--gray-400); font-size: 10.5px; }
.article-card-footer strong { color: var(--brand-600); font-size: 12px; }
.article-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 52px; }
.article-pagination a, .article-pagination span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--gray-200); border-radius: 11px; background: #fff; color: var(--gray-600); font-size: 13px; font-weight: 700; text-decoration: none; }
.article-pagination a:hover, .article-pagination a.is-active { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }
.article-pagination span { border-color: transparent; background: transparent; }
.article-detail { max-width: 960px; margin: 0 auto 72px; }
.article-detail-header { max-width: 760px; margin: 22px auto 34px; text-align: center; }
.article-detail-labels { display: flex; align-items: center; justify-content: center; gap: 8px; }
.article-detail-labels span, .article-detail-labels b { color: var(--brand-600); font-size: 11px; font-weight: 800; }
.article-detail-labels b { padding: 3px 8px; border-radius: 999px; background: #fff7ed; color: #c2410c; }
.article-detail h1 { margin: 13px 0 14px; font-size: clamp(29px, 5vw, 46px); line-height: 1.45; letter-spacing: -.025em; }
.article-detail-header > p { max-width: 680px; margin: 0 auto; color: var(--gray-500); font-size: 16px; line-height: 2; }
.article-detail-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; color: var(--gray-400); font-size: 12px; }
.article-detail-meta strong { color: var(--gray-700); }
.article-author-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-weight: 900; }
.article-detail-cover { display: block; width: 100%; aspect-ratio: 16/8.2; border-radius: 24px; object-fit: cover; box-shadow: 0 18px 45px rgb(15 23 42 / 8%); }
.article-content-column { max-width: 720px; margin: 44px auto 0; }
.article-content-section { margin-top: 42px; }
.article-content-section:first-child { margin-top: 0; }
.article-content-section h2 { margin-bottom: 14px; color: var(--gray-900); font-size: clamp(21px, 3vw, 26px); line-height: 1.65; }
.article-body { color: var(--gray-700); font-size: 16px; line-height: 2.25; }
.article-body p { margin: 0 0 16px; }
.article-body ul { margin: 8px 0 20px; padding-right: 22px; }
.article-body li { margin-bottom: 7px; }
.article-content-section figure { margin: 30px -70px 34px; }
.article-content-section figure img { display: block; width: 100%; border-radius: 19px; }
.article-content-section figcaption { margin-top: 9px; color: var(--gray-400); font-size: 11px; text-align: center; }
.not-found-page { max-width: 620px; margin: 8vh auto 12vh; text-align: center; }
.not-found-code { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gray-900); font-size: 86px; font-weight: 900; line-height: 1; }
.not-found-code i { width: 74px; height: 74px; border-radius: 24px; background: linear-gradient(135deg, var(--brand-600), #ec4899, #f59e0b); transform: rotate(8deg); }
.not-found-page h1 { margin: 16px 0 8px; font-size: clamp(25px, 5vw, 38px); }
.not-found-page > p:not(.not-found-eyebrow) { color: var(--gray-600); }
.not-found-page .btn-row { justify-content: center; margin-top: 24px; }

@media (max-width: 860px) { .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .articles-grid { grid-template-columns: 1fr; } .not-found-code { font-size: 64px; } .not-found-code i { width: 56px; height: 56px; } }

main {
  padding: 40px 0 80px;
  min-height: 60vh;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--gray-200);
  margin-top: 40px;
  padding: 40px 0 0;
  color: var(--gray-500);
  font-size: 13px;
}

.site-footer .bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
}

.footer-brand .logotype-text {
  font-size: 19px;
}

.footer-tagline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-width: 440px;
  line-height: 1.9;
}

.footer-tagline strong {
  color: var(--gray-700);
  font-size: 13.5px;
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links strong,
.footer-contact strong {
  color: var(--gray-800);
  font-size: 13.5px;
}

.footer-links a {
  color: var(--gray-500);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--brand-600);
}

.footer-contact .biz-contact-icons {
  justify-content: flex-start;
  margin-top: 2px;
}

/* ===== Business onboarding progress ===== */
.card.profile-progress {
  padding: 16px;
  margin-bottom: 20px;
  border-color: color-mix(in srgb, var(--brand-500) 24%, var(--gray-200));
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--brand-50) 68%, #fff));
}

.profile-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-progress-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.profile-progress-value {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12px;
}

.profile-progress-track {
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-200);
}

.profile-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-600), var(--pink-500));
  transition: width 0.3s ease;
}

.profile-progress-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.profile-progress-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.profile-progress-item small {
  color: var(--brand-700);
  font-size: 11.5px;
}

.profile-progress-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-100);
  font-size: 12px;
  font-weight: 800;
}

.profile-progress-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-700);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.profile-progress-toggle svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s ease;
}

.profile-progress-toggle svg.is-expanded {
  transform: rotate(180deg);
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.analytics-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-summary-card strong {
  color: var(--brand-700);
  font-size: 28px;
}

.analytics-summary-card small {
  color: var(--gray-500);
}

/* ===== Public business directory ===== */
.discover-hero {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

.discover-hero > span {
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 800;
}

.discover-hero h1 {
  margin: 8px 0;
  font-size: clamp(28px, 5vw, 44px);
}

.discover-hero p {
  color: var(--gray-500);
}

.discover-filters {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.discover-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
}

.discover-filters :is(input, select) {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-800);
  font: inherit;
}

.discover-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 20px 0;
  padding-bottom: 6px;
}

.discover-tags .chip {
  flex: 0 0 auto;
  text-decoration: none;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.discover-business-card {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--gray-800);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.discover-business-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.discover-business-cover {
  display: block;
  height: 112px;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 35%, #fff));
  background-position: center;
  background-size: cover;
}

.discover-business-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 42px 18px 18px;
}

.discover-business-content > :is(img, .discover-business-placeholder) {
  position: absolute;
  top: -30px;
  right: 18px;
  width: 60px;
  height: 60px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fff;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.discover-business-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-accent) !important;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.discover-business-content small,
.discover-business-content p {
  margin-top: 6px;
  color: var(--gray-500);
}

.discover-business-content p {
  min-height: 48px;
  line-height: 1.75;
}

.discover-business-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.discover-business-tags em {
  color: var(--card-accent);
  font-size: 11px;
  font-style: normal;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.notification-preference-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.notification-preference-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.notification-preference-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-600);
}

.notification-preference-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

@media (max-width: 900px) {
  .discover-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 520px) {
  .card.profile-progress {
    padding: 14px;
  }

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

  .discover-filters,
  .discover-grid {
    grid-template-columns: 1fr;
  }
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
  text-align: center;
}

.about-stat {
  padding: 22px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--brand-50);
}

.about-stat strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-700);
}

.about-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

@media (max-width: 640px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  /* همون مشکل .site-header .bar: شورت‌هند پدینگ افقی .container رو صفر می‌کرد */
  padding-block: 18px;
  border-top: 1px solid var(--gray-100);
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===== Site dashboard ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-700);
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
    margin-bottom: 0;
    gap: 3px;
  }

  .stat-card .empty {
    font-size: 11px;
    line-height: 1.4;
  }

  .stat-card strong {
    font-size: 18px;
  }
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}

.admin-nav-link {
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--gray-500);
  text-decoration: none;
  border: 1px solid transparent;
}

.admin-nav-link:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.admin-nav-link.is-active {
  background: var(--brand-50);
  border-color: var(--brand-100, var(--gray-200));
  color: var(--brand-700);
  font-weight: 600;
}

.admin-alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  text-decoration: none;
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.admin-warning {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.admin-ok {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.admin-review-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .admin-two-col,
  .admin-review-grid {
    grid-template-columns: 1fr;
  }
}

.preview-frame-wrap {
  margin-top: 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
}

.preview-frame {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.filter-tab {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  font-size: 13px;
  color: var(--gray-500);
  text-decoration: none;
}

.filter-tab:hover {
  background: var(--gray-50);
}

.filter-tab.is-active {
  background: var(--gray-900);
  border-color: var(--gray-900);
  color: #fff;
}

.filter-tab-count {
  opacity: 0.7;
  font-size: 12px;
}

.admin-search {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.admin-search input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 14px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table-wrap { overflow-x: auto; }

.admin-table th,
.admin-table td {
  padding: 13px 14px;
  text-align: start;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.admin-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-50);
  white-space: nowrap;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tbody tr:hover {
  background: var(--gray-50);
}

.admin-table .empty {
  font-size: 12px;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-draft {
  background: var(--gray-100);
  color: var(--gray-500);
}

.status-pending_review {
  background: #fef3c7;
  color: #92400e;
}

.status-approved {
  background: #d1fae5;
  color: #065f46;
}

.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.verified-badge {
  color: #065f46;
  font-weight: 600;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  background: var(--gray-900);
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn:active {
  transform: scale(0.98);
}

.btn.is-disabled {
  opacity: .62;
  cursor: not-allowed;
  pointer-events: none;
}

.business-limit-notice {
  margin: -8px 0 18px;
  padding: 12px 16px;
  border-color: var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 13px;
}

.btn.secondary {
  background: #fff;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.btn.danger {
  background: var(--danger-600);
}

.btn.small {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== Status badges ===== */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
}

.status-draft { background: var(--gray-100); color: var(--gray-600); }
.status-pending_review { background: #fef3c7; color: #92400e; }
.status-approved { background: #dcfce7; color: #166534; }
.status-rejected { background: #fee2e2; color: #991b1b; }

/* ===== Cards & layout helpers ===== */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 40px 0 14px;
}

.section-title:first-child {
  margin-top: 0;
}

.page-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body:not(.business-profile-page) .site-header + main {
  padding-top: 48px;
}

button,
input,
textarea,
select,
option {
  font-family: inherit;
}

.styled-form select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%), linear-gradient(135deg, var(--gray-500) 50%, transparent 50%);
  background-position: 19px 20px, 13px 20px;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  color: var(--gray-800);
  appearance: none;
}

.styled-form select:focus {
  border-color: var(--brand-500);
  outline: 3px solid color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.icon-back-button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 13px;
  background: #fff;
  color: var(--gray-700);
}

.icon-back-button svg { width: 21px; height: 21px; }

.dashboard-priority-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.dashboard-priority-alert.is-rejected { border-color: #fecaca; background: #fef2f2; }
.dashboard-priority-alert.is-rejected strong { color: var(--danger-600); }
.dashboard-priority-alert p { margin: 5px 0 0; color: var(--gray-600); }
.dashboard-priority-alert ul { margin: 6px 0 0; }

.approval-tools-lock {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  border-style: dashed;
  background: var(--gray-50);
}
.approval-tools-lock-icon { font-size: 28px; }
.approval-tools-lock h3 { margin: 0; font-size: 17px; }
.approval-tools-lock p { margin: 6px 0 12px; color: var(--gray-600); }
.approval-tools-placeholder { display: flex; flex-wrap: wrap; gap: 8px; }
.approval-tools-placeholder span { padding: 7px 11px; border-radius: 999px; background: var(--gray-200); color: var(--gray-500); font-size: 12px; }

@media (max-width: 720px) {
  body:not(.business-profile-page) .site-header + main { padding-top: 24px; }
  .dashboard-priority-alert { align-items: stretch; flex-direction: column; }
  .dashboard-priority-alert .btn { width: 100%; }
}

.subtitle {
  color: var(--gray-500);
  font-size: 14px;
  margin-top: 4px;
}

.empty-state {
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  color: var(--gray-500);
  font-size: 14px;
  margin-bottom: 12px;
}

.empty {
  color: var(--gray-500);
  font-size: 14px;
}

.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===== Messages ===== */
.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.messages li {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: 8px;
  font-size: 14px;
  border: 1px solid var(--brand-100);
}

/* ===== Forms ===== */
form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}

input, textarea, select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--gray-50);
  color: var(--gray-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.7;
}

select {
  cursor: pointer;
}

input:hover, textarea:hover, select:hover {
  border-color: var(--gray-300);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-500);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-100);
}

input[type="checkbox"] {
  width: auto;
}

/* --- Search-based autocomplete for a hidden <select> (e.g. province/city) --- */
.ac-select-wrap {
  position: relative;
}

.ac-select-list {
  /* موقعیت/عرض/حداکثرارتفاعش با JS (dropdown-position.js) و نسبت به
     visualViewport تنظیم می‌شه، نه فلوی عادی سند؛ چون این‌جوری با بازشدن
     کیبورد موبایل خودش رو جمع می‌کنه و هیچ‌وقت زیرش گم نمی‌مونه. */
  display: none;
  position: fixed;
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.ac-select-list.open {
  display: block;
}

.ac-select-item {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--gray-800);
  cursor: pointer;
}

.ac-select-item:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.ac-select-empty {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--gray-400);
}

.ac-select-input:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}

input::placeholder, textarea::placeholder {
  color: var(--gray-400);
}

ul.errorlist {
  list-style: none;
  padding: 10px 14px;
  margin: 8px 0 0;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--danger-600);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.form-card {
  max-width: 560px;
  margin: 0 auto;
}

/* --- Shared styled-form field wrapper (used by business/item/auth/contact forms) --- */
.styled-form .field {
  margin-bottom: 20px;
}

.styled-form .field-required {
  color: var(--danger-500);
  margin-inline-start: 3px;
}

.styled-form .field-help {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--gray-500);
  line-height: 1.6;
}

.styled-form .position-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.styled-form .position-choice > div {
  min-width: 0;
}

.styled-form .position-choice label {
  display: flex;
  min-height: 48px;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--gray-600);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.styled-form .position-choice label:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.styled-form .position-choice label:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 750;
  box-shadow: 0 0 0 2px var(--brand-100);
}

.styled-form .position-choice input[type="radio"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  accent-color: var(--brand-600);
}

@media (max-width: 420px) {
  .styled-form .position-choice {
    grid-template-columns: 1fr;
  }

  .styled-form .position-choice label {
    justify-content: flex-start;
    text-align: start;
  }
}

.styled-form .field-error input,
.styled-form .field-error textarea,
.styled-form .field-error select {
  border-color: var(--danger-500);
  background: #fef2f2;
}

.styled-form .field-checkbox {
  display: flex;
  align-items: flex-start;
}

.styled-form .field-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  margin-bottom: 0 !important;
}

.styled-form .field-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-600);
  cursor: pointer;
}

/* --- Porofam select: یک تجربه‌ی یکسان برای همه‌ی سلکت‌ها --- */
.pf-select {
  position: relative;
  width: 100%;
}

.pf-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.pf-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  background: var(--gray-50);
  color: var(--gray-900);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.pf-select-trigger:hover {
  border-color: var(--gray-300);
  background: #fff;
}

.pf-select.is-open .pf-select-trigger,
.pf-select-trigger:focus-visible {
  border-color: var(--brand-500);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-100);
}

.pf-select-chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-inline-end: 2px solid var(--gray-500);
  border-bottom: 2px solid var(--gray-500);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.pf-select.is-open .pf-select-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.pf-select-panel {
  display: none;
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.pf-select.is-open .pf-select-panel { display: block; }

.pf-select-search {
  margin-bottom: 7px;
  min-height: 42px;
  background: var(--gray-50);
}

.pf-select-options {
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.pf-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--gray-800);
  font: inherit;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
}

.pf-select-option:hover,
.pf-select-option:focus-visible {
  outline: none;
  background: var(--brand-50);
  color: var(--brand-700);
}

.pf-select-option.is-selected {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
}

.pf-select-check {
  visibility: hidden;
  color: var(--brand-600);
}

.pf-select-option.is-selected .pf-select-check { visibility: visible; }
.pf-select-empty { padding: 18px 12px; color: var(--gray-500); text-align: center; font-size: 13px; }
.pf-select.is-disabled .pf-select-trigger { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.field-error .pf-select-trigger { border-color: var(--danger-500); background: #fef2f2; }

/* --- فرم جمع‌وجور مقاله، مطابق نسخه‌ی اول طرح --- */
.article-editor-form {
  width: min(100%, 820px);
  margin: 0 auto 32px;
}

.form-accordion {
  margin-bottom: 12px;
  overflow: visible;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.form-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: var(--gray-900);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.form-accordion > summary::-webkit-details-marker { display: none; }
.form-accordion > summary span:first-child { display: grid; gap: 3px; }
.form-accordion > summary strong { font-size: 15px; }
.form-accordion > summary small { color: var(--gray-500); font-size: 12px; font-weight: 500; }
.form-accordion > summary:hover { background: var(--gray-50); }
.form-accordion[open] > summary { border-bottom: 1px solid var(--gray-100); }
.accordion-chevron { color: var(--brand-600); font-size: 22px; line-height: 1; transition: transform .18s ease; }
.form-accordion[open] .accordion-chevron { transform: rotate(180deg); }
.form-accordion-body { padding: 20px; }
.form-accordion-body .field:last-child { margin-bottom: 0; }

.article-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.article-field-wide { grid-column: 1 / -1; }
.article-editor-actions { display: flex; align-items: center; gap: 10px; padding-top: 8px; }

.jalali-datetime-widget {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr 1.2fr;
  gap: 10px;
}

.jalali-date-part { margin: 0 !important; }
.jalali-date-part > span { display: block; margin-bottom: 5px; color: var(--gray-500); font-size: 11px; }

.verified-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.verified-status-badge .verified-badge {
  width: 17px;
  height: 17px;
  font-size: 10px;
}

@media (max-width: 640px) {
  .pf-select-panel {
    position: fixed;
    z-index: 120;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-height: min(72vh, 520px);
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  }

  .pf-select-options { max-height: min(56vh, 400px); }
  .article-field-grid { grid-template-columns: 1fr; }
  .article-field-wide { grid-column: auto; }
  .form-accordion > summary { padding: 16px; }
  .form-accordion-body { padding: 16px; }
  .jalali-datetime-widget { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-editor-actions { position: sticky; bottom: 8px; z-index: 30; padding: 10px; border: 1px solid var(--gray-200); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-md); backdrop-filter: blur(10px); }
  .article-editor-actions .btn { flex: 1; }
}

/* --- File upload field (custom button, no native input UI) --- */
.file-upload-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.file-upload-btn {
  cursor: pointer;
  white-space: nowrap;
}

.file-upload-name {
  font-size: 13px;
  color: var(--gray-500);
  overflow-wrap: anywhere;
}

.file-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-current {
  margin-bottom: 10px;
}

.file-current-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.file-clear-label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--gray-500);
  cursor: pointer;
  margin-bottom: 0 !important;
}

.file-preview-thumb {
  display: none;
  flex-basis: 100%;
  max-width: 160px;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  margin-top: 10px;
}

.file-preview-thumb.visible {
  display: block;
}

.file-upload-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.file-upload-preview-item {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}

.auth-card {
  max-width: 440px;
  margin: 40px auto 56px;
  padding: 26px;
  border-radius: 20px;
}

.auth-card-header { margin-bottom: 24px; }
.auth-card-header h1 { margin: 3px 0 7px; font-size: 25px; font-weight: 850; }
.auth-card-header p { margin: 0; color: var(--gray-500); font-size: 14px; }
.auth-eyebrow { color: var(--brand-600); font-size: 12px; font-weight: 800; }
.auth-form { margin-top: 0; }
.auth-form input { min-height: 48px; }
.auth-password-control { position: relative; }
.auth-password-control input { padding-inline-start: 52px; }
.auth-password-toggle { position: absolute; inset-block: 2px; inset-inline-start: 2px; display: grid; width: 44px; place-items: center; border: 0; background: transparent; color: var(--gray-400); cursor: pointer; }
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { color: var(--brand-600); }
.auth-password-toggle svg { width: 20px; height: 20px; }
.auth-password-toggle .eye-closed { display: none; }
.auth-password-toggle[aria-pressed="true"] .eye-open { display: none; }
.auth-password-toggle[aria-pressed="true"] .eye-closed { display: block; }
.auth-primary-action { width: 100%; min-height: 48px; margin-top: 4px; }
.auth-otp-action { width: 100%; min-height: 48px; margin-top: 12px; }
.auth-otp-action span { margin-inline-start: 7px; padding: 2px 7px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); font-size: 10px; }
.auth-otp-action:disabled { border-color: var(--gray-200); background: var(--gray-50); color: var(--gray-400); opacity: 1; cursor: not-allowed; }
.auth-card-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-100); color: var(--gray-500); font-size: 14px; text-align: center; }
.auth-card-footer a { color: var(--brand-600); font-weight: 750; text-decoration: none; }
.password-rules { display: grid; gap: 6px; margin: -4px 0 18px; padding: 0; list-style: none; color: var(--gray-500); font-size: 12px; }
.password-rules li::before { display: inline-block; width: 18px; content: "○"; color: var(--gray-400); }
.password-rules li.is-valid { color: #047857; }
.password-rules li.is-valid::before { content: "✓"; color: #059669; font-weight: 900; }

@media (max-width: 560px) {
  .auth-card { margin: 24px auto 40px; padding: 22px 18px; }
}

/* ===== Home hero ===== */
.hero-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  z-index: 0;
  animation: blob-drift 14s ease-in-out infinite alternate;
}

.hero-blob.b1 { width: 320px; height: 320px; background: var(--brand-500); top: -100px; right: -60px; }
.hero-blob.b2 { width: 260px; height: 260px; background: var(--pink-500); bottom: -80px; left: -40px; animation-delay: -4s; }
.hero-blob.b3 { width: 200px; height: 200px; background: var(--amber-500); top: 40%; left: 30%; animation-delay: -8s; }

@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.1); }
}

.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 72px 20px 48px;
}

.hero h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero p {
  color: var(--gray-500);
  font-size: 17px;
  max-width: 520px;
  margin: 14px auto 26px;
}

.section-heading-lg {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  margin: 64px 0 8px;
}

.section-subtitle {
  text-align: center;
  color: var(--gray-500);
  font-size: 15px;
  margin-bottom: 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.feature-grid .card {
  text-align: center;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step-card {
  text-align: center;
  position: relative;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 14px;
}

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.theme-preview-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}

.theme-preview-card:hover,
.theme-preview-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  outline: none;
}

.theme-preview-swatch {
  height: 90px;
}

.theme-preview-label {
  padding: 12px 16px 4px;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
}

.theme-preview-cta {
  display: block;
  padding: 0 16px 12px;
  background: #fff;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 700;
}

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pricing-card-recommended {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100), var(--shadow-lg);
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand-600), var(--pink-500));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-full);
}

.pricing-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-card-recommended .pricing-card-icon {
  background: linear-gradient(135deg, var(--brand-600), var(--pink-500));
  color: #fff;
}

.pricing-card-icon svg {
  width: 22px;
  height: 22px;
}

.pricing-name {
  font-size: 18px;
  font-weight: 800;
}

.pricing-desc {
  color: var(--gray-500);
  font-size: 13.5px;
  margin: 6px 0 0;
}

.pricing-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-900);
  margin: 18px 0;
}

.pricing-price small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray-500);
  margin-top: 4px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
  border-top: 1px solid var(--gray-100);
  padding-top: 16px;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--gray-700);
  padding: 6px 0;
}

.pricing-features li svg {
  width: 16px;
  height: 16px;
  color: var(--brand-600);
  flex-shrink: 0;
}

.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.pricing-toggle {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
}

.pricing-toggle button {
  border: none;
  background: transparent;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-toggle button.active {
  background: #fff;
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
}

.pricing-toggle-save {
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.cta-band {
  text-align: center;
  padding: 56px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gray-900), #1e1b4b);
  color: #fff;
  margin: 72px 0 32px;
}

.cta-band h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.cta-band p {
  color: var(--gray-300);
  margin-bottom: 22px;
}

.cta-band .btn {
  background: #fff;
  color: var(--gray-900);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

/* ===== Generic content grid (portfolio thumbnails, discover cards) ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--business-primary, var(--gray-900));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.biz-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.biz-minimal .biz-hashtags {
  justify-content: center;
}

.chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  background: #fff;
}

.chip.active {
  background: var(--gray-900);
  color: #fff;
  border-color: var(--gray-900);
}

.discover-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border-top: 3px solid var(--card-accent, var(--gray-900));
}

/* =====================================================================
   Public business page — shared bits + 3 distinct layout presentations
   ===================================================================== */

.biz-page {
  --biz-primary: var(--business-primary, var(--gray-900));
  /* بدون گرادیان دستی/خودکار، رنگ دوم همون رنگ اوله؛ یعنی گرادیان تخت (تک‌رنگ) نمایش داده می‌شه */
  --biz-secondary: var(--business-secondary, var(--biz-primary));
  max-width: 720px;
  margin: 0 auto;
}

.biz-draft-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 20px;
}

.biz-section-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 36px 0 14px;
}

.biz-contact-form {
  max-width: 480px;
  margin: 0 auto;
}

/* --- Contact icon row --- */
.biz-contact-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.biz-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--biz-primary, var(--gray-700));
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.biz-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.biz-icon-btn svg {
  width: 18px;
  height: 18px;
}

.biz-profile-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* --- Footer contact band --- */
.biz-footer-band {
  margin-top: 48px;
  padding: 36px 24px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--biz-primary) 6%, #fff);
  text-align: center;
}

.biz-footer-band .biz-section-heading {
  text-align: center;
  margin-top: 0;
}

/* --- FAQ accordion (native details/summary) --- */
.biz-faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
  background: #fff;
}

.biz-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.biz-faq-item summary::-webkit-details-marker {
  display: none;
}

.biz-faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--gray-400);
  transition: transform 0.15s ease;
}

.biz-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.biz-faq-item p {
  margin: 12px 0 0;
  color: var(--gray-600);
}

/* --- Offerings (services/products): modern minimal card grid (themed below) --- */
.biz-offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.biz-offering-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.biz-offering-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.biz-offering-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.biz-offering-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--biz-primary, var(--brand-600)) 12%, #fff);
  color: var(--biz-primary, var(--brand-600));
}

.biz-offering-icon svg {
  width: 18px;
  height: 18px;
}

.biz-offering-title {
  font-size: 15.5px;
}

.biz-offering-desc {
  margin: 0;
  color: var(--gray-500);
  font-size: 13.5px;
  line-height: 1.7;
}

.biz-bio,
.biz-offering-desc,
.biz-portfolio-description {
  white-space: pre-line;
}

.biz-offering-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--gray-200);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.biz-price-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--biz-primary, var(--brand-600)) 10%, #fff);
  color: var(--biz-primary, var(--brand-600));
  font-size: 13px;
  font-weight: 700;
}

.biz-price-pill-outline {
  background: transparent;
  border: 1px solid var(--biz-primary, var(--brand-600));
}

.biz-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--danger-600);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.price-was {
  font-size: 12.5px;
  color: var(--gray-400);
  text-decoration: line-through;
}

.price-now-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Packages: full-width dedicated row --- */
.biz-package-row {
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.biz-package-row + .biz-package-row {
  margin-top: 16px;
}

.biz-package-header {
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--biz-primary, var(--brand-600)) 8%, #fff), #fff);
}

.biz-package-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  background: var(--biz-primary, var(--brand-600));
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.biz-package-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.biz-package-title {
  font-size: 18px;
}

.biz-package-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
}

.biz-package-price small {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
}

.biz-package-body {
  padding: 18px 24px 22px;
}

.biz-package-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 20px;
}

.biz-package-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--gray-700);
}

.biz-package-checklist-item svg {
  width: 16px;
  height: 16px;
  color: var(--biz-primary, var(--brand-600));
  flex-shrink: 0;
}

.biz-portfolio-item a {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.biz-portfolio-item img {
  width: 100%;
  /* height:auto لازمه تا مرورگر از width/height خود تگ نسبت ابعاد رو حساب کنه
     و قبل از لود شدن عکس، جای درست رو رزرو کنه (جلوگیری از پرش چیدمان) */
  height: auto;
  display: block;
  object-fit: cover;
  background: var(--gray-100);
}

.biz-portfolio-caption {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray-600);
}

/* =====================================================================
   Classic — traditional, structured, bordered. Serif-leaning weight,
   uniform grid, boxed sections.
   ===================================================================== */
.biz-classic .biz-name {
  font-family: Georgia, "Times New Roman", serif;
}

.biz-classic .biz-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.biz-classic .biz-cover {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--biz-primary);
}

.biz-classic .biz-hero-body {
  padding: 24px;
  background: #fff;
}

.biz-classic .biz-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: -58px;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.biz-classic .biz-name {
  font-size: 27px;
  font-weight: 700;
  margin: 12px 0 6px;
}

.biz-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 8px;
}

.biz-location svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.biz-classic .biz-section-heading {
  border-bottom: 2px solid var(--biz-primary);
  padding-bottom: 8px;
  display: inline-block;
}

.biz-classic .biz-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.biz-classic .biz-portfolio-item img {
  height: 140px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

.biz-classic .biz-offering-card {
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--biz-primary);
}

.biz-classic .biz-offering-icon {
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--biz-primary);
}

.biz-classic .biz-package-row {
  border-radius: var(--radius-md);
}

.biz-classic .biz-faq-item {
  border-radius: var(--radius-sm);
}

/* =====================================================================
   Modern — bold, colorful, playful. Gradient hero, floating card,
   pill buttons, masonry portfolio, colorful icon chips.
   ===================================================================== */
.biz-modern .biz-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 48px;
  position: relative;
}

.biz-modern .biz-cover {
  height: 280px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(135deg, var(--biz-primary), var(--biz-secondary));
  display: flex;
  align-items: flex-end;
}

.biz-modern .biz-hero-body {
  position: relative;
  margin: -56px 20px 0;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-lg);
}

.biz-modern .biz-logo {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-top: -70px;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.biz-modern .biz-name {
  font-size: 31px;
  font-weight: 800;
  margin: 14px 0 8px;
  letter-spacing: -0.01em;
}

.biz-modern .btn {
  border-radius: var(--radius-full);
}

.biz-modern .biz-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.biz-modern .biz-section-heading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--biz-primary);
}

.biz-modern .biz-offering-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.biz-modern .biz-offering-icon {
  border-radius: 50%;
  background: var(--biz-primary);
  color: #fff;
}

.biz-modern .biz-package-row {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: none;
}

.biz-modern .biz-faq-item {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   Minimal — quiet, editorial. No boxes, thin weight, dividers only,
   tight small-scale portfolio grid.
   ===================================================================== */
.biz-minimal {
  max-width: 580px;
  margin: 0 auto;
  background: #fdfcfb;
  color: #2a2a28;
}

.biz-minimal .biz-hero {
  text-align: center;
  padding: 40px 0 36px;
}

.biz-minimal .biz-logo {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 22px;
  display: block;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--biz-primary) 35%, transparent);
}

.biz-minimal .biz-cover {
  display: none;
}

.biz-minimal .biz-name {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.biz-minimal .biz-location {
  letter-spacing: 0.03em;
}

.biz-minimal .biz-bio {
  color: #6f6b63;
  line-height: 2;
  font-size: 14.5px;
}

.biz-minimal .tag {
  background: transparent;
  color: #6b6862;
  border: 1px solid #e3e0da;
  padding: 4px 13px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.biz-minimal .biz-section-heading {
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #767168;
  margin: 56px 0 24px;
  position: relative;
}

.biz-minimal .biz-section-heading::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 12px auto 0;
  background: color-mix(in srgb, var(--biz-primary) 55%, #d8d4cc);
}

.biz-minimal .biz-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.biz-minimal .biz-portfolio-item img {
  height: 130px;
  border-radius: 2px;
  filter: saturate(0.94);
  transition: filter 0.2s ease, transform 0.3s ease;
}

.biz-minimal .biz-portfolio-item:hover img {
  filter: saturate(1);
  transform: scale(1.015);
}

.biz-minimal .biz-portfolio-caption {
  display: none;
}

.biz-minimal .biz-offerings-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.biz-minimal .biz-offering-card {
  border: none;
  border-bottom: 1px solid #eeece7;
  border-radius: 0;
  padding: 20px 2px;
  background: transparent;
}

.biz-minimal .biz-offering-card:first-child {
  border-top: 1px solid #eeece7;
}

.biz-minimal .biz-offering-card:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.biz-minimal .biz-offering-top {
  gap: 10px;
}

.biz-minimal .biz-offering-title {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.biz-minimal .biz-offering-icon {
  background: transparent;
  width: 18px;
  height: 18px;
  color: var(--biz-primary);
}

.biz-minimal .biz-offering-desc {
  color: #6f6b63;
  line-height: 1.85;
}

.biz-minimal .biz-offering-footer {
  border-top: none;
  padding-top: 10px;
}

.biz-minimal .biz-price-pill {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--biz-primary) 30%, #e3e0da);
  padding: 4px 12px;
}

.biz-minimal .price-was {
  color: #b6b2a9;
}

.biz-minimal .biz-package-row {
  border: none;
  border-bottom: 1px solid #eeece7;
  border-radius: 0;
  padding: 24px 2px;
}

.biz-minimal .biz-package-header {
  background: none;
  padding: 0;
}

.biz-minimal .biz-package-badge {
  background: transparent;
  color: var(--biz-primary);
  border: 1px solid color-mix(in srgb, var(--biz-primary) 40%, transparent);
  font-weight: 500;
}

.biz-minimal .biz-package-body {
  padding: 16px 2px 0;
}

.biz-minimal .biz-package-checklist-item {
  color: #6b6862;
}

.biz-minimal .biz-faq-item {
  border: none;
  border-bottom: 1px solid #eeece7;
  border-radius: 0;
  padding: 18px 2px;
  background: transparent;
}

.biz-minimal .biz-faq-item summary {
  font-weight: 500;
}

.biz-minimal .biz-footer-band {
  background: transparent;
  border-top: 1px solid #eeece7;
  border-radius: 0;
  padding-top: 48px;
}

.biz-minimal .btn {
  background: var(--biz-primary);
  border-radius: 2px;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.biz-minimal .btn.secondary {
  background: transparent;
  border: 1px solid #d8d4cc;
  color: #2a2a28;
}

/* =====================================================================
   Offerings per theme — the services block is where the three themes
   differ structurally, not just decoratively. Kept together (and last)
   so the three treatments can be read side by side.

   Classic  → تعرفه‌نامه: single column, dotted leaders, name ← → price
   Modern   → کارت برجسته: stacked icon, big type, elevated
   Minimal  → فهرست ادیتوریال: no boxes, no pills, hairline rules
   ===================================================================== */

/* --- Classic: a printed tariff list --- */
.biz-classic .biz-offerings-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--gray-900);
}

.biz-classic .biz-offering-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  align-items: baseline;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  padding: 15px 4px;
  gap: 0;
}

.biz-classic .biz-offering-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--gray-50);
}

.biz-classic .biz-offering-top {
  grid-column: 1;
  grid-row: 1;
  align-items: baseline;
  gap: 10px;
}

/* خط‌چین بین اسم خدمت و قیمت، مثل تعرفه‌نامه‌های چاپی */
.biz-classic .biz-offering-top::after {
  content: "";
  flex: 1;
  min-width: 18px;
  border-bottom: 1px dotted var(--gray-300);
  transform: translateY(-3px);
}

/* وقتی قیمتی وجود نداره (خدمت چک‌لیستی)، خط‌چین بی‌معنیه */
.biz-classic .biz-offering-card:not(:has(.biz-offering-footer)) .biz-offering-top::after {
  display: none;
}

.biz-classic .biz-offering-icon {
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: transparent;
  align-self: center;
}

.biz-classic .biz-offering-icon svg {
  width: 15px;
  height: 15px;
}

.biz-classic .biz-offering-title {
  font-size: 15px;
  font-weight: 600;
}

.biz-classic .biz-offering-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 5px;
  padding-inline-start: 36px;
  font-size: 13px;
}

.biz-classic .biz-offering-footer {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border-top: 0;
  justify-content: flex-end;
}

.biz-classic .biz-price-pill {
  background: transparent;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

.biz-classic .biz-price-pill-outline {
  border: 1px solid var(--gray-300);
  padding: 3px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
}

.biz-classic .price-stack {
  align-items: flex-end;
}

/* --- Modern: bold, elevated cards --- */
.biz-modern .biz-offerings-grid {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}

.biz-modern .biz-offering-card {
  border: 0;
  padding: 24px;
  gap: 13px;
}

.biz-modern .biz-offering-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}

.biz-modern .biz-offering-top {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.biz-modern .biz-offering-icon {
  width: 36px;
  height: 36px;
}

.biz-modern .biz-offering-icon svg {
  width: 17px;
  height: 17px;
}

.biz-modern .biz-offering-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.biz-modern .biz-offering-footer {
  border-top: 0;
  padding-top: 4px;
}

.biz-modern .biz-price-pill {
  padding: 8px 18px;
  font-size: 14px;
}

/* --- Minimal: quiet editorial index --- */
.biz-minimal .biz-offerings-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.biz-minimal .biz-offering-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eeece7;
  border-radius: 0;
  padding: 20px 0;
  gap: 5px;
}

.biz-minimal .biz-offering-card:hover {
  transform: none;
  box-shadow: none;
}

.biz-minimal .biz-offering-icon {
  display: none;
}

.biz-minimal .biz-offering-title {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.biz-minimal .biz-offering-desc {
  font-size: 13px;
  line-height: 1.85;
  max-width: 46ch;
}

.biz-minimal .biz-offering-footer {
  border-top: 0;
  padding-top: 2px;
  margin-top: 4px;
}

.biz-minimal .biz-price-pill,
.biz-minimal .biz-price-pill-outline {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--biz-primary);
  letter-spacing: 0.02em;
}

/* =====================================================================
   Portfolio per theme — same markup, three different ways to look at work.

   Classic  → قاب چاپی: uniform matted frames with a caption plaque
   Modern   → masonry: caption rides over the image, zoom on hover
   Minimal  → قاب بزرگ: full-width editorial frames for image-led work
   ===================================================================== */

/* --- Classic: matted, framed prints in a catalogue --- */
.biz-classic .biz-portfolio-grid {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 16px;
}

.biz-classic .biz-portfolio-item a {
  border: 1px solid var(--gray-300);
  background: #fff;
  padding: 8px;
}

.biz-classic .biz-portfolio-item img {
  height: 150px;
  border: 0;
  border-radius: 0;
}

.biz-classic .biz-portfolio-caption {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-200);
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

/* --- Modern: grid, caption over the image ---
   قبلاً از columns (masonry) استفاده می‌شد، ولی ترتیب پرشدن ستون‌ها تو RTL
   قابل‌اعتماد نیست (کروم گاهی برعکس پر می‌کنه) و یه فضای خالی سمت چپ
   می‌ذاشت. گرید معمولی با ارتفاع ثابت همیشه درست و یکدست می‌مونه. */
.biz-modern .biz-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.biz-modern .biz-portfolio-item a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.biz-modern .biz-portfolio-item img {
  height: 200px;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.biz-modern .biz-portfolio-item a:hover img {
  transform: scale(1.06);
}

.biz-modern .biz-portfolio-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: 30px 14px 12px;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.biz-modern .biz-portfolio-item a:hover .biz-portfolio-caption,
.biz-modern .biz-portfolio-item a:focus-visible .biz-portfolio-caption {
  opacity: 1;
  transform: none;
}

/* روی موبایل hover وجود نداره، پس عنوان باید همیشه دیده بشه */
@media (hover: none) {
  .biz-modern .biz-portfolio-caption {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biz-modern .biz-portfolio-item img,
  .biz-modern .biz-portfolio-caption {
    transition: none;
  }
  .biz-modern .biz-portfolio-item a:hover img {
    transform: none;
  }
}

/* --- Minimal: large editorial frames, one per row --- */
.biz-minimal .biz-portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.biz-minimal .biz-portfolio-item img {
  /* height:auto تا نسبت واقعی عکس حفظ بشه — همون چیزی که جای عکس رو
     قبل از لود رزرو می‌کنه و برای کار تصویرمحور مهم‌تره */
  height: auto;
  border-radius: 0;
}

.biz-minimal .biz-portfolio-caption {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: #8a8681;
  letter-spacing: 0.04em;
}

/* روی موبایل، حداقل‌عرض‌های بالا باعث می‌شد شبکه و masonry به یک ستون بیفتن
   و حالت «کاتالوگ» تم کلاسیک و مدرن از بین بره؛ اینجا دو ستون تضمین می‌شه. */
@media (max-width: 560px) {
  .biz-classic .biz-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .biz-classic .biz-portfolio-item img {
    height: 118px;
  }

  .biz-modern .biz-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .biz-modern .biz-portfolio-item img {
    height: 140px;
  }
}

/* =====================================================================
   Typography per theme — one family (Vazirmatn), three voices.
   With a single typeface the difference has to come from scale,
   weight, tracking and leading rather than from a second family.

   Classic  → پرکنتراست و فشرده، مثل کاتالوگ چاپی
   Modern   → درشت و تایت، نمایشی
   Minimal  → کم‌کنتراست، بازِ بازتر، با فاصله‌ی حروف بیشتر
   ===================================================================== */

/* --- Classic --- */
.biz-classic .biz-name {
  /* Georgia برای فارسی گلیف نداره و باعث می‌شد اسم کسب‌وکار روی هر دستگاه
     با یه سریفِ سیستمیِ متفاوت رندر بشه؛ برمی‌گردیم به فونت خود سایت. */
  font-family: inherit;
  font-size: clamp(23px, 6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.42;
}

.biz-classic .biz-bio {
  font-size: 14.5px;
  line-height: 1.82;
}

.biz-classic .biz-section-heading {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.biz-classic .biz-faq-item summary {
  font-size: 15px;
  font-weight: 700;
}

.biz-classic .biz-package-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- Modern --- */
.biz-modern .biz-name {
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.biz-modern .biz-bio {
  font-size: 15px;
  line-height: 1.95;
}

.biz-modern .biz-section-heading {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.biz-modern .biz-faq-item summary {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.biz-modern .biz-package-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- Minimal --- */
.biz-minimal .biz-name {
  font-size: clamp(21px, 5.5vw, 25px);
  font-weight: 400;
  letter-spacing: 0.045em;
  line-height: 1.55;
}

.biz-minimal .biz-bio {
  font-size: 14.5px;
  line-height: 2.05;
  letter-spacing: 0.012em;
}

.biz-minimal .biz-faq-item summary {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.biz-minimal .biz-package-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.biz-minimal .biz-package-price {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ===== Notifications ===== */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  text-decoration: none;
}

.notif-bell:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.notif-bell svg {
  width: 19px;
  height: 19px;
}

.notif-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.notif-item-button {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.notif-item-button:disabled { cursor: wait; opacity: .72; }

.admin-page-heading { margin-top: 32px; gap: 16px; }
.admin-page-heading .page-title { margin: 0; }
.admin-content-block { margin-top: 18px; }
.admin-content-block h2 { margin: 0; font-size: 17px; }
.admin-inline-list { display: grid; gap: 8px; margin-top: 14px; }
.admin-inline-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 12px; }
.admin-inline-list form, .admin-table form { margin: 0; }

/* ===== Management workspace refresh ===== */
.siteadmin-page > main.container { max-width: 1280px; }
.admin-eyebrow, .feedback-eyebrow { display: inline-block; margin-bottom: 4px; color: var(--brand-600); font-size: 12px; font-weight: 800; }
.admin-count-pill { padding: 7px 12px; border: 1px solid var(--brand-100); border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 12px; font-weight: 800; }
.admin-nav { display: grid; grid-template-columns: .7fr 1.3fr 1.3fr 1fr; gap: 10px; padding: 10px; border: 1px solid var(--gray-200); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-nav-group { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 5px; padding: 7px; border-inline-end: 1px solid var(--gray-100); }
.admin-nav-group:last-child { border-inline-end: 0; }
.admin-nav-group-title { flex: 1 0 100%; padding-inline: 8px; color: var(--gray-400); font-size: 10px; font-weight: 800; }
.admin-nav-link { padding: 6px 9px; font-size: 12px; }
.is-preview-header { opacity: .82; }
.is-preview-header::after { position: absolute; inset: auto 50% 4px auto; padding: 1px 8px; transform: translateX(50%); border-radius: 999px; background: var(--gray-100); color: var(--gray-500); content: "حالت پیش‌نمایش · پیمایش غیرفعال"; font-size: 9px; white-space: nowrap; }
.is-preview-header a, .is-preview-header button { cursor: not-allowed !important; }
.is-preview-header .menu-toggle:disabled { opacity: .62; }

.article-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 32px; }
.article-editor-top-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.article-editor-workspace { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(280px, .85fr); align-items: start; gap: 24px; margin: 24px 0 48px; }
.article-editor-main, .article-editor-sidebar { display: grid; gap: 18px; }
.article-editor-sidebar { position: sticky; top: 92px; }
.article-editor-sidebar .jalali-datetime-widget { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-editor-card { min-width: 0; padding: 22px; border: 1px solid var(--gray-200); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.article-editor-accordion { padding: 0; overflow: hidden; }
.article-editor-accordion > summary { cursor: pointer; list-style: none; }
.article-editor-accordion > summary::-webkit-details-marker, .article-section-form > summary::-webkit-details-marker { display: none; }
.article-editor-accordion > .article-card-heading { align-items: center; margin: 0; padding: 18px 20px; }
.article-editor-accordion > .article-card-heading > span { display: grid; gap: 3px; }
.article-editor-accordion > .article-card-heading b { color: var(--gray-900); font-size: 15px; }
.article-editor-accordion > .article-card-body { padding: 20px; border-top: 1px solid var(--gray-100); }
.article-editor-accordion[open] > summary .accordion-icon, .article-section-form[open] > summary .accordion-icon { transform: rotate(180deg); background: var(--brand-50); }
.article-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 17px; color: var(--gray-900); }
.article-card-heading > span { font-size: 15px; font-weight: 800; }
.article-card-heading small { color: var(--gray-400); font-size: 11px; }
.article-card-heading a { color: var(--brand-600); font-size: 11px; font-weight: 700; text-decoration: none; }
.article-editor-card .field:last-child { margin-bottom: 0; }
.article-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: -22px -22px 0; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.article-toolbar > div { display: flex; gap: 4px; }
.article-toolbar button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--gray-600); font: inherit; cursor: pointer; }
.article-toolbar button:hover { background: #fff; color: var(--brand-600); box-shadow: var(--shadow-sm); }
.article-toolbar small { color: var(--gray-400); font-size: 10px; }
.article-body-input textarea { min-height: 480px; margin-top: 0; padding: 22px; border: 0; border-radius: 0; resize: vertical; box-shadow: none; line-height: 2; }
.article-body-input textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand-100); }
.article-editor-counter { display: flex; align-items: center; justify-content: space-between; margin: 0 -22px -22px; padding: 9px 16px; border-top: 1px solid var(--gray-100); color: var(--gray-400); font-size: 10px; }
.google-preview { margin-bottom: 18px; padding: 17px; border: 1px solid var(--gray-100); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }
.google-preview strong { display: block; color: #1a0dab; font-size: 17px; font-weight: 500; }
.google-preview span { display: block; color: #188038; font-size: 12px; }
.google-preview p { margin: 4px 0 0; color: var(--gray-600); font-size: 12px; line-height: 1.75; }
.featured-toggle { padding: 10px 12px; border: 1px solid var(--brand-100); border-radius: 12px; background: var(--brand-50); }
.article-choice-list { display: grid; max-height: 220px; gap: 5px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.article-choice-list li label, .article-choice-list > div label { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--gray-100); border-radius: 9px; color: var(--gray-700); font-size: 12px; cursor: pointer; }
.article-choice-list li label:has(input:checked), .article-choice-list > div label:has(input:checked) { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.article-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.article-admin-stats > div { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: 13px; background: #fff; }
.article-admin-stats span { color: var(--gray-500); font-size: 12px; }
.article-admin-stats strong { color: var(--brand-700); font-size: 19px; }
.article-admin-search { max-width: 620px; }

/* ===== Broadcast: targeted business picker ===== */
.targeting-panel {
  display: grid;
  gap: 14px;
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--gray-50);
}

.targeting-picker input[type="search"],
.targeting-picker input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}

.targeting-picker { position: relative; }

.targeting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: #fff;
}

.targeting-chips input {
  flex: 1 1 120px;
  min-width: 100px;
  border: 0;
  padding: 4px 2px;
  background: transparent;
  font-size: 13px;
}

.targeting-chips input:focus { outline: none; }

.targeting-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.targeting-chip button {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: inherit;
  font-size: 13px;
  line-height: 1;
}

.targeting-chip button:hover { background: var(--brand-100); }

.targeting-suggestions {
  position: absolute;
  z-index: 6;
  inset-inline: 0;
  top: 100%;
  margin-top: 4px;
  display: grid;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.targeting-suggestions button {
  padding: 9px 12px;
  text-align: start;
  font-size: 13px;
  color: var(--gray-700);
}

.targeting-suggestions button:hover { background: var(--gray-50); }

.targeting-results {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.targeting-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.targeting-result-row:has(input:checked) {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.targeting-result-info { display: grid; gap: 2px; min-width: 0; }
.targeting-result-info strong { font-size: 13px; overflow-wrap: anywhere; }
.targeting-result-info small { color: var(--gray-500); font-size: 11.5px; }

.targeting-selected {
  padding-top: 10px;
  border-top: 1px solid var(--gray-200);
}
.admin-taxonomy-card { margin-top: 12px; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 14px; background: #fff; }
.admin-taxonomy-card > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--gray-900); cursor: pointer; list-style: none; }
.admin-taxonomy-card > summary::-webkit-details-marker { display: none; }
.admin-taxonomy-card > summary > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.admin-taxonomy-card summary small { color: var(--gray-500); }
.accordion-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gray-50); color: var(--brand-600); transition: transform .18s ease, background .18s ease; }
.accordion-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-taxonomy-card[open] .accordion-icon { transform: rotate(180deg); background: var(--brand-50); }
.admin-taxonomy-card .admin-inline-list { margin: 0; padding: 0 16px 16px; }
.article-featured-badge { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 10px; font-weight: 800; }
.admin-preview-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 9px 13px; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: 12px; }
.admin-preview-banner button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.article-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--gray-100); }
.article-detail-tags span { padding: 4px 10px; border-radius: 999px; background: var(--gray-50); color: var(--gray-500); font-size: 11px; }
.related-articles { margin: 64px auto 0; padding-top: 38px; border-top: 1px solid var(--gray-200); }
.related-articles > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.related-articles > header h2 { font-size: 22px; }.related-articles > header p { margin: 3px 0 0; color: var(--gray-500); font-size: 12px; }.related-articles > header > a { color: var(--brand-600); font-size: 12px; font-weight: 800; text-decoration: none; }
.related-articles > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-articles > div > a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 13px; padding: 11px; border: 1px solid var(--gray-200); border-radius: 14px; background: #fff; text-decoration: none; }
.related-articles > div > a.no-cover { grid-template-columns: 1fr; min-height: 106px; }
.related-articles img { width: 104px; height: 84px; border-radius: 10px; object-fit: cover; }
.related-articles > div > a > div { display: grid; align-content: center; gap: 3px; min-width: 0; }
.related-articles small { color: var(--brand-600); font-size: 10px; }.related-articles span { color: var(--gray-400); font-size: 10px; }.related-articles strong { color: var(--gray-800); font-size: 13px; line-height: 1.7; }

.article-sections-card { grid-column: 1 / -1; }
.article-section-form-list { display: grid; gap: 14px; }
.article-section-form { overflow: hidden; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--gray-50); }
.article-section-form > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.article-section-form > summary strong { min-width: 0; overflow: hidden; color: var(--gray-800); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.article-section-form > summary div { display: flex; flex-shrink: 0; gap: 5px; }
.article-section-form > summary button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--gray-200); border-radius: 9px; background: #fff; color: var(--gray-600); font: inherit; cursor: pointer; }
.article-section-form > summary button:disabled { opacity: .35; cursor: default; }
.article-section-form-body { padding: 16px; border-top: 1px solid var(--gray-200); background: #fff; }
.article-body-editor-shell { padding-top: 0 !important; }
.article-body-editor-shell .article-toolbar { margin: 0 -20px; }
.article-body-editor-shell .article-editor-counter { margin: 0 -20px -20px; }
.article-section-delete { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; color: var(--danger-600) !important; cursor: pointer; }
.article-section-delete input { width: 17px; height: 17px; accent-color: var(--danger-600); }
.article-add-section { width: 100%; margin-top: 14px; border-style: dashed !important; }

.feedback-page-shell { width: min(100%, 760px); margin: 0 auto 48px; }
.feedback-intro-card { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 18px; border: 1px solid var(--brand-100); border-radius: 16px; background: linear-gradient(135deg, var(--brand-50), #fff); }
.feedback-intro-card p, .business-feedback-invite p { margin: 4px 0 0; color: var(--gray-600); font-size: 13px; }
.feedback-intro-icon, .business-feedback-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 13px; background: var(--brand-600); color: #fff; font-size: 24px; }
.feedback-form-card { margin-top: 14px; }
.business-feedback-invite { display: flex; align-items: flex-start; gap: 15px; margin-top: 22px; border-color: var(--brand-100); background: linear-gradient(135deg, #fff, var(--brand-50)); }
.business-feedback-invite h3 { margin: 0; font-size: 17px; }.business-feedback-invite .btn { margin-top: 12px; }.business-feedback-invite small { display: block; margin-top: 8px; color: var(--gray-500); }
.feedback-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 36px; }
.feedback-admin-card { display: grid; gap: 9px; color: inherit; text-decoration: none; }.feedback-admin-card.is-new { border-inline-start: 4px solid var(--brand-600); }.feedback-admin-card time { color: var(--gray-400); font-size: 11px; }.feedback-admin-card h2 { font-size: 16px; }.feedback-admin-card p { margin: 0; color: var(--gray-600); font-size: 13px; }.feedback-admin-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--gray-500); font-size: 11px; }
.feedback-message-card h2 { font-size: 17px; }.feedback-message-card > p { color: var(--gray-700); line-height: 2; }
.status-new { background: var(--brand-50); color: var(--brand-700); }.status-reviewing { background: #fffbeb; color: #92400e; }.status-resolved { background: #ecfdf5; color: #047857; }

@media (max-width: 980px) {
  /* روی موبایل به‌جای اسکرول افقیِ کل نوار (که کشف‌کردنش سخت بود)، هر
     دسته (پیشخوان/کاربران و کسب‌وکار/محتوا/تنظیمات) ردیف مجزای خودش رو
     می‌گیره با یه عنوان کوچیک بالاش، تا دسته‌بندی صفحات مدیریت مشخص باشه. */
  .admin-nav {
    display: grid;
    gap: 10px;
    padding: 10px;
  }
  .admin-nav-group {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    border-inline-end: 0;
    gap: 6px;
  }
  .admin-nav-group + .admin-nav-group {
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
  }
  .admin-nav-group-title {
    display: block;
    flex: 1 0 100%;
    padding-inline: 2px;
  }
  .admin-nav-link { padding: 7px 11px; }
  .article-editor-workspace { grid-template-columns: 1fr; }
  .article-editor-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .admin-table-wrap,
  .siteadmin-page .card.admin-table-wrap {
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-table-wrap .admin-table,
  .admin-table-wrap .admin-table tbody { display: block; width: 100%; }
  .admin-table-wrap .admin-table thead { display: none; }
  .admin-table-wrap .admin-table tbody { display: grid; gap: 10px; }
  .admin-table-wrap .admin-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  /* دو فیلد کنار هم می‌شینن (مثلا وضعیت+پلن) تا کارت اونقدر بلند نشه؛ فقط
     ستون اول (عنوان ردیف) و عملیات کل عرض رو می‌گیرن. */
  .admin-table-wrap .admin-table td {
    display: grid;
    grid-template-columns: minmax(56px, .55fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
    overflow-wrap: anywhere;
    font-size: 13px;
    border-bottom: 1px solid var(--gray-100);
  }
  .admin-table-wrap .admin-table td::before {
    content: attr(data-label);
    color: var(--gray-500);
    font-size: 10.5px;
    font-weight: 700;
  }
  .admin-table-wrap .admin-table td:first-child,
  .admin-table-wrap .admin-table td.admin-table-empty {
    grid-column: 1 / -1;
    padding-block: 10px;
  }
  .admin-table-wrap .admin-table td[data-label="عملیات"] { grid-column: 1 / -1; grid-template-columns: 1fr; border-bottom: 0; }
  .admin-table-wrap .admin-table td[data-label="عملیات"]::before { content: none; }
  .admin-table-wrap .admin-table td[data-label="عملیات"] .btn-row,
  .admin-table-wrap .admin-table td[data-label="عملیات"] .btn { width: 100%; }

  /* دکمه‌های اکشن هدر صفحات مدیریت (مثلا «مقاله تازه») روی موبایل به‌جای
     پیل‌های ردیفی که به هم می‌چسبیدن، منظم و تمام‌عرض زیر هم/کنار هم می‌شینن. */
  .admin-page-heading { margin-top: 24px; }
  .admin-page-heading .btn-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .admin-page-heading .btn-row .btn:last-child { grid-column: 1 / -1; }
  .admin-page-heading .btn-row .btn { min-height: 42px; }
  .admin-table-wrap .admin-table td.admin-table-empty { display: block; text-align: center; }
  .admin-table-wrap .admin-table td.admin-table-empty::before { content: none; }

  .article-editor-header { align-items: stretch; flex-direction: column; }
  /* «پیش‌نمایش زنده ↗» متنش از دکمه‌ی ذخیره بلندتره؛ تو یه ستونِ نصفه دو
     خطی می‌شد و کل ردیف رو کج‌وکوله می‌کرد. الان تمام‌عرض روی ردیف خودشه،
     ذخیره+برگشت هم زیرش. */
  .article-editor-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .article-editor-top-actions .article-preview-link { flex: 1 1 100%; }
  .article-editor-top-actions button[type="submit"] { flex: 1 1 auto; }
  .article-editor-top-actions .btn { min-height: 44px; }
  .article-editor-workspace { gap: 14px; margin-top: 16px; }
  .article-editor-sidebar { grid-template-columns: 1fr; }
  .article-editor-card:not(.article-editor-accordion) { padding: 16px; }
  .article-editor-accordion > .article-card-heading { padding: 15px 16px; }
  .article-editor-accordion > .article-card-body { padding: 16px; }
  .article-toolbar { grid-template-columns: 1fr auto; }.article-toolbar small { display: none; }
  .article-body-editor-shell .article-toolbar { margin: 0 -16px; }
  .article-body-editor-shell .article-editor-counter { margin: 0 -16px -16px; }
  .article-body-input textarea { min-height: 390px; padding: 16px; }
  .article-editor-counter { margin: 0 -16px -16px; }
  .article-admin-stats { grid-template-columns: repeat(2, 1fr); }
  .feedback-admin-grid, .related-articles > div { grid-template-columns: 1fr; }
  .articles-toolbar { align-items: flex-start; flex-direction: column; }
  .articles-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .article-content-section figure { margin-inline: 0; }
  .article-detail-cover { border-radius: 18px; }
  .article-detail-meta { gap: 7px; }
  .related-articles > header { align-items: flex-start; flex-direction: column; }
  .article-section-form-body { padding: 12px; }
  .admin-taxonomy-card .admin-inline-list > div { align-items: stretch; flex-direction: column; }
  .business-feedback-invite { flex-direction: column; }
}

.notif-item:hover {
  border-color: var(--brand-200);
  background: var(--gray-50);
}

.notif-item.is-unread {
  border-inline-start: 3px solid var(--brand-600);
  background: var(--brand-50);
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
  background: transparent;
}

.notif-item.is-unread .notif-dot {
  background: var(--brand-600);
}

.notif-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notif-body {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.75;
}

.notif-meta {
  font-size: 12px;
  color: var(--gray-400);
}

/* ===== Changelog ===== */
.changelog {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
}

.changelog-entry {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--gray-100);
}

.changelog-entry:last-child {
  border-bottom: 0;
}

.changelog-date {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--gray-500);
  padding-top: 2px;
}

.changelog-version {
  font-size: 12px;
  color: var(--gray-400);
}

.changelog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.changelog-head h3 {
  font-size: 16.5px;
  font-weight: 700;
}

.changelog-kind {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.changelog-kind-feature {
  background: var(--brand-50);
  color: var(--brand-700);
}

.changelog-kind-improvement {
  background: #ecfdf5;
  color: #065f46;
}

.changelog-kind-fix {
  background: #fef3c7;
  color: #92400e;
}

.changelog-body ul {
  margin: 10px 0 0;
  padding-inline-start: 18px;
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1.95;
}

@media (max-width: 640px) {
  .changelog-entry {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .changelog-date {
    flex-direction: row;
    gap: 10px;
    align-items: baseline;
  }
}

/* زنگوله بیرون از منوی جمع‌شونده‌ست، پس تو دسکتاپ باید کنار ناوبری بشینه
   و تو موبایل کنار دکمه‌ی منو */
.site-header .bar .notif-bell {
  margin-inline-start: auto;
}

/* پروفایل من کنار زنگوله می‌شینه؛ اگه margin-start:auto رو هم می‌گرفت،
   بین این دو فاصله‌ی حداکثری می‌افتاد و از هم جدا می‌شدن. */
.site-header .bar .header-profile-link {
  margin-inline-start: 0;
}

@media (max-width: 720px) {
  .site-header .bar .notif-bell {
    margin-inline-start: auto;
    margin-inline-end: 4px;
  }

  .site-header .bar .header-profile-link {
    margin-inline-start: 0;
  }
}

/* ===== Install prompt ===== */
.install-bar {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.install-bar-text {
  display: block;
  min-width: 0;
  font-size: 13.5px;
}

.install-bar-text strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* رو یه ردیف تک‌خطی، توضیح زیر عنوان جا نمی‌شه؛ فقط عنوان می‌مونه */
.install-bar-text span {
  display: none;
}

.install-bar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* =====================================================================
   Mobile polish — measured fixes from the audit
   ===================================================================== */

/* کاور با متغیر ست میشه تا موبایل نسخه‌ی سبک رو بگیره، نه فایل ۱۹۲۰ پیکسلی رو.
   تم مدرن وقتی کاور نداره یه گرادینت نشون می‌ده، پس اونجا گرادینت باید
   fallbackِ همین متغیر بمونه — وگرنه روی کاورِ واقعی می‌افته. */
.biz-cover {
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
}

.biz-modern .biz-cover {
  background-image: var(--cover, linear-gradient(135deg, var(--biz-primary), var(--biz-secondary)));
}

@media (max-width: 700px) {
  .biz-cover {
    background-image: var(--cover-small, var(--cover));
  }

  .biz-modern .biz-cover {
    background-image: var(--cover-small, var(--cover, linear-gradient(135deg, var(--biz-primary), var(--biz-secondary))));
  }
}

/* تیتر صفحه‌ی اصلی روی موبایل ۴۴px بود و سه خط می‌شد */
.hero h1 {
  font-size: clamp(28px, 7.5vw, 44px);
}

.hero p {
  font-size: clamp(15px, 4vw, 17px);
}

/* تارگت‌های لمسی زیر ۴۴px. عرض صفحه معیار گرفته شده نه (hover: none)،
   چون بعضی لپ‌تاپ‌های لمسی hover رو گزارش می‌کنن و اون‌وقت این قانون‌ها
   اصلا اعمال نمی‌شدن (و قابل تست هم نبودن). */
@media (max-width: 720px) {
  /* Touch target comes from min-height on the link itself, not from gap
     between links — otherwise the 44px boxes plus gap leave the list
     looking full of dead whitespace. */
  .footer-links {
    gap: 0;
  }

  .footer-links a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 38px;
  }

  .mobile-menu > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .menu-toggle,
  .notif-bell {
    width: 44px;
    height: 44px;
  }

  /* ردیف‌های لینک‌دار داخل کارت‌ها (وضعیت کسب‌وکارها، پربازدیدترین‌ها، ...)
     ۲۹px ارتفاع داشتن؛ روی موبایل هم ریز بودن هم به هم چسبیده */
  .card .row-between > a:not(.icon-back-button) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* کلید سه‌ماهه/سالانه‌ی تعرفه‌ها ۳۲px بود */
  .pricing-toggle button {
    min-height: 40px;
  }

  .biz-portfolio-caption {
    padding-block: 4px;
  }
}

/* متن بج‌ها ۱۱٫۵px بود و برای قیمت کم‌خوان */
.biz-discount-badge,
.biz-package-badge {
  font-size: 12.5px;
}

/* =====================================================================
   Dark — یه حالت، نه یه چیدمان چهارم. با هر سه تم ترکیب می‌شه، پس
   کسب‌وکار می‌تونه کلاسیکِ تیره یا مینیمالِ تیره داشته باشه.
   ===================================================================== */
.biz-dark {
  --biz-ink: #f1f5f9;
  --biz-ink-soft: #a8b3c4;
  --biz-surface: #16181f;
  --biz-surface-2: #1e2129;
  --biz-line: #2b2f3a;
  /* رنگ برند وقتی قراره «متن» روی زمینه‌ی تیره باشه. رنگ خام کاربر ممکنه
     میانه یا تیره باشه و کنتراست رد بشه؛ این نسخه به سمت سفید کشیده می‌شه
     تا مستقل از انتخاب کاربر خونا بمونه. */
  --biz-accent-bright: color-mix(in srgb, var(--biz-primary) 45%, #fff);

  background: #0f1116;
  color: var(--biz-ink);
  border-radius: var(--radius-lg);
}

.biz-dark .biz-name,
.biz-dark .biz-section-heading,
.biz-dark .biz-offering-title,
.biz-dark .biz-package-title,
.biz-dark .biz-faq-item summary {
  color: var(--biz-ink);
}

.biz-dark .biz-bio,
.biz-dark .biz-offering-desc,
.biz-dark .biz-portfolio-caption,
.biz-dark .biz-location,
.biz-dark .biz-faq-item p,
.biz-dark .empty {
  color: var(--biz-ink-soft);
}

/* سطح‌ها: کارت خدمات، پکیج، سوالات متداول، فرم تماس */
.biz-dark .biz-offering-card,
.biz-dark .biz-package-row,
.biz-dark .biz-faq-item {
  background: var(--biz-surface);
  border-color: var(--biz-line);
}

.biz-dark .biz-package-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--biz-primary) 22%, var(--biz-surface)), var(--biz-surface));
}

.biz-dark .biz-package-body {
  background: var(--biz-surface-2);
}

.biz-dark .biz-package-checklist-item {
  color: var(--biz-ink-soft);
}

.biz-dark .biz-hero,
.biz-dark .biz-hero-body {
  background: var(--biz-surface);
  border-color: var(--biz-line);
}

.biz-dark .biz-logo {
  border-color: var(--biz-surface);
  background: var(--biz-surface);
}

/* تم کلاسیک تو حالت روشن قاب سفید دور نمونه‌کار داره */
.biz-dark.biz-classic .biz-portfolio-item a {
  background: var(--biz-surface);
  border-color: var(--biz-line);
}

.biz-dark.biz-classic .biz-portfolio-caption {
  border-top-color: var(--biz-line);
}

.biz-dark .biz-portfolio-item img {
  background: var(--biz-surface-2);
}

/* تم مینیمال پس‌زمینه‌ی کاغذی روشن داره که باید خنثی بشه */
.biz-dark.biz-minimal {
  background: #0f1116;
}

.biz-dark.biz-minimal .biz-offering-card,
.biz-dark.biz-minimal .biz-portfolio-item a {
  background: transparent;
  border-bottom-color: var(--biz-line);
}

.biz-dark.biz-minimal .biz-footer-band {
  border-top-color: var(--biz-line);
}

/* تعرفه‌نامه‌ی تم کلاسیک */
.biz-dark.biz-classic .biz-offerings-grid {
  border-top-color: var(--biz-ink);
}

.biz-dark.biz-classic .biz-offering-card {
  background: transparent;
  border-bottom-color: var(--biz-line);
}

.biz-dark.biz-classic .biz-offering-card:hover,
.biz-dark .biz-offering-card:hover {
  background: var(--biz-surface-2);
}

.biz-dark.biz-classic .biz-price-pill {
  color: var(--biz-ink);
}

.biz-dark .biz-offering-top::after {
  border-bottom-color: var(--biz-line);
}

/* قرص‌ها، تگ‌ها و آیکون‌ها روی زمینه‌ی تیره */
.biz-page.biz-dark .biz-price-pill {
  /* مثل دکمه: زمینه تیره و متن روشن، تا کنتراست به روشنیِ رنگ برند وابسته نباشه.
     رنگ برند فقط تو حاشیه دیده میشه. */
  background: var(--biz-surface-2);
  border: 1px solid color-mix(in srgb, var(--biz-primary) 45%, var(--biz-line));
  color: var(--biz-ink);
}

.biz-dark .biz-price-pill-outline {
  background: transparent;
  border-color: var(--biz-line);
  color: var(--biz-ink-soft);
}

.biz-dark .tag,
.biz-dark .biz-hashtags .tag {
  background: var(--biz-surface-2);
  border-color: var(--biz-line);
  /* ink-soft روی سطح روشن‌ترِ کارت‌ها کنتراست AA رو رد می‌کرد */
  color: #c3ccd9;
}

.biz-dark .biz-offering-icon {
  background: color-mix(in srgb, var(--biz-primary) 24%, var(--biz-surface));
  color: #fff;
}

.biz-dark .biz-icon-btn {
  background: var(--biz-surface-2);
  border-color: var(--biz-line);
  color: var(--biz-ink);
}

.biz-dark .biz-icon-btn:hover {
  background: color-mix(in srgb, var(--biz-primary) 30%, var(--biz-surface));
}

/* فرم تماس */
.biz-dark .biz-contact-form input,
.biz-dark .biz-contact-form textarea {
  background: var(--biz-surface-2);
  border-color: var(--biz-line);
  color: var(--biz-ink);
}

.biz-dark .biz-contact-form input::placeholder,
.biz-dark .biz-contact-form textarea::placeholder {
  color: #6b7480;
}

.biz-dark .biz-contact-form label {
  color: var(--biz-ink-soft);
}

.biz-dark .biz-footer-band {
  /* پیش‌فرضش با #fff میکس می‌شد و تو حالت تیره یه بلوک سفید می‌موند.
     رنگ برند هم اینجا میکس نمی‌شه: اگه روشن باشه زمینه اون‌قدر روشن می‌شه
     که هیچ متنی روش به کنتراست AA نمی‌رسه. */
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
}

.biz-dark .price-was {
  color: #6b7480;
}

.biz-dark hr,
.biz-dark .biz-divider {
  border-color: var(--biz-line);
}

/* دکمه‌ها: رنگ اصلی کسب‌وکار می‌تونه روشن باشه (مثل تم مینیمال تیره)، و اون‌وقت
   دکمه‌ی توپُر با متن سفید ناخواناست. اینجا زمینه همیشه تیره می‌مونه و خودِ
   رنگ برند میره روی متن و حاشیه — مستقل از اینکه کاربر چه رنگی انتخاب کرده. */
/* .biz-page هم به سلکتور اضافه شده تا از قانون‌های تکِ تمی مثل
   «.biz-minimal .btn» (که هم‌وزنن) قطعا جلو بزنه، نه به امید ترتیب فایل */
.biz-page.biz-dark .btn,
.biz-page.biz-dark .btn.secondary,
.biz-page.biz-dark button.btn {
  background: var(--biz-surface-2);
  border: 1px solid color-mix(in srgb, var(--biz-primary) 60%, var(--biz-line));
  color: var(--biz-primary);
}

.biz-page.biz-dark .btn:hover {
  background: color-mix(in srgb, var(--biz-primary) 18%, var(--biz-surface-2));
}

/* دکمه‌ی اصلی صفحه‌ی کسب‌وکار. قبلا رنگش اینلاین ست می‌شد که یعنی هیچ تمی
   نمی‌تونست اصلاحش کنه — از جمله تم تیره، که دکمه‌اش نامرئی می‌شد. */
.biz-page .btn.biz-cta {
  background: var(--biz-primary);
  color: #fff;
}

.biz-page.biz-dark .btn.biz-cta {
  /* زمینه عمدا تیره می‌مونه: رنگ برند می‌تونه هر چیزی باشه و تنها راهی که
     کنتراست متن همیشه قبول بشه اینه که روشنیِ زمینه به اون وابسته نباشه */
  background: var(--biz-surface-2);
  border: 1px solid color-mix(in srgb, var(--biz-primary) 55%, var(--biz-line));
  color: var(--biz-primary);
}

/* عناصر ریزی که موقع جاروی کنتراست کل صفحه پیدا شدن و روی زمینه‌ی تیره
   زیر حد AA بودن */
.biz-page.biz-dark .verified-badge {
  color: #6ee7b7;
}

.biz-page.biz-dark .biz-discount-badge {
  background: color-mix(in srgb, #34d399 22%, var(--biz-surface-2));
  color: #6ee7b7;
}

.biz-page.biz-dark .price-was {
  color: #9aa4b2;
}

.biz-page.biz-dark .biz-package-price {
  color: var(--biz-ink);
}

.biz-page.biz-dark .biz-package-price small,
.biz-page.biz-dark small {
  color: var(--biz-ink-soft);
}

.biz-page.biz-dark .biz-section-heading {
  color: var(--biz-ink);
}

.biz-page.biz-dark .biz-minimal .biz-section-heading,
.biz-page.biz-dark.biz-minimal .biz-section-heading {
  color: #9aa4b2;
}

.biz-page.biz-dark .field-required {
  color: #fca5a5;
}

/* بج‌ها زمینه‌ی خودشون رو دارن، پس فقط عوض کردن رنگ متن کافی نبود */
.biz-page.biz-dark .verified-badge {
  background: color-mix(in srgb, #34d399 16%, var(--biz-surface));
  color: #6ee7b7;
}

.biz-page.biz-dark .biz-discount-badge {
  background: color-mix(in srgb, #34d399 14%, var(--biz-surface));
  color: #a7f3d0;
}

.biz-page.biz-dark .field-required {
  color: #fecaca;
}

/* هنوز زیر ۴٫۵ بودن؛ زمینه تیره‌تر و متن روشن‌تر */
.biz-page.biz-dark .verified-badge,
.biz-page.biz-dark .biz-discount-badge {
  background: color-mix(in srgb, #34d399 10%, #0f1116);
  color: #d1fae5;
}

/* رنگ برند به‌عنوان متن روی زمینه‌ی تیره، همیشه نسخه‌ی روشن‌شده */
.biz-page.biz-dark .btn,
.biz-page.biz-dark .btn.secondary,
.biz-page.biz-dark .btn.biz-cta {
  color: var(--biz-accent-bright);
}

.biz-page.biz-dark .biz-package-badge {
  background: var(--biz-surface-2);
  border: 1px solid color-mix(in srgb, var(--biz-primary) 45%, var(--biz-line));
  color: var(--biz-accent-bright);
}

/* =====================================================================
   نمودارها
   ===================================================================== */

/* Chart.js با responsive:true نسبت‌ابعاد رو از اتریبیوت‌های خود canvas
   می‌گیره. قبلا فقط height="90" ست بود، پس width پیش‌فرض ۳۰۰ می‌شد و
   نسبت ۳۳:۱۰ درمی‌اومد؛ روی موبایل یعنی نموداری با ارتفاع ~۱۰۰px که
   راهنما (legend) نصفش رو می‌خورد. حالا ارتفاع از CSS میاد و
   maintainAspectRatio خاموشه. */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  margin-top: 16px;
}

.chart-wrap canvas {
  display: block;
}

@media (max-width: 720px) {
  .chart-wrap {
    height: 260px;
  }
}

/* =====================================================================
   کارت کسب‌وکار در «کسب‌وکارهای من»
   ===================================================================== */
.biz-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.biz-row-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 260px;
}

.biz-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

.biz-row-info {
  min-width: 0;
}

.biz-row-title {
  display: block;
  font-size: 16px;
  line-height: 1.5;
}

.biz-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin-top: 8px;
  color: var(--gray-500);
  font-size: 13px;
}

.biz-row-slug {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .biz-row-card {
    align-items: stretch;
    gap: 14px;
  }

  /* دکمه‌ها کنار متن جا نمی‌شن؛ ردیف جدا با یه خط جداکننده */
  .biz-row-actions {
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
  }

  .biz-row-actions .btn {
    flex: 1 1 auto;
    min-height: 40px;
  }
}

/* Universal dashboard spacing and return-control treatment. */
/* Every non-profile page gets a stable breathing room below the sticky header.
   Keep this on main itself so nested dashboard wrappers cannot collapse it. */
body:not(.business-profile-page) > main.container {
  padding-block-start: 56px !important;
}

.icon-back-button {
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.icon-back-button:hover,
.icon-back-button:focus-visible {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  outline: none;
  transform: translateX(2px);
}
.form-card > .row-between:first-child,
.form-card > .page-heading:first-child,
.admin-page-heading,
.article-editor-header {
  align-items: flex-start;
}
.form-card > .row-between:first-child {
  min-height: 52px;
  margin: -2px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.form-card > .row-between:first-child .page-title,
.form-card > .page-heading:first-child .page-title {
  padding-top: 8px;
}
.form-card > .row-between:first-child > .icon-back-button {
  margin-inline-start: auto;
}

/* Headings that live directly under main (lists, analytics, notifications) use
   the same rhythm as form pages. */
body:not(.business-profile-page) > main.container > .row-between:first-child,
body:not(.business-profile-page) > main.container > .admin-page-heading:first-child {
  margin-top: 0 !important;
  padding-top: 0;
}

/* A long title next to the back button must never push the button onto its
   own orphan line: keep the pair on one row and let the title text wrap
   internally instead (row-between defaults to flex-wrap: wrap). Scoped to
   rows that actually contain a back button — headers with a normal action
   button (e.g. "+ کسب‌وکار جدید") still need to wrap to two lines on
   narrow screens, otherwise title and button get crushed onto one row. */
.form-card > .row-between:first-child,
.form-card > .page-heading:first-child,
.admin-page-heading:has(.icon-back-button),
body:not(.business-profile-page) > main.container > .row-between:first-child:has(.icon-back-button) {
  flex-wrap: nowrap;
}
.form-card > .row-between:first-child > *:first-child,
.form-card > .page-heading:first-child > *:first-child,
.admin-page-heading:has(.icon-back-button) > *:first-child,
body:not(.business-profile-page) > main.container > .row-between:first-child:has(.icon-back-button) > *:first-child {
  min-width: 0;
}

body:not(.business-profile-page) > main.container > .dashboard-manage-page,
body:not(.business-profile-page) > main.container > .article-detail {
  padding-top: 0;
}

/* The business cap explains itself on hover, keyboard focus and mobile tap. */
.business-limit-control { position: relative; display: inline-flex; }
.business-limit-trigger { pointer-events: auto; cursor: help; }
.business-limit-tooltip {
  position: absolute;
  z-index: 5;
  /* از لبه‌ی شروع کنترل (راست تو RTL) شروع و به چپ باز می‌شه، نه برعکس؛
     وگرنه وقتی دکمه سمت راست صفحه نبود، جعبه از لبه‌ی صفحه بیرون می‌زد. */
  inset-inline-start: 0;
  top: calc(100% + 9px);
  width: min(280px, 78vw);
  padding: 10px 12px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--gray-900);
  color: #fff;
  font-size: 12px;
  line-height: 1.75;
  text-align: start;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.business-limit-control:hover .business-limit-tooltip,
.business-limit-control:focus-within .business-limit-tooltip,
.business-limit-tooltip.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Small tap-to-reveal "؟" hint next to a section title, explaining what the
   section is for and why it matters. The tooltip is position:fixed and
   placed by JS (see _hint.html) instead of being absolutely positioned
   inside its accordion/card — those ancestors use overflow:hidden and clip
   a locally-positioned tooltip (or bury it under the next section) the
   moment the accordion is short/collapsed. Fixed positioning escapes that
   entirely and is always on top regardless of where the trigger sits. */
.hint-control {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: 5px;
}

.hint-trigger {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

.hint-trigger:hover,
.hint-trigger:focus-visible {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  outline: none;
}

.hint-tooltip {
  position: fixed;
  z-index: 200;
  width: min(240px, calc(100vw - 20px));
  padding: 9px 11px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--gray-900);
  color: #fff;
  font-size: 12px;
  line-height: 1.75;
  text-align: start;
  box-shadow: var(--shadow-md);
}

/* Keep the compact OTP control visually disabled without promotional copy. */
.auth-otp-action span { display: none; }

/* At mid-width, a three-column footer creates unnecessary vertical emptiness. */
@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 620px; }
}
@media (max-width: 720px) {
  body:not(.business-profile-page) > main.container { padding-block-start: 40px !important; }
  body:not(.business-profile-page) .site-header + main { padding-top: 40px; }
  .form-card > .row-between:first-child {
    min-height: 48px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .form-card > .row-between:first-child .page-title {
    font-size: 19px !important;
    line-height: 1.55;
  }
}
@media (max-width: 520px) {
  .site-footer { margin-top: 28px; padding-top: 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 22px; }
  .footer-brand { grid-column: auto; }
  .footer-contact { gap: 6px; }
  .footer-bottom {
    align-items: center;
    flex-direction: column;
    padding-block: 15px;
    text-align: center;
  }
}


/* ===== Minimal donation nudge (bottom of "کسب‌وکارهای من") ===== */
.donate-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}

.donate-nudge:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.donate-nudge-emoji {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.donate-nudge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.donate-nudge-text strong {
  font-size: 13.5px;
}

.donate-nudge-text span {
  color: var(--gray-500);
  font-size: 12.5px;
  line-height: 1.6;
}

.donate-nudge-arrow {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--gray-400);
}

/* ===== Booking: weekly calendar strip (dashboard) ===== */
.booking-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.booking-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--gray-700);
  text-decoration: none;
  text-align: center;
}

.booking-week-day:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.booking-week-day.is-today {
  border-color: var(--brand-300);
}

.booking-week-day.is-selected {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 800;
}

.booking-week-day.is-closed {
  opacity: .55;
}

.booking-week-day-name {
  font-size: 11px;
  color: var(--gray-500);
}

.booking-week-day-num {
  font-size: 15px;
  font-weight: 800;
}

.booking-week-day-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-300);
}

.booking-week-day-dot.is-closed {
  background: transparent;
}

.booking-week-day-badge {
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 560px) {
  .booking-week-strip { gap: 4px; }
  .booking-week-day { padding: 8px 2px; }
  .booking-week-day-name { font-size: 10px; }
}

/* ===== Public booking widget (business profile page) ===== */
.biz-booking-wrap { margin-bottom: 18px; }

.biz-booking-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-700);
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.biz-booking-trigger svg { width: 17px; height: 17px; flex: 0 0 auto; }

.biz-booking-trigger:hover {
  border-color: var(--business-primary, var(--brand-300));
  color: var(--business-primary, var(--brand-700));
}

.biz-booking-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.biz-booking-trigger:disabled:hover {
  border-color: var(--gray-200);
  color: var(--gray-700);
}

.biz-booking-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
}

.biz-booking-title { font-size: 14px; }

.biz-booking-days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.biz-booking-day {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 46px;
  padding: 9px 6px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--gray-700);
  cursor: pointer;
}

.biz-booking-day-name { font-size: 11px; color: var(--gray-500); }
.biz-booking-day-num { font-size: 14px; font-weight: 800; }

.biz-booking-day.is-selected {
  border-color: var(--business-primary, var(--brand-500));
  background: color-mix(in srgb, var(--business-primary, var(--brand-500)) 10%, #fff);
  color: var(--business-primary, var(--brand-700));
}

.biz-slot-row .chip {
  min-height: 38px;
  padding: 8px 14px;
}

.biz-booking-message {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
}

.biz-booking-message.is-success {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

.biz-booking-message.is-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.biz-dark .biz-booking-trigger {
  border-color: var(--biz-line);
  background: var(--biz-surface-2);
  color: var(--biz-ink);
}

.biz-dark .biz-booking-trigger:hover {
  border-color: var(--biz-accent-bright);
  color: var(--biz-accent-bright);
}

.biz-dark .biz-booking-card {
  border-color: var(--biz-line);
  background: var(--biz-surface);
}

.biz-dark .biz-booking-title { color: var(--biz-ink); }

.biz-dark .biz-booking-day {
  border-color: var(--biz-line);
  background: var(--biz-surface-2);
  color: var(--biz-ink-soft);
}

.biz-dark .biz-booking-day.is-selected {
  border-color: var(--biz-accent-bright);
  background: color-mix(in srgb, var(--biz-accent-bright) 16%, var(--biz-surface-2));
  color: var(--biz-accent-bright);
}

.biz-dark .biz-booking-message.is-success {
  border-color: #14532d;
  background: color-mix(in srgb, #14532d 40%, var(--biz-surface-2));
  color: #86efac;
}

.biz-dark .biz-booking-message.is-error {
  border-color: #7f1d1d;
  background: color-mix(in srgb, #7f1d1d 40%, var(--biz-surface-2));
  color: #fca5a5;
}

/* ===== Global navigation loading bar ===== */
.nav-loading-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 999;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b);
  background-size: 200% 100%;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity .15s ease;
}

.nav-loading-bar.is-active {
  opacity: 1;
  animation: nav-loading-grow 1.1s cubic-bezier(.4,0,.2,1) infinite, nav-loading-shimmer 1.4s linear infinite;
}

@keyframes nav-loading-grow {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(.75); }
  100% { transform: scaleX(.92); }
}

@keyframes nav-loading-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-loading-bar.is-active { animation: none; transform: scaleX(.7); }
}