/* ================================================================
   android-fix.css — JanBack.tech
   إصلاح شامل لأجهزة الأندرويد (Samsung, Xiaomi, Huawei, etc.)
   أضف هذا الملف آخر <link> في كل صفحة HTML
   ================================================================ */

/* ── 1. أساسيات الصفحة ───────────────────────────────────────── */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* ✅ overflow-x: clip لا يكسر position:sticky (بعكس hidden) */
  overflow-x: clip;
  max-width: 100vw;
  /* منع pull-to-refresh على الأندرويد — فقط على الصفحات غير الـ scrollable */
  overscroll-behavior-y: contain;
}

/* ── 2. Backdrop-filter fallback (أجهزة أندرويد قديمة) ──────── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header,
  .settings-panel,
  .mobile-nav,
  .tab-bar,
  #mainTabBar,
  .lang-panel {
    background: rgba(13, 13, 15, 0.99) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body[data-theme="light"] header,
  body[data-theme="light"] .settings-panel,
  body[data-theme="light"] .mobile-nav,
  body[data-theme="light"] .tab-bar,
  body[data-theme="light"] #mainTabBar {
    background: rgba(245, 243, 238, 0.99) !important;
  }
}

/* ── 3. تسريع الأجهزة (Hardware Acceleration) ───────────────── */
/* ✅ فقط للعناصر الـ FIXED — لا تضع transform على sticky لأنه يكسرها */
header,
.mobile-nav,
.settings-panel,
.settings-overlay,
.modal-overlay,
.auth-modal-overlay,
.lang-overlay,
.side-panel-overlay,
.jb-toast {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── 4. Position Sticky مع webkit prefix ────────────────────── */
@media (max-width: 860px) {
  #mainTabBar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--header-h, 60px) !important;
    z-index: 50 !important;
    /* ✅ لا transform ولا will-change على sticky — يكسران الـ sticky في Safari/iOS */
    background: var(--dark-2, #131317) !important;
  }

  #mobileCatsBar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--header-h, 60px) + var(--tab-bar-h, 52px)) !important;
    z-index: 45 !important;
    /* ✅ بدون transform */
    background: var(--dark-2, #131317) !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    min-height: 44px !important;
    border-bottom: 0.5px solid var(--border-2) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #mobileCatsBar::-webkit-scrollbar { display: none !important; }

  #mobileCatsBar2 {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--header-h, 60px) + var(--tab-bar-h, 52px) + var(--cats-bar-h, 44px)) !important;
    z-index: 44 !important;
    /* ✅ بدون transform */
    background: var(--dark-2, #131317) !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    min-height: 44px !important;
    border-bottom: 0.5px solid var(--border-2) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #mobileCatsBar2::-webkit-scrollbar { display: none !important; }
  #mobileCatsBar2.hidden { display: none !important; }

  /* Header ثابت */
  #mainHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    height: 60px !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform;
  }

  /* Mobile Nav ثابت في الأسفل */
  .mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform;
    /* ✅ max() لضمان safe-area صحيح */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }

  /* Body padding */
  body {
    padding-top: 60px !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 5. منع تكبير المدخلات عند الضغط (Android/iOS) ─────────── */
@media (max-width: 860px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* إعادة الحجم الأصلي للنص خارج المدخلات */
  .search-box input {
    font-size: 16px !important;
  }
}

/* ── 6. التمرير السلس ───────────────────────────────────────── */
.mobile-cats-bar,
#mobileCatsBar,
#mobileCatsBar2,
.tab-bar,
#mainTabBar,
.messages-wrap,
.settings-body,
.my-stores-list,
.modal,
.store-detail-modal,
.lang-panel,
.auth-modal {
  -webkit-overflow-scrolling: touch !important;
}

/* ── 7. Touch Handling أسرع ─────────────────────────────────── */
button,
a,
[role="button"],
.store-card,
.cat-item,
.tab-btn,
.mobile-cat-chip,
.quick-tag,
.mob-nav-item,
.settings-link,
.theme-toggle-row,
.lang-item,
.act-btn {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ── 8. شبكة البطاقات — منع تجاوز العرض ────────────────────── */
@media (max-width: 480px) {
  #storesGrid,
  #freelanceGrid,
  #socialGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .content-area {
    padding: 10px 10px !important;
    overflow-x: hidden !important;
  }

  .store-card {
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
}

@media (max-width: 340px) {
  #storesGrid,
  #freelanceGrid,
  #socialGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. بطاقة المتجر — إصلاح النص ──────────────────────────── */
.card-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  display: block !important;
  line-height: 1.3 !important;
}

.card-cat-pill {
  max-width: calc(100% - 8px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 1 !important;
}

.card-body {
  overflow: hidden !important;
  min-width: 0 !important;
}

.card-actions {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.card-btn {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
}

/* ── 10. Search Hero — padding صحيح على الموبايل ─────────────── */
/* ✅ على الموبايل: tab-bar و cats-bar موجودان في تدفق الـ DOM فوق search-hero
   لذلك لا نحتاج لـ padding كبير — المسافة تُحسب تلقائياً من الـ flow */
@media (max-width: 860px) {
  .search-hero {
    padding: 16px 14px 14px !important;
  }

  .section-hero {
    padding: 12px 14px 10px !important;
  }

  #tab-social .section-hero {
    padding-top: 12px !important;
  }

  .search-hero h1 {
    font-size: 20px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 4px !important;
  }

  .search-hero p {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .search-box {
    gap: 6px !important;
  }

  .search-box input {
    padding: 11px 12px !important;
  }

  .search-btn {
    padding: 11px 14px !important;
    font-size: 14px !important;
  }

  .quick-tags {
    gap: 6px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .quick-tag {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* ── 11. Mobile Cat Chips ────────────────────────────────────── */
.mobile-cat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 12px !important;
  margin: 0 2px !important;
  background: var(--dark-3) !important;
  border: 0.5px solid var(--border-2) !important;
  border-radius: 20px !important;
  color: var(--text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-cat-chip.active {
  background: var(--gold-dim) !important;
  color: var(--gold) !important;
  border-color: var(--border) !important;
}

.mobile-cat-chip:active {
  transform: scale(0.95) !important;
}

/* ── 12. إصلاح الـ Tab Buttons على الأندرويد ──────────────────── */
@media (max-width: 860px) {
  .tab-btn {
    min-width: 70px !important;
    padding: 10px 6px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--text-3) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  .tab-btn.active {
    color: var(--gold) !important;
    border-bottom-color: var(--gold) !important;
    background: var(--gold-dim) !important;
  }

  .tab-btn span:first-child {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 400px) {
  .tab-btn {
    min-width: 55px !important;
    font-size: 10px !important;
  }
  
  .tab-btn span:last-child {
    font-size: 9px !important;
  }
}

/* ── 13. Mobile Bottom Nav ────────────────────────────────────── */
@media (max-width: 860px) {
  .mobile-nav-inner {
    max-width: 100% !important;
    width: 100% !important;
  }

  .mob-nav-item {
    padding: 5px 2px !important;
    font-size: 9px !important;
    gap: 2px !important;
  }

  .mob-nav-item span:first-child {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
}

/* ── 14. إصلاح اللانج باتش والإعدادات على الأندرويد ────────── */
@media (max-width: 860px) {
  .settings-panel {
    width: 100% !important;
    right: -100% !important;
    max-width: 100% !important;
  }

  .settings-panel.open {
    right: 0 !important;
  }

  .lang-overlay {
    padding-top: 0 !important;
    align-items: flex-end !important;
  }

  .lang-panel {
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .lang-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 15. Modal على الأندرويد ─────────────────────────────────── */
@media (max-width: 860px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal,
  .store-detail-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .auth-modal-overlay {
    align-items: center !important;
    padding: 16px !important;
  }

  .auth-modal {
    border-radius: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* ── 16. Side Panel على الأندرويد ───────────────────────────── */
@media (max-width: 860px) {
  .side-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-radius: 0 !important;
  }
}

/* ── 17. إصلاح الـ Toast ─────────────────────────────────────── */
.jb-toast {
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  font-size: 13px !important;
  white-space: normal !important;
  max-width: calc(100vw - 32px) !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* ── 18. Main Layout على الموبايل ───────────────────────────── */
@media (max-width: 860px) {
  .main-layout {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    display: none !important;
  }

  .content-area {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: 10px 10px !important;
  }
}

/* ── 19. Results Bar ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .results-bar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .results-count {
    font-size: 11px !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .sort-select {
    padding: 6px 8px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    max-width: 100px !important;
  }

  .view-toggle {
    flex-shrink: 0 !important;
  }

  .view-btn {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ── 20. Map Toggle Button ───────────────────────────────────── */
@media (max-width: 860px) {
  .map-toggle-btn {
    font-size: 12px !important;
    padding: 9px !important;
    margin-bottom: 10px !important;
  }

  #map {
    height: 260px !important;
    border-radius: 12px !important;
  }
}

/* ── 21. Mobile Location Bar ─────────────────────────────────── */
@media (max-width: 860px) {
  .mobile-loc-bar {
    display: flex !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .mobile-loc-bar button {
    font-size: 12px !important;
    padding: 8px 12px !important;
    flex: 1 !important;
  }
}

/* ── 22. منع تجاوز النص في أي مكان ──────────────────────────── */
@media (max-width: 860px) {
  * {
    max-width: 100%;
    box-sizing: border-box !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* منع إخفاء الـ scrollbar بشكل يسبب مشاكل */
  ::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
  }
}

/* ── 23. Tab Panes ───────────────────────────────────────────── */
.tab-pane {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ── 24. إصلاح الـ Skeleton على الأندرويد ───────────────────── */
@media (max-width: 480px) {
  .card-skeleton {
    height: 180px !important;
  }

  .card-skeleton-media {
    height: 72px !important;
  }
}

/* ── 25. Quick Tags و Search ─────────────────────────────────── */
@media (max-width: 860px) {
  .quick-tags {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .quick-tags::-webkit-scrollbar {
    display: none !important;
  }

  .quick-tag {
    flex-shrink: 0 !important;
  }
}

/* ── 26. إصلاح الـ Footer على الموبايل ──────────────────────── */
@media (max-width: 480px) {
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-links {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* ── 27. Scroll Sentinel ─────────────────────────────────────── */
#scrollSentinel {
  padding: 20px !important;
  margin-bottom: 10px !important;
}

/* ── 28. تأكيد ظهور العناصر الأساسية ────────────────────────── */
@media (max-width: 860px) {
  #tab-stores.active,
  #tab-freelance.active,
  #tab-social.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-nav {
    display: block !important;
    visibility: visible !important;
  }
}

/* ── 29. Light Theme Fixes على الأندرويد ────────────────────── */
body[data-theme="light"] {
  #mobileCatsBar,
  #mobileCatsBar2,
  #mainTabBar {
    background: var(--t-bg2, #ECEAE3) !important;
  }

  .mobile-nav {
    background: rgba(245, 243, 238, 0.98) !important;
  }
}

/* ── 30. Fix أزرار إجراءات البطاقة على الشاشات الصغيرة ─────── */
@media (max-width: 380px) {
  .card-btn {
    font-size: 10px !important;
    padding: 7px 4px !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }

  .card-btn-map {
    padding: 7px 7px !important;
    flex: 0 0 auto !important;
  }

  .card-body {
    padding: 8px 8px !important;
    gap: 5px !important;
  }

  .card-media {
    height: 68px !important;
  }

  .card-name {
    font-size: 12px !important;
  }
}