/*
 * Divarak — Modern Minimal Redesign v7.0
 * Clean, modern, light theme with subtle shadows & smooth interactions
 */

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
  --bg:            #f0f2f5;
  --bg-card:       #ffffff;
  --bg-hover:      #f7f8fa;
  --bg-input:      #f5f6f8;
  --bg-header:     #ffffff;
  --accent:        var(--charsoogh-main, #c0392b);
  --accent-hover:  var(--charsoogh-main);
  --accent-light:  rgba(0,0,0,0.05);
  --text:          var(--divarak-text-color, var(--charsoogh-text, #1a1a2e));
  --text-sec:      #555770;
  --text-muted:    #8e8ea0;
  --border:        #e8eaed;
  --border-hover:  #d0d3d8;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:     0 10px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-hover:  0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   HOMEPAGE — BLANK WHITE PAGE (content only, header visible)
   ============================================= */
body.home {
  background: #fff !important;
}

body.home .page.home-page {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.home .container,
body.home .page.home-page .container,
body.home .elementor-home-page .container,
body.home .elementor-home-page .row,
body.home .elementor-home-page .col-md-12,
body.home .page-content,
body.home .elementor-1176,
body.home [data-elementor-id="1176"],
#divarak-home-ads .container,
#divarak-home-layout .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force all Elementor containers inside ads column to be full width */
#divarak-home-ads .elementor-container,
#divarak-home-ads .elementor-container.elementor-column-gap-default,
#divarak-home-ads .elementor-section-boxed > .elementor-container,
#divarak-home-ads .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

#divarak-home-ads .elementor-widget-wrap,
#divarak-home-ads .elementor-column,
#divarak-home-ads .elementor-col-100,
#divarak-home-ads .elementor-top-column {
  max-width: 100% !important;
  width: 100% !important;
}

#divarak-home-ads .elementor-section {
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide non-content parts on homepage */
body.home .hero .page-title,
body.home .hero .hero-wrapper .secondary-navigation,
body.home #collapseMainSearchForm,
body.home .hero .collapse,
body.home .hero .website_header_slogan,
body.home .hero-form,
body.home form.hero-form,
body.home .main-search-form,
body.home .footer-sticky-menu,
body.home .page-content > section.submit,
body.home .elementor-home-page section.submit:not(.charsooghSubmit-ad-modal) {
  display: none !important;
}

/* Hide banner slider, blog section, app download, submit box on homepage */
body.home .elementor-element-05a2c7c,
body.home .elementor-element-be88a28,
body.home .elementor-element-3317077,
body.home .elementor-element-5672467 {
  display: none !important;
}

/* (old search form hidden by divarak-header plugin CSS) */

/* =============================================
   ORIGINAL HEADER — HIDDEN (replaced by divarak-header plugin)
   ============================================= */
header.hero {
  height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  min-height: 0 !important;
}

header.hero .hero-wrapper,
header.hero .mainHeader,
header.hero .main-navigation,
header.hero .secondary-navigation,
header.hero .page-title,
header.hero .background {
  display: none !important;
}

/* =============================================
   BASE
   ============================================= */
*, body, html, p, h1, h2, h3, h4, h5, h6,
input, select, textarea, button, .btn, a,
.item .meta h2, .item h3 a, .item .price,
.form-control, .nav-link, .hero .website_header_slogan,
.footer, .footer h2, .hero .secondary-navigation a,
.modal-title, .vertical-menu a, .woocommerce-breadcrumb,
span, li, td, th, label, div,
.charsoogh-heading-text, .charsoogh-divider-text,
.charsoogh-subheading, .charsoogh-title-subtitle,
.elementor-widget-container, .elementor-heading-title {
  font-family: 'IRANSansX', 'IRANSans', Tahoma, sans-serif !important;
}
.fa, .fas, .far, .fab, .fal, .fad,
[class*="fa-"]::before, [class*="fa-"]::after,
h4.location::before {
  font-family: 'FontAwesome' !important;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth !important; }
a { text-decoration: none !important; color: var(--text) !important; }
a:hover { color: var(--accent) !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8cad0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #a0a3aa; }
::selection { background: var(--accent-light); color: var(--text); }

/* Desktop: always reserve the scrollbar's gutter space, even on pages/states
   short enough not to need scrolling. Without this, body's content width
   silently differs (by the scrollbar's ~5-17px, browser-dependent) between
   a page that scrolls and one that doesn't, so anything centered relative
   to the viewport (header bar, single-ad content, any auto-margin block)
   sits visibly off-center on whichever pages happen to have no overflow —
   confirmed on /ads/.../ (short single-ad page): window.innerWidth 1920 vs
   document.documentElement.clientWidth 1915 before this fix. Unlike the
   mobile fix below, the scrollbar itself must stay visible/usable here
   (real desktop scrollbars aren't overlay), so this reserves its space
   instead of hiding it. */
html {
  scrollbar-gutter: stable;
}

/* Mobile: hide the page's own vertical scrollbar (real phones already show
   an overlay scrollbar that takes no layout space — only desktop browsers
   and Chrome's device-emulation mode render this 5px custom scrollbar as a
   real column that eats into body's content width). Without this, body's
   available width is 5px narrower than window.innerWidth, so every
   centered element (e.g. the "آگهی‌های ویژه" divider heading) sits ~2.5px
   off-center toward the side the scrollbar isn't on — confirmed via
   getBoundingClientRect: body.offsetWidth (495) vs window.innerWidth (500)
   before this fix. Scrolling itself is unaffected; only its visual track
   is removed. */
@media (max-width: 768px) {
  html, body {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* old Edge/IE */
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
  }
}

/* (old top bar and main header hidden by divarak-header plugin) */

/* =============================================
   HERO / PAGE TITLE
   ============================================= */
.hero .page-title {
  background: var(--bg) !important;
  border-bottom: none !important;
  padding: 0 !important;
  min-height: auto !important;
}

.hero .page-title::before,
.hero .page-title::after { display: none !important; }

/* Hide hero background image */
.hero .background,
.hero .page-title .background,
.hero .page-title .background-image { display: none !important; }

.hero .website_header_slogan {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  padding: 14px 0 6px !important;
  text-align: center !important;
  text-shadow: none !important;
  animation: none !important;
}

/* =============================================
   SEARCH BAR — Modern glass
   ============================================= */
.hero .collapse,
#collapseMainSearchForm {
  background: transparent !important;
  padding: 0 0 16px !important;
  border-bottom: none !important;
  margin-top: 0 !important;
}

.main-search-form.style-1 {
  background: var(--bg-card) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  transition: all var(--transition) !important;
  overflow: hidden !important;
  animation: none !important;
}

.main-search-form.style-1:focus-within {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

.main-search-form.style-1 .form-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  height: 46px !important;
}

.main-search-form.style-1 .form-group { margin: 0 !important; }
.main-search-form.style-1 .form-row > [class*="col-"] { padding: 0 !important; }
.main-search-form.style-1 .col-md-5 { flex: 1 !important; }

.main-search-form.style-1 input.heroSearchInput,
.main-search-form.style-1 .col-md-5 .form-control {
  border: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  padding: 0 16px !important;
  background: transparent !important;
  color: var(--text) !important;
  height: 46px !important;
}

.main-search-form.style-1 input::placeholder {
  color: var(--text-muted) !important;
}

.main-search-form.style-1 .col-md-2,
.main-search-form.style-1 #res50 {
  flex: 0 0 120px !important;
  border-right: 1px solid var(--border) !important;
  height: 46px !important;
}

.main-search-form.style-1 .col-md-3 {
  flex: 0 0 130px !important;
  border-right: 1px solid var(--border) !important;
  height: 46px !important;
}

.main-search-form.style-1 select,
.main-search-form.style-1 .bootstrap-select .btn.dropdown-toggle,
.main-search-form.style-1 .bootstrap-select > .btn,
.main-search-form.style-1 .btn-group > .btn,
.main-search-form.style-1 .form-group .btn.dropdown-toggle {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text-sec) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  height: 46px !important;
  width: 100% !important;
  outline: none !important;
}

/* Override ALL btn styles inside search form (except search button) */
.main-search-form .bootstrap-select,
.main-search-form .bootstrap-select .dropdown-toggle,
.main-search-form .bootstrap-select > .btn,
.main-search-form .bootstrap-select > select,
.main-search-form .btn-group > .btn:not(.heroSearchBtn),
.main-search-form .form-group .btn:not(.heroSearchBtn) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text-sec) !important;
}

/* Bootstrap-select ALL states inside search form */
.main-search-form .bootstrap-select .dropdown-toggle:focus,
.main-search-form .bootstrap-select .dropdown-toggle:active,
.main-search-form .bootstrap-select .dropdown-toggle:hover,
.main-search-form .bootstrap-select.show > .dropdown-toggle,
.main-search-form .bootstrap-select > .btn:focus,
.main-search-form .bootstrap-select > .btn:active,
.main-search-form .btn-group.show > .btn,
.main-search-form .btn-group > .btn:focus,
.main-search-form .btn-group > .btn:active {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--text-sec) !important;
}

/* Kill the focus outline on bootstrap-select globally inside search */
.main-search-form .bootstrap-select .dropdown-toggle:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* Hidden select inside bootstrap-select */
.main-search-form .bootstrap-select > select {
  border: none !important;
  outline: none !important;
}

.main-search-form.style-1 .bootstrap-select .dropdown-menu {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
}

.main-search-form.style-1 .bootstrap-select .dropdown-menu li a:hover,
.main-search-form.style-1 .bootstrap-select .dropdown-menu li.selected a {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

.main-search-form .heroSearchBtn,
.heroSearchBtn.btn.btn-primary.width-100 {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  color: var(--divarak-btn-text, #fff) !important;
  box-shadow: none !important;
  transition: background var(--transition) !important;
  height: 46px !important;
  min-width: 90px !important;
  outline: none !important;
  margin: 0 !important;
}

.main-search-form .heroSearchBtn:hover {
  background: var(--accent-hover) !important;
}

/* Fix search form col that wraps the button */
.main-search-form.style-1 .col-md-2:last-child,
.main-search-form.style-1 .form-row > div:last-child {
  border-right: none !important;
}

/* =============================================
   SECTION TITLES
   ============================================= */
.charsoogh-heading-wrapper { margin-bottom: 4px !important; }

.charsoogh-separator-parent { margin: 6px 0 20px !important; }

.charsoogh-separator-line span {
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--border), transparent) !important;
}

.charsoogh-divider-text {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  padding: 6px 16px !important;
  background: var(--bg) !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: -0.3px !important;
}

.section-title { margin-bottom: 16px !important; animation: none !important; }
.section-title h2 { font-size: 17px !important; font-weight: 800 !important; color: var(--text) !important; }
/* The base theme (charsoogh.css) draws a short decorative line on BOTH sides
   of section-title h2 text via ::before (right) and ::after (left), each
   109px wide. A previous version of this override disabled only ::before,
   leaving ::after active — which made titles like "آگهی‌های من" on
   /my-account/ show a line on just one side (asymmetric, reported via
   screenshot). Restored to match the base theme's symmetric design; no
   ::before/::after override here now, so both sides render. (Contexts that
   intentionally want zero lines — e.g. the login/register modal titles
   below, and the /newad-2/ wizard step titles further down — explicitly
   disable both ::before AND ::after together, which is unaffected by this.) */

/* Ad-submission wizard (/newad-2/, body.divarak-fullscreen-newad — see
   divarak_add_fullscreen_newad_body_class() in divarak-header.php) — every
   step's section title ("اطلاعات آگهی", "موقعیت آگهی", "تصاویر آگهی",
   "تایید و انتشار") uses the same `.section-title.clearfix > h2` markup.
   Per the user's reference screenshot, these headings should be plain,
   centered text with no decorative line — a previous version of this rule
   added a short leading line (::before) matching the sitewide section-title
   style; removed per explicit follow-up request ("مشکل راست‌چین بودن نیست،
   میخوام هدر و وسط بنویسی... بدون خط"). */
body.divarak-fullscreen-newad .section-title.clearfix h2 {
  display: block !important;
  text-align: center !important;
}
body.divarak-fullscreen-newad .section-title.clearfix h2::before {
  display: none !important;
}
/* Step 3 ("تایید و انتشار") renders this same `.section-title.clearfix` as
   the very first thing inside its step, directly under the shared
   .stepwizard element — unlike step 2 ("اطلاعات آگهی"), where a
   .category_selected info box sits between the wizard and the heading and
   supplies its own visual buffer. .stepwizard already reserves 40px via
   padding-bottom (see the "NEW AD SUBMIT — mobile full-screen" rule below)
   for the active wizard label (absolutely positioned, ~19.5px tall, sitting
   right under the active step's pill), but verified via Playwright
   getBoundingClientRect on step 3 at 390px: that only leaves an 8.5px gap
   between the label's bottom edge and this h2's top edge — the green
   "تایید و انتشار" wizard label and the black "تایید و انتشار" heading
   read as crowded/overlapping. Push just this heading down a bit more;
   harmless on the other three sections further down the page where this
   margin is invisible. */
body.divarak-fullscreen-newad .row.setup-content .col-md-12 > .section-title.clearfix:first-child {
  margin-top: 28px !important;
}

/* Mobile-only: the "line — text — line" title layout. Root cause (verified live
   via getComputedStyle/getBoundingClientRect in Chrome at 390px): the theme's
   .charsoogh-separator-wrap has no explicit width and only `margin:auto` for
   centering, so as a block-level flex container it shrink-wraps to its content
   (the text pill) instead of filling the available row width — leaving almost
   no room for .charsoogh-side-left/.charsoogh-side-right, which collapsed to
   0px regardless of flex-grow. That's what made "آگهی‌های ویژه"/"آخرین آگهی‌ها"
   drift left with no visible side lines. Fixing width on the wrap AND flex-grow
   on the sides (both needed — confirmed by disabling each independently) makes
   both line segments equal and visible. Desktop already lays this out correctly
   (verified unaffected), so this stays scoped to the existing 768px breakpoint. */
@media (max-width: 768px) {
  .charsoogh-separator-wrap {
    width: 100% !important;
  }

  .charsoogh-side-left,
  .charsoogh-side-right {
    flex: 1 1 0 !important;
  }
}

/* =============================================
   BANNER SLIDER — حذف
   ============================================= */
.elementor-element-05a2c7c,
.elementor-widget-charsoogh_banner_slider,
.charsoogh-banner-slider {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* OWL Nav */
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: var(--text) !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--transition) !important;
}

.owl-carousel .owl-nav .owl-prev:hover,
.owl-carousel .owl-nav .owl-next:hover {
  background: #fff !important;
  box-shadow: var(--shadow-md) !important;
  transform: scale(1.08) !important;
}

.owl-carousel .owl-dots .owl-dot span {
  background: rgba(0,0,0,0.15) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: all var(--transition) !important;
}

.owl-carousel .owl-dots .owl-dot.active span {
  background: var(--accent) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* =============================================
   AD CARDS — Divar-style 3-column cards
   ============================================= */
.items.products,
ul.row.items,
ul[class*="ad-listing"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  list-style: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Empty state — no ads found */
.featured-carousel:empty,
ul[class*="ad-listing"]:empty,
.items.products:empty {
  display: none !important;
}

.featured-carousel:not(:empty):has(> :only-child:not(.item):not(.no-ads-empty-state)),
ul[class*="ad-listing"]:not(:empty):has(> :only-child:not(.item):not(.no-ads-empty-state)) {
  display: none !important;
}

/* =============================================
   MY ACCOUNT — Ad cards horizontal scroll
   ============================================= */
/* Specificity note: div.row.items:not(.featured-carousel) further down this
   file (the category-page 3-col grid rule, type + 2 classes + :not()) has
   equal specificity to the plain 3-class selector below and appears later
   in source order, so it was winning here too — forcing this MyAccount
   row into display:grid/3 columns and shrinking div.bookmark-list to
   ~1/3 the row's width (verified via Playwright computed-style + ancestor
   rect walk on /my-account/user-bookmark/). Repeating the class once more
   (4 classes total) beats that rule's specificity without needing !important
   wars, same technique used elsewhere in this file (see the 12x-repeated
   .item selectors for the price color fix). */
.woocommerce-MyAccount-content div.row.items.items.items {
  display: block !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  height: auto !important;
}
/* My Ads search form (input + submit button) — give it breathing room so
   the input and button aren't flush against each other or the ad list below.
   Desktop: side-by-side in one row (input flexes wide, button sized to its
   label). Mobile (<=768px, project-standard breakpoint): stacked, full width
   each. Previously this was `flex-direction: column` with no media query at
   all, so it was ALWAYS stacked — even on desktop — regardless of the
   .col-md-9/.col-md-3 Bootstrap grid classes on the form's own children
   (which this rule's `!important` overrides anyway). Confirmed via Selenium
   getBoundingClientRect before this fix: at 1440px the button's top
   (362px) sat well below the input's bottom (350px), i.e. fully stacked
   on desktop too. */
.search-my-ads {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}
.search-my-ads form.row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
}
.search-my-ads input[name="search-my"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background: var(--bg-input) !important;
}
.search-my-ads button[type="submit"] {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
@media (max-width: 768px) {
  .search-my-ads form.row {
    flex-direction: column !important;
  }
  .search-my-ads input[name="search-my"],
  .search-my-ads button[type="submit"] {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* Horizontal-scroll carousel treatment — "My Ads" dashboard tab only
   (.bookmark-list.userDashboard, content-user-product.php's <li class="item">
   with no bootstrap grid column class). NOT applied to the plain
   .bookmark-list (favorites/user-bookmark page, content-bookmark.php's
   <li class="item col-lg-3 col-md-3 col-sm-12">): that markup already
   carries its own grid column classes and is meant to render with the
   sitewide full-width ".item .wrapper" grid card (image right, info left,
   one per row, no horizontal scroll) — same card style the profile page's
   ad list already uses correctly. Scoping this to .userDashboard specifically
   previously leaked onto the plain .bookmark-list too (same base selector),
   which squeezed its cards into ~187px-wide flex items and broke the
   internal ".wrapper" grid (1fr column collapsed to ~7px) — verified via
   Playwright computed-style inspection on /my-account/user-bookmark/. */
.woocommerce-MyAccount-content .bookmark-list.userDashboard {
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 14px !important;
  padding: 8px 8px 14px !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard::-webkit-scrollbar {
  height: 5px;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* Favorites page (/my-account/user-bookmark/) — div.bookmark-list.row is a
   bare Bootstrap .row (negative margins) nested directly inside another
   .row (div.row.items, forced to display:block above) with no .col-*
   wrapper between them, so it rendered at a stray ~203px width positioned
   near the column's right edge instead of filling it — verified via
   Playwright getBoundingClientRect (.row.items: 632px, .bookmark-list
   inside it: 203px). Reset it to a plain full-width block so its .item
   children (full-width via the .bookmark-list:not(.userDashboard) .item
   rule below) actually have full width to fill. */
.bookmark-list:not(.userDashboard) {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Empty state — /my-account/user-bookmark/ with no saved ads.
   The AJAX response (wp_ajax_bookmark_response() in
   includes/actions/bookmark-action.php) prints only a bare text node
   (plus a hidden <script>) directly inside .bookmark-list when the
   favorites list is empty — no wrapper element to target, so the message
   rendered unstyled and off-center with no padding/icon.
   :has() is already used elsewhere in this file (see the ad-listing empty
   state below and the stepwizard rules), so it's safe to rely on here too:
   style .bookmark-list only when it holds no <li> cards, reusing the same
   dashed-card empty-state language as .no-ads-empty-state further down
   (icon + muted text). Applies to both the favorites page's plain
   .bookmark-list and the dashboard's .bookmark-list.userDashboard (selector
   below has no .userDashboard qualifier) — both ARE empty at the same
   point (no <li> yet), so this is intentionally shared. */
.woocommerce-MyAccount-content .bookmark-list:not(:has(li)) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px !important;
  width: 100%;
  background: var(--bg-card) !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-muted) !important;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.woocommerce-MyAccount-content .bookmark-list:not(:has(li))::before {
  content: "\f097";
  font-family: 'FontAwesome' !important;
  font-size: 34px;
  color: var(--border-hover);
}

.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item.product {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  width: 300px !important;
  background: var(--bg-card, #fff) !important;
  border: 1px solid var(--border, #eee) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  scroll-snap-align: start;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  transition: box-shadow .2s;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item.product:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}
/* Wrapper inside card — stack vertically */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  grid-template-columns: none !important;
}
/* Image on top */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .image {
  order: -2 !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .mainDetail {
  order: -1 !important;
}
/* Image — fixed square thumbnail (matches site-wide ad-card convention).
   Explicit fixed width+height (not width:100% + aspect-ratio) on purpose:
   this card's ".wrapper" is a column flexbox with a constrained/definite
   height (mainDetail's text content plus the theme's own layout math), and
   an aspect-ratio'd flex child there gets compressed by the flex algorithm
   well below its aspect-ratio size despite flex-shrink:0 (verified live —
   width:100% + aspect-ratio:1/1 rendered as a 364x210 non-square box, not
   364x364). A plain fixed px square, same technique already used by the
   generic ".item .image" grid-card rule elsewhere in this file, is not
   subject to that flex compression.
   Must also explicitly set min-width/max-width: the generic ".item .image"
   rule elsewhere in this file sets min-width/max-width:136px !important,
   which otherwise clamps this card's width regardless of this rule's own
   width value (min/max-width always win over a plain width, even when this
   more specific selector already beats that rule's width/height). */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .image {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  height: 130px !important;
  overflow: hidden !important;
  flex-shrink: 0;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Title area */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .mainDetail {
  padding: 10px 12px 4px !important;
  text-align: right !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .mainDetail h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: normal !important;
}
/* Meta info */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .meta {
  font-size: 10px !important;
  color: #999 !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .meta figure {
  margin: 1px 0 !important;
  display: inline !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .meta figure i {
  margin-left: 3px;
}
/* Price & location */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .adUserDetail {
  padding: 0 12px !important;
  text-align: right !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .adUserDetail .location {
  font-size: 10px !important;
  color: #aaa !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .price {
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
/* Action buttons */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .admin-controls {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px 8px 12px !important;
  border-top: 1px solid var(--border, #eee) !important;
  margin-top: auto !important;
}
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .admin-controls a {
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  white-space: nowrap;
  text-decoration: none !important;
  background: #fafafa !important;
}

/* AI rejected badge & reason */
.divarak-ai-rejected {
  text-align: center;
  padding: 0 14px;
  margin: 6px 0 2px;
}
.divarak-ai-badge {
  display: inline-block;
  background: #fdecea;
  color: #c0392b;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid #f5c6cb;
}
.divarak-ai-reason {
  font-size: 10px;
  color: #999;
  margin: 4px 0 0;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
/* Pending status badge */
.woocommerce-MyAccount-content .bookmark-list.userDashboard li.item .meta_info_span {
  display: inline-block;
  background: #fff3cd;
  color: #856404;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid #ffc107;
  margin: 4px 0;
}

/* My account navigation icons — fix font-family override from divarak-header
   (selectors qualified with .woocommerce-MyAccount-navigation ul li to match/beat
   the native theme rule's specificity: .woocommerce-account .woocommerce-MyAccount-navigation ul li a:before) */
.woocommerce-MyAccount-navigation ul li a::before {
  font-family: 'FontAwesome' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
  content: '\f0a1' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--user-bookmark a::before {
  content: '\f097' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--chats a::before {
  content: '\f086' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
  content: '\f09d' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
  content: '\f044' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--profile_link a::before {
  content: '\f2c0' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--plan_menu_link a::before {
  content: '\f0e7' !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  content: '\f011' !important;
}

/* Dropdown chevron for nav items with submenus (e.g. "درباره ما" on the map page
   header) — theme's own font-family: 'fontawesome' on this ::after has no !important,
   so the global font-family:inherit rule breaks it into a blank/tofu box. */
.hero .main-navigation .navbar ul.navbar-nav li.nav-item.has-child > a.nav-link::after {
  font-family: 'FontAwesome' !important;
}

/* My-account sidebar — active-item chevron (same missing-!important font-family bug) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after {
  font-family: 'FontAwesome' !important;
}

/* New-ad category list — hover chevron (same missing-!important font-family bug) */
.list-group-item:hover::after {
  font-family: 'FontAwesome' !important;
}

/* =============================================
   NEW AD — Step wizard progress bar redesign
   (standalone page only; the modal version hides
   .stepwizard.col-md-offset-3 entirely, see above)
   Flat segmented bar (one rounded pill per step, filled green up through the
   active step) with a single caption below showing only the active step's
   title — no circles, no numbers, no per-step labels. */
.stepwizard.col-md-offset-3 {
  max-width: 560px !important;
  margin: 0 auto 4.5rem !important;
  padding: 0 !important;
}

.stepwizard-row {
  display: flex !important;
  gap: 6px !important;
}

.stepwizard-row::before {
  display: none !important;
}

.stepwizard-step {
  flex: 1 !important;
}

/* a.btn-new-ad-step (element+class) — needed to beat the later, tied-specificity
   ".btn { font-size: 13px !important }" / generic "a { color: var(--text) }"
   rules elsewhere in this file (element selector adds a specificity tier). */
a.btn-new-ad-step {
  display: block !important;
  width: 100% !important;
  height: 6px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 3px !important;
  background: var(--border, #e0e0e0) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  transition: background var(--transition, 0.2s ease) !important;
}

/* Filled (reached) segments: the active step itself and every step before it
   in DOM order (DOM is step1,step2,step3 in that literal order regardless of
   RTL visual order, and progress only ever moves 1→2→3). */
.stepwizard-step:has(a.btn-new-ad-step.btn-primary) a.btn-new-ad-step,
.stepwizard-step:has(~ .stepwizard-step a.btn-new-ad-step.btn-primary) a.btn-new-ad-step {
  background: var(--accent) !important;
}

/* Hide every step's caption except the active step's — shown once, centered
   below the whole bar. */
.stepwizard-step p {
  display: none !important;
}

.stepwizard-step:has(.btn-new-ad-step.btn-primary) {
  position: relative !important;
}

/* Specificity boosted (repeated class) — this page's markup sits inside <article>,
   whose global text-color re-apply rule ("article :not(a):not(b)...:not(i)", 9
   chained :not() clauses = specificity ~0,10,1) otherwise beats a normal-weight
   selector here, same root cause documented above the visit-label/price fixes
   in this file. */
.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step.stepwizard-step:has(.btn-new-ad-step.btn-primary) p {
  display: block !important;
  position: absolute !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

/* Mobile — cards full width, vertical scroll */
@media (max-width: 768px) {
  .woocommerce-MyAccount-content .bookmark-list.userDashboard {
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 12px !important;
  }
  .woocommerce-MyAccount-content .bookmark-list.userDashboard li.item.product {
    flex: 0 0 auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Image stays the fixed 130x130 square from the base rule above — no
     mobile-only override needed. A mobile-only height:160px here previously
     fought the card's full width (card width:100% but image stayed
     width:100% too), stretching the thumbnail into a tall rectangle
     instead of a square. */
}

#divarak-empty-state {
  text-align: center;
  padding: 80px 20px;
  max-width: 400px;
  margin: 0 auto;
}

#divarak-empty-state .empty-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  background: #f8f8f8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

#divarak-empty-state h3 {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 8px;
}

#divarak-empty-state p {
  font-size: 14px;
  color: #888;
  line-height: 1.8;
  margin-bottom: 24px;
}

#divarak-empty-state .empty-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 12px 32px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.15s;
}

#divarak-empty-state .empty-btn:hover {
  background: var(--charsoogh-main);
  opacity: 0.85;
  color: #fff !important;
}

/* Inline empty state — for a single ad section (e.g. featured ads) with no
   results while sibling sections on the same page still have ads. Smaller,
   card-style variant of #divarak-empty-state. */
.divarak-empty-state-inline {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 40px 20px;
  background: var(--bg-card, #fff);
  border: 1px dashed var(--border, #e8eaed);
  border-radius: var(--radius-lg, 16px);
}

.divarak-empty-state-inline .empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 50%;
  font-size: 26px;
}

.divarak-empty-state-inline p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted, #8e8ea0);
}

/* Sidebar filter checkbox */
.divarak-filter-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  cursor: pointer !important;
}

.divarak-filter-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--accent) !important;
  cursor: pointer !important;
}

/* Infinite scroll loading spinner */
#divarak-scroll-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 0;
  font-size: 13px;
  color: #888;
  font-weight: 500;
}

.divarak-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e8e8e8;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: divarak-spin 0.7s linear infinite;
}

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

/* Hide scroll-span injected by loadmore */
.scroll-span {
  display: none !important;
}

.items.products .item,
ul.row.items .item,
ul[class*="ad-listing"] .item {
  animation: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  flex: none !important;
  float: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
}

.items.products .item:nth-child(3n+1),
ul.row.items .item:nth-child(3n+1),
ul[class*="ad-listing"] .item:nth-child(3n+1) {
  border-left: none !important;
}

/* Favorites page (/my-account/user-bookmark/) — content-bookmark.php's
   <li class="item col-lg-3 col-md-3 col-sm-12"> lives inside
   div.bookmark-list (plain div, not a <ul class="row items"> / <ul
   class="...ad-listing">), so none of the generic full-width card rules
   above ever matched it — it was left to raw Bootstrap .row/.col-lg-3 grid
   behavior (a bare div.bookmark-list.row has no .container-fluid context,
   so its .item child rendered at a fixed ~203px instead of the column's
   full ~800px width). Single column here (not the sitewide 3-col grid —
   .userDashboard's own carousel already handles the "My Ads" tab
   separately), so just the full-width card treatment, no nth-child
   border-left logic needed; border-bottom gives the stacked-row separator
   matching this file's .item convention elsewhere. */
.bookmark-list:not(.userDashboard) .item {
  animation: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: none !important;
  float: none !important;
  border-bottom: 1px solid var(--border) !important;
}
.bookmark-list:not(.userDashboard) .item:last-child {
  border-bottom: none !important;
}

/* Homepage ad listing — same full-border-per-card treatment as the category
   page grid (div.row.items above): each card gets its own complete border
   instead of sharing edges with neighbors via border-bottom/border-left.
   Scoped to #divarak-home-ads specifically (not the shared ul[class*="ad-
   listing"] selector above) since that class is also used on other pages
   (profile.php, ad-list.php) that should keep the shared-edge grid look. */
#divarak-home-ads ul[class*="ad-listing"] {
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

#divarak-home-ads ul[class*="ad-listing"] .item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
}

#divarak-home-ads ul[class*="ad-listing"] .item:nth-child(3n+1) {
  border-left: 1px solid var(--border) !important;
}

/* Wrapper */
.item .wrapper {
  background: var(--bg-card) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: background var(--transition) !important;
  display: grid !important;
  grid-template-columns: 1fr 136px !important;
  grid-template-rows: 1fr !important;
  column-gap: 14px !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  cursor: pointer !important;
  padding: 14px !important;
}

.item .wrapper:hover {
  background: var(--bg-hover) !important;
}

/* Image */
.item .image {
  overflow: hidden !important;
  border-radius: var(--radius-md) !important;
  position: relative !important;
  background: var(--bg-input) !important;
  aspect-ratio: 1/1 !important;
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 136px !important;
  grid-column: 2 !important;
  grid-row: 1 / -1 !important;
  margin: 0 !important;
  align-self: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: box-shadow var(--transition) !important;
}

.item .wrapper:hover .image {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}

.item .image .image-wrapper {
  border: none !important;
  border-radius: var(--radius-md) !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

.item .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
  transition: transform 0.4s ease !important;
}

.item .wrapper:hover .image img {
  transform: scale(1.04) !important;
}

.item .image .image-wrapper:before { display: none !important; }

.item h3 { display: none !important; }
.item h4.location { display: none !important; }

/* Meta */
.item .meta {
  padding: 0 !important;
  border-top: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  align-self: stretch !important;
  white-space: normal !important;
}

.item .meta h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.65 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  letter-spacing: -0.2px !important;
}

.item .meta figure {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 3px 0 0 !important;
  min-width: 0 !important;
  white-space: normal !important;
}

.item .meta figure i { display: none !important; }

.item .meta figure a {
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
}
.item .meta figure a:hover { color: var(--accent) !important; }

/* Price (moved into .meta by JS) */
.item .meta .price,
.item .price {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--accent) !important;
  background: transparent !important;
  display: block !important;
  letter-spacing: -0.2px !important;
  position: static !important;
  padding: 4px 0 0 !important;
  margin-top: auto !important;
  /* This span shrink-wraps to its own text (no explicit width, and it's a
     flex child of .meta), so with the browser's default center alignment
     for the "توافقی" ("on agreement") text divarak_fix_prices() swaps in
     (see divarak-header.php) the word sits centered inside its own
     narrow box rather than flush against the card's edge like every other
     price/text line in the card. Force it flush to the card's own edge
     (right, matching this RTL site's other card text). */
  text-align: right !important;
}

.item .price span {
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Specificity boosted (repeated class) — the global text-color re-apply block in
   divarak-header.php has selectors like ".elementor :not(a):not(b)...:not(i)" with
   NINE chained :not() clauses (specificity 0,10,0 combined with the ancestor class)
   that otherwise beat a plain-specificity price rule whenever the ad card sits
   inside Elementor/<article> (the normal case). 12 repetitions clears (0,10,0). */
.item.item.item.item.item.item.item.item.item.item.item.item .price .woocommerce-Price-amount {
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement.price-agreement {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Ribbon */
.ribbon-featured {
  z-index: 3 !important;
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
}

.ribbon-featured .ribbon-content {
  background: var(--accent) !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  color: var(--divarak-btn-text, #fff) !important;
}

.ribbon-featured .ribbon-start,
.ribbon-featured .ribbon-end { display: none !important; }

/* Ladder badge ("نردبان شده") — shows alongside (not instead of) the featured
   ribbon above when an ad has is_laddered=yes. Nested inside .image (which is
   position:relative in every card context: grid rows, featured-carousel, and
   the base theme CSS) and anchored to its bottom-left corner, so it needs no
   per-breakpoint offset math even though .image itself shrinks from 136px
   down to 90px on narrow viewports. Semi-transparent dark backdrop (not a
   solid color) with the site's own accent color for text/icon — per user
   feedback, distinct from .ribbon-featured's solid accent-filled look so the
   two stay tell-apart-able when an ad is both featured and laddered at once,
   while still reading as "part of the same design language" (same accent
   hue) rather than an arbitrary third color. */
.ribbon-ladder {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  right: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(30,30,34,0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 3px 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Color needs a specificity boost — divarak-header.php's global text-color
   re-apply block includes ".product *" and ".elementor :not(a):not(b)...
   :not(i)" style selectors (9 chained :not() ≈ specificity (0,10,0)), which
   otherwise beats a plain ".ribbon-ladder{color:...}" rule (0,1,0) whenever
   the badge sits inside .product (every real card — confirmed via headless
   screenshot: text rendered as #333 on the dark backdrop, unreadable).
   Same fix as .ribbon-featured/.ad_visit/.btn-primary elsewhere in this
   file: repeat the class to clear (0,10,0).
   Color itself: the theme's main accent color (var(--accent), the same
   green used by .ribbon-featured's background and site buttons) per
   explicit user confirmation — NOT the Customizer button-text-color
   variable used in an earlier iteration of this badge.

   The rule below targets .ribbon-ladder (the container), which correctly
   colors the icon (currentColor) — but the TEXT itself sits in a nested
   .ribbon-ladder-text <span>, and that span is a more specific selector
   match for the same global text-color re-apply block, so it wins over an
   inherited color from the container regardless of !important (confirmed
   live: computed color on .ribbon-ladder-text stayed rgb(51,51,51), the
   theme's default text-gray, while .ribbon-ladder itself correctly showed
   the accent green). Repeating .ribbon-ladder-text directly, the same
   fix pattern as everywhere else in this file. */
.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder.ribbon-ladder {
  color: var(--accent) !important;
}

.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text.ribbon-ladder-text {
  color: var(--accent) !important;
  font-size: 12px !important;
}

/* Same specificity fight as .ribbon-ladder-text above — .ribbon-ladder-icon
   is also a nested <span> matched by the global text-color re-apply block,
   so its own inherited/currentColor value loses to that block's gray
   without a repeated-class boost here too. */
.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon.ribbon-ladder-icon {
  color: var(--accent) !important;
}

.ribbon-ladder .ribbon-ladder-icon {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  flex: none !important;
}

.ribbon-ladder .ribbon-ladder-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* The "* " in ".product *"/".elementor :not(...)" also matches the <svg>
   element directly (not just its .ribbon-ladder ancestor), setting its own
   `color` and beating plain inheritance from the boosted rule above —
   confirmed via computed-style check: icon stayed #333 even after the badge
   text itself turned white. Needs its own specificity-boosted override. */
.ribbon-ladder .ribbon-ladder-icon svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg {
  color: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Root cause of the icon staying dark gray even after the svg/span turned
   green (confirmed via getComputedStyle on the actual <line> nodes): the
   "* " part of divarak-header.php's ".product *, .products *" re-apply rule
   (and the ".elementor *:not(...)"/"article *:not(...)" siblings, same ~9
   chained :not() specificity) is a *descendant* selector, so it matches the
   five <line> elements INSIDE the svg directly too, not just the svg/span
   ancestors covered above. A direct !important match on the <line> itself
   beats inherited currentColor from an ancestor no matter how the ancestor's
   own color was won, so the svg/span fixes above never reached the lines —
   they were still individually painted #333 by that catch-all. The lines
   have no stroke="currentColor" of their own (only the parent <svg> does),
   so they need `color` (for stroke="currentColor" resolution) AND `stroke`
   set directly, boosted past (0,10,0) the same way as every other fix in
   this section. */
.ribbon-ladder .ribbon-ladder-icon svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg.ribbon-ladder-icon-svg line {
  color: var(--accent) !important;
  stroke: var(--accent) !important;
}

@media (max-width: 576px) {
  .ribbon-ladder {
    font-size: 9px !important;
    padding: 2px 6px !important;
    bottom: 4px !important;
    left: 4px !important;
    gap: 2px !important;
  }
  .ribbon-ladder .ribbon-ladder-icon {
    width: 11px !important;
    height: 11px !important;
  }
}

/* Featured carousel's .image uses a height:0 + padding-bottom aspect-ratio
   box inside a flex column .wrapper with overflow:hidden (see rule above) —
   confirmed via real-device screenshot that a 10px bottom offset here gets
   partially clipped by that overflow on narrow viewports. 6px (same as the
   default card) sits safely inside the rendered box at every width tested. */
.featured-carousel .ribbon-ladder {
  bottom: 6px !important;
  left: 10px !important;
}

/* Visit */
.ad_visit {
  border-radius: 6px !important;
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(4px) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 3px 7px !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  border: none !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 18px !important;
  left: 18px !important;
}

.ad_visit::before {
  content: '\f03e' !important;
  font-family: 'FontAwesome' !important;
  font-size: 9px !important;
  color: #fff !important;
}

/* Bookmark — hidden on all listing cards */
.items.products .bookmark,
ul.row.items .bookmark,
div.row.items .bookmark,
ul[class*="ad-listing"] .bookmark,
.featured-carousel .bookmark {
  display: none !important;
}

.item .wrapper a.btn,
.item .wrapper button.btn { display: none !important; }

/* =============================================
   FEATURED CAROUSEL — Divar-style slider
   ============================================= */
.featured-carousel,
.items.featured-carousel,
div.featured-carousel {
  display: block !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

/* FOUC guard: before Owl Carousel's JS wraps the raw <li> items in .owl-stage
   (display:flex, see charsoogh.css) they stack as plain full-width blocks —
   visible as a misaligned "broken" flash on first paint. Keep just this
   carousel invisible (but laid out, so no layout shift) until Owl Carousel
   adds .owl-loaded. Bounded by the loading-screen JS's carousel-ready wait +
   its own 3s fallback, so this never hides content indefinitely.
   Scoped to .featured-carousel only (not all .owl-carousel instances) — other
   owl-carousel widgets on this theme (banner slider, brand/posts/review/content
   carousels) init via Elementor's frontend/element_ready hook instead of plain
   jQuery(document).ready, on a timeline this fix does not control; hiding them
   the same way risked leaving them invisible if that hook fires late/never. */
.featured-carousel.owl-carousel:not(.owl-loaded) {
  opacity: 0 !important;
}
.featured-carousel.owl-carousel.owl-loaded {
  opacity: 1 !important;
  transition: opacity 0.15s ease !important;
}

.featured-carousel .item {
  margin-bottom: 0 !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.featured-carousel .item .wrapper {
  margin: 0 6px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--border) !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition) !important;
}

.featured-carousel .item .wrapper:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-3px) !important;
}

.featured-carousel .item .image {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 0 !important;
  padding-bottom: 70% !important;
  aspect-ratio: auto !important;
  order: 0 !important;
  margin: 0 !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  box-shadow: none !important;
}

.featured-carousel .item .image .image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.featured-carousel .item .image img {
  border-radius: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.featured-carousel .item .meta {
  padding: 12px 14px 10px !important;
  order: 1 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.featured-carousel .item .meta h2 {
  font-size: 13px !important;
  -webkit-line-clamp: 1 !important;
  margin-bottom: 2px !important;
}

.featured-carousel .item .meta .price,
.featured-carousel .item .price {
  position: static !important;
  padding: 4px 0 0 !important;
  margin-top: auto !important;
}

.featured-carousel .ribbon-featured { top: 10px !important; left: 10px !important; right: auto !important; }
.featured-carousel .bookmark { top: 10px !important; right: 14px !important; left: auto !important; }
/* right:48px used to clear the bookmark button that sat at right:14px in
   this same top-right corner — that button is hidden on every listing card
   now (.bookmark { display:none } above), so nothing is there to clear
   anymore and the gap just left the badge floating away from the card
   edge. Match .bookmark's own former offset instead. */
.featured-carousel .ad_visit { top: 10px !important; left: auto !important; right: 14px !important; }

/* =============================================
   LOAD MORE
   ============================================= */
.loadmore, [class*="loadmore"],
a.btn.btn-rounded.btn-framed.loadmore {
  border-radius: var(--radius-sm) !important;
  padding: 10px 28px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  color: var(--text-sec) !important;
  transition: all var(--transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px auto !important;
  box-shadow: var(--shadow-sm) !important;
}

.loadmore:hover, [class*="loadmore"]:hover,
a.btn.btn-rounded.btn-framed.loadmore:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* =============================================
   SPACING
   ============================================= */
.block { padding: 16px 2rem !important; }
.elementor-section { margin-bottom: 0 !important; }
.elementor-top-section { padding-top: 10px !important; padding-bottom: 10px !important; }

.elementor-element-d8abb08 { background: #fff !important; padding-top: 0 !important; }
.elementor-element-d8abb08 > .elementor-shape-top,
.elementor-element-d8abb08 > .elementor-shape-bottom { display: none !important; }
.elementor-element-d8abb08 .elementor-shape svg { display: none !important; }

/* Featured ads section */
.elementor-element-428de39 { background: #fff !important; padding-top: 0 !important; }

/* Homepage sections container */
body.home .elementor-home-page { background: #fff !important; }
body.home main.content { background: #fff !important; }
body.archive main.content { background: #fff !important; }
body.archive .block { background: #fff !important; }
body.archive { background: #fff !important; }
body.home .page-content { max-width: 1280px !important; margin: 0 auto !important; padding: 0 20px !important; }

/* =============================================
   BLOG — حذف
   ============================================= */
.elementor-element-be88a28,
.elementor-widget-charsoogh_post_carousel,
.blog-carousel,
.blog-item { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* =============================================
   APP DOWNLOAD
   ============================================= */
.elementor-element-3317077 { padding: 16px 0 !important; }
.elementor-element-3317077 .elementor-column { padding: 6px !important; }

.elementor-element-3317077 .elementor-widget-image {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  transition: transform var(--transition) !important;
}

.elementor-element-3317077 .elementor-widget-image:hover { transform: translateY(-2px) !important; }

.elementor-element-3317077 .elementor-widget-image img {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  max-height: 90px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* =============================================
   SUBMIT AD BOX
   ============================================= */
section.submit.charsooghSubmit-ad-modal { margin-bottom: 0 !important; }

.block.adv-shortcode-submit-box,
#charsoogh_submit_ad_show .block.adv-shortcode-submit-box {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#charsoogh_submit_ad_show .block.adv-shortcode-submit-box > .container,
#charsoogh_submit_ad_show .container.responsive-padding {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#charsoogh_submit_ad_show .stepwizard.col-md-offset-3 {
  display: none !important;
}

/* =============================================
   SUBMIT AD MODAL — Full-screen, no background
   ============================================= */

/* Modal covers everything — fixed fullscreen */
#charsoogh_submit_ad_show {
  padding: 0 !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #f5f6f8 !important;
  overflow: hidden !important;
}

#charsoogh_submit_ad_show .modal-dialog {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#charsoogh_submit_ad_show .modal-content,
#charsoogh_submit_ad_show.modal.full .modal-content,
.modal.full#charsoogh_submit_ad_show .modal-content {
  background: #f5f6f8 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

#charsoogh_submit_ad_show .modal-header {
  display: none !important;
}

#charsoogh_submit_ad_show .modal-body,
#charsoogh_submit_ad_show .modal-body.modal-submit-new-show,
#charsoogh_submit_ad_show .modal-body.modal-submit-new-show.d-flex {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f6f8 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-content: stretch !important;
}

/* Close button & loading — no space taken */
#charsoogh_submit_ad_show h2.close-modal,
#charsoogh_submit_ad_show .close-modal.display-2,
#charsoogh_submit_ad_show h2.close-modal.display-2 {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
  font-size: 0 !important;
  flex-shrink: 0 !important;
}

#charsoogh_submit_ad_show .ad-loading {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill ALL spacing everywhere inside modal */
#charsoogh_submit_ad_show .modal-body > *,
#charsoogh_submit_ad_show .modal-body section,
#charsoogh_submit_ad_show .modal-body .block,
#charsoogh_submit_ad_show .modal-body .container,
#charsoogh_submit_ad_show .modal-body form,
#charsoogh_submit_ad_show .modal-body .setup-content,
#charsoogh_submit_ad_show .modal-body .row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hide backdrop — modal IS the page */
#charsoogh_submit_ad_show ~ .modal-backdrop,
#charsoogh_submit_ad_show + .modal-backdrop {
  background: #f5f6f8 !important;
  opacity: 1 !important;
}

/* Close button — fixed top left, out of flow */
#charsoogh_submit_ad_show .close-modal {
  position: fixed !important;
  top: 16px !important;
  left: 20px !important;
  right: auto !important;
  z-index: 100000 !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

#charsoogh_submit_ad_show .close-modal a {
  font-size: 28px !important;
  color: #999 !important;
  text-decoration: none !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.15s !important;
}

#charsoogh_submit_ad_show .close-modal a:hover {
  background: rgba(0,0,0,0.05) !important;
  color: #333 !important;
}

/* Form container — flex column full height, no gaps */
#charsoogh_submit_ad_show .charsooghSubmit-ad-modal,
#charsoogh_submit_ad_show .submit-ad-modal,
#charsoogh_submit_ad_show section.submit {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
}

#charsoogh_submit_ad_show #ad_submit {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Progress bar — hidden */
#charsoogh_submit_ad_show .stepwizard {
  display: none !important;
}

/* Hide inactive steps completely */
#charsoogh_submit_ad_show .setup-content[style*="display: none"],
#charsoogh_submit_ad_show .setup-content[style*="display:none"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Step 3 (confirm) — fix empty space at top */
#charsoogh_submit_ad_show #step-3 .col-md-12,
#charsoogh_submit_ad_show #step-4 .col-md-12 {
  justify-content: flex-start !important;
}

#charsoogh_submit_ad_show #step-3 .steploading,
#charsoogh_submit_ad_show #step-2 .steploading {
  display: none !important;
}

/* Step 2 & 3 — section titles */
#charsoogh_submit_ad_show .section-title {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

#charsoogh_submit_ad_show .section-title h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  border-bottom: 2px solid var(--accent) !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
}

/* Step content container — flex column, no scroll */
#charsoogh_submit_ad_show .setup-content {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* The col-md-12 inside step — THIS scrolls */
#charsoogh_submit_ad_show .setup-content > .col-md-12,
#charsoogh_submit_ad_show .setup-content > .col-md-12.responsive-padding {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  padding: 0 !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

/* Step title — sticky top, full width */
#charsoogh_submit_ad_show .setup-content > .col-md-12 > h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  background: #eef0f3 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
}

/* Section title h2 inside step 2 — also sticky */
#charsoogh_submit_ad_show .setup-content .section-title h2 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
}

/* Category list items */
#charsoogh_submit_ad_show .list-group,
#charsoogh_submit_ad_show .category-list-group {
  padding: 0 !important;
  margin: 0 !important;
}

#charsoogh_submit_ad_show .list-group-item {
  border: none !important;
  border-bottom: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #333 !important;
  background: transparent !important;
}

#charsoogh_submit_ad_show .list-group-item:hover {
  background: rgba(0,0,0,0.03) !important;
}

#charsoogh_submit_ad_show .list-group-item:last-child {
  border-bottom: none !important;
}

#charsoogh_submit_ad_show .list-group-item img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}

/* Hide loading placeholder */
#charsoogh_submit_ad_show .loading {
  display: none !important;
}

/* Form inputs */
#charsoogh_submit_ad_show .form-control,
#charsoogh_submit_ad_show input[type="text"],
#charsoogh_submit_ad_show input[type="number"],
#charsoogh_submit_ad_show input[type="email"],
#charsoogh_submit_ad_show input[type="tel"],
#charsoogh_submit_ad_show textarea,
#charsoogh_submit_ad_show select {
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: #333 !important;
}

#charsoogh_submit_ad_show .form-control:focus,
#charsoogh_submit_ad_show input:focus,
#charsoogh_submit_ad_show textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04) !important;
  outline: none !important;
}

#charsoogh_submit_ad_show label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
  margin-bottom: 6px !important;
}

/* Action buttons */
#charsoogh_submit_ad_show .btn-primary:not(.btn-new-ad-step),
#charsoogh_submit_ad_show .btn-success,
#charsoogh_submit_ad_show .submit-advance {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 10px;
  padding: 12px 32px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer !important;
}

#charsoogh_submit_ad_show .btn-default,
#charsoogh_submit_ad_show .change_category {
  background: #f0f0f0 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #555 !important;
  cursor: pointer !important;
}

/* Upload area */
#charsoogh_submit_ad_show .dropzone,
#charsoogh_submit_ad_show .image-upload-area {
  border: 2px dashed #ddd !important;
  border-radius: 12px !important;
  background: #fafbfc !important;
  padding: 24px !important;
  text-align: center !important;
}

/* Alerts */
#charsoogh_submit_ad_show .alert {
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* Step 2/3 content padding */
#charsoogh_submit_ad_show .setup-content .col-md-12,
#charsoogh_submit_ad_show .setup-content .responsive-padding {
  padding: 16px 24px !important;
}

/* Mobile */
@media (max-width: 768px) {
  #charsoogh_submit_ad_show .setup-content {
    max-width: 100% !important;
  }
  #charsoogh_submit_ad_show .stepwizard {
    padding: 14px 12px 10px !important;
    max-width: 100% !important;
  }
  #charsoogh_submit_ad_show .stepwizard-step p {
    font-size: 10px !important;
  }
  #charsoogh_submit_ad_show .list-group-item {
    padding: 12px 16px !important;
  }
  #charsoogh_submit_ad_show .close-modal {
    top: 14px !important;
    left: 14px !important;
  }
  #charsoogh_submit_ad_show .close-modal a {
    font-size: 24px !important;
  }
  #charsoogh_submit_ad_show .setup-content .col-md-12,
  #charsoogh_submit_ad_show .setup-content .responsive-padding {
    padding: 12px 16px !important;
  }
}

.block.adv-shortcode-submit-box {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  margin: 8px auto !important;
  max-width: 900px !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
}

/* =============================================
   HOMEPAGE FOOTER — simplified (only logo+desc, app download, copyright)
   ============================================= */
body.home .footer .col-md-3,
body.archive .footer .col-md-3 {
  display: none !important;
}

body.home .footer .col-md-4 h2,
body.home .footer .col-md-4 address,
body.archive .footer .col-md-4 h2,
body.archive .footer .col-md-4 address {
  display: none !important;
}

body.home .footer .col-md-4 .app_download,
body.archive .footer .col-md-4 .app_download {
  display: flex !important;
}

body.home .footer .social,
body.archive .footer .social {
  display: none !important;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--bg-card) !important;
  margin-top: 20px !important;
  border-top: 1px solid var(--border) !important;
}

.footer::before, .footer::after { display: none !important; }
.footer .background { display: none !important; }

.footer .container {
  padding-top: 40px !important;
  padding-bottom: 30px !important;
}

.footer .col-md-5 .brand img,
.footer .brand-sec .brand img {
  opacity: 0.75 !important;
  max-height: 36px !important;
  width: auto !important;
}

.footer .brand-sec .brand:hover img { opacity: 1 !important; }

.footer .brand-sec p { font-size: 13px !important; color: var(--text-muted) !important; line-height: 2 !important; margin-top: 12px !important; }

.footer .brand-sec {
  background: transparent !important;
  padding: 0 16px 0 0 !important;
  border: none !important;
}

.footer .col-md-5 { background: transparent !important; }

.footer h2 {
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  border-right: 3px solid var(--accent) !important;
  padding-right: 10px !important;
}

.footer h2::before { display: none !important; }

.footer nav ul { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.footer nav ul li { margin-bottom: 10px !important; }

.footer nav ul li a {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  transition: color var(--transition) !important;
}

.footer nav ul li a::before { display: none !important; }
.footer nav ul li a:hover { color: var(--accent) !important; padding-right: 0 !important; }

.footer address { font-style: normal !important; }
.footer address p, .footer address figure { font-size: 13px !important; color: var(--text-muted) !important; line-height: 1.8 !important; margin-bottom: 10px !important; }
.footer address i { color: var(--text-muted) !important; font-size: 13px !important; }

.footer .namad img { border-radius: var(--radius-sm) !important; opacity: 0.6 !important; }
.footer .namad img:hover { opacity: 0.85 !important; }

.footer .app_download, .footer .row.app_download { margin-top: 14px !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.footer .app_download .app_badge img, .footer .row.app_download .app_badge img, .app_download img {
  height: 36px !important; width: auto !important; border-radius: var(--radius-sm) !important; opacity: 0.65 !important; display: block !important;
}
.app_download img:hover { opacity: 0.9 !important; }

.footer .cp-footer, .footer .row.cp-footer {
  border-top: 1px solid var(--border) !important;
  padding-top: 18px !important;
  margin-top: 24px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* .copyright is Bootstrap's .col-lg-6 (flex-basis/max-width: 50%) — fine on
   a full-width page footer, but this same footer markup also gets moved
   into a ~300px sidebar column in two places: the homepage
   (#divarak-home-sidebar, divarak_homepage_layout()) and the category-page
   sidebar (#divarak-cat-sidebar, same divarak-header.php footer-relocation
   code, same single <footer> DOM node just moved to a different
   container) — where 50% leaves the copyright text only ~128px wide.
   Persian text at that width wraps after nearly every word instead of
   filling lines naturally (confirmed live: 128px actual width, wrapping
   to 3 lines on the category sidebar vs. the already-fixed single-line
   homepage sidebar). Let it use the sidebar's full width instead — .social
   (the other half of this same row) is empty in practice on this site, so
   nothing else needs the other 50%. */
#divarak-home-sidebar .footer .copyright,
#divarak-home-sidebar .footer .cp-footer .copyright,
#divarak-cat-sidebar .footer .copyright,
#divarak-cat-sidebar .footer .cp-footer .copyright {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
}

.footer .social ul, .footer .col-lg-6.social ul {
  display: flex !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; justify-content: flex-end !important;
}

.footer .social ul li a, .footer .col-lg-6.social ul li a {
  width: 36px !important; height: 36px !important;
  background: var(--bg-input) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all var(--transition) !important;
}

.footer .social ul li a:hover, .footer .col-lg-6.social ul li a:hover {
  background: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(192,57,43,0.25) !important;
}

.footer .social ul li a i, .footer .social ul li a svg { color: var(--text-muted) !important; fill: var(--text-muted) !important; font-size: 14px !important; }
.footer .social ul li a:hover i, .footer .social ul li a:hover svg { color: #fff !important; fill: #fff !important; }

/* =============================================
   MOBILE STICKY FOOTER
   ============================================= */
.footer-sticky-menu {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.04) !important;
}

.footer-sticky-menu ul li a { color: var(--text-muted) !important; font-size: 10px !important; font-weight: 600 !important; }
.footer-sticky-menu ul li a:hover, .footer-sticky-menu ul li.active a { color: var(--accent) !important; }
.footer-sticky-menu ul li i { font-size: 18px !important; }

/* =============================================
   BUTTONS
   ============================================= */
.btn { border-radius: var(--radius-sm) !important; font-weight: 600 !important; transition: all var(--transition) !important; font-size: 13px !important; }
.btn.btn-primary { background: var(--accent) !important; border: none !important; box-shadow: 0 2px 6px rgba(192,57,43,0.2) !important; }
.btn.btn-primary:hover { background: var(--accent-hover) !important; box-shadow: 0 4px 12px rgba(192,57,43,0.3) !important; transform: translateY(-1px) !important; }
.btn.btn-rounded, .btn.btn-framed { border-radius: var(--radius-sm) !important; }

/* newad-2 (add-new-ad) publish step: keep "اتمام ثبت آگهی" in sync with the
   accent green + customizer button-text-color, matching the "پرداخت" button
   next to it. charsoogh.css's .btn.finish_publish rule hardcodes a gray
   background (#7f7c7c) that otherwise wins by source order. */
.btn.finish_publish,
.btn.upgrade_ads {
  background: var(--accent) !important;
  color: var(--divarak-btn-text, #fff) !important;
}
.btn.finish_publish:hover,
.btn.upgrade_ads:hover {
  background: var(--accent-hover) !important;
}

/* Same specificity bug as .submit_new_ad/.publish_ad below: the upgrade-ad
   panel's "پرداخت" buttons (#featured_payment/#ladder_payment/
   #ladder_featured_payment, all .btn.btn-success.upgrade_ads) live inside
   both <article class="page-content"> and <div class="woocommerce"> on the
   WooCommerce My Account "edit-ad" endpoint (?upgrade=ID). divarak-header.php's
   global text-color re-apply block's ".woocommerce *:not(...)" / "article
   *:not(...)" selectors (9x :not() chains, specificity ~0,10-11,0) beat the
   plain ".btn.upgrade_ads" rule above (0,2,0) even with !important, since tied
   !important declarations resolve by specificity before source order. Verified
   via headless Chromium against Docker: computed color was rgb(28,28,28)
   (= --divarak-text-color at test time) instead of following --divarak-btn-text
   (customizer "رنگ متن دکمه‌ها" / charsoogh_btn_text_color). Repeating the
   class 12x clears the global rule's specificity, same fix as
   .submit_new_ad/.publish_ad. */
.btn.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads {
  background: var(--accent) !important;
  color: var(--divarak-btn-text, #fff) !important;
}
.btn.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads.upgrade_ads:hover {
  background: var(--accent-hover) !important;
}

/* newad-2 (standalone /newad-2/ page, not the modal) — "مرحله بعد" (Next step)
   button. It's .btn.btn-success.submit_new_ad, plain Bootstrap green (#28a745)
   with no project rule overriding it, while divarak-header.php's global
   text-color re-apply block (the ".product *"/"article *" 9x-:not() pattern,
   specificity ~0,10,0 — this button sits inside <article class="page-content">)
   forces dark var(--divarak-text-color) text since .btn-primary is the only
   carve-out there. A plain ".btn.submit_new_ad" (0,2,0) loses to that even
   with !important (spec beats source order). Verified via headless-Chrome
   screenshot: bg rgb(40,167,69), text rgb(51,51,51) — didn't match the accent
   green or white text used by the adjacent "مرحله قبل" (.btn-primary, already
   correct via the same repeated-class fix in divarak-header.php). Specificity
   boosted (repeated class) the same way, 12x to clear (0,10,0). */
.btn.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad {
  background: var(--accent) !important;
  color: var(--divarak-btn-text, #fff) !important;
}
.btn.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad.submit_new_ad:hover {
  background: var(--accent-hover) !important;
}

/* Same bug, same fix, step-3 "تایید و انتشار" (Confirm and Publish) button —
   .btn.btn-success.publish_ad, shared markup between the standalone /newad-2/
   page (inside <article>, hits the same specificity problem) and the
   #charsoogh_submit_ad_show modal (already forced white via a higher-specificity
   #id-scoped rule above, so this doesn't change modal behavior). Verified via
   headless-Chrome: bg rgb(40,167,69), text rgb(51,51,51) on the standalone page. */
.btn.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad {
  background: var(--accent) !important;
  color: var(--divarak-btn-text, #fff) !important;
}
.btn.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad.publish_ad:hover {
  background: var(--accent-hover) !important;
}

/* WooCommerce order-pay page "پرداخت برای سفارش" button — woocommerce/checkout/
   form-pay.php's #place_order, plain .btn.btn-success (bg left as WooCommerce's
   own green #28a745; user only asked for the TEXT color to follow the
   customizer). Same <article class="page-content">/<div class="woocommerce">
   wrapping as .upgrade_ads/.submit_new_ad/.publish_ad above, but #place_order
   is an ID selector (specificity 1,0,0), which already outranks the global
   catch-all's class-based ~0,10,0 — verified via headless Chromium against
   Docker: before this rule, computed color was rgb(28,28,28) (the global
   --divarak-text-color re-apply), not --divarak-btn-text. No class-repeat
   trick needed here since the ID alone clears it. */
#place_order {
  color: var(--divarak-btn-text, #fff) !important;
}

/* =============================================
   FORMS
   ============================================= */
.form-control {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  transition: all var(--transition) !important;
}

.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
  outline: none !important;
}

/* =============================================
   MODALS
   ============================================= */
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.15) !important;
  background: var(--bg-card) !important;
}

.modal-header { border-bottom: 1px solid var(--border) !important; padding: 18px 22px !important; }
.modal-header .modal-title { font-weight: 700 !important; font-size: 16px !important; color: var(--text) !important; }
.modal-header .close span { color: var(--text-muted) !important; }
.modal-header .close:hover span { color: var(--text) !important; }
.modal-body { padding: 20px 22px !important; }

.vertical-menu > li > a {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-sec) !important;
  transition: all var(--transition) !important;
}

.vertical-menu > li > a:hover { background: var(--accent-light) !important; color: var(--accent) !important; }
.vertical-menu > li { animation: none !important; }

.vertical-menu .dropdown-submenu .children { background: var(--bg-input) !important; border-radius: var(--radius-sm) !important; margin: 4px 0 !important; padding: 4px !important; }
.vertical-menu .dropdown-submenu .children > li > a { border-radius: 6px !important; padding: 8px 10px !important; font-size: 12px !important; color: var(--text-muted) !important; border-bottom: none !important; }
.vertical-menu .dropdown-submenu .children > li > a:hover { background: var(--bg-card) !important; color: var(--accent) !important; }

/* City modal */
#city-select-modal .modal-content { border-radius: var(--radius-lg) !important; }
#city-select-modal .city-search-box #city_search { border-radius: var(--radius-sm) !important; border: 1px solid var(--border) !important; padding: 12px 16px !important; background: var(--bg-input) !important; color: var(--text) !important; }
#city-select-modal .city-search-box #city_search:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-light) !important; }

.city_list li a, .city_list li span { border-radius: 6px !important; padding: 8px 10px !important; font-size: 13px !important; color: var(--text-sec) !important; }
.city_list li a:hover { color: var(--accent) !important; background: var(--accent-light) !important; }

/* =============================================
   AUTH FORMS
   ============================================= */
.woocommerce-account .u-columns.row#customer_login {
  padding: 24px 16px !important;
}

.woocommerce-account .col-register-modal {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 40px 32px !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 420px !important;
  margin: 20px auto !important;
  transition: box-shadow var(--transition) !important;
}

/* Form itself sits inside the card wrapper above — must not double up as its own card */
.woocommerce-account .col-register-modal .woocommerce-form-login,
.woocommerce-account .col-register-modal .woocommerce-form-register {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Standalone login/register forms not wrapped by .col-register-modal (other register_type branches) still get the card treatment */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 40px 32px !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 420px !important;
  margin: 20px auto !important;
  transition: box-shadow var(--transition) !important;
}

/* Heading — plain centered text, no decorative lines/ticks */
.woocommerce-account .col-register-modal .section-title,
.woocommerce-account .woocommerce-form-login .section-title,
.woocommerce-account .woocommerce-form-register .section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
}

/* Suppress theme's default absolute-positioned h2:before/h2:after lines here */
.woocommerce-account .col-register-modal .section-title h2::before,
.woocommerce-account .col-register-modal .section-title h2::after,
.woocommerce-account .woocommerce-form-login .section-title h2::before,
.woocommerce-account .woocommerce-form-login .section-title h2::after,
.woocommerce-account .woocommerce-form-register .section-title h2::before,
.woocommerce-account .woocommerce-form-register .section-title h2::after {
  display: none !important;
}

.woocommerce-account .col-register-modal .section-title h2,
.woocommerce-account .woocommerce-form-login .section-title h2,
.woocommerce-account .woocommerce-form-register .section-title h2 {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

/* Notice — integrated info card instead of a browser-default alert box */
.woocommerce-account .alert.alert-warning {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: var(--accent-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 24px !important;
  color: var(--text-sec) !important;
}

.woocommerce-account .alert.alert-warning p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

.woocommerce-account .alert.alert-warning::before {
  content: '\2139' !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.woocommerce-account .woocommerce-form-row label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-sec) !important;
  margin-bottom: 8px !important;
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.phone_input input {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  background: var(--bg-input) !important;
  color: var(--text) !important;
  text-align: center !important;
  width: 100% !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
}

.woocommerce-account .woocommerce-Input:hover,
.woocommerce-account input.input-text:hover,
.phone_input input:hover {
  border-color: var(--border-hover) !important;
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input.input-text:focus,
.phone_input input:focus {
  outline: none !important;
  background: var(--bg-card) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-form .button,
.charsoogh_register {
  border-radius: var(--radius-md) !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  width: 100% !important;
  background: var(--accent) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

/* Single-ad page map's "go to my location" button (.mapbox .location-send,
   woocommerce/content-single-product.php — a real Font Awesome icon,
   `<i class="fa fa-location-arrow">`, not an image). charsoogh.css's own
   `.mapbox .location-send { color: black; }` already loses to two other
   global rules in divarak-header.php's big sitewide-text-color block:
   `.sidebar *` and `.product *` — unlike every *other* entry in that same
   selector list (`.woocommerce *`, `.elementor *`, `article *`, etc.),
   these two were written WITHOUT the `:not(.fa):not(.fas):...:not([class*=
   "bx-"])` exclusion the others have, so a real Font Awesome icon nested
   under `.sidebar`/`.product` still gets caught by them and forced to
   --divarak-text-color !important — confirmed live: the icon rendered in
   the sitewide text color (dark) instead of matching the button's own
   white/customizer text color the rest of this button already has. Same
   specificity-monster pattern as the button-text-color fixes below;
   fixing it here (not editing that shared exclusion list, which other
   unrelated elements rely on) keeps this scoped to just this one icon.
   NOTE: repeated classes must have NO space between them (.mapbox.mapbox.
   mapbox) to pile specificity onto the one real element that has this
   class — a first attempt wrote ".mapbox .mapbox .mapbox" WITH spaces,
   which is a descendant-combinator selector requiring three SEPARATE
   nested ancestor elements all carrying .mapbox (there's only one: the
   section.box.mapbox this button lives in), so that version matched
   nothing and never overrode anything — confirmed live: computed icon
   color was still the sitewide dark text color, not this rule's white. */
.mapbox.mapbox.mapbox .location-send i {
  color: var(--divarak-btn-text, #fff) !important;
}

/* Button text color, kept as its own rule with extra specificity: the
   global "inherit theme text color everywhere" rule in divarak-header.php
   (.woocommerce *:not(.fa):not(...)×8, ~9 classes of specificity — see the
   specificity-monster pitfall) has EQUAL specificity to a 9x-repeated
   class here, and divarak-header.php's <style> is printed later in <head>
   (wp_head, after this stylesheet's <link>) — so on a specificity tie it
   still wins by source order. Repeating one more class (10x) than its ~9
   makes this rule strictly win regardless of source order.
   Uses the customizer's "رنگ متن دکمه‌ها" variable (--divarak-btn-text,
   defined in divarak-header.php from charsoogh_btn_text_color) instead of
   a hardcoded white, same as the "بازگشت به صفحه اصلی" button fix — this
   button's text must follow that setting like every other button's does. */
/* The "بازگشت به صفحه اصلی (<span id="divarak-countdown">)" countdown
   number — same specificity-monster problem as the button text above: the
   sitewide "html, body, p, span, div, ... { color: var(--divarak-text-
   color) !important; }" rule in divarak-header.php targets bare `span`
   directly (not just inherited), which beats #divarak-back-home's own
   color even though the countdown is nested inside it. A plain ID
   selector (specificity 100) ties with that rule's own specificity for
   `span` there (10 classes = 100) but wins on being the more specific
   match for THIS element — confirmed needed live: without this rule the
   countdown number rendered in the sitewide text color instead of the
   button's white/customizer-configured text color, visibly different
   from the rest of the button's own text. */
/* Report-ad modal's Cancel/Send buttons (template/report-ad.php:
   .btn-secondary and .btn-danger inside #report_ads) — same fix as the
   share dialog's copy-link button above: match the customizer's button
   text color instead of Bootstrap's hardcoded white, and the #report_ads
   ID gives enough specificity to beat the sitewide text-color rule. */
#report_ads .btn-secondary,
#report_ads .btn-danger {
  color: var(--divarak-btn-text, #fff) !important;
}

#divarak-countdown {
  color: var(--divarak-btn-text, #fff) !important;
}

.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account .woocommerce-Button,
.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account.woocommerce-account .woocommerce-form .button,
.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register.charsoogh_register {
  color: var(--divarak-btn-text, #fff) !important;
}

.woocommerce-account .woocommerce-Button:hover,
.charsoogh_register:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.woocommerce-account .woocommerce-Button:active,
.charsoogh_register:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* "Change phone number" — secondary, minimal link-style button (not a second primary CTA).
   Extra-specific selector needed to beat charsoogh.css's `.woocommerce-account .woocommerce
   #customer_login .register_btn_show .charsoogh_register_change { float: left; margin-top: ... }` */
.woocommerce-account .woocommerce #customer_login .register_btn_show .woocommerce-Button.charsoogh_register_change,
.woocommerce-account .woocommerce-Button.charsoogh_register_change {
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  border: none !important;
  padding: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: auto !important;
  float: none !important;
  display: block !important;
  margin: 10px auto 0 !important;
}

.woocommerce-account .woocommerce #customer_login .register_btn_show .woocommerce-Button.charsoogh_register_change:hover,
.woocommerce-account .woocommerce-Button.charsoogh_register_change:hover {
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.woocommerce-account .woocommerce-Button.charsoogh_register_change .fa {
  font-size: 11px !important;
  color: inherit !important;
}

/* Checkmark/reply icons inside the auth buttons must match the button's own text color */
.woocommerce-account .woocommerce-Button .fa,
.charsoogh_register .fa {
  color: inherit !important;
}

/* =============================================
   WOOCOMMERCE
   ============================================= */
.woocommerce .price { color: var(--text) !important; font-weight: 600 !important; }
.woocommerce nav.woocommerce-pagination ul { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--radius-sm) !important; margin: 0 2px !important; border: 1px solid var(--border) !important; font-weight: 600 !important; color: var(--text-sec) !important; background: var(--bg-card) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

.woocommerce-breadcrumb { font-size: 12px !important; color: var(--text-muted) !important; padding: 12px 0 !important; }
.woocommerce-breadcrumb a { color: var(--text-muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--accent) !important; }

.woocommerce table.shop_table { border-radius: var(--radius-md) !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; }

/* =============================================
   ALERTS
   ============================================= */
.alert { border-radius: var(--radius-sm) !important; }
.alert.alert-warning { background: #fffbeb !important; border: 1px solid #fde68a !important; color: #78350f !important; }


/* =============================================
   SINGLE AD PAGE — Divar-style 2-column layout
   ============================================= */

/* Hero title bar — moved above main.content by JS */
.single-product .page-title {
  display: block !important;
  background: #1a1a2e !important;
  padding: 20px 0 16px !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.single-product .page-title h1,
.single-product .page-title h1 a {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
.single-product .page-title .location,
.single-product .page-title .location a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px !important;
}
.single-product .page-title .price,
.single-product .page-title .float-left,
.single-product .page-title .id {
  display: none !important;
}
.single-product .page-title .location {
  margin-top: 6px !important;
}
.single-product .page-title .location i {
  color: rgba(255,255,255,0.5) !important;
}
.single-product .page-title .location::before {
  color: rgba(255,255,255,0.5) !important;
}
.single-product .hero .background { display: none !important; }

/* Page background */
.single-product main.content { background: #fff !important; margin-bottom: 0 !important; }
.single-product .block { padding: 20px 0 !important; background: #fff !important; }

/* 2-column layout: gallery left, info right */
.single-product .row.flex-md-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

/* Gallery column (left) */
.single-product .col-md-8.charsoogh-content,
.single-product .col-md-8#content,
.single-product #content {
  flex: 0 0 45% !important;
  max-width: 45% !important;
  width: 45% !important;
  order: 2 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Info column (right — sidebar) */
.single-product .col-md-4#sidebar,
.single-product #sidebar {
  flex: 0 0 calc(55% - 24px) !important;
  max-width: calc(55% - 24px) !important;
  width: calc(55% - 24px) !important;
  order: 1 !important;
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start !important;
  padding: 0 !important;
}

/* Gallery images */
.single-product .highlight-main {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}

.single-product .highlight-main img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  max-height: 500px !important;
}

.single-product .highlight-main .carousel-cell {
  width: 100% !important;
}

/* Fullscreen-view button overlay on the gallery image. This link/icon existed
   in the theme markup before (wraps a glightbox link) but had no positioning
   CSS anywhere, so it rendered as a 0x0 static element — present in the DOM
   but invisible and effectively unusable. */
.single-product .highlight-main {
  position: relative !important;
}

.single-product .highlight-main .full-image-show {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(2px) !important;
}

.single-product .highlight-main .full-image-show a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.single-product .highlight-main .full-image-show svg {
  width: 18px !important;
  height: 18px !important;
  fill: #fff !important;
}

/* Thumbnails */
.single-product .highlight-thumbs {
  margin-top: 10px !important;
}

.single-product .highlight-thumbs .carousel-cell {
  width: 70px !important;
  height: 70px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-left: 6px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
}

.single-product .highlight-thumbs .carousel-cell.is-nav-selected {
  border-color: var(--accent) !important;
}

.single-product .highlight-thumbs .carousel-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* WooCommerce gallery fallback */
.single-product .woocommerce-product-gallery,
.single-product .flexslider,
.single-product .images {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sidebar boxes */
.single-product #sidebar aside.sidebar {
  padding: 0 !important;
}

.single-product #sidebar section > .box,
.single-product #sidebar .box {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* Profile box — hidden */
.single-product .profile-box,
.single-product #sidebar > section > .box > a[href*="profile"] {
  display: none !important;
}

.single-product .profile-box .advertiser {
  display: none !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  margin-right: 8px !important;
  font-weight: 500 !important;
}

/* Contact buttons */
.single-product .contact-box {
  display: flex !important;
  gap: 8px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

.single-product .contact-box .contact_info,
.single-product .contact-box .chat_info {
  flex: 1 !important;
  background: var(--accent) !important;
  color: var(--divarak-btn-text, #fff) !important;
  border: none !important;
  border-radius: 10px;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.single-product .contact-box .contact_info:hover,
.single-product .contact-box .chat_info:hover {
  background: var(--charsoogh-main) !important; filter: brightness(0.85);
}

/* Part 1: bookmark/save button — smaller footprint, same position */
.single-product .contact-box .btn-framed,
.single-product .contact-box .btn-icon {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

.single-product .contact-box .btn-framed:hover,
.single-product .contact-box .btn-icon:hover {
  background: #f5f5f5 !important;
}

.single-product .contact-box .btn-framed i,
.single-product .contact-box .btn-icon i {
  font-size: 14px !important;
  color: #555 !important;
}

/* Part 2: inline "Contact Info" panel — replaces the jQuery.confirm() modal */
.single-product .contact-info-panel {
  padding: 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-card) !important;
  margin: 16px 0 !important;
}

.single-product .contact-info-panel-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}

.single-product .contact-info-panel-heading i {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.single-product .contact-info-panel dl.user_contact_info {
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .contact-info-panel dl.user_contact_info dt {
  color: var(--text-sec) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 10px !important;
}

.single-product .contact-info-panel dl.user_contact_info dt:first-child {
  margin-top: 0 !important;
}

.single-product .contact-info-panel dl.user_contact_info dt i {
  color: var(--accent) !important;
  width: 16px !important;
  text-align: center !important;
}

.single-product .contact-info-panel dl.user_contact_info dd {
  margin: 2px 0 0 !important;
  font-size: 14px !important;
  color: var(--text) !important;
}

.single-product .contact-info-panel dl.user_contact_info dd a {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.single-product .contact-info-panel-buttons {
  display: flex !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.single-product .contact-info-panel-buttons .btn-blue,
.single-product .contact-info-panel-buttons .btn-info {
  flex: 1 !important;
  text-align: center !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
}

.single-product .contact-info-panel-buttons .btn-blue {
  background: var(--accent) !important;
  color: #fff !important;
}

.single-product .contact-info-panel-buttons .btn-info {
  background: var(--bg-hover) !important;
  color: var(--text-sec) !important;
}

/* Specs table — dl/dt/dd */
.single-product #sidebar dl {
  margin: 0 !important;
  padding: 0 !important;
}

.single-product #sidebar dl dt {
  float: right !important;
  clear: right !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  font-size: 13px !important;
  padding: 14px 0 !important;
  width: 40% !important;
  border-bottom: 1px solid var(--border) !important;
}

.single-product #sidebar dl dd {
  margin-right: 40% !important;
  font-size: 13px !important;
  color: var(--text-sec) !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left !important;
  background: none !important;
  height: 48.5px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.single-product #sidebar dl dd:last-of-type {
  border-bottom: none !important;
}

.single-product #sidebar dl dd a {
  color: var(--accent) !important;
}

/* Price in sidebar */
.single-product #sidebar .price,
.single-product #sidebar .price span,
.single-product #sidebar dd .price,
.single-product #sidebar dd .price span {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-sec) !important;
  line-height: 1.4 !important;
}

.single-product #sidebar #ad-visit { display: none !important; }

.single-product #sidebar .ad_visit_n {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* Content sections — description, etc. */
.single-product section.box {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
}

.single-product section.box .box-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  padding-bottom: 12px !important;
  border-bottom: 3px solid var(--accent) !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

.single-product section.box p {
  font-size: 14px !important;
  line-height: 2 !important;
  color: var(--text) !important;
}

/* Map */
.single-product .mapbox {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  margin: 20px 0 !important;
  border: 1px solid var(--border) !important;
}

.single-product .mapbox #map {
  height: 250px !important;
}

/* Share link */
.single-product .share-link-box {
  padding: 16px 0 !important;
  border-top: 1px solid var(--border) !important;
}

.single-product .short-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.single-product .short-link input {
  flex: 1 !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: var(--text) !important;
  direction: ltr !important;
}

/* Social share */
.single-product .crunchify-social {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 0 !important;
}

.single-product .crunchify-social .crunchify-link {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f5f5f5 !important;
  border: none !important;
}

.single-product .crunchify-social .crunchify-link:hover {
  background: #e8e8e8 !important;
}

/* Related ads */
.single-product .show_related h2,
.single-product .show_related_by_user h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  padding: 16px 0 !important;
}

/* Comments — collapsible accordion, closed by default */
.single-product .comment-respond {
  padding-top: 20px !important;
}

.single-product .comment-respond > *:not(.comment-reply-title) {
  display: none;
}

.single-product .comment-respond.expanded > *:not(.comment-reply-title) {
  display: block;
}

.single-product .comment-reply-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--accent) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.single-product .comment-reply-title-clickable {
  cursor: pointer;
  user-select: none;
}

.comment-reply-toggle {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}

.comment-reply-toggle::before {
  content: '+';
}

.comment-respond.expanded .comment-reply-toggle::before {
  content: '\2212';
}

.single-product .comment-form textarea,
.single-product .comment-form input[type="text"],
.single-product .comment-form input[type="email"] {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

.single-product .comment-form .submit {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Report */
.single-product .report_ad {
  padding: 12px 0 !important;
}

.single-product .report_ad a {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

/* Warning */
.single-product .warning_ad { margin: 0 !important; }

/* Breadcrumb */
.single-product .woocommerce-breadcrumb {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  padding: 10px 0 !important;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--text-sec) !important;
}

/* Hide login form on single ad */
.single-product #customer_login {
  display: none !important;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .single-product .row.flex-md-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .single-product .col-md-8.charsoogh-content,
  .single-product .col-md-8#content,
  .single-product #content {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 1 !important;
  }
  .single-product .col-md-4#sidebar,
  .single-product #sidebar {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 2 !important;
    position: static !important;
    padding: 0 12px !important;
  }
  .single-product .highlight-main img {
    max-height: 300px !important;
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
/* Ad grid 2-column breakpoint raised from 992px to 1100px to match the
   filter sidebar's own hide breakpoint (#divarak-home-sidebar /
   #divarak-cat-sidebar, see further down this file) — otherwise, between
   992px and 1100px the sidebar had already disappeared but the grid
   stayed at 3 columns, leaving tablet-width users with no way to reach
   the ad filters at all. */
@media (max-width: 1100px) {
  .items.products, ul.row.items, ul[class*="ad-listing"] { grid-template-columns: repeat(2, 1fr) !important; }
  .items.products .item:nth-child(3n+1), ul.row.items .item:nth-child(3n+1) { border-left: 1px solid var(--border) !important; }
  .items.products .item:nth-child(2n+1), ul.row.items .item:nth-child(2n+1) { border-left: none !important; }
}

@media (max-width: 992px) {
  .main-search-form.style-1 { max-width: 100% !important; }
  .main-search-form.style-1 .form-row { flex-wrap: wrap !important; height: auto !important; }
  .main-search-form.style-1 .col-md-2, .main-search-form.style-1 #res50, .main-search-form.style-1 .col-md-3 { flex: 1 1 45% !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .item .wrapper { grid-template-columns: 1fr 120px !important; padding: 10px !important; column-gap: 10px !important; }
  .item .image { width: 120px !important; min-width: 120px !important; max-width: 120px !important; height: 120px !important; }
}

@media (max-width: 768px) {
  .items.products, ul.row.items, ul[class*="ad-listing"] { grid-template-columns: 1fr !important; }
  .items.products .item, ul.row.items .item { border-left: none !important; }
  .item .wrapper { grid-template-columns: 1fr 110px !important; padding: 10px !important; column-gap: 10px !important; }
  .item .image { width: 110px !important; min-width: 110px !important; max-width: 110px !important; height: 110px !important; }
  .hero .secondary-navigation { min-height: 36px !important; }
  .footer .social ul { justify-content: flex-start !important; margin-top: 12px !important; }
  .footer .cp-footer { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .main-search-form .heroSearchBtn { width: 100% !important; margin-top: 4px !important; height: 42px !important; border-radius: var(--radius-sm) !important; }
}

@media (max-width: 576px) {
  .hero .secondary-navigation { display: none !important; }
  .item .wrapper { grid-template-columns: 1fr 90px !important; padding: 8px !important; column-gap: 8px !important; }
  .item .image { width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; }
  .item .meta h2 { font-size: 13px !important; }
  .item .price { font-size: 12px !important; }
}

/* =============================================
   MOBILE — max 768px
   ============================================= */
@media (max-width: 768px) {
  /* Header: only search + city */
  #divarak-header {
    padding: 6px 10px !important;
    gap: 0 !important;
  }
  #divarak-header .divarak-header-inner {
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #divarak-header .divarak-logo { display: none !important; }
  #divarak-header .divarak-nav-link { display: none !important; }
  #divarak-header .divarak-user-menu { display: none !important; }
  #divarak-header .divarak-login-btn { display: none !important; }
  #divarak-header .divarak-submit-btn { display: none !important; }
  #divarak-header .divarak-cat-btn { display: none !important; }
  #divarak-header .divarak-search {
    display: flex !important;
    flex: 1 !important;
    margin: 0 !important;
    max-width: none !important;
    order: 1 !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  #divarak-header .divarak-search input {
    font-size: 14px !important;
    height: 40px !important;
  }
  /* Back button next to the search box (search results / archive pages only).
     Inherits .dmf-back's circular grey-background look (shared class with
     the old filter-bar back button) — per explicit request, only the arrow
     stays here, not the circle/background. */
  #divarak-header #divarak-search-back {
    order: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  /* Search box icon <-> clear (x) toggle */
  #divarak-header .divarak-search #divarak-search-clear {
    cursor: pointer;
    padding: 4px;
  }
  #divarak-header .divarak-city-btn {
    order: 2 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    padding: 6px 8px !important;
    min-width: auto !important;
  }
  #divarak-header .divarak-city-btn span {
    display: inline !important;
    font-size: 11px !important;
  }
  #divarak-header .divarak-city-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* ==========================================================
     MOBILE FULLSCREEN SEARCH OVERLAY
     Activated by JS adding .divarak-search-fullscreen to <body>
     when #divarak-search-input is focused. Turns the existing
     header search row into a fixed top bar and expands the
     existing #divarak-suggest-dropdown (already filled by the
     unmodified showHistory()/showSuggestions() JS) into a
     fullscreen panel underneath it. Desktop is untouched — this
     whole block only applies under the 768px breakpoint.
     ========================================================== */
  body.divarak-search-fullscreen #divarak-header {
    /* The header itself (not just its inner row) becomes the fixed,
       opaque top bar — this avoids any seam/gap between it and the
       page content that would otherwise peek through underneath. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    background: #fff !important;
  }
  /* The header's flex row (back button + search box) becomes the
     fixed top bar of the overlay — reuses the existing markup/JS
     instead of duplicating a second search box. */
  body.divarak-search-fullscreen #divarak-header .divarak-header-inner {
    padding: 8px 10px !important;
  }
  /* City button has no meaning inside the search overlay */
  body.divarak-search-fullscreen #divarak-header .divarak-city-btn {
    display: none !important;
  }
  /* Force the back button visible even on pages where it is normally
     hidden (homepage/single-ad) — it's the way to close the overlay. */
  body.divarak-search-fullscreen #divarak-header #divarak-search-back {
    display: flex !important;
  }
  /* The suggestion/history dropdown becomes the fullscreen panel that
     fills the rest of the screen below the fixed search bar. Note:
     #divarak-suggest-dropdown is a DOM descendant of .divarak-search,
     but position:fixed takes it out of flow and (since no ancestor
     has a transform/filter) its containing block for both layout AND
     z-index comparison is the viewport/root — not .divarak-search or
     #divarak-header. So it paints in the ROOT stacking context, where
     it must stay BELOW #divarak-header's z-index (10001) to not cover
     the search bar; the JS sets --divarak-header-h to the header's
     real measured height so `top` lines up exactly with no seam. */
  body.divarak-search-fullscreen #divarak-suggest-dropdown {
    display: block !important;
    position: fixed !important;
    top: var(--divarak-header-h, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9000 !important;
    background: var(--bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
  }
  /* Give history/suggestion groups a card look against the page bg */
  body.divarak-search-fullscreen #divarak-suggest-dropdown .divarak-suggest-section {
    background: var(--bg-card) !important;
    margin: 0 0 8px !important;
    border-bottom: none !important;
  }
  /* Prevent background scroll while the overlay is open */
  body.divarak-search-fullscreen {
    overflow: hidden !important;
  }

  /* Hide all sidebars on mobile */
  #divarak-home-sidebar { display: none !important; }
  #divarak-cat-sidebar { display: none !important; }
  #divarak-cat-layout { flex-direction: column !important; }
  #divarak-home-layout {
    padding: 0 !important;
  }
  #divarak-home-ads {
    width: 100% !important;
  }

  /* Ad cards: 1 column, full width */
  .items.products,
  ul.row.items,
  ul[class*="ad-listing"],
  div.row.items {
    grid-template-columns: 1fr !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .items.products .item,
  ul.row.items .item,
  ul[class*="ad-listing"] .item,
  div.row.items .item {
    border-left: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Card layout */
  .item .wrapper {
    grid-template-columns: 1fr 110px !important;
    padding: 12px !important;
    column-gap: 10px !important;
  }
  .item .image {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: 110px !important;
    border-radius: 8px !important;
  }
  .item .meta h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    -webkit-line-clamp: 2 !important;
  }
  .item .meta figure {
    font-size: 12px !important;
  }
  .item .price,
  .item .meta .price {
    font-size: 13px !important;
  }

  /* Featured carousel */
  .featured-carousel .item .wrapper {
    margin: 0 4px !important;
  }

  /* Section titles */
  .elementor-widget-heading h2,
  .elementor-heading-title {
    font-size: 15px !important;
    padding: 12px !important;
  }

  /* Footer: hide default, show sticky */
  .footer { display: none !important; }

  /* Add padding at bottom for sticky footer */
  body { padding-bottom: 60px !important; }

  /* Show mobile categories grid — only on homepage */
  body.home #divarak-mobile-cats {
    display: block !important;
  }
  /* Hide on category/search pages */
  body.archive #divarak-mobile-cats,
  body.search #divarak-mobile-cats {
    display: none !important;
  }

  /* Mobile copy of the homepage basic filter (see #divarak-mobile-home-
     filter in divarak-header.php's divarak_render_header()) — same
     display:none-by-default / shown-only-on-mobile-home pattern as
     #divarak-mobile-cats right above, since #divarak-home-sidebar (the
     desktop copy of this same form) is itself hidden on mobile a few
     rules below and mobile has no shared sidebar container to reuse. */
  body.home #divarak-mobile-home-filter {
    display: block !important;
    padding: 0 16px 16px;
  }

  /* Mobile filter bar */
  #divarak-mobile-filter-bar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  #divarak-mobile-filter-bar:empty { display: none !important; }

  .dmf-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Solid filled accent pill (matches the "دسته‌بندی/فیلتر" chip reference
     look — filled background + white text, not the previous faint
     8%-opacity tint), used for both the active category chip (.dmf-chip)
     and the filter-count button (.dmf-filter-btn) so they read as one
     consistent chip family. */
  .dmf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--divarak-btn-text, #fff);
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Same site-wide ~9-deep :not() chain on `span` (see
     project_specificity_monster_fix in memory / the .dmf-filter-btn rule
     below) beats a plain `.dmf-chip { color }` regardless of !important —
     repeating the class 12x is the proven fix. */
  .dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip.dmf-chip {
    color: var(--divarak-btn-text, #fff) !important;
  }

  .dmf-chip-remove {
    font-size: 14px;
    opacity: 0.85;
    cursor: pointer;
    color: var(--divarak-btn-text, #fff);
  }

  /* Same specificity-monster override as .dmf-chip/.dmf-filter-btn above —
     the ✕ is its own nested <span>, so it needs its own class-repeated rule
     rather than relying on inheriting .dmf-chip's color. */
  .dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove.dmf-chip-remove {
    color: var(--divarak-btn-text, #fff) !important;
  }

  .dmf-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--divarak-btn-text, #fff);
    flex-shrink: 0;
    cursor: pointer;
  }

  /* The site-wide text-color rule in divarak_header_assets() (wp_head) uses
     a ~9-deep chain of :not() on `button` — see
     project_specificity_monster_fix in memory — which beats a plain
     `.dmf-filter-btn { color }` regardless of !important. Repeating the
     class (12x, the count already proven to clear that selector's
     specificity elsewhere in this file) is what actually wins. */
  .dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn.dmf-filter-btn {
    color: var(--divarak-btn-text, #fff) !important;
  }

  /* Mobile sorting — clean minimal */
  .section-title.clearfix {
    padding: 0 12px !important;
    margin-bottom: 8px !important;
    border: none !important;
    background: transparent !important;
  }
  .section-title .woocommerce-ordering {
    width: 100% !important;
    display: block !important;
  }
  .section-title .bootstrap-select,
  .section-title .bootstrap-select.btn-group {
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .section-title .bootstrap-select > .btn,
  .section-title .bootstrap-select > .dropdown-toggle,
  .section-title .bootstrap-select .btn.dropdown-toggle,
  .section-title .bootstrap-select button {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    height: 42px !important;
    background: #f5f5f5 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-sec) !important;
  }
  .section-title .bootstrap-select > .btn:focus,
  .section-title .bootstrap-select > .btn:active,
  .section-title .bootstrap-select.open > .btn {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: #f0f0f0 !important;
  }
  .section-title .bootstrap-select .bs-searchbox {
    display: none !important;
  }
  .section-title .bootstrap-select .dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    margin-top: 4px !important;
  }
  .section-title .bootstrap-select .dropdown-menu li a {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .search_filters { display: none !important; }

  /* Mobile sticky bottom nav */
  #divarak-mobile-nav {
    display: flex !important;
  }
}

/* Mobile categories grid — hidden on desktop */
#divarak-mobile-cats {
  display: none;
  background: #fff;
  padding: 16px 12px 8px;
  border-bottom: 1px solid #e8e8e8;
}

.dmc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  text-align: center;
}

.dmc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 10px;
  transition: background 0.12s;
}

.dmc-item:active { background: #f0f0f0; }

.dmc-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.dmc-name {
  font-size: 11px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

/* Bottom sheet overlay */
.dmc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99998;
}
.dmc-overlay.open { display: block; }

/* Bottom sheet panel */
.dmc-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 99999;
  max-height: 75vh;
  overflow-y: auto;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.dmc-sheet.open { display: block; }

.dmc-sheet-handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 4px;
  margin: 10px auto 0;
}

.dmc-sheet-header {
  display: flex;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
  gap: 12px;
}

.dmc-sheet-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  flex-shrink: 0;
  border: none;
}

.dmc-sheet-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a2e;
  flex: 1;
  text-align: center;
}

.dmc-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

.dmc-list-item:active { background: #f5f5f5; }
.dmc-list-item i { color: #ccc; font-size: 14px; }

.dmc-list-item-all {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
}

.dmc-filters {
  padding: 16px 20px;
}

.dmc-filter-row {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.dmc-filter-row label {
  font-size: 13px;
  color: #888;
  min-width: 90px;
}

.dmc-filter-row input[type="number"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}

.dmc-filter-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.dmc-price-text {
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
  min-height: 16px;
  text-align: right;
  font-weight: 500;
}

/* Sticky action bar pinned to the bottom of the filter bottom-sheet
   (.dmc-sheet, which scrolls its own content via overflow-y:auto). Submit
   ("جستجو"/apply) and skip ("بدون فیلتر ادامه بده"/clear) used to render
   inline at the end of .dmc-filters' scrollable content, so on any category
   with enough filter fields to need scrolling, the user had to scroll all
   the way down to find either action — and the two stacked full-width
   (display:block) on top of each other instead of sitting side-by-side.
   position:sticky (not fixed) keeps this footer inside .dmc-sheet's own
   border-radius/scroll box instead of needing a separate z-index layer. */
.dmc-sheet-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.dmc-apply-btn {
  display: block;
  flex: 1;
  margin: 0;
  padding: 14px;
  background: var(--accent);
  color: #fff !important;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.dmc-skip-btn {
  display: block;
  flex: 1;
  margin: 0;
  padding: 12px;
  background: #f5f5f5;
  color: #555 !important;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none !important;
}

/* Mobile bottom nav — hidden on desktop.
   5 items of unequal visual weight (4 plain links + 1 larger raised "+" button)
   under justify-content:space-around produced uneven-looking gaps across
   different phone widths (edge items get half the gap of middle items, and
   the raised/oversized "+" button throws off the visual rhythm further).
   Equal-width flex items + space-between gives every gap the same width on
   any screen size, which reads as properly aligned regardless of device. */
#divarak-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  z-index: 9999;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

#divarak-mobile-nav > a {
  flex: 1 1 0;
  min-width: 0;
}

#divarak-mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none !important;
  color: #999 !important;
  font-size: 10px !important;
  font-weight: 500;
  transition: color 0.15s;
}

#divarak-mobile-nav a.active,
#divarak-mobile-nav a:hover {
  color: var(--accent) !important;
}

#divarak-mobile-nav a svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

#divarak-mobile-nav a.active svg {
  stroke: var(--accent);
}

#divarak-mobile-nav .mobile-nav-post {
  flex: 0 0 44px !important;
  background: var(--accent);
  color: #fff !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -14px;
  box-shadow: 0 2px 10px rgba(192,57,43,0.3);
}

#divarak-mobile-nav .mobile-nav-post svg {
  stroke: #fff;
  width: 24px;
  height: 24px;
}

/* =============================================
   CATEGORY / ARCHIVE PAGE
   ============================================= */

/* Sorting & Filter bar */
.section-title .woocommerce-ordering {
  display: inline-block !important;
}

.section-title .woocommerce-ordering select.orderby {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: var(--text-sec) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: border-color var(--transition) !important;
  height: auto !important;
  min-height: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  padding-left: 30px !important;
}

.section-title .woocommerce-ordering select.orderby:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* Hide original select when bootstrap-select is active */
.section-title .bootstrap-select + select.orderby,
.section-title .bootstrap-select ~ select.orderby,
.section-title .woocommerce-ordering > select.orderby,
.woocommerce-ordering > select.orderby,
select.orderby {
  display: none !important;
}

/* Bootstrap-select override for sorting */
.section-title .bootstrap-select,
.section-title .bootstrap-select .btn,
.section-title .bootstrap-select .dropdown-toggle {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  color: var(--text-sec) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  height: auto !important;
  min-height: 38px !important;
}

.section-title .bootstrap-select .btn:focus,
.section-title .bootstrap-select .btn:active,
.section-title .bootstrap-select.open .btn {
  border-color: var(--border) !important;
  box-shadow: none !important;
  outline: none !important;
}

.section-title .bootstrap-select .dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 4px 0 !important;
}

.section-title .bootstrap-select .dropdown-menu li a {
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

.section-title .bootstrap-select .dropdown-menu li a:hover,
.section-title .bootstrap-select .dropdown-menu li.selected a {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

/* Hide bootstrap-select search input in sorting dropdown */
.section-title .bootstrap-select .bs-searchbox {
  display: none !important;
}

/* Sidebar filter bootstrap-select */
#divarak-cat-sidebar .bootstrap-select,
#divarak-cat-sidebar .bootstrap-select .btn,
#divarak-cat-sidebar .bootstrap-select .dropdown-toggle {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  height: auto !important;
  width: 100% !important;
}

#divarak-cat-sidebar .bootstrap-select .btn:focus,
#divarak-cat-sidebar .bootstrap-select .btn:active,
#divarak-cat-sidebar .bootstrap-select.open .btn {
  border-color: var(--border) !important;
  box-shadow: none !important;
  outline: none !important;
}

#divarak-cat-sidebar .bootstrap-select .bs-searchbox {
  display: none !important;
}

#divarak-cat-sidebar .bootstrap-select .dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  max-height: 250px !important;
}

#divarak-cat-sidebar .bootstrap-select .dropdown-menu li a {
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

#divarak-cat-sidebar .bootstrap-select .dropdown-menu li a:hover {
  background: var(--bg-hover) !important;
}

/* Advanced search filter link */
.alternative-search-form {
  display: inline-block !important;
}

.alternative-search-form a.icon {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: var(--text-sec) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all var(--transition) !important;
}

.alternative-search-form a.icon:hover {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.alternative-search-form a.icon i {
  font-size: 11px !important;
}

/* Search filters — hidden on category (moved to sidebar) */
.search_filters {
  display: none !important;
}

/* Old city select modal — hidden everywhere */
#city-select-modal,
#city-select-modal.show,
#city-select-modal.fade,
.city-select-btn {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide login form on category/archive pages */
.archive #customer_login,
.archive .hero .woocommerce {
  display: none !important;
}

/* Hide old "آگهی پیدا نشد" message */
.archive .woocommerce-info,
.archive main.content > .woocommerce-info {
  display: none !important;
}

/* Empty state — "آگهی پیدا نشد" (e.g. featured carousel / ad listing with no matching ads) */
p.woocommerce-info,
.no-ads-empty-state {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 !important;
  padding: 48px 24px !important;
  width: 100%;
  background: var(--bg-card) !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-muted) !important;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

p.woocommerce-info::before,
.no-ads-empty-state-icon::before {
  content: "\f01c";
  font-family: 'FontAwesome' !important;
  font-size: 34px;
  color: var(--border-hover);
}

/* Filter modal */
#charsoogh_filter_show .modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Category page items — use div.row.items (not ul).
   Excludes .featured-carousel: that selector's higher specificity
   (type+2 classes) was beating the featured-carousel's own
   "display:block" owl-carousel rule earlier in this file, forcing the
   carousel container into a 3-column CSS grid. That shrank
   .owl-stage-outer (the carousel's single grid-item child) to ~1/3 of
   the real container width (measured 372px vs 1140px via computed
   styles), so only ~1.3 slides were visible with the rest clipped by
   the grid track instead of the carousel's own overflow logic —
   reported as the featured-ad carousel showing one full card and one
   tiny cut-off card in the corner. */
div.row.items:not(.featured-carousel) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  box-shadow: none !important;
}

div.row.items:not(.featured-carousel) .item {
  animation: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
}

/* Category page container — wider.
   Desktop padding is 30px (not 20px) to match the homepage's total side
   inset before its ad grid, confirmed via getBoundingClientRect at 1920px:
     - Home: #divarak-home-layout padding 20px + its child
       .elementor-widget-wrap padding 10px = 30px total inset before
       ul.row.items (measured left offset 287.5px from the centered
       1400px block).
     - Category (before this fix): section.block padding 20px (theme
       default, shared with every archive/singular page, not category-
       specific) + this .container's own 20px = 40px, but #divarak-cat-layout
       itself adds 0 more, landing ul.row.items/#divarak-cat-main at only
       20px of *this* .container's own padding relative to the centered
       block (measured left offset 277.5px) — 10px less inset than home,
       which on the 4-column col-lg-3 grid was making category cards
       ~13px wider than home's (360px vs 346.65px).
   Raising this to 30px pushes #divarak-cat-main's content to the same
   277.5+10=287.5px offset as home, equalizing card width. */
.archive .content .block .container {
  max-width: 1400px !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Mobile: this container's padding must be 2px (not the 10px previously
   tried) to match the homepage's total inset, confirmed via
   getBoundingClientRect at a 390px viewport (500px effective headless
   width):
     - Home: #divarak-home-layout mobile padding 12px (its own
       "padding: 16px 12px 0" mobile rule) + .elementor-widget-wrap's 10px
       = 22px total inset (card measured left:22, right:478, width 456).
     - Category (with the previous 10px fix): section.block's mobile
       padding is still 20px (theme default @media rule, shared/global —
       not something this project should override for one page type) +
       this .container's 10px = 30px total inset (card measured left:30,
       right:460/470, width 420-440 depending on the 10px value tested).
   Since .block's 20px is fixed and shared, this container's own padding
   must drop to 2px (20 + 2 = 22) to reach the same 22px total inset as
   home, instead of stacking on top of it. */
@media (max-width: 768px) {
  .archive .content .block .container {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* Category page title */
.archive .hero .page-title {
  background: var(--bg-card) !important;
  border-bottom: none !important;
  padding: 20px 0 !important;
  box-shadow: 0 1px 0 var(--border) !important;
}

.archive .hero .page-title h1 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

/* Category search loading */
.search-loading { display: none !important; }
.search-loading .loader-show {
  border: 3px solid var(--border) !important;
  border-top-color: var(--accent) !important;
}

/* Tablet / small desktop: hide sidebar, full-width content */
@media (max-width: 1100px) {
  #divarak-home-sidebar { display: none !important; }
  #divarak-cat-sidebar { display: none !important; }
  #divarak-home-layout { padding: 16px 12px 0 !important; }
  #divarak-home-ads { width: 100% !important; }
  #divarak-cat-layout { flex-direction: column !important; }
}

/* Category page responsive.
   Must match div.row.items:not(.featured-carousel)'s specificity above
   (type + 2 classes) — plain "div.row.items" here is lower specificity
   and was losing to that unconditional 3-column desktop rule, so category/
   search listing cards stayed in a 3-column grid at every viewport,
   including mobile, instead of collapsing to 2/1 columns. */
@media (max-width: 992px) {
  div.row.items:not(.featured-carousel) { grid-template-columns: repeat(2, 1fr) !important; }
  div.row.items:not(.featured-carousel) .item:nth-child(3n+1) { border-left: 1px solid var(--border) !important; }
  div.row.items:not(.featured-carousel) .item:nth-child(2n+1) { border-left: none !important; }
}
@media (max-width: 768px) {
  div.row.items:not(.featured-carousel) { grid-template-columns: 1fr !important; }
  div.row.items:not(.featured-carousel) .item { border-left: none !important; }
}

/* box-style-5 override (category page items) */
.box-style-5 { padding: 0 !important; }

/* =============================================
   MISC
   ============================================= */
.box-style-1 { padding: 0 !important; }
.ad-loader-show { background: var(--bg) !important; }
td, th { color: var(--text) !important; }
label { color: var(--text-sec) !important; }
p { color: var(--text-sec) !important; }
img { transition: opacity 0.2s ease !important; }

/* =============================================
   MAP PAGE — header & logo size limit
   ============================================= */
.full-map-header {
  max-height: 60px !important;
  padding: 6px 16px !important;
  align-items: center !important;
}
.full-map-header .navbar-brand {
  max-height: 48px !important;
  overflow: hidden !important;
}
.full-map-header .navbar-brand img {
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}
.full-map-header .btn-primary,
.full-map-header .btn-primary.btn-framed,
.full-map-header .nav-btn .btn,
.full-map-header .btn {
  color: var(--divarak-btn-text, #fff) !important;
}
/* Map page — all nav buttons text color (match Customizer button-text-color setting) */
.full-map-header .nav-link,
.full-map-header .navbar-nav > li > a,
.full-map-header a:not(.navbar-brand) {
  color: var(--divarak-btn-text, #fff) !important;
}
.full-map-header .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* =============================================
   SINGLE AD — Layout fixes
   ============================================= */

/* Hide visit count from table */
.single-product #sidebar .ad_visit_n,
.single-product #sidebar #ad-visit,
.single-product #sidebar dl dt:first-of-type,
.single-product #sidebar dl dd:first-of-type {
  display: none !important;
}

/* Hide city/province row from table (already shown in title bar) */
.single-product #sidebar dl dt:nth-of-type(3),
.single-product #sidebar dl dd:nth-of-type(3) {
  display: none !important;
}

/* Hide city/district separator icon in title bar */
.single-product .page-title .location i {
  display: none !important;
}

/* Comment toggle button — hide */
.divarak-comment-toggle {
  display: none !important;
}

/* Comment section — always expanded */
.single-product .comment-respond {
  max-height: none !important;
  overflow: visible !important;
}
.single-product .comment-respond::after {
  display: none !important;
}

/* Old share link box — hide */
.single-product .share-link-box,
.single-product .short-link {
  display: none !important;
}

/* Old social share — hide */
.single-product .crunchify-social {
  display: none !important;
}

/* Share dialog modal */
.divarak-share-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99998;
}
.divarak-share-overlay.open { display: block; }

.divarak-share-dialog {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 99999;
  padding: 24px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  max-width: 500px;
  margin: 0 auto;
}
.divarak-share-dialog.open { display: block; }

.divarak-share-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a2e;
  text-align: center;
  margin-bottom: 20px;
}

.divarak-share-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.divarak-share-icons a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  text-decoration: none !important;
}
.divarak-share-icons a:hover { background: #eee; transform: scale(1.08); }
.divarak-share-icons a i { font-size: 20px; color: #555 !important; }
.divarak-share-icons a.share-telegram { background: #e3f2fd; }
.divarak-share-icons a.share-telegram i { color: #0088cc !important; }
.divarak-share-icons a.share-whatsapp { background: #e8f5e9; }
.divarak-share-icons a.share-whatsapp i { color: #25d366 !important; }
.divarak-share-icons a.share-twitter { background: #e8f4fd; }
.divarak-share-icons a.share-twitter i { color: #1da1f2 !important; }

.divarak-share-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 10px 14px;
}
.divarak-share-copy input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  color: #555 !important;
  direction: ltr !important;
  outline: none !important;
}
.divarak-share-copy button {
  background: var(--accent);
  color: var(--divarak-btn-text, #fff);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.divarak-share-copy button:hover { opacity: 0.9; }
.divarak-share-copy .copied {
  background: #4caf50;
}

/* Share button — replaces old share section */
.divarak-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
  transition: all 0.15s;
}
.divarak-share-btn:hover { background: #eee; }
.divarak-share-btn i { font-size: 16px; }

/* =============================================
   Customizer button_style compatibility
   Ensure theme's round/square setting can override our border-radius values.
   Theme sets .btn { border-radius: 60px !important } when round is active.
   We must not block it with higher-specificity !important rules.
   ============================================= */
/* Let theme's round/square control these buttons */

/* =============================================
   SINGLE-AD PAGE — MOBILE (Parts 3, 4, 5)
   ============================================= */

/* Part 4 (revised): fixed top bar — back button + favorite/share actions, stuck to
   the very top of the screen, replacing the old absolutely-positioned back button
   that floated over the gallery. */
#divarak-single-top-bar {
  display: none;
}

@media (max-width: 768px) {
  #divarak-single-top-bar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  }

  #divarak-single-back-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  #divarak-single-back-btn svg { width: 18px; height: 18px; }

  #divarak-single-top-bar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* All 4 top-bar action buttons (back, report, share, favorite) share one
     consistent visual language: 34x34 circular icon buttons, same neutral
     background/border, icon-only (no text labels — no room for them at
     narrow widths with 4 buttons in a row). Each button's own markup/icon
     is reused as-is (moved via JS, not recreated), only appearance is
     unified here. */
  #divarak-single-top-bar-actions .divarak-share-btn,
  #divarak-single-top-bar-actions .divarak-top-bar-report-btn,
  #divarak-single-top-bar-actions .btn-framed,
  #divarak-single-top-bar-actions .btn-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-sec) !important;
    font-size: 0 !important;
  }

  #divarak-single-top-bar-actions .divarak-share-btn:hover,
  #divarak-single-top-bar-actions .divarak-top-bar-report-btn:hover,
  #divarak-single-top-bar-actions .btn-framed:hover,
  #divarak-single-top-bar-actions .btn-icon:hover {
    background: var(--bg-hover) !important;
  }

  #divarak-single-top-bar-actions .divarak-share-btn i,
  #divarak-single-top-bar-actions .divarak-top-bar-report-btn i,
  #divarak-single-top-bar-actions .btn-framed i,
  #divarak-single-top-bar-actions .btn-icon i {
    margin: 0 !important;
    font-size: 15px !important;
    color: inherit !important;
  }

  /* Leave room at the top of the page so the fixed bar doesn't cover the gallery */
  body.single-product {
    padding-top: 54px !important;
  }
}

/* Header (search box + city selector), mobile only: show on the home/ad-
   listing page (body.home — WordPress's standard class for the designated
   front page), the search results page (body.search), AND category archive
   pages (body.archive) so the visitor can see what they searched for
   (search box shows the current query, see divarak_render_header()), can
   search again / change city, and — on a category archive — still has the
   site's own search box available while browsing filtered results (e.g.
   /product-category/املاک/?min_price_show=...). Hidden only on pages
   outside this "browsing ads" set (single-ad page, blog, my-account, etc.)
   since the visitor there isn't at a listing entry point. Desktop is
   untouched at every page (rule is inside the max-width:768px query only).
   #divarak-header is a normal in-flow, position:sticky element rendered
   before #divarak-mobile-filter-bar in the DOM (see divarak_render_header()
   in divarak-header.php), so showing it here naturally stacks it above the
   filter bar with no extra offset needed — confirmed already working this
   way for body.search. */
@media (max-width: 768px) {
  body:not(.home):not(.search):not(.archive) #divarak-header {
    display: none !important;
  }
}

/* Part 3: mobile bottom bar — replaces the sitewide nav on the single-ad page only */
#divarak-single-product-mobile-bar {
  display: none;
}

@media (max-width: 768px) {
  body.single-product #divarak-mobile-nav {
    display: none !important;
  }

  #divarak-single-product-mobile-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
  }

  #divarak-single-product-mobile-bar button {
    flex: 1 !important;
    background: var(--accent) !important;
    color: var(--divarak-btn-text, #fff) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
  }

  /* Leave room at the bottom of the page so the fixed bar doesn't cover content */
  body.single-product {
    padding-bottom: 70px !important;
  }
}

/* Part 5: mobile section reorder —
   1. Gallery  2. Title/city header  3. Specs table  4. Description  5. Comments

   The specs table (contact buttons/panel + دسته‌بندی/وضعیت/مبلغ <dl> + share/
   report row) lives in a separate sidebar column in the markup. CSS "order"
   alone can't interleave it with the content column's own children (gallery /
   description / comments), because they're two different flex items in two
   different parents — order only reorders whole flex items, not descendants
   across parents. So divarak_single_product_contact_panel() (divarak-header
   plugin) physically moves the sidebar's ".box" wrapper into the content
   column, right after the gallery, on mobile. The rules below then order the
   content column's children (gallery / specs box / description / comments)
   and order the specs box's own children (contact buttons → specs <dl> →
   share/report row). */
@media (max-width: 768px) {
  .single-product .row.flex-md-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Title/city header block (moved here by divarak_single_product_title) */
  .single-product header.hero .page-title {
    order: 2 !important;
  }

  .single-product .charsoogh-content {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Gallery section (plain <section>, no .box class) — first */
  .single-product .charsoogh-content > section:not(.box) {
    order: 1 !important;
  }

  /* Specs box, moved here from the sidebar column by JS — third */
  .single-product .charsoogh-content > .box.contact-specs-box {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Description box (rendered right after the gallery when "Ad description
     position" = Under Image Slider) — 2nd <section> tag — fourth */
  .single-product .charsoogh-content > section.box:nth-of-type(2) {
    order: 4 !important;
  }

  /* Comment/"Leave a comment" accordion box — always last — 3rd <section> tag */
  .single-product .charsoogh-content > section.box:nth-of-type(3) {
    order: 5 !important;
  }

  /* Ordering within the moved specs box: contact buttons/panel, then the
     دسته‌بندی/وضعیت/مبلغ table, then the share/report row.

     The inline .contact-box button row (اطلاعات تماس / چت) is hidden on
     mobile — Part 3's fixed bottom bar already provides identical buttons
     that open this exact .contact-info-panel (see mobileContactBtn's
     openPanel() call in divarak_single_product_contact_panel()), so keeping
     both visible produced two redundant full-width "اطلاعات تماس" buttons
     stacked in the specs card. The panel itself stays in the DOM/flow so the
     bottom bar can still reveal it in place and scroll it into view. */
  .single-product .contact-specs-box .contact-box {
    display: none !important;
  }
  .single-product .contact-specs-box .contact-info-panel {
    order: 1 !important;
  }
  .single-product .contact-specs-box dl {
    order: 2 !important;
  }
  .single-product .contact-specs-box .warning_ad,
  .single-product .contact-specs-box .report_ad {
    order: 3 !important;
  }
  /* Share + favorite/bookmark buttons are moved (via JS) into the fixed top bar
     (#divarak-single-top-bar-actions, styled above) instead of living here. */

  .single-product .crunchify-social {
    display: none !important;
  }
}

/* =============================================
   AUTH FORMS — mobile full-screen
   ============================================= */
@media (max-width: 768px) {
  /* Strip the ancestor chain's padding/max-width (site's generic .block/.container/
     Bootstrap grid gutters) so the card can reach the true screen edges */
  body.woocommerce-account section.block,
  body.woocommerce-account .container,
  body.woocommerce-account .container .row,
  body.woocommerce-account .col-md-12 {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .woocommerce-account .u-columns.row#customer_login {
    padding: 0 !important;
  }

  .woocommerce-account .col-register-modal,
  .woocommerce-account .woocommerce-form-login,
  .woocommerce-account .woocommerce-form-register {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    min-height: calc(100vh - 70px) !important;
  }
}

/* =============================================
   USER CHAT — "please log in" state (divarak-fullscreen-chat, /user-chat/)
   Scoped to this page only: firebase_chat plugin's own .login-user CSS
   (assets/css/user-chats.css) is generic and could theoretically be reused
   elsewhere, so we key everything off the page ID body class rather than
   overriding the bare .login-user selector site-wide.
   ============================================= */
body.divarak-fullscreen-chat .login-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 400px;
  margin: 48px auto;
  padding: 48px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

body.divarak-fullscreen-chat .login-user > i {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  margin: 0 0 24px;
  padding: 0;
}

body.divarak-fullscreen-chat .login-user h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

body.divarak-fullscreen-chat .login-user p {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sec);
}

body.divarak-fullscreen-chat .login-user .login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 36px;
  background: var(--accent);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition);
}

/* Button text color, kept as its own rule with extra specificity — same
   reason and same 10x-class-repeat technique as the .charsoogh_register
   fix above: the sitewide "article :not(.fa):not(...)×8" rule in
   divarak-header.php (~9 classes of specificity) otherwise beats this
   selector's plain 3-class specificity even with !important (an
   !important tie is broken by specificity, not source order alone).
   Follows the customizer's "رنگ متن دکمه‌ها" setting; the icon
   (.login > i below) inherits this via `color: inherit`. */
body.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat.divarak-fullscreen-chat .login-user .login {
  color: var(--divarak-btn-text, #fff) !important;
}

body.divarak-fullscreen-chat .login-user .login:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

body.divarak-fullscreen-chat .login-user .login:active {
  transform: translateY(0);
  box-shadow: none;
}

body.divarak-fullscreen-chat .login-user .login > i {
  font-size: 16px;
  margin: 0;
}

@media (max-width: 768px) {
  body.divarak-fullscreen-chat .login-user {
    margin: 24px 16px;
    padding: 36px 20px;
    max-width: none;
  }
}

/* =============================================
   USER CHAT — logged-in chat interface, full-screen
   (divarak-fullscreen-chat, /user-chat/). The firebase_chat plugin's shortcode
   ([user_chats], output by display_user_chats_and_messages()) renders
   its own self-contained "app" markup (.chat-container > .chat-list +
   .chat-messages) that is already width:100% internally — what was
   constraining it to a small boxed card in the middle of the page was
   entirely the surrounding theme chrome:
     - page.php wraps the shortcode output in the generic
       section.block > .container > .row > .col-md-12 chain (same
       nested-container pattern as the /my-account/ full-screen fix),
       where section.block alone contributes 5rem top+bottom padding.
     - header.php additionally prints a .page-title "hero" banner
       (post title + background image) above the content for any
       is_singular() page — purely decorative chrome that has nothing
       to do with the chat UI itself.
   Both are stripped here so .chat-container can occupy the true
   available viewport, edge-to-edge. Everything is scoped to
   body.divarak-fullscreen-chat specifically (this page's unique WordPress body
   class) so none of it leaks onto other pages that share the same
   generic .container/section.block classes (home, /my-account/, single
   product, etc.) — matching the same scoping convention already used
   for the logged-out .login-user card above.
   Desktop is included (not just mobile): a real user-chat/messaging
   surface reads as broken/cramped as a small boxed card on desktop
   too (confirmed via screenshot — chat-container sits in a slim
   center column with large dead whitespace left/right and the
   marketing footer still visible below the fold), so this is not a
   mobile-only treatment like some other pages today.
   ============================================= */
body.divarak-fullscreen-chat .hero .page-title {
  display: none !important;
}

body.divarak-fullscreen-chat main.content,
body.divarak-fullscreen-chat main.content section.block,
body.divarak-fullscreen-chat main.content .container,
body.divarak-fullscreen-chat main.content .container .row,
body.divarak-fullscreen-chat main.content .col-md-12,
body.divarak-fullscreen-chat main.content article.page-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* body's direct children include #wpadminbar (fixed, out of flow —
   doesn't consume flex space) and #divarak-header (the real sticky
   site nav bar, 57px, injected as its own sibling before div.page
   .home-page — NOT header.hero inside .page.home-page, which reports
   0 height itself) alongside div.page.home-page (which wraps
   header.hero + main.content). Making body itself the full-height
   flex column — rather than .page.home-page — means #divarak-header's
   in-flow space is naturally reserved first (as any other flex
   sibling would), and div.page.home-page + main.content just need
   flex:1 to consume whatever's left. No guessed pixel values; self-
   corrects if any of these elements' heights ever change.

   height (not just min-height) + overflow:hidden: this used to be
   min-height:100vh only here, with a fixed height:100vh/overflow:hidden
   pair added separately but ONLY inside the max-width:768px mobile
   block below, under the wrong assumption that letting the whole page
   grow/scroll past the viewport was harmless on desktop. It isn't —
   every element in the .chat-box/.chats flex:1 chain is sized as a
   FRACTION of body's own height, not an absolute limit, so with only a
   minimum and no maximum, body was free to grow taller than the
   viewport on wide desktop too whenever a conversation list/message
   thread had enough rows (confirmed live with a 10-conversation list:
   body measured 1367px against a 1080px viewport, and the mouse wheel
   scrolled the whole page/header off-screen instead of just .chats).
   Pinning body to exactly 100vh and clipping overflow here (now
   unconditional, not mobile-only) forces every flex:1 descendant to
   actually stop at the real viewport edge, leaving .chats and .chat-box
   (both overflow-y:auto) as the only elements that can still scroll —
   independently of each other, on any viewport size. */
body.divarak-fullscreen-chat {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

body.divarak-fullscreen-chat .page.home-page {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

body.divarak-fullscreen-chat main.content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

body.divarak-fullscreen-chat main.content section.block,
body.divarak-fullscreen-chat main.content .container,
body.divarak-fullscreen-chat main.content .container .row,
body.divarak-fullscreen-chat main.content .col-md-12,
body.divarak-fullscreen-chat main.content article.page-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* The firebase_chat shortcode markup includes a full (invalid, but
   browser-tolerated) nested <head>/<title>/<script> before the real
   .chat-container content — none of that renders visibly, so no CSS
   is needed for it, but article.page-content must allow its one real
   child (.chat-container) to stretch to fill it. */
body.divarak-fullscreen-chat .chat-container {
  flex: 1;
  min-height: 0;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* Hide the marketing site footer on this page — a full-screen chat
   "app" surface shouldn't have the site footer (address/social/app
   download links) competing for space below the fold. */
body.divarak-fullscreen-chat footer.footer {
  display: none !important;
}

/* .chats (conversation list, inside .chat-list) and .chat-box (message
   thread, inside .chat-messages) both come from the plugin's own CSS
   with fixed vh-based heights (e.g. 65vh) sized for the old boxed-card
   layout — now that their ancestors are true flex containers filling
   the real available height, let them flex-fill their parent instead
   of using their own separate vh math, so they stay correct regardless
   of viewport size or header height changes.
   .chat-list is deliberately NOT included in this !important rule: the
   plugin's own JS (main.js, setInitialView()) toggles it between
   style.display='none'/'block' via inline style depending on whether a
   conversation is open on mobile (isChatOpen) — an inline style can never
   lose to an !important stylesheet rule's `display`, so an earlier version
   of this rule that included .chat-list (with display:flex !important)
   silently defeated that JS and left the conversation list visibly
   overlapping the open conversation underneath it.
   BUT: because .chat-list is deliberately left as `display:block` (the
   plugin's own inline value when the list is showing, not flex), the
   flex-direction/flex/min-height properties the earlier version of this
   fix also put on .chat-list did NOTHING — those only have an effect
   inside a flex formatting context, which a block-display element isn't.
   Confirmed live: with only the old rule applied, .chat-container stayed
   a correct 611px (viewport height) but .chat-list AND its child .chats
   (the actual scrollable conversation list, which still carries the
   plugin's own `height: 65vh` from user-chats.css) both measured ~1546px
   — .chats' fixed-vh height was never constrained, so it overflowed
   .chat-list, which (being a plain block box with height:auto, not a
   flex item) just grew to match rather than clipping/scrolling it. This
   is the root cause of a real-device screenshot showing the conversation
   list rendered as one giant unscrollable column instead of a fixed-
   height scrollable pane. Fixed below by turning .chat-list into the
   same kind of flex column .chat-messages already is — but ONLY while
   it's actually showing. The plugin only ever sets this element's
   inline style.display to 'none' or 'block' (never 'flex'), so the
   `:not([style*="display: none"])` guard below means this !important
   flex rule simply doesn't match (and does nothing) on the 'none' half
   of that toggle, letting the plugin's own display:none continue to
   fully hide the list while a conversation is open — only on the
   'block' (visible) half does this override kick in to size it
   correctly, matching the exact fix applied to .chat-messages above. */
/* Same :not([style*="display: none"]) guard as .chat-list below, for the
   same reason: discovered via testing the "back to conversation list"
   button (.back-to-chats) specifically — main.js's backToChats() sets
   isChatOpen=false and calls setInitialView(), which correctly sets this
   element's OWN inline style.display back to 'none' (confirmed: it was
   'none' from the very first frame after the click, polled over 2.7s) —
   but because this rule applied display:flex !important unconditionally,
   the stylesheet still overrode that inline 'none' and kept
   .chat-messages visibly flex/showing, overlapping .chat-list underneath
   it (screenshot: both the conversation list AND the old chat's empty
   input bar rendered on top of each other). This had gone unnoticed
   because .chat-messages is normally flex anyway right after opening any
   conversation (isChatOpen starts true on first load in most flows), so
   only the specific "open a chat, then click back" sequence exposed it. */
/* height:100% removed: on this element it resolves unreliably against an
   ancestor chain whose own height comes from flex sizing rather than a
   fixed value (confirmed live: .chat-messages measured only ~353px of a
   1023px-tall .chat-container, pinning .send-message-container right
   under the last message instead of the container's true bottom edge).
   .chat-container is a flex ROW with the default align-items:stretch,
   which already cross-axis-stretches .chat-messages to the container's
   full height on its own, exactly as it already correctly does for
   .chat-list (which never had an explicit height:100% either — see that
   rule's own comment above for the same fix applied there). */
body.divarak-fullscreen-chat .chat-messages:not([style*="display: none"]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* flex:1 here (same share as .chat-messages, which also carries flex:1)
   made the two panes split 50/50 on desktop — overriding the plugin's
   own intended .chat-list{width:30%}/.chat-messages{width:70%} ratio
   (user-chats.css) entirely, since flex-basis/grow always wins over a
   plain `width` once both panes are flex items. Reported live: the
   conversation list measured ~717px of a 1440px desktop viewport
   (half), when it should stay the narrower ~30% pane while the message
   area takes the remaining ~70%. */
body.divarak-fullscreen-chat .chat-list:not([style*="display: none"]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* The 30%-cap fix must be desktop-only. A first attempt put
   `flex: 0 1 30% !important` directly on the base (non-media-querried)
   .chat-list rule above, reasoning that mobile never shows both panes
   side-by-side so it "shouldn't matter" — wrong: in a flex item,
   `flex-basis` (the 30% here) takes priority over a plain CSS `width`
   whenever both are set, and the plugin's own mobile query
   (user-chats.css, max-width:768px) sizes the single visible pane via
   `width:100%`, not flex-basis. Reported live via measurement: the list
   pane on a 375px mobile viewport was only 213.75px (~57%), not the
   full 375px it needs when it's the only visible pane. Scoping the 30%
   cap to desktop-only here, and leaving flex-grow at the unconstrained
   default 1 (full-width) below 769px, fixes both without re-breaking
   the other.

   Also dropped the explicit `height: 100% !important` that used to sit
   on the base rule above: combined with `flex: 0 1 30%` (flex-grow:0)
   here, it made .chat-list stop stretching to the container's full
   height altogether (reported live via screenshot: just a short strip
   at the top with blank white space below, measured h:268px of an
   843px-tall .chat-container). .chat-container is a flex ROW with the
   default align-items:stretch, which already cross-axis-stretches each
   flex item (.chat-list, .chat-messages) to the container's full height
   on its own — the explicit height:100% was redundant on top of that
   stretch and, once flex-grow dropped to 0 here, started fighting it
   instead of reinforcing it. Removing it lets plain flex stretch do the
   job, exactly as it already correctly does for .chat-messages (which
   never had an explicit height:100% of its own either). */
@media (min-width: 769px) {
  body.divarak-fullscreen-chat .chat-list:not([style*="display: none"]) {
    flex: 0 1 30% !important;
  }
}

body.divarak-fullscreen-chat .chats,
body.divarak-fullscreen-chat .chat-box {
  height: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Empty-state messages ("چتی وجود ندارد" / "برای شروع چت پیامی
   بنویسید" / "پیامی یافت نشد") — the plugin's own .no-message class
   (user-chats.css) only had align-self:center + margin:auto, which
   centers it on the CROSS axis of its flex-column parent (.chats/
   .chat-box, both flex-direction:column) — i.e. horizontally — but does
   nothing on the main axis, so it stayed pinned near the top instead of
   true vertical centering. Restyled .no-message itself into the same
   kind of simple rounded empty-state card already used elsewhere on the
   site (e.g. the ad-grid "no ads" card, --bg-card/--radius-lg tokens) —
   solid background, no dashed border (per explicit prior feedback that
   dashed borders aren't wanted on this project's empty-state cards),
   centered icon + text.
   The :has(.no-message) guard below is critical: centering .chats/
   .chat-box with align-items/justify-content:center is only correct
   when the ONLY child is this one empty-state message. An earlier
   version of this rule applied unconditionally and broke the real,
   populated chat/conversation list on desktop (reported live: a real
   list with many .chat-item rows got vertically AND horizontally
   centered/collapsed instead of stacking full-width top-to-bottom like
   a normal list) — :has() scopes the centering to the genuinely-empty
   case only, leaving a populated list's normal flex-column stacking
   completely untouched. */
body.divarak-fullscreen-chat .chats:has(> .no-message:only-child),
body.divarak-fullscreen-chat .chat-box:has(> .no-message:only-child) {
  align-items: center;
  justify-content: center;
}

body.divarak-fullscreen-chat .no-message {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 24px !important;
  padding: 32px 24px !important;
  background: var(--bg-input, #f5f6f8);
  border-radius: var(--radius-lg, 16px);
  color: var(--text-muted, #888) !important;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 280px;
}

body.divarak-fullscreen-chat .no-message::before {
  content: "\f075";
  font-family: 'FontAwesome' !important;
  font-size: 30px;
  color: var(--border-hover, #ccc);
}

/* Send button (the circular green paper-plane icon, .submit-button.active
   once the message input has text — user-chats.css) and the voice-record
   "نگه دارید" hold-to-record warning tooltip (showRecordingWarning(),
   user-chats.js) both had their text/icon color hardcoded to plain
   #ffffff, independent of the Customizer's "رنگ متن دکمه‌ها" setting —
   unlike every other themed button on the site. Rebind both to the same
   --divarak-btn-text var. The tooltip is a plain inline-styled <div>
   injected by JS (not a stylesheet rule), so its `color:white` inline
   style needs !important here to be overridden from a stylesheet. */
/* Plain !important wasn't enough here — this element loses to this
   project's well-known sitewide text-color reset (divarak_header_assets(),
   a chained-:not() selector with ~9 classes of specificity). Repeating
   the class 12x is this project's established fix for that (same
   technique already used for .submit_new_ad/.publish_ad/.upgrade_ads). */
body.divarak-fullscreen-chat .send-message-form .submit-button.active.active.active.active.active.active.active.active.active.active.active.active {
  color: var(--divarak-btn-text, #fff) !important;
}

body.divarak-fullscreen-chat .send-message-container div[style*="background: #444"] {
  color: var(--divarak-btn-text, #fff) !important;
}

/* The plugin's own CSS also gives .send-message-container (the message
   input bar, shown via inline style.display="flex" once a conversation
   is opened) flex:1 — inside the same .chat-messages flex column as
   .chat-box above, that makes the input bar compete equally with the
   message list for the column's free space, so .chat-box only ever
   renders ~half the real available height (confirmed via DevTools:
   #chat-box measured ~453px tall against a much taller viewport) while
   the input bar balloons to match, on both desktop and the mobile
   layout the site's bottom nav already reserves 56px for above. Pin
   the input bar to its own content height so .chat-box (flex:1) is the
   only one that stretches to fill the remaining space. */
body.divarak-fullscreen-chat .send-message-container {
  flex: none !important;
}

/* =============================================
   MY ACCOUNT SUBPAGES — mobile-only back header
   (Favorites/user-bookmark, My Payments/orders, Edit Account)

   On mobile these three subpages rendered the full
   .woocommerce-MyAccount-navigation list stacked above the tab content,
   plus the native theme's decorative chevron (charsoogh.css
   ul li.is-active a:after, FontAwesome \f104) next to the active item —
   together this reads like a half-broken accordion/back-button rather
   than a clean subpage header. Below 768px, for just these three
   endpoints (server-flagged via body.divarak-myaccount-subpage —
   see charsoogh_myaccount_back_header_body_class() in
   includes/woocommerce.php), the nav is fully hidden and replaced with
   a single real <a href="/my-account/"> back link (also server-printed,
   charsoogh_myaccount_back_header_markup(), so no JS/history.back() is
   needed). Desktop and the main /my-account/ dashboard are untouched:
   the link markup prints on every My Account subpage but stays
   display:none outside this media query and outside the flagged body
   class. */
.divarak-myaccount-back {
  display: none;
}

@media (max-width: 768px) {
  body.divarak-myaccount-subpage .woocommerce-MyAccount-navigation {
    display: none !important;
  }

  /* #sidebar (charsoogh.css: .woocommerce #sidebar{display:inline-block})
     wraps the nav above. Hiding just the <nav> leaves this inline-block
     wrapper's own zero-content box in the inline formatting context it
     shares with #content next to it — visible as a ~47px blank strip
     above the back header (confirmed via getBoundingClientRect: #content
     top=47 while every block ancestor above it reports top=0, and
     #sidebar itself measures height=0 — the gap is the inline-block
     wrapper's line box, not padding/margin/border, all of which are 0).
     Collapsing the wrapper itself to display:none removes that strip;
     #sidebar has no other purpose once its one child (.woocommerce-
     MyAccount-navigation) is hidden. */
  body.divarak-myaccount-subpage #sidebar {
    display: none !important;
  }

  body.divarak-myaccount-subpage .divarak-myaccount-back {
    display: flex !important;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    margin: 0 0 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
  }

  body.divarak-myaccount-subpage .divarak-myaccount-back i {
    font-size: 20px;
    color: var(--text);
  }
}

/* =============================================
   MY ACCOUNT ROOT DASHBOARD — mobile-only title header
   (/my-account/ itself — "My Ads" tab, nav + content stacked on mobile)

   Same request as the 3-subpage back header above, but for the account
   root: a title bar reading the sitewide "دیوارک من" label (theme_mod
   charsoogh_user_menu_text — the same string already shown next to the
   user icon in the site's bottom nav, #divarak-mobile-nav, and in the
   divarak-header.php user dropdown button; read live via get_theme_mod()
   server-side in charsoogh_myaccount_dashboard_header_markup() so a
   Customizer edit to that field updates every occurrence, this one
   included, not just a hardcoded copy). No back button/link here — this
   already is the account root, so "back" has no destination — just the
   title, matching this project's other title-only mobile headers (e.g.
   the single-product page header text). Scoped via
   body.divarak-myaccount-dashboard-root (server-flagged, see
   charsoogh_myaccount_dashboard_header_body_class() in
   includes/woocommerce.php) so it can never appear together with the
   back-only header above — the two body classes are mutually exclusive
   by construction (one PHP helper explicitly excludes every endpoint the
   other one is built from). Desktop untouched, same pattern as above:
   display:none outside this media query. */
.divarak-myaccount-title-header {
  display: none;
}

@media (max-width: 768px) {
  body.divarak-myaccount-dashboard-root .divarak-myaccount-title-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    margin: 0 0 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
  }

  body.divarak-myaccount-dashboard-root .divarak-myaccount-title-header span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
  }
}

@media (max-width: 768px) {
  /* Keep the sitewide bottom nav visible on this page (user explicitly asked
     for it back — the earlier assumption that this page always has its own
     competing bottom bar didn't hold for the empty/no-conversation-open
     state, which just showed dead blank space with no way to navigate away).
     Reserve room for it so .chat-container doesn't render underneath it. */
  body.divarak-fullscreen-chat {
    padding-bottom: 56px !important;
  }

  /* height:100vh + overflow:hidden for body.divarak-fullscreen-chat itself
     is no longer set here — it's unconditional now (see the base,
     non-media-query rule above), since the same "whole page scrolls
     instead of just .chats/.chat-box" bug turned out to affect desktop
     too, not just mobile. See that rule's own comment for the full
     history. */

  /* /my-account/ (My Ads dashboard and every other WooCommerce account tab)
     had no bottom padding at all, so the fixed 56px sitewide bottom nav
     (#divarak-mobile-nav, position:fixed; bottom:0) sat directly on top of
     the page's last content — confirmed via screenshot: the "search-my-ads"
     form's submit button was rendered fully underneath the nav bar, hidden.
     Same fix as the chat page above: reserve the nav's height. */
  body.woocommerce-account {
    padding-bottom: 56px !important;
  }

  /* User requested: on mobile, the message input bar should be pinned to
     the bottom of the screen and the conversation header pinned to the
     top, with ONLY the message list (.chat-box) itself scrollable — not
     the whole page. The desktop flex chain above (body > .page.home-page >
     main.content > ... > .chat-container > .chat-messages > .chat-box)
     already achieves exactly that, EXCEPT the plugin's own mobile media
     query (user-chats.css, @media max-width:768px) overrides it with
     fixed vh-based heights sized for the old boxed-card layout:
     .chat-container{height:80vh} and .chat-box{height:calc(70vh - 200px)}.
     Those fixed values don't know about this page's real header height or
     this fix's own 56px bottom-nav padding, so their sum routinely exceeds
     the real viewport and the whole page scrolls instead of just the
     message list — confirmed via screenshot (had to scroll down past the
     message thread just to reach the input). Re-assert the same flex
     sizing used on desktop so .chat-box is the only flexible/scrollable
     element again. */
  body.divarak-fullscreen-chat .chat-container {
    height: 100% !important;
  }

  body.divarak-fullscreen-chat .chat-box {
    height: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* .user-post-details (conversation header: back button, contact name,
     block button) and .post-details (the related-ad preview button right
     below it) must stay pinned at the top, not shrink or get pushed
     off-screen as .chat-box's content grows — same reasoning as
     .send-message-container's flex:none fix above, just also needed here
     since the plugin's mobile query doesn't un-set these from the default
     flex-shrink:1 like the desktop-only fix further up this file assumed
     wasn't necessary. */
  body.divarak-fullscreen-chat .user-post-details,
  body.divarak-fullscreen-chat .post-details {
    flex: none !important;
  }

  /* Conversation list (.chats, inside .chat-list on the left/right pane —
     shown instead of .chat-messages on mobile until a conversation is
     opened) has the same fixed-height problem via its own hardcoded
     height:65vh (not inside the plugin's mobile media query, so it applies
     at every width) — fix it the same way for consistency, even though it
     wasn't the specific element in the bug report. */
  body.divarak-fullscreen-chat .chats {
    height: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* WordPress admin bar (#wpadminbar, shown when a logged-in admin/editor
   browses the front-end) — hide on mobile only, keep on desktop. WordPress
   core sets `margin-top` on <html> to make room for this bar; hiding just
   the bar without resetting that margin leaves a blank gap at the top, so
   both are reset together here. */
@media (max-width: 782px) {
  #wpadminbar {
    display: none !important;
  }
  html {
    margin-top: 0 !important;
  }
  html.wp-toolbar {
    padding-top: 0 !important;
  }
}

/* =============================================
   NEW AD SUBMIT — mobile full-screen (divarak-fullscreen-newad, /newad-2/)

   The [add_new_ad] shortcode (includes/shortcode/add-new-ad.php)
   renders its own self-contained multi-step form
   (section.block.adv-shortcode-submit-box > .container.responsive-padding
   > .stepwizard + form#ad_submit > .row.setup-content#step-1..4) — same
   pattern as the /user-chat/ fix above: page.php wraps it in the
   generic section.block > .container > .row > .col-md-12 > article.page-
   content chain, and on mobile that chain visibly shrinks it into a
   small centered card:
     - main.content > section.block: padding 16px 20px
     - .container.responsive-padding: max-width 98% + auto side margins
       (the theme's own "responsive-padding" helper)
     - .col-md-12: padding 0 15px
     - .stepwizard (Bootstrap .col-md-offset-3): margin-left 45px,
       max-width 560px — a desktop-only centering offset that has no
       business applying on a 390px viewport
   Confirmed via headless Chrome/CDP at 390px: .container.responsive-
   padding measured ~304px wide with ~42px of left offset out of a
   390px viewport. Stripped here, mobile-only, scoped to body.page-
   id-5007 so nothing leaks onto other pages sharing these generic
   .container/section.block classes. Desktop (>768px) is completely
   untouched — this page has no decorative .hero/.page-title worth
   hiding (it measures 0 height already), unlike the chat page. */
@media (max-width: 768px) {
  body.divarak-fullscreen-newad main.content,
  body.divarak-fullscreen-newad main.content section.block,
  body.divarak-fullscreen-newad main.content .container,
  body.divarak-fullscreen-newad main.content .container.responsive-padding,
  body.divarak-fullscreen-newad main.content .row,
  body.divarak-fullscreen-newad main.content .col-md-12,
  body.divarak-fullscreen-newad main.content article.page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* The active step's caption (.stepwizard-step p, set absolute by the
     "Step wizard progress bar redesign" rules above) is positioned
     top:18px relative to its 6px-tall step pill, landing ~35-54px below
     the stepwizard's own top edge. Being out of flow, it doesn't grow
     .stepwizard's own height, and .stepwizard's margin is zeroed on
     this mobile fullscreen page (no margin-bottom: 4.5rem like
     desktop), so the caption was overlapping the "لطفا دسته آگهی خود را
     انتخاب کنید" <h3> that follows immediately after (#ad_submit
     .row.setup-content h3). Reserve that space via padding-bottom on
     .stepwizard itself (margin stays 0 as set below) so its own box
     grows enough to push the h3 down and clear the label. */
  body.divarak-fullscreen-newad .stepwizard {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 16px 20px 40px !important;
  }

  body.divarak-fullscreen-newad #ad_submit,
  body.divarak-fullscreen-newad .row.setup-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.divarak-fullscreen-newad #ad_submit > .row.setup-content {
    padding: 0 20px !important;
  }
}

/* =============================================
   HOMEPAGE SIDEBAR — recursive category drill-down (.dsc-*)

   Replaces the old flat "دسته‌بندی‌ها" list in #divarak-home-sidebar
   (divarak-header.php: divarak_homepage_layout() /
   divarak_render_category_drilldown()). Clicking a category name with
   children swaps the panel in place (no navigation, no page reload) to
   show that category's direct children, recursively to whatever depth
   the actual product_cat tree has (max 3 levels in this DB, e.g.
   املاک > فروش مسکونی > آپارتمان). Only two things ever navigate:
   the "همه آگهی‌ها" row at top (when not drilled down) and the
   "نمایش همهٔ آگهی‌های ..." link at the bottom of each panel.

   All panels are rendered server-side in one pass (PHP, no AJAX — the
   category count here is small, ~90 terms total) and toggled with
   plain display:none/block by divarakInitCategoryDrilldown() in
   divarak-header.php. This is desktop-only: #divarak-home-sidebar is
   already hidden below 1100px elsewhere in this file, and mobile uses
   the separate dmc-*/divarak-cat-dropdown menus, not this widget.

   Palette: kept the site's existing light theme (--bg-card, --text,
   --text-sec, --border, --accent) rather than the dark reference
   screenshot — this matches every other sidebar/card on the site, and
   --accent already renders as the site's real accent color (mapped to
   --charsoogh-main, green on this install) via the Customizer, so a
   hardcoded dark palette would look inconsistent with the rest of the
   theme. Active/selected state is a subtle tint + right accent bar
   instead of a full dark panel. */
.dsc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Hide the "همه آگهی‌ها" / "دسته‌بندی‌ها" header only at the top level
   (before any drill-down). Once a category is clicked, .dsc-root gets
   the .dsc-drilled class (see divarakInitCategoryDrilldown in
   divarak-header.php) and the header reappears — showing the selected
   category's name + acting as the back-to-top link, per its existing
   dual role. .dsc-header is a SIBLING of .dsc-root (both children of
   .divarak-sidebar-section), not an ancestor/descendant of it — verified
   live via DOM inspection — hence the sibling combinator here instead of
   a descendant selector. */
.divarak-sidebar-section:has(.dsc-root:not(.dsc-drilled)) .dsc-header {
  display: none;
}

.dsc-header .dsc-title {
  margin-bottom: 0;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

/* Once drilled into a category, .dsc-title's text is swapped by JS to
   that category's name (see divarakInitCategoryDrilldown) and it takes
   over as the panel's real heading — give it the bigger/bolder treatment
   the reference design uses for the current-category title, instead of
   the small muted "دسته‌ها" label style above. */
.dsc-root.dsc-drilled ~ .dsc-header .dsc-title,
.divarak-sidebar-section:has(.dsc-root.dsc-drilled) .dsc-header .dsc-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.dsc-alltop {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}

.dsc-alltop:hover {
  text-decoration: underline !important;
}

.dsc-root {
  position: relative;
}

.dsc-panel {
  display: none;
}

.dsc-panel-root {
  display: block;
}

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

.dsc-item {
  margin-bottom: 0;
}

.dsc-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-sec) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  border-right: 3px solid transparent;
  transition: background var(--transition), color var(--transition);
}

.dsc-panel:not(.dsc-panel-root) .dsc-item {
  border-bottom: 1px solid var(--border);
}

.dsc-panel:not(.dsc-panel-root) .dsc-item:last-child {
  border-bottom: none;
}

.dsc-item-link:hover {
  background: var(--bg-hover);
  color: var(--text) !important;
}

/* Subtle active/selected treatment for a drilled-into category:
   light tinted background + accent-colored right bar (per task —
   light palette, no new hardcoded colors, existing --accent token). */
.dsc-panel:not(.dsc-panel-root) .dsc-item-link:hover,
.dsc-item.has-children > .dsc-item-link:focus-visible {
  background: var(--bg-hover);
  border-right-color: var(--accent);
}

/* Current-category highlight: marks the sidebar item(s) matching the
   category the user is currently viewing (server-computed in
   divarak_category_layout() via $active_term_ids — leaf category = only
   itself active, parent category ("نمایش همه") = all its children active).
   Same accent-tinted treatment as the hover/drilled state above, but
   persistent (not just on hover). */
.dsc-item-active > .dsc-item-link {
  background: var(--accent-light);
  color: var(--accent) !important;
  border-right-color: var(--accent);
  font-weight: 700;
}

.dsc-item-active > .dsc-item-link .dsc-item-name {
  color: var(--accent) !important;
}

.dsc-item-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.dsc-item-name {
  flex: 1;
  min-width: 0;
}

.dsc-item-arrow {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dsc-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
  padding: 6px 4px 12px;
  background: transparent;
  border: none;
  color: var(--text-sec);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
}

.dsc-back:hover {
  color: var(--accent);
}

.dsc-showall {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  padding-top: 12px;
}

.dsc-showall:hover {
  text-decoration: underline !important;
}

/* =============================================
   SIDEBAR FILTER FORM (#divarak-sidebar-filter)

   Moved here from divarak-header.php's category-page-only inline <style>
   (divarak_category_layout) because the homepage's AJAX category swap
   (divarak_homepage_layout / divarakHomeAjaxLoadCategory, ID-scoped, same
   markup) now also renders this exact form when a category is selected
   from the homepage sidebar — it needs to work on both pages, not just
   the real /product-category/ archive. ID-scoped selectors, so applying
   them everywhere is safe (no page-specific side effects). */
#divarak-sidebar-filter .divarak-filter-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Was scoped to `.divarak-filter-wrapper > .row` (direct child only), but
   the real form (sidebar-filter.php) nests `.row` several levels deep
   (`.row > .col-md-12 > .row > .col-md-12.p-0 > ...`) for price/featured
   fields — each of those inner `.row`s still carried Bootstrap's default
   negative horizontal margin uncancelled, pushing the cloned form (and the
   whole mobile bottom sheet it's mounted in, since nothing here constrains
   overflow) visibly off-center to one side. Unscoped from `>` so every
   `.row` at any depth inside the form is neutralized, matching `.col-md-12`
   below which was already unscoped for the same reason. */
#divarak-sidebar-filter .row {
  margin: 0 !important;
}

#divarak-sidebar-filter .col-md-12 {
  padding: 0 !important;
}

#divarak-sidebar-filter label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

#divarak-sidebar-filter .form-control,
#divarak-sidebar-filter select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  height: auto !important;
  width: 100% !important;
}

/* The theme's own charsoogh.css sets `select { appearance: none }` site-
   wide, expecting bootstrap-select's own JS to always take over every
   <select> and provide its own dropdown UI/arrow. The mobile filter sheet's
   cloned form (divarak_category_layout()'s dmf-filter-btn / renderRealFilters
   in the plugin) deliberately unwraps bootstrap-select back to a plain
   native <select> instead of trying to keep that JS widget working on a
   clone — see normalizeSelect() — so without this, the select rendered with
   no dropdown arrow at all, indistinguishable from a plain text input.
   Restore a native select's own appearance + a simple arrow, same visual
   language as the already-correct .woocommerce-ordering select.orderby
   dropdown elsewhere in this file. */
#divarak-sidebar-filter select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
  padding-left: 28px !important;
  cursor: pointer !important;
}

#divarak-sidebar-filter .form-control:focus,
#divarak-sidebar-filter select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

#divarak-sidebar-filter .input-group-addon {
  font-size: 12px !important;
  color: var(--text-sec) !important;
  padding: 4px 0 0 !important;
  background: transparent !important;
  border: none !important;
}

#divarak-sidebar-filter .price_divShow {
  margin-bottom: 0 !important;
}

#divarak-sidebar-filter .ads_featured {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

#divarak-sidebar-filter .icheckbox {
  display: inline-flex !important;
}

#divarak-sidebar-filter button[type="submit"] {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 8px !important;
  transition: background var(--transition) !important;
}

#divarak-sidebar-filter button[type="submit"]:hover {
  background: var(--charsoogh-main) !important;
  filter: brightness(0.85);
}

/* =============================================
   HOMEPAGE — category filter section shown after AJAX category swap
   (divarak_homepage_layout / divarakHomeAjaxLoadCategory). Sits below the
   drill-down widget inside #divarak-home-sidebar; hidden until a category
   is selected (see JS: display:none by default, cleared on load). Reuses
   .divarak-sidebar-section spacing already used by the drill-down block
   above it. */
.divarak-home-filter-section {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}

#divarak-home-cat-main .section-title.clearfix {
  margin-bottom: 16px;
}

/* App download page (page-id-4965) — its 3 Elementor download buttons
   (elements 67a652d / 6bcc1c1 / 3f3b726) hardcode their text color to
   Elementor's own global color var --e-global-color-46113c9 (currently
   #FFF, set in the Elementor kit, unrelated to the theme customizer).
   Rebind to the customizer's own button-text color var so changing
   "رنگ متن دکمه‌ها" in Customize > ظاهر updates these buttons too,
   matching every other themed button site-wide. Selector matches
   Elementor's own specificity (.elementor-4965 .elementor-element.elementor-element-X .elementor-button,
   3 classes) plus the page's body class, so no !important needed.

   Verified via Playwright (375x667, test theme_mod #0000ff): the
   .elementor-button <a> wrapper itself DID pick up the test color
   (getComputedStyle color: rgb(0,0,255)), but the actual visible text,
   nested in <span class="elementor-button-content-wrapper"><span
   class="elementor-button-text">دانلود</span></span>, stayed
   rgb(28,28,28) — NOT the test color. Root cause: divarak-header.php's
   global text-color re-apply block (divarak_header_assets(), the
   "html, body, p, span, div, ... .elementor *:not(.fa):not(...)..."
   catch-all — the ".elementor *:not()..." branch alone is ~9 classes of
   specificity via its 8 chained :not() clauses plus .elementor) sets
   `color: var(--divarak-text-color) !important` directly on the bare
   <span> tags themselves. A rule setting color directly on an element
   always wins over inheritance from a styled ancestor, even with
   !important on the ancestor (same pitfall as the earlier
   .category_selected .change_category / project_specificity_monster_fix.md
   fixes). Proven fix in this project: repeat the leaf class 12x to
   out-rank the ~9-class monster rule, same technique used for
   .btn.submit_new_ad / .btn.publish_ad above. */
body.page-id-4965 .elementor-4965 .elementor-element .elementor-button {
  color: var(--divarak-btn-text, #fff);
}
body.page-id-4965 .elementor-4965 .elementor-element .elementor-button .elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text.elementor-button-text,
body.page-id-4965 .elementor-4965 .elementor-element .elementor-button .elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper.elementor-button-content-wrapper {
  color: var(--divarak-btn-text, #fff) !important;
}

/* Ad-submission wizard — "تغییر دسته‌بندی" (change category) button, shown
   in the blue "شما در حال ارسال آگهی در دسته‌بندی... هستید" notice above the
   form fields. charsoogh.css hardcodes its text to a plain #fff
   (.category_selected .change_category), unrelated to the customizer.
   Rebind to the same --divarak-btn-text var every other themed button on
   the site already uses. Matches charsoogh.css's own specificity (1 class
   chain, .category_selected .change_category) so no !important needed. */
.category_selected .change_category {
  color: var(--divarak-btn-text, #fff) !important;
}

/* Per-field validation errors on the ad-submission wizard (step 2,
   add-new-ad.php): city, title, description and map errors used to all be
   appended to a single shared ".form_validation_error" box above the
   "Next" button, so a user had to match each message back to its field by
   reading the text. These now render in a dedicated "#<field>-field-error"
   div placed directly under each field, reusing the same .alert-danger
   markup (icon + red background) the shared box already used — but that
   markup's actual look (flex layout, padding, icon size) came from a
   charsoogh.css rule scoped to ".form_validation_error .alert-danger",
   which doesn't match these standalone divs. Re-declare the same look here,
   scoped to .divarak-field-error instead. */
.divarak-field-error .alert-danger {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px;
  margin-top: 8px;
}
.divarak-field-error .alert-danger i {
  font-size: 18px;
}