/* admin_frontend_responsive_mobile_v4
   Mobile-first fixes only. Loaded after current desktop/detail CSS.
   Goals: Divar-like mobile list, hidden filter sidebar with bottom-sheet button,
   full-width detail page with back button, no horizontal scroll. */

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*, *::before, *::after { box-sizing: border-box !important; }
img { max-width: 100% !important; }

.mobile-filter-fab-v4,
.mobile-filter-backdrop-v4,
.mobile-filter-close-v4,
.mobile-detail-back-v4 {
  display: none;
}

@media (max-width: 768px) {
  :root {
    --mobile-page-max: 560px;
    --mobile-red: #b91c1c;
    --mobile-border: #eef2f7;
    --mobile-muted: #6b7280;
    --mobile-soft: #f7f8fa;
  }

  html,
  body,
  #app,
  .page-shell,
  .tab-panel,
  .classifieds-layout,
  .classifieds-results,
  #propertiesTab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    background: #fff !important;
    color: #111827 !important;
    -webkit-text-size-adjust: 100% !important;
  }

  .page-shell {
    padding: 0 !important;
  }

  /* Mobile header: logo/menu only, sticky like app header. */
  .topbar,
  .site-header,
  header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
    overflow: visible !important;
  }

  .topbar .brand,
  .site-header .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .topbar .brand > div,
  .topbar .brand strong,
  .topbar .brand small,
  .site-header .brand > div,
  .site-header .brand strong,
  .site-header .brand small {
    display: none !important;
  }

  .topbar .brand img,
  .site-header .brand img,
  .brand-logo,
  .header-logo,
  .app-logo {
    display: block !important;
    max-width: 120px !important;
    max-height: 34px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .topbar .brand-mark {
    display: none !important;
  }

  .topbar .tabs,
  .topbar nav.tabs,
  .site-header .tabs {
    order: -1 !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
    position: relative !important;
  }

  .topbar .tabs::before,
  .site-header .tabs::before {
    content: "☰" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #111827 !important;
    pointer-events: none !important;
  }

  .topbar .tabs .tab-button,
  .site-header .tabs .tab-button {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .connection-panel,
  .login-strip,
  .topbar .connection-panel {
    display: none !important;
  }

  /* Hide right filter column on mobile; it opens as a bottom sheet. */
  .classifieds-layout {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .classifieds-filters {
    position: fixed !important;
    inset-inline: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 220 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: min(82dvh, 720px) !important;
    max-height: 82dvh !important;
    margin: 0 !important;
    padding: 54px 16px 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateY(110%) !important;
    transition: transform .22s ease !important;
    background: #fff !important;
    border-radius: 20px 20px 0 0 !important;
    border: 0 !important;
    box-shadow: 0 -18px 46px rgba(15,23,42,.22) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.mobile-filter-open-v4 .classifieds-filters {
    transform: translateY(0) !important;
  }

  .classifieds-filters .filter-status {
    position: sticky !important;
    top: -54px !important;
    z-index: 2 !important;
    margin: -54px -16px 12px !important;
    padding: 14px 56px 12px 16px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
    border-bottom: 1px solid var(--mobile-border) !important;
  }

  .mobile-filter-close-v4 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: sticky !important;
    top: -48px !important;
    z-index: 4 !important;
    float: right !important;
    width: 38px !important;
    height: 38px !important;
    margin: -48px 0 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .mobile-filter-backdrop-v4 {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 210 !important;
    background: rgba(15,23,42,.36) !important;
  }

  body.mobile-filter-open-v4 .mobile-filter-backdrop-v4 {
    display: block !important;
  }

  .mobile-filter-fab-v4 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    left: 50% !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 160 !important;
    min-width: 150px !important;
    height: 46px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--mobile-red) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 28px rgba(185,28,28,.28) !important;
  }

  body:has(#detailDrawer:not(.hidden)) .mobile-filter-fab-v4,
  body.mobile-filter-open-v4 .mobile-filter-fab-v4 {
    display: none !important;
  }

  /* Results area: full width, no left/right scroll. */
  .classifieds-results {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 76px !important;
    background: #fff !important;
    overflow-x: hidden !important;
  }

  .classifieds-results .classifieds-head,
  .panel-head.compact.classifieds-head {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px 8px !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .classifieds-results .classifieds-head h1,
  .classifieds-results .classifieds-head .view-mode-badge,
  .classifieds-results .classifieds-head .results-controls,
  .panel-head.compact.classifieds-head h1,
  .panel-head.compact.classifieds-head .view-mode-badge,
  .panel-head.compact.classifieds-head .results-controls {
    display: none !important;
  }

  #resultCount {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 8px !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
    text-align: right !important;
  }

  .search-row-in-tab {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px 6px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--mobile-border) !important;
  }

  .search-row-in-tab .search-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .search-row-in-tab .search-input input,
  #searchInput {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 38px 0 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 38px !important;
    box-shadow: none !important;
  }

  .search-row-in-tab .search-input::before {
    content: "⌕" !important;
    position: absolute !important;
    margin: 10px 12px 0 0 !important;
    color: #9ca3af !important;
    font-size: 15px !important;
    z-index: 1 !important;
  }

  #loadingState,
  #errorState,
  #emptyState { order: 3 !important; }

  #propertyList,
  .property-list,
  .classified-card-list {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .property-card.classified-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .property-card.classified-card .card-main {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .property-card.classified-card .card-body {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 102px) !important;
    direction: rtl !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .property-card.classified-card .card-media {
    order: 2 !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
  }

  .property-card.classified-card .card-media img,
  .property-card.classified-card .card-media .no-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  .property-card.classified-card .card-title {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
  }

  .property-card.classified-card .price-line {
    margin: 4px 0 0 !important;
    color: #6b7280 !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    display: grid !important;
    gap: 0 !important;
  }

  .property-card.classified-card .price-row {
    display: flex !important;
    gap: 5px !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    min-width: 0 !important;
  }

  .property-card.classified-card .meta {
    margin-top: 3px !important;
    color: #9ca3af !important;
    font-size: 11px !important;
    line-height: 1.7 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .property-card.classified-card .card-footer {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .property-card.classified-card .card-footer .subline {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 58% !important;
    margin: 0 !important;
    color: #9ca3af !important;
    font-size: 10.5px !important;
    line-height: 1.6 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .property-card.classified-card .card-footer .tag-row.card-plain-tags {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 42% !important;
    margin-inline-start: auto !important;
    color: #9ca3af !important;
    font-size: 10.5px !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .property-card.classified-card .card-footer .tag-row.card-plain-tags span {
    white-space: nowrap !important;
  }

  /* Full-width mobile detail page; no horizontal scroll. */
  .drawer-backdrop,
  #drawerBackdrop {
    display: none !important;
  }

  #detailDrawer.detail-drawer,
  .detail-drawer,
  .detail-drawer-redesigned {
    position: fixed !important;
    inset: 0 !important;
    z-index: 300 !important;
    width: 100dvw !important;
    min-width: 0 !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  #detailDrawer.hidden,
  .detail-drawer.hidden {
    display: none !important;
  }

  #detailDrawer *,
  .detail-drawer * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #detailDrawer .drawer-head,
  .detail-drawer .drawer-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    backdrop-filter: blur(8px) !important;
  }

  .mobile-detail-back-v4 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 68px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  #detailDrawer .drawer-head > div,
  .detail-drawer .drawer-head > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #closeDrawerButton {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  #detailTitle {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
    text-align: right !important;
    /* Show the whole title on phones — no one-line clamp — so «... متری ۲» is
       not cut off. It wraps and the sticky header grows to fit. */
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #detailEyebrow,
  .eyebrow {
    display: none !important;
  }

  #imageStrip,
  .image-strip,
  .detail-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #fff !important;
  }

  .detail-slider,
  .detail-main-image,
  .detail-main-image-button {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .detail-main-image img,
  .detail-main-image-button img {
    display: block !important;
    width: 100% !important;
    height: clamp(220px, 62vw, 330px) !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .detail-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 7px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .detail-thumb {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 5px !important;
  }

  #detailBadges,
  .detail-overview-card,
  .detail-overview,
  .detail-description,
  .detail-feature-section,
  .detail-extra-section,
  .detail-file-info-section,
  .detail-accordion,
  .raw-box.detail-accordion,
  #detailDrawer .drawer-actions,
  #detailDrawer .detail-form,
  #detailDrawer .facts {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 14px !important;
    overflow-x: hidden !important;
  }

  .detail-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .detail-price-table,
  .detail-extra-grid,
  .detail-file-info-grid,
  .detail-feature-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .detail-extra-grid,
  .detail-file-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .drawer-actions.sticky-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid var(--mobile-border) !important;
  }

  .drawer-actions.sticky-actions > * {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .detail-lightbox {
    padding: 0 !important;
  }

  .detail-lightbox-panel {
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 42px 32px !important;
  }

  .detail-lightbox-panel img {
    width: auto !important;
    height: auto !important;
    max-width: calc(100dvw - 64px) !important;
    max-height: calc(100dvh - 84px) !important;
    object-fit: contain !important;
  }
}

@media (max-width: 380px) {
  .property-card.classified-card .card-media {
    flex-basis: 84px !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }

  .property-card.classified-card .card-body {
    max-width: calc(100% - 94px) !important;
  }

  .property-card.classified-card .card-title {
    font-size: 12.5px !important;
  }

  .detail-extra-grid,
  .detail-file-info-grid {
    grid-template-columns: 1fr !important;
  }
}


/* admin_frontend_responsive_mobile_v4 overrides */
@media (max-width: 768px) {
  /* 1) Pager order: قبلی - صفحه - بعدی */
  .pager,
  .results-controls .pager,
  .pagination,
  .pagination-controls {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    order: 99 !important;
  }
  #prevPageButton,
  button[id*="prev" i],
  button[data-page="prev"] { order: 1 !important; }
  #pageLabel,
  .page-label,
  .pager-label { order: 2 !important; }
  #nextPageButton,
  button[id*="next" i],
  button[data-page="next"] { order: 3 !important; }

  /* 2) Hide admin full table/list controls on mobile */
  .admin-table,
  .properties-table,
  .properties-table-wrap,
  .table-view,
  .desktop-table,
  .full-admin-table,
  .admin-results-table,
  .admin-grid-table,
  #propertiesTable,
  #propertiesTbody,
  [data-mobile-hide="admin-table"] {
    display: none !important;
  }
  .mobile-hide-admin-table-v4 {
    display: none !important;
  }

  /* 3) Hide card meta on mobile */
  .property-card.classified-card .meta,
  #propertyList .property-card .meta,
  .classified-card .meta {
    display: none !important;
  }

  /* 4) Search first, resultCount below it, filter summary readable */
  .panel-head.compact.classifieds-head,
  .classifieds-results .classifieds-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .panel-head.compact.classifieds-head .search-row-in-tab,
  .classifieds-results .classifieds-head .search-row-in-tab {
    order: 1 !important;
    padding-bottom: 2px !important;
  }
  #searchInput,
  .search-row-in-tab .search-input,
  .search-row-in-tab input {
    width: 100% !important;
    max-width: 100% !important;
  }
  #resultCount {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px 8px !important;
    font-size: 11px !important;
    line-height: 1.9 !important;
    color: #6b7280 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* 5) Side menu must never create horizontal scrolling */
  #sideMenu,
  .side-menu,
  .mobile-menu,
  .drawer-menu {
    width: min(88vw, 340px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    /* 100vh on iOS runs behind the browser chrome, so the last items are
       unreachable. dvh tracks the visible height; scroll the rest. */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 32px !important;
  }
  #sideMenu *,
  .side-menu *,
  .mobile-menu *,
  .drawer-menu * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
  #sideMenu a,
  #sideMenu button,
  .side-menu a,
  .side-menu button {
    white-space: normal !important;
  }

  /* 6) Filter close button: icon outside top-right of bottom sheet */
  .classifieds-filters {
    overflow-x: hidden !important;
  }
  .mobile-filter-close-v4,
  .mobile-filter-close-v3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    right: 14px !important;
    bottom: calc(min(82dvh, 720px) - 18px) !important;
    z-index: 245 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.22) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    float: none !important;
  }
  .mobile-filter-close-v4::before,
  .mobile-filter-close-v3::before {
    content: "×" !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  body:not(.mobile-filter-open-v4) .mobile-filter-close-v4,
  body:not(.mobile-filter-open-v3) .mobile-filter-close-v3 {
    display: none !important;
  }

  /* Keep property list and detail pages full width with zero x scroll */
  #propertyList,
  .property-list,
  .classified-card-list,
  #detailDrawer,
  .detail-drawer,
  .detail-drawer-redesigned {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}