/**
 * شکل و سایهٔ سراسری از تنظیمات استایل قالب.
 * بعد از theme/app لود می‌شود تا روی hardcodeها بنشیند.
 */

/* —— هدر —— از سطح نرم/برند پالت (نه لزوماً بک‌گراند صفحه) */
.site-nav {
  background: color-mix(
    in oklab,
    var(--jdm-header-bg, var(--color-soft, #f0fdf4)) 88%,
    var(--color-surface, #fff)
  ) !important;
  border-bottom: 1px solid var(--jdm-header-border, var(--color-border, #e2e8f0)) !important;
  color: var(--jdm-header-fg, var(--color-foreground, #064e3b)) !important;
  backdrop-filter: blur(12px);
}

.site-nav .brand,
.site-nav .nav-cats-toggle,
.site-nav .brand__text {
  color: var(--jdm-header-fg, var(--color-foreground, #064e3b)) !important;
}

.site-nav .nav-cats-toggle:hover,
.site-nav .nav-cats-toggle:focus-visible,
.site-nav .nav-cats-toggle[aria-expanded="true"] {
  background: color-mix(in oklab, var(--jdm-header-fg, var(--color-primary, #059669)) 10%, transparent) !important;
  color: var(--color-primary, #059669) !important;
}

/* —— فوتر —— */
.jdm-ft__dark {
  color: var(--jdm-footer-fg, #fff) !important;
  background:
    radial-gradient(
      ellipse 45% 70% at 8% 100%,
      color-mix(in oklab, var(--jdm-footer-accent, #10b981) 22%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, var(--jdm-footer-bg, #064e3b) 0%, var(--jdm-footer-bg-2, #033528) 100%) !important;
}

.jdm-ft__col-ico {
  color: var(--jdm-footer-accent, #10b981) !important;
}

/* —— هیرو صفحه اصلی —— از پالت استایل */
.hero__bg {
  background:
    linear-gradient(
      120deg,
      color-mix(in oklab, var(--color-foreground, #064e3b) 92%, transparent) 0%,
      color-mix(in oklab, var(--color-primary, #059669) 72%, transparent) 48%,
      color-mix(in oklab, var(--color-primary, #047857) 55%, transparent) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M0 80h160M80 0v160'/%3E%3Ccircle cx='80' cy='80' r='40'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 30%, var(--jdm-grad-hero-a, var(--color-secondary, #34d399)) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 70%, var(--color-primary, #059669) 0%, var(--color-foreground, #064e3b) 70%) !important;
  background-size: cover, 120px 120px, cover, cover !important;
}

.hero__brand {
  background: linear-gradient(
    105deg,
    var(--color-soft, #ecfdf5) 0%,
    var(--color-secondary, #6ee7b7) 30%,
    var(--gold, #fcd34d) 68%,
    var(--color-accent, #f59e0b) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.hero__lead {
  color: color-mix(in oklab, var(--color-soft, #ecfdf5) 92%, #fff) !important;
  text-shadow: 0 1px 2px color-mix(in oklab, var(--color-foreground, #064e3b) 35%, transparent) !important;
}

/* چیپ‌های پرتکرار هیرو — از soft/secondary پالت */
.hero .popular,
.popular {
  color: color-mix(in oklab, var(--color-soft, #ecfdf5) 90%, #fff) !important;
}

.hero .chip,
.chip {
  background: color-mix(in oklab, var(--color-soft, #fff) 16%, transparent) !important;
  border-color: color-mix(in oklab, var(--color-soft, #fff) 28%, transparent) !important;
  color: var(--color-soft, #ecfdf5) !important;
}

.hero .chip:hover,
.chip:hover {
  background: color-mix(in oklab, var(--color-soft, #fff) 30%, transparent) !important;
  border-color: color-mix(in oklab, var(--jdm-grad-hero-a, var(--color-secondary, #10b981)) 45%, transparent) !important;
}

/* عناوین عمودی سکشن‌ها — گرادینت پالت */
.section__title--vertical {
  background: linear-gradient(
    180deg,
    var(--color-secondary, #6ee7b7) 0%,
    var(--color-primary, #059669) 55%,
    var(--color-foreground, #064e3b) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 0 color-mix(in oklab, var(--color-surface, #fff) 95%, transparent))
    drop-shadow(0 0 10px color-mix(in oklab, var(--color-soft, #ecfdf5) 90%, transparent)) !important;
}

/* بنر CTA — گرادینت پالت */
.cta-band {
  background: linear-gradient(
    125deg,
    var(--color-foreground, #064e3b) 0%,
    var(--color-primary, #059669) 55%,
    var(--color-secondary, #047857) 100%
  ) !important;
  color: var(--color-on-primary, #fff) !important;
}

.cta-band p {
  color: color-mix(in oklab, var(--color-on-primary, #fff) 90%, transparent) !important;
}

.search-panel,
.panel,
.contact-card,
.owner-card,
.cat-card,
.tax-card,
.trust-card,
.trust-mini__item,
.jdm-province-counties,
.jdm-search-modal__panel,
.related-jobs,
.cta-band,
.hours,
.map-card,
.biz-profile .panel,
.shell .panel,
.shell .contact-card {
  border-radius: var(--radius-lg, 18px) !important;
  box-shadow: var(--shadow, 0 8px 28px rgba(6, 78, 59, 0.08)) !important;
}

/* سرچ باکس هیرو — سایه بلندتر */
.search-panel,
.dir-archive__search.search-panel,
.search-panel.dir-archive__search {
  border-radius: var(--radius-lg, 18px) !important;
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(15, 23, 42, 0.18)) !important;
}

.listing,
.gallery__item,
.listing__inner,
.dir-archive--city-category .listing__inner {
  border-radius: var(--radius-lg, 18px) !important;
}

.listing:hover {
  box-shadow: var(--shadow-hover, 0 16px 36px rgba(5, 150, 105, 0.16)) !important;
}

.btn,
.jdm-messenger-btn,
.search-field,
.nav-cats-toggle,
.owner-avatar {
  border-radius: var(--radius, 14px) !important;
}

.btn--primary,
.btn--accent {
  box-shadow: var(--shadow-btn, 0 6px 18px rgba(6, 78, 59, 0.28)) !important;
}

/* فیلدهای داخل سرچ کمی گردتر از کارت بزرگ نباشند */
.search-panel .search-field {
  border-radius: var(--radius, 14px) !important;
  box-shadow: none !important;
}

/* لیست فشرده آگهی در آرشیو شهر — سایه ملایم نه hover سنگین */
.dir-archive--city-category .listing,
.dir-archive--city-category .listing:hover {
  box-shadow: none !important;
  transform: none !important;
}

.dir-archive--city-category .listing__inner {
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(15, 23, 42, 0.05)) !important;
  border-radius: var(--radius, 14px) !important;
}

/* —— سطح نرم پالت —— باکس‌ها، فیلدها، چیپ‌ها، هاور دکمه‌ها —— */
.search-field,
.service-chip,
.dir-archive__hero,
.jdm-cats-drawer__icon,
.jdm-search-modal__close,
.jdm-safety-modal__disclaimer,
.jdm-city-cats__item:hover {
  background: var(--color-soft, #f0fdf4) !important;
}

.btn--ghost:hover,
.btn--outline:hover,
.nav-back:hover,
.reviews-box__btn:hover:not(:disabled),
.related-jobs__row:has(.related-jobs__name:hover),
.related-jobs__row:has(.related-jobs__name:focus-visible),
.jdm-cats-drawer__link:hover,
.jdm-cats-drawer__link:focus-visible,
.jdm-province-counties__item:hover,
.service-chip:hover,
.jdm-search-modal__close:hover {
  background: var(--color-soft, #f0fdf4) !important;
}

.place-comment-form__captcha-q,
.jdm-report-form__alert.is-success,
.place-comment-form__alert.is-success {
  background: var(--color-soft, #f0fdf4) !important;
  border-color: color-mix(in oklab, var(--color-primary, #059669) 35%, transparent) !important;
}

.jdm-safety-modal__head {
  background: linear-gradient(180deg, var(--color-soft, #ecfdf5) 0%, var(--color-surface, #fff) 100%) !important;
}

.search-field:focus-within {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, #059669) 22%, transparent) !important;
}