/*
 * 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; }
.section-title h2::before { display: none !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
   ============================================= */
.woocommerce-MyAccount-content div.row.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. */
.search-my-ads {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}
.search-my-ads form.row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}
.search-my-ads input[name="search-my"] {
  width: 100% !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"] {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.woocommerce-MyAccount-content .bookmark-list {
  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::-webkit-scrollbar {
  height: 5px;
}
.woocommerce-MyAccount-content .bookmark-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* 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, and .bookmark-list
   itself is `display:flex; flex-direction:row-reverse` (the horizontal
   scroller for actual cards, styled above), so the message rendered
   unstyled and off-center, squeezed as a flex item 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), scoped to this page only via
   .woocommerce-MyAccount-content .bookmark-list — bookmark-list.userDashboard
   (My Ads, a different page) always has an icon column: this bare
   .bookmark-list selector only matches the favorites page's markup. */
.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 {
    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;
}

/* 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;
}

.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;
}

.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;
}

.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;
}

/* 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;
}

/* =============================================
   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;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !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
   ============================================= */
@media (max-width: 992px) {
  .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; }
  .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 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;
    padding: 8px 14px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
  }

  .dmf-chip-remove {
    font-size: 14px;
    opacity: 0.85;
    cursor: pointer;
  }

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

  /* 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;
}

.dmc-apply-btn {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  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;
  width: 100%;
  margin: 0 0 12px;
  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) */
div.row.items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  box-shadow: none !important;
}

div.row.items .item {
  animation: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
}

div.row.items .item:nth-child(3n+1) {
  border-left: none !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 */
@media (max-width: 992px) {
  div.row.items { grid-template-columns: repeat(2, 1fr) !important; }
  div.row.items .item:nth-child(3n+1) { border-left: 1px solid var(--border) !important; }
  div.row.items .item:nth-child(2n+1) { border-left: none !important; }
}
@media (max-width: 768px) {
  div.row.items { grid-template-columns: 1fr !important; }
  div.row.items .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: #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 (page-id-5438, /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.page-id-5438 .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.page-id-5438 .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.page-id-5438 .login-user h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

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

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

body.page-id-5438 .login-user .login:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

body.page-id-5438 .login-user .login:active {
  transform: translateY(0);
  box-shadow: none;
}

body.page-id-5438 .login-user .login > i {
  font-size: 16px;
  margin: 0;
}

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

/* =============================================
   USER CHAT — logged-in chat interface, full-screen
   (page-id-5438, /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.page-id-5438 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.page-id-5438 .hero .page-title {
  display: none !important;
}

body.page-id-5438 main.content,
body.page-id-5438 main.content section.block,
body.page-id-5438 main.content .container,
body.page-id-5438 main.content .container .row,
body.page-id-5438 main.content .col-md-12,
body.page-id-5438 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. */
body.page-id-5438 {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

body.page-id-5438 .page.home-page {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

body.page-id-5438 main.content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

body.page-id-5438 main.content section.block,
body.page-id-5438 main.content .container,
body.page-id-5438 main.content .container .row,
body.page-id-5438 main.content .col-md-12,
body.page-id-5438 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.page-id-5438 .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.page-id-5438 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. */
body.page-id-5438 .chat-list,
body.page-id-5438 .chat-messages {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.page-id-5438 .chats,
body.page-id-5438 .chat-box {
  height: auto !important;
  flex: 1;
  min-height: 0;
}

/* 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.page-id-5438 .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.page-id-5438 {
    padding-bottom: 56px !important;
  }

  /* /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;
  }
}

/* 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 (page-id-5007, /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.page-id-5007 main.content,
  body.page-id-5007 main.content section.block,
  body.page-id-5007 main.content .container,
  body.page-id-5007 main.content .container.responsive-padding,
  body.page-id-5007 main.content .row,
  body.page-id-5007 main.content .col-md-12,
  body.page-id-5007 main.content article.page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.page-id-5007 .stepwizard {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 16px 20px 0 !important;
  }

  body.page-id-5007 #ad_submit,
  body.page-id-5007 .row.setup-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.page-id-5007 #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;
}

#divarak-sidebar-filter .divarak-filter-wrapper > .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;
}

#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;
}