/* =====================================================
   ATLAS × 3M FINAL POLISH PATCH
   Mobile/Tablet + Light/Dark + Page Consistency + Centers reset
===================================================== */

/* ---------- GLOBAL THEME TOKENS ---------- */
:root{
  --atlas-bg:#050608;
  --atlas-bg-soft:#0d1015;
  --atlas-card:rgba(255,255,255,.055);
  --atlas-card-solid:#11151c;
  --atlas-text:#ffffff;
  --atlas-text-soft:rgba(255,255,255,.72);
  --atlas-muted:rgba(255,255,255,.52);
  --atlas-border:rgba(255,255,255,.12);
  --atlas-red:#e30613;
  --atlas-shadow:0 28px 80px rgba(0,0,0,.34);
}

html[data-theme="light"]{
  --atlas-bg:#f5f6f8;
  --atlas-bg-soft:#ffffff;
  --atlas-card:rgba(255,255,255,.92);
  --atlas-card-solid:#ffffff;
  --atlas-text:#101217;
  --atlas-text-soft:rgba(16,18,23,.74);
  --atlas-muted:rgba(16,18,23,.58);
  --atlas-border:rgba(0,0,0,.11);
  --atlas-shadow:0 22px 55px rgba(15,23,42,.10);
}

html[data-theme="light"] body{
  background:var(--atlas-bg) !important;
  color:var(--atlas-text) !important;
}

html[data-theme="light"] .main-wrapper,
html[data-theme="light"] main,
html[data-theme="light"] section:not(.hero):not(.page-hero),
html[data-theme="light"] .section,
html[data-theme="light"] .content-shell{
  background:transparent !important;
  color:var(--atlas-text) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] li,
html[data-theme="light"] label,
html[data-theme="light"] small,
html[data-theme="light"] strong,
html[data-theme="light"] a:not(.primary-btn):not(.glass-btn):not(.ghost-btn),
html[data-theme="light"] .section-head p,
html[data-theme="light"] .content-card p,
html[data-theme="light"] .content-card li,
html[data-theme="light"] .service-detail-hero p{
  color:var(--atlas-text) !important;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-head .eyebrow,
html[data-theme="light"] .content-card h3{
  color:var(--atlas-red) !important;
}

html[data-theme="light"] .eco-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .center-panel,
html[data-theme="light"] .atlas-center-card,
html[data-theme="light"] .center-summary,
html[data-theme="light"] .form-card,
html[data-theme="light"] .booking-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .warranty-card,
html[data-theme="light"] .franchise-card,
html[data-theme="light"] .contact-card{
  background:var(--atlas-card) !important;
  border-color:var(--atlas-border) !important;
  box-shadow:var(--atlas-shadow) !important;
  color:var(--atlas-text) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#fff !important;
  color:#111 !important;
  border-color:var(--atlas-border) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color:rgba(0,0,0,.48) !important;
}

/* make image/model areas readable in light mode without destroying the old design */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .service-detail-hero{
  background:
    radial-gradient(circle at 20% 10%, rgba(227,6,19,.16), transparent 32%),
    linear-gradient(135deg,#ffffff,#eef1f6) !important;
}

html[data-theme="light"] .hero h1,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .service-detail-hero h1,
html[data-theme="light"] .hero p,
html[data-theme="light"] .page-hero p,
html[data-theme="light"] .service-detail-hero p{
  color:#111 !important;
}

html[data-theme="light"] img.logo-atlas,
html[data-theme="light"] .footer-logos img,
html[data-theme="light"] .brand-logos img{
  filter:none !important;
}

/* ---------- HEADER STABILITY ---------- */
.site-header{
  overflow:visible !important;
  isolation:isolate;
}

.theme-toggle{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:42px !important;
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:999px !important;
}

.theme-toggle[hidden]{
  display:inline-flex !important;
}

.theme-toggle i{
  margin:0 !important;
  line-height:1 !important;
}

.atlas-services-dd{
  position:relative !important;
  padding-bottom:18px !important;
  margin-bottom:-18px !important;
}

.atlas-services-panel{
  pointer-events:none;
}

.atlas-services-dd:hover .atlas-services-panel,
.atlas-services-dd:focus-within .atlas-services-panel,
.atlas-services-panel:hover{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

.atlas-services-panel b,
.atlas-services-panel a{
  white-space:normal !important;
}

/* ---------- CONSISTENT PAGE LAYOUT ---------- */
.page-hero,
.service-detail-hero{
  min-height:430px !important;
  display:flex !important;
  align-items:center !important;
}

.section,
.content-shell{
  width:min(1220px, calc(100% - 40px)) !important;
  margin-inline:auto !important;
}

.section-head,
.hero-content,
.service-detail-wrap{
  max-width:1180px !important;
  margin-inline:auto !important;
}

/* ---------- CENTERS RESET BUTTON MUST NOT STICK OR SCROLL SEPARATELY ---------- */
.center-summary{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
}

.reset-filters-btn,
#resetCenterFilters,
#resetFilters{
  position:static !important;
  inset:auto !important;
  transform:none !important;
}

.center-panel{
  position:relative !important;
}

/* ---------- MOBILE / TABLET ---------- */
@media (max-width:1180px){
  .site-header{
    min-height:76px !important;
    padding:12px 16px !important;
    gap:10px !important;
  }

  .brand{
    min-width:0 !important;
    max-width:210px !important;
  }

  .brand-logos img.logo-3m,
  .brand-logos .logo-3m{
    width:auto !important;
    max-width:58px !important;
    height:32px !important;
    object-fit:contain !important;
  }

  .brand-logos img.logo-atlas,
  .brand-logos .logo-atlas{
    width:auto !important;
    max-width:98px !important;
    height:32px !important;
    object-fit:contain !important;
  }

  .brand-text strong{font-size:13px !important;}
  .brand-text small{font-size:11px !important;}

  .desktop-nav{
    display:none !important;
  }

  .header-actions{
    margin-inline-start:auto !important;
    gap:8px !important;
  }

  .header-actions > .ghost-btn:not(.change-region-btn),
  .header-actions > .primary-btn{
    display:none !important;
  }

  .change-region-btn span{
    display:none !important;
  }

  .menu-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    width:44px !important;
    height:44px !important;
  }

  .mobile-menu{
    position:fixed !important;
    top:76px !important;
    inset-inline:12px !important;
    width:auto !important;
    max-height:calc(100vh - 96px) !important;
    overflow:auto !important;
    border-radius:22px !important;
    z-index:9998 !important;
    background:rgba(8,10,15,.96) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.42) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
  }

  html[data-theme="light"] .mobile-menu{
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(0,0,0,.11) !important;
  }

  .mobile-menu-content{
    padding:14px !important;
    display:grid !important;
    gap:8px !important;
  }

  .mobile-menu-content a{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    border-radius:16px !important;
    padding:12px 14px !important;
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:800 !important;
  }

  html[data-theme="light"] .mobile-menu-content a{
    background:rgba(0,0,0,.045) !important;
    color:#111 !important;
  }

  .hero,
  .page-hero,
  .service-detail-hero{
    min-height:auto !important;
    padding:122px 18px 54px !important;
  }

  .hero-content h1,
  .page-hero h1,
  .service-detail-hero h1{
    font-size:clamp(30px, 8vw, 54px) !important;
    line-height:1.14 !important;
  }

  .hero-content p,
  .page-hero p,
  .service-detail-hero p{
    font-size:16px !important;
    line-height:1.85 !important;
  }

  .section,
  .content-shell{
    width:min(100% - 28px, 1180px) !important;
    margin-top:44px !important;
    margin-bottom:44px !important;
  }

  .map-layout,
  .services-grid,
  .cards-grid,
  .features-grid,
  .contact-grid,
  .booking-grid,
  .franchise-grid,
  .warranty-grid{
    grid-template-columns:1fr !important;
  }

  .atlas-map-wrap,
  .saudi-map,
  .atlas-leaflet-map{
    min-height:360px !important;
    height:360px !important;
  }

  .center-panel{
    max-height:none !important;
    overflow:visible !important;
    padding-inline-end:0 !important;
  }

  .center-summary{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }

  .reset-filters-btn{
    flex:0 0 auto !important;
  }
}

@media (max-width:680px){
  .site-header{
    padding:10px 12px !important;
  }

  .brand{
    max-width:162px !important;
  }

  .brand-text strong{
    font-size:11px !important;
  }

  .brand-text small{
    display:none !important;
  }

  .brand-logos{
    gap:7px !important;
  }

  .brand-logos span{
    opacity:.55 !important;
  }

  .brand-logos img.logo-3m,
  .brand-logos .logo-3m{
    max-width:44px !important;
    height:25px !important;
  }

  .brand-logos img.logo-atlas,
  .brand-logos .logo-atlas{
    max-width:72px !important;
    height:25px !important;
  }

  .header-actions{
    gap:6px !important;
  }

  .lang-btn,
  .theme-toggle,
  .change-region-btn,
  .menu-btn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    padding:0 !important;
  }

  .hero,
  .page-hero,
  .service-detail-hero{
    padding-top:108px !important;
  }

  .hero-actions,
  .detail-cta,
  .cta-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .hero-actions a,
  .detail-cta a,
  .cta-actions a,
  .primary-btn,
  .glass-btn,
  .ghost-btn{
    width:100% !important;
    justify-content:center !important;
  }

  .content-card{
    padding:22px 18px !important;
    border-radius:24px !important;
  }

  .content-card p,
  .content-card li{
    font-size:15.5px !important;
    line-height:1.9 !important;
  }

  .center-summary strong{
    font-size:24px !important;
  }

  .reset-filters-btn{
    width:100% !important;
    justify-content:center !important;
  }
}

/* =====================================================
   V9 FIXES - centers stay Arabic + mobile service scroll + stronger theme
===================================================== */

/* Centers/search: keep Arabic even in English */
.no-translate,
.no-translate *{
  direction:rtl !important;
  text-align:right !important;
}

html[dir="ltr"] .no-translate,
html[dir="ltr"] .no-translate *{
  direction:rtl !important;
  text-align:right !important;
}

.no-translate input,
.no-translate select,
.no-translate textarea{
  direction:rtl !important;
  text-align:right !important;
}

.no-translate .center-summary{
  position:static !important;
  top:auto !important;
}

.no-translate .reset-filters-btn,
.no-translate #resetCenterFilters,
.no-translate #resetFilters{
  position:static !important;
  top:auto !important;
  transform:none !important;
}

/* Stronger light/dark readability */
html[data-theme="dark"] body{
  background:#050608 !important;
  color:#fff !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .atlas-services-panel{
  background:rgba(8,10,15,.94) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .eco-card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .atlas-center-card,
html[data-theme="dark"] .center-panel,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .warranty-card,
html[data-theme="dark"] .franchise-card{
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] a:not(.primary-btn):not(.glass-btn):not(.ghost-btn),
html[data-theme="dark"] label,
html[data-theme="dark"] small{
  color:inherit;
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .mobile-menu,
html[data-theme="light"] .atlas-services-panel{
  background:rgba(255,255,255,.96) !important;
  color:#101217 !important;
  border-color:rgba(0,0,0,.12) !important;
}

html[data-theme="light"] .desktop-nav a,
html[data-theme="light"] .atlas-services-panel a,
html[data-theme="light"] .atlas-services-panel b,
html[data-theme="light"] .mobile-menu-content a,
html[data-theme="light"] .mobile-menu-content button,
html[data-theme="light"] .brand-text strong,
html[data-theme="light"] .brand-text small{
  color:#101217 !important;
}

html[data-theme="light"] .hero::before,
html[data-theme="light"] .page-hero::before,
html[data-theme="light"] .service-detail-hero::before{
  opacity:.12 !important;
}

html[data-theme="light"] .noise-layer,
html[data-theme="light"] .gradient-orb{
  opacity:.12 !important;
}

html[data-theme="light"] .content-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .eco-card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .atlas-center-card,
html[data-theme="light"] .center-panel,
html[data-theme="light"] .form-card,
html[data-theme="light"] .booking-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .warranty-card,
html[data-theme="light"] .franchise-card{
  background:#fff !important;
  color:#101217 !important;
  border-color:rgba(0,0,0,.12) !important;
  box-shadow:0 22px 55px rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .primary-btn,
html[data-theme="light"] .book-btn,
html[data-theme="light"] .action-book{
  color:#fff !important;
}

/* Mobile-only services dropdown/scroll */
.mobile-services-toggle{
  display:none;
}

@media (max-width:1180px){
  .mobile-menu-content .mobile-services-toggle{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border:0 !important;
    border-radius:16px !important;
    padding:12px 14px !important;
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    font:inherit !important;
    font-weight:800 !important;
    cursor:pointer !important;
  }

  html[data-theme="light"] .mobile-menu-content .mobile-services-toggle{
    background:rgba(0,0,0,.045) !important;
    color:#111 !important;
  }

  .mobile-services-toggle::after{
    content:"▾";
    font-size:12px;
    opacity:.8;
  }

  .mobile-menu.services-open .mobile-services-toggle::after{
    content:"▴";
  }

  .mobile-services-panel{
    display:none !important;
    max-height:46vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:12px !important;
    border-radius:18px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.045) !important;
  }

  html[data-theme="light"] .mobile-services-panel{
    background:rgba(0,0,0,.035) !important;
    border-color:rgba(0,0,0,.10) !important;
  }

  .mobile-menu.services-open .mobile-services-panel{
    display:grid !important;
    gap:8px !important;
  }

  .mobile-services-panel strong{
    color:#ff3333 !important;
    font-weight:900 !important;
    padding:8px 4px 3px !important;
  }

  .mobile-services-panel a{
    min-height:42px !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    white-space:normal !important;
  }

  /* desktop mega dropdown should not break mobile, it becomes scrollable if shown */
  .atlas-services-panel,
  .mega-menu,
  .services-dropdown,
  .dropdown-menu{
    max-height:62vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* centers stay normal mobile scroll, no sticky filter */
  .center-panel.no-translate{
    max-height:none !important;
    overflow:visible !important;
  }

  .center-panel.no-translate .atlas-center-card,
  .center-panel.no-translate .center-card{
    min-width:0 !important;
  }
}

@media (max-width:680px){
  .mobile-services-panel{
    max-height:42vh !important;
  }
}

/* =========================================================
   V10 TARGETED FIX: MOBILE CENTERS SCROLL + TRUE LIGHT MODE
   ========================================================= */

/* --- real light palette for the whole old design --- */
html[data-theme="light"] body,
html[data-theme="light"] .main-wrapper{
  background:#f5f6f8 !important;
  color:#111318 !important;
}

html[data-theme="light"] .header,
html[data-theme="light"] .site-header,
html[data-theme="light"] .desktop-nav,
html[data-theme="light"] .mobile-menu,
html[data-theme="light"] .mobile-menu-content,
html[data-theme="light"] .atlas-services-panel,
html[data-theme="light"] .mega-menu,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .footer,
html[data-theme="light"] .section,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .content-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .center-card,
html[data-theme="light"] .atlas-center-card,
html[data-theme="light"] .center-panel,
html[data-theme="light"] .center-summary,
html[data-theme="light"] .map-card,
html[data-theme="light"] .glass,
html[data-theme="light"] .booking-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .form-card{
  background:#ffffff !important;
  color:#111318 !important;
  border-color:rgba(0,0,0,.12) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .section:nth-child(even),
html[data-theme="light"] .hero,
html[data-theme="light"] .page-wrap,
html[data-theme="light"] .map-section{
  background:#f5f6f8 !important;
  color:#111318 !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] li,
html[data-theme="light"] a,
html[data-theme="light"] label,
html[data-theme="light"] button,
html[data-theme="light"] strong,
html[data-theme="light"] b{
  color:#111318 !important;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .red,
html[data-theme="light"] .accent,
html[data-theme="light"] .section-head .eyebrow,
html[data-theme="light"] .atlas-services-panel b,
html[data-theme="light"] .mega-col h3,
html[data-theme="light"] .mobile-services-panel strong,
html[data-theme="light"] .brand .logo-3m,
html[data-theme="light"] .text-red{
  color:#d71920 !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .section-head p,
html[data-theme="light"] .card p,
html[data-theme="light"] small,
html[data-theme="light"] .footer p{
  color:#555c67 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .search-box,
html[data-theme="light"] .filter-select{
  background:#ffffff !important;
  color:#111318 !important;
  border-color:rgba(0,0,0,.18) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color:#737b86 !important;
}

html[data-theme="light"] .primary-btn,
html[data-theme="light"] .book-btn,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .reset-filters-btn,
html[data-theme="light"] .map-pin,
html[data-theme="light"] .marker-bubble{
  background:#d71920 !important;
  color:#fff !important;
  border-color:#d71920 !important;
}

html[data-theme="light"] .primary-btn *,
html[data-theme="light"] .book-btn *,
html[data-theme="light"] .btn-primary *,
html[data-theme="light"] .reset-filters-btn *,
html[data-theme="light"] .map-pin *,
html[data-theme="light"] .marker-bubble *{
  color:#fff !important;
}

html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .ghost-btn{
  background:#fff !important;
  color:#111318 !important;
  border-color:rgba(0,0,0,.16) !important;
}

html[data-theme="light"] img,
html[data-theme="light"] video,
html[data-theme="light"] canvas,
html[data-theme="light"] model-viewer{
  filter:none !important;
}

/* Theme switch shape and icon visibility */
#themeBtn,
.theme-toggle,
.mode-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-width:42px !important;
  height:42px !important;
  border-radius:999px !important;
  line-height:1 !important;
}

html[data-theme="light"] #themeBtn,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .mode-toggle{
  background:#111318 !important;
  color:#fff !important;
  border-color:#111318 !important;
}

html[data-theme="dark"] #themeBtn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .mode-toggle{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

html[data-theme="light"] #themeBtn i,
html[data-theme="light"] #themeBtn span,
html[data-theme="light"] .theme-toggle i,
html[data-theme="light"] .mode-toggle i{
  color:#fff !important;
}

/* --- mobile centers: list scrolls inside a fixed panel, not one huge page --- */
@media (max-width: 900px){
  .map-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }

  .atlas-real-map,
  #regionMap,
  .atlas-map-wrap,
  #atlasSaudiLeafletMap{
    width:100% !important;
    height:330px !important;
    min-height:330px !important;
    max-height:330px !important;
    position:relative !important;
    top:auto !important;
  }

  .center-panel.no-translate,
  .center-panel{
    width:100% !important;
    height:auto !important;
    max-height:68vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:14px !important;
    overscroll-behavior:contain !important;
    border-radius:22px !important;
  }

  .center-summary{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    margin-bottom:12px !important;
    padding:12px !important;
    border-radius:18px !important;
    backdrop-filter:blur(12px) !important;
  }

  .center-search,
  .center-filters,
  .filters-row,
  .filter-bar{
    position:static !important;
    top:auto !important;
  }

  .reset-filters-btn,
  #resetCenterFilters,
  #resetFilters{
    position:static !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
  }

  .atlas-center-card,
  .center-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-inline:0 !important;
  }
}

@media (max-width: 520px){
  .center-panel.no-translate,
  .center-panel{
    max-height:64vh !important;
    padding:12px !important;
  }

  .atlas-real-map,
  #regionMap,
  .atlas-map-wrap,
  #atlasSaudiLeafletMap{
    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;
  }
}