/* JUST AQAR unified finishing layer — loaded after page-specific styles. */
:root {
  --just-deep: #02343a;
  --just-deep-2: #02403c;
  --just-green: #2ad067;
  --just-mint: #19bc95;
  --just-bg: #f4f8f7;
  --just-line: rgba(2, 52, 58, .10);
}

.header-action,
.header-avatar-btn,
.header-action .material-symbols-rounded,
.header-avatar-btn .material-symbols-rounded {
  color: var(--just-green) !important;
}

.header-action,
.header-avatar-btn {
  background: #fff !important;
  border: 1px solid rgba(42, 208, 103, .20) !important;
}

/* Home cards share the compact favorites proportions on desktop. */
@media (min-width: 1100px) {
  .property-grid {
    gap: 16px !important;
  }

  .property-card:not(.project-card) {
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(2, 52, 58, .06) !important;
  }

  .property-card:not(.project-card) .property-cover {
    aspect-ratio: 1.6 / 1 !important;
  }

  .property-card:not(.project-card) .property-body {
    padding: 15px !important;
    gap: 10px !important;
  }

  .property-card:not(.project-card) .property-title {
    font-size: 17px !important;
  }

  .property-card:not(.project-card) .property-price {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 20px !important;
  }

  .property-card:not(.project-card) .spec-chip {
    min-height: 52px !important;
    border-radius: 15px !important;
  }
}

/* App-only behavior: header on home only; no motion or shadows anywhere. */
html.just-native-app:not(.just-app-home) .app-header,
html.just-native-app:not(.just-app-home) header.app-header,
html.just-native-app:not(.just-app-home) .app-sidebar,
html.just-native-app:not(.just-app-home) .mobile-drawer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.just-native-app:not(.just-app-home) body {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

html.just-native-app:not(.just-app-home) .app-main {
  padding-top: 12px !important;
}

html.just-native-app *,
html.just-native-app *::before,
html.just-native-app *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.just-native-app .property-card:hover,
html.just-native-app .property-card:hover .property-cover img,
html.just-native-app button:hover,
html.just-native-app a:hover {
  transform: none !important;
  filter: none !important;
}

html.just-native-app .app-bottom-nav {
  background: #fff !important;
  border: 1px solid #e2ece9 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Services become a clean native list in the app. */
html.just-native-app .services-main {
  width: calc(100% - 20px) !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

html.just-native-app .services-hero {
  padding: 16px !important;
  margin-bottom: 12px !important;
  border-radius: 22px !important;
}

html.just-native-app .services-stat-box,
html.just-native-app .services-card-head p {
  display: none !important;
}

html.just-native-app .services-card {
  padding: 14px !important;
  border-radius: 22px !important;
  background: #fff !important;
}

html.just-native-app .services-list {
  gap: 8px !important;
}

html.just-native-app .service-item {
  min-height: 68px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: #f8fbfa !important;
}

html.just-native-app .service-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
}

html.just-native-app .service-title {
  font-size: 14px !important;
}

html.just-native-app .service-desc {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* Login: one centered card, no app chrome. */
html.just-app-login .app-header,
html.just-app-login .app-sidebar,
html.just-app-login .mobile-drawer,
html.just-app-login .app-bottom-nav,
html.just-app-login .login-side-panel {
  display: none !important;
}

html.just-app-login body {
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: auto !important;
  background: linear-gradient(180deg, #edf7f4, #fbfdfc) !important;
}

html.just-app-login .login-main-only.app-main {
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.just-app-login .login-shell-card {
  width: min(100%, 440px) !important;
  border: 0 !important;
  border-radius: 28px !important;
  overflow: visible !important;
  background: transparent !important;
}

html.just-app-login .login-grid {
  display: block !important;
  min-height: 0 !important;
}

html.just-app-login .login-form-panel {
  padding: 0 !important;
}

html.just-app-login .login-card-box {
  width: 100% !important;
  max-width: none !important;
  padding: 26px 20px 22px !important;
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid #e0ece8 !important;
}

html.just-app-login .modal-bg {
  align-items: flex-end !important;
  padding: 0 !important;
  background: rgba(3, 18, 22, .42) !important;
}

html.just-app-login .modal-box {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 !important;
  border-radius: 30px 30px 0 0 !important;
  transform: none !important;
}

@media (max-width: 600px) {
  html.just-native-app .property-card,
  html.just-native-app .property-card.project-card {
    box-shadow: none !important;
  }
}

/* Favorites cards: same visual language, slightly smaller and fully clickable. */
.favorites-main .custom-card {
  cursor: pointer;
  border-radius: 22px !important;
}

.favorites-main .custom-card-img {
  aspect-ratio: 1.72 / 1 !important;
}

.favorites-main .custom-card-body {
  padding: 13px !important;
  gap: 9px !important;
}

.favorites-main .custom-card-details {
  min-height: 0 !important;
  -webkit-line-clamp: 1 !important;
}

.favorites-main .custom-card-actions-flex {
  justify-content: flex-end !important;
}

.favorites-main .custom-card-specs {
  display: none !important;
}

@media (min-width: 700px) {
  .favorites-main .custom-card-icon-info {
    min-height: 48px !important;
  }
}

@media (max-width: 600px) {
  .favorites-main .fav-cards-container {
    gap: 10px !important;
  }

  .favorites-main .custom-card {
    display: grid !important;
    grid-template-columns: 36% minmax(0, 1fr) !important;
    min-height: 136px !important;
    overflow: hidden !important;
  }

  .favorites-main .custom-card-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 136px !important;
    aspect-ratio: auto !important;
  }

  .favorites-main .custom-card-body {
    min-width: 0 !important;
    padding: 10px !important;
  }

  .favorites-main .custom-card-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .favorites-main .custom-card-icon-info {
    min-height: 27px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
  }

  .favorites-main .custom-card-details,
  .favorites-main .custom-license-number {
    display: none !important;
  }

  .favorites-main .custom-price {
    font-size: 16px !important;
  }
}


/* ===== JUST AQAR final unified patch 2026-07-12 ===== */
html, body, main, section, article, p, h1, h2, h3, h4, h5, h6,
.page-content, .content, .description, .property-description, .custom-card-details,
.property-title, .property-subtitle, .service-title, .service-desc,
.favorites-hero-text, .terms-content, .privacy-content, .faq-answer {
  -webkit-user-select: text !important;
  user-select: text !important;
}
button, input, select, textarea, label, .material-symbols-rounded,
.app-bottom-nav, .app-sidebar, .header-action, .header-avatar-btn {
  -webkit-user-select: none !important;
  user-select: none !important;
}
::selection { background: rgba(42,208,103,.28); color:#02343a; }

/* Header icons use the logo green on every public page. */
.app-header .material-symbols-rounded,
.app-header svg, .app-header i,
.header-action, .header-avatar-btn { color:#2ad067 !important; fill:#2ad067 !important; }

/* Smaller favorites cards, without a specifications/details button. */
.favorites-main .custom-card { max-width: 430px; margin-inline:auto; }
.favorites-main .custom-card-actions-flex .custom-details,
.favorites-main [class*="specification"],
.favorites-main button[title*="مواصفات"],
.favorites-main a[title*="مواصفات"] { display:none !important; }
@media (min-width:1200px){
  .favorites-main .fav-cards-container{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .favorites-main .custom-card-img{aspect-ratio:1.78/1!important}
  .favorites-main .custom-card-body{padding:12px!important}
}

/* Home desktop cards match the compact favorites family. */
@media (min-width:1000px){
  #cardsContainer.property-grid,.property-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .property-card:not(.project-card){border-radius:22px!important;overflow:hidden!important;background:#fff!important;border:1px solid #e3eeeb!important;box-shadow:0 8px 22px rgba(2,52,58,.06)!important}
  .property-card:not(.project-card) .property-cover{aspect-ratio:1.78/1!important}
  .property-card:not(.project-card) .property-body{padding:12px!important;gap:8px!important}
  .property-card:not(.project-card) .property-specs{gap:6px!important}
  .property-card:not(.project-card) .spec-chip{min-height:42px!important;padding:6px!important;border-radius:12px!important}
}

/* Native/PWA: no header outside home, no motion or decorative shadows. */
html.just-native-app:not(.just-app-home) .app-header,
html.just-native-app:not(.just-app-home) .app-sidebar,
html.just-native-app:not(.just-app-home) .mobile-drawer{display:none!important}
html.just-native-app *,html.just-native-app *::before,html.just-native-app *::after{
 animation:none!important;transition:none!important;scroll-behavior:auto!important;
 box-shadow:none!important;text-shadow:none!important;filter:none!important
}
html.just-native-app body{overscroll-behavior:none;background:#f4f8f7!important}
html.just-native-app .app-main{width:calc(100% - 20px)!important;margin-inline:auto!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
html.just-native-app:not(.just-app-home) .app-main{padding-top:calc(10px + env(safe-area-inset-top))!important}

/* Native services: clean, compact and touch friendly. */
html.just-native-app .services-main{width:calc(100% - 16px)!important}
html.just-native-app .services-hero{padding:14px!important;border-radius:20px!important;margin-bottom:10px!important}
html.just-native-app .services-card{padding:12px!important;border-radius:20px!important;border:1px solid #e3eeeb!important}
html.just-native-app .service-item{min-height:66px!important;padding:10px!important;border-radius:16px!important;border:1px solid #e8f0ee!important}
html.just-native-app .service-item:active{transform:none!important}

/* Native login: one centered card and iOS-style bottom OTP sheet. */
html.just-app-login body{min-height:100dvh!important;background:#f3f8f6!important}
html.just-app-login .login-main-only{min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom))!important}
html.just-app-login .login-card-box{width:min(100%,430px)!important;border-radius:26px!important;border:1px solid #dfece8!important;background:#fff!important;padding:24px 18px!important}
html.just-app-login .modal-bg{align-items:flex-end!important;padding:0!important}
html.just-app-login .modal-box{width:100%!important;max-width:520px!important;border-radius:28px 28px 0 0!important;margin:0!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}

/* =========================================================
   JUST AQAR responsive desktop + scroll safety — 2026-07-12
========================================================= */
html {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
}

body {
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto;
  touch-action: pan-x pan-y !important;
}

body.drawer-open {
  overflow: hidden !important;
  touch-action: none !important;
}

.app-shell {
  min-height: calc(100vh - var(--header-h, 76px)) !important;
  height: auto !important;
  overflow: visible !important;
}

.app-main {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* السماح بالتمرير الرأسي عند بدء اللمس فوق أزرار أقسام الرئيسية. */
.hero-actions {
  touch-action: pan-x pan-y !important;
  overscroll-behavior-y: auto !important;
}

/* إلغاء حركة بطاقات الرئيسية بالكامل على الجوال والدسكتوب. */
html.just-app-home .property-card,
html.just-app-home .property-card *,
html.just-app-home .property-card::before,
html.just-app-home .property-card::after {
  animation: none !important;
  transition: none !important;
}

html.just-app-home .property-card:hover,
html.just-app-home .property-card:hover .property-cover img,
html.just-app-home .property-card:focus,
html.just-app-home .property-card:active {
  transform: none !important;
  filter: none !important;
}

/* أفضل خمسة عقارات */
.top-properties-btn.active {
  background: linear-gradient(135deg, #02343a, #029990) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.top-property-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #02343a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(2,52,58,.22);
}

.top-property-metrics {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.top-property-metrics > span {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.94);
  color: #02343a;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(2,52,58,.14);
}

.top-property-metrics .material-symbols-rounded {
  font-size: 16px;
  color: #029990;
}

@media (min-width: 1100px) {
  :root {
    --page-gutter-desktop: 24px;
  }

  .app-main,
  main.app-main,
  .services-main,
  .favorites-main,
  .bank-main,
  .terms-main,
  .faq-main,
  .client-request-main,
  .notifications-main,
  .project-view-main,
  .unit-view-main {
    width: calc(100% - (var(--page-gutter-desktop) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-right: calc(var(--desktop-sidebar-w, 110px) + 28px) !important;
    padding-left: 0 !important;
  }

  .app-header-inner {
    width: calc(100% - (var(--page-gutter-desktop) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-right: calc(var(--desktop-sidebar-w, 110px) + 28px) !important;
    padding-left: 0 !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    gap: 18px !important;
  }

  .app-header {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }

  .header-brand {
    min-width: 0 !important;
    justify-content: center !important;
  }

  .header-brand img {
    height: 46px !important;
    max-width: 230px !important;
  }

  .app-sidebar {
    right: var(--page-gutter-desktop) !important;
  }

  /* إبقاء محتوى الصفحة والهيدر ثابتًا عند إظهار/إخفاء القائمة الجانبية. */
  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed main.app-main,
  body.sidebar-collapsed .app-header-inner {
    padding-right: calc(var(--desktop-sidebar-w, 110px) + 28px) !important;
  }

  .home-hero,
  .hero-card,
  .search-card,
  .section-card,
  .services-layout,
  .services-card,
  .favorites-hero,
  .favorites-toolbar {
    max-width: none !important;
    width: 100% !important;
  }

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

@media (min-width: 1400px) {
  body.top-properties-mode #cardsContainer.property-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1099px) {
  .app-main,
  main.app-main {
    overflow: visible !important;
  }
}

@media (max-width: 600px) {
  .top-property-rank {
    top: 8px;
    left: 8px;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 11px;
  }

  .top-property-metrics {
    left: 8px;
    bottom: 8px;
  }

  .top-property-metrics > span {
    min-height: 25px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 9px;
  }
}

/* =========================================================
   ULTRA-WIDE DESKTOP LOCK
   Any viewport wider than 1700px keeps the exact same geometry
   used at 1700px, centered without stretching cards or header.
========================================================= */
@media (min-width: 1701px) {
  :root {
    /* At a 1700px viewport the desktop gutters are 24px per side. */
    --laptop-layout-width: 1652px;
  }

  .app-main,
  main.app-main,
  .app-header-inner {
    width: var(--laptop-layout-width) !important;
    max-width: var(--laptop-layout-width) !important;
    margin-inline: auto !important;
  }

  /* Keep the fixed sidebar on the same right edge it has at 1700px. */
  .app-sidebar {
    right: calc((100vw - var(--laptop-layout-width)) / 2) !important;
  }

  /* Prevent page-level wrappers from introducing a second wide-screen scale. */
  .home-hero,
  .hero-card,
  .search-card,
  .section-card,
  .services-layout,
  .services-card,
  .favorites-hero,
  .favorites-toolbar {
    max-width: 100% !important;
  }
}

/* Header notification button and live unread badge. */
.header-notification-btn{
  position:relative!important;
  text-decoration:none!important;
  overflow:visible!important;
}
.header-notification-badge{
  position:absolute!important;
  top:-5px!important;
  left:-5px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e53935!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 12px rgba(229,57,53,.28)!important;
  font:800 10px/1 'Almarai',sans-serif!important;
  direction:ltr!important;
  z-index:3!important;
}
.header-notification-badge[hidden]{display:none!important}
.header-notification-btn .material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24!important}

/* ===== Home cards: exact favorites layout in mobile/PWA ===== */
@media (max-width: 600px) {
  .app-main.favorites-main .fav-cards-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .app-main.favorites-main .custom-card {
    display: grid !important;
    grid-template-columns: 36% minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 136px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .app-main.favorites-main .custom-card-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 136px !important;
    aspect-ratio: auto !important;
  }

  .app-main.favorites-main .custom-card-body {
    min-width: 0 !important;
    padding: 10px !important;
    gap: 9px !important;
  }

  .app-main.favorites-main .custom-card-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .app-main.favorites-main .custom-card-icon-info {
    min-height: 27px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
  }

  .app-main.favorites-main .custom-license-number,
  .app-main.favorites-main .custom-card-details {
    display: none !important;
  }

  .app-main.favorites-main .custom-price {
    font-size: 16px !important;
  }

  .app-main.favorites-main .custom-card-actions-flex {
    margin-top: auto !important;
    justify-content: flex-end !important;
  }
}

/* Copy button: compact, clean, and touch-friendly */
.custom-copy {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(2, 52, 58, .10) !important;
  background: #f5faf8 !important;
  color: #02343a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent;
}

.custom-copy:hover,
.custom-copy:focus-visible {
  background: #e8f4f0 !important;
  border-color: rgba(2, 52, 58, .18) !important;
  transform: none !important;
  outline: none !important;
}

.custom-copy:active {
  transform: scale(.96) !important;
}

.custom-copy.copied {
  background: #2ad067 !important;
  color: #fff !important;
  border-color: #2ad067 !important;
}

.custom-copy .material-symbols-rounded {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* =========================================================
   HOME INDEX — iOS SEGMENTED PROPERTY SWITCHER
   وحدات البيع / الإيجار / المشاريع / أفضل ٥ عقارات
========================================================= */
.home-hero{
  width:100%;
  margin:0 0 18px;
  padding:0;
}
.home-hero .hero-card{
  width:min(100%,760px);
  margin-inline:auto;
  padding:6px;
  border:1px solid rgba(2,52,58,.08);
  border-radius:22px;
  background:rgba(239,243,242,.88);
  box-shadow:inset 0 1px 2px rgba(2,52,58,.05),0 8px 24px rgba(2,52,58,.06);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  overflow:hidden;
}
.home-hero .hero-actions{
  direction:rtl;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:4px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  touch-action:manipulation !important;
}
.home-hero .hero-actions::after{display:none !important}
.home-hero .hero-actions > .switch-btn,
.home-hero .hero-actions > button.switch-btn,
.home-hero .hero-actions > .btn-soft.switch-btn{
  position:relative;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:54px !important;
  min-height:54px !important;
  margin:0 !important;
  padding:7px 9px !important;
  border:0 !important;
  border-radius:17px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  color:#52605e !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  transform:translateZ(0) !important;
  transition:background .22s cubic-bezier(.2,.8,.2,1),color .22s ease,box-shadow .22s ease,transform .12s ease !important;
}
.home-hero .hero-actions > .switch-btn .material-symbols-rounded{
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  border-radius:9px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#6e7d7a !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:20px !important;
  line-height:1 !important;
  transition:color .22s ease,background .22s ease !important;
}
.home-hero .hero-actions > .switch-btn.active,
.home-hero .hero-actions > button.switch-btn.active,
.home-hero .hero-actions > .btn-soft.switch-btn.active{
  color:#02343a !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 1px 2px rgba(2,52,58,.08),0 7px 18px rgba(2,52,58,.10),inset 0 0 0 1px rgba(255,255,255,.9) !important;
}
.home-hero .hero-actions > .switch-btn.active .material-symbols-rounded{
  color:#fff !important;
  background:linear-gradient(145deg,#02343a,#19bc95) !important;
  box-shadow:0 4px 10px rgba(2,52,58,.18) !important;
}
.home-hero .hero-actions > .switch-btn:active{
  transform:scale(.975) translateZ(0) !important;
}
.home-hero .hero-actions > .switch-btn:focus-visible{
  outline:3px solid rgba(25,188,149,.22) !important;
  outline-offset:1px;
}
@media (hover:hover){
  .home-hero .hero-actions > .switch-btn:not(.active):hover{
    color:#02343a !important;
    background:rgba(255,255,255,.48) !important;
  }
}
@media (max-width:700px){
  .home-hero{margin-bottom:14px !important}
  .home-hero .hero-card{
    width:calc(100% - 24px) !important;
    padding:5px !important;
    border-radius:19px !important;
    overflow:hidden !important;
  }
  .home-hero .hero-actions{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(76px,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    gap:3px !important;
    max-width:none !important;
    padding:0 !important;
    overflow:visible !important;
    contain:none !important;
  }
  .home-hero .hero-actions > .switch-btn,
  .home-hero .hero-actions > button.switch-btn,
  .home-hero .hero-actions > .btn-soft.switch-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:58px !important;
    min-height:58px !important;
    padding:6px 3px !important;
    border-radius:15px !important;
    flex:none !important;
    flex-direction:column !important;
    gap:3px !important;
    font-size:10.5px !important;
    white-space:normal !important;
    touch-action:manipulation !important;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .1s ease !important;
  }
  .home-hero .hero-actions > .switch-btn .material-symbols-rounded{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    border-radius:8px !important;
    font-size:18px !important;
  }
}
@media (max-width:380px){
  .home-hero .hero-card{width:calc(100% - 16px) !important}
  .home-hero .hero-actions{grid-template-columns:repeat(4,minmax(68px,1fr)) !important}
  .home-hero .hero-actions > .switch-btn{font-size:9.7px !important;padding-inline:1px !important}
}

/* =========================================================
   JUST AQAR v63 — header drawer behavior
   Keep the original mine header design. The navigation is always
   closed and opens only from the menu button in the shared header.
========================================================= */
.app-sidebar{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.mobile-drawer{
  display:block!important;
}

.mobile-drawer-panel{
  top:calc(var(--header-h,76px) + var(--safe-top,0px) + 10px)!important;
  right:12px!important;
  bottom:auto!important;
  width:min(88vw,340px)!important;
  height:auto!important;
  max-height:calc(100dvh - var(--header-h,76px) - var(--safe-top,0px) - 22px)!important;
  padding:16px!important;
  border:1px solid rgba(2,52,58,.10)!important;
  border-radius:26px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  transform:translateX(18px) scale(.985)!important;
  transform-origin:top right!important;
}

.mobile-drawer.open .mobile-drawer-panel{
  transform:none!important;
}

.mobile-drawer-head{
  margin-bottom:12px!important;
}

.mobile-drawer-nav{
  gap:8px!important;
}

.mobile-drawer-nav a{
  min-height:52px!important;
}

@media (min-width:1100px){
  .app-main,
  main.app-main,
  .app-header-inner{
    width:calc(100% - 48px)!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-right:0!important;
    padding-left:0!important;
  }

  .mobile-drawer-panel{
    right:24px!important;
    width:340px!important;
    max-width:calc(100vw - 48px)!important;
  }
}

@media (min-width:1701px){
  .app-main,
  main.app-main,
  .app-header-inner{
    width:1652px!important;
    max-width:1652px!important;
  }

  .mobile-drawer-panel{
    right:calc((100vw - 1652px) / 2)!important;
  }
}

.header-brand,.header-brand:hover,.header-brand:focus,.header-brand:active{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.header-brand img{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important}