/* ═══════════════════════════════════════════════════════════════════
   pwa-app.css — Native-style mobile-app skin.

   EVERYTHING here is scoped under html.pwa-standalone, so it applies ONLY
   when the site is launched as an installed PWA (home-screen app).
   Desktop browsers and normal mobile browsers are completely unaffected —
   same routes, same EJS, same DB, only the presentation changes.

   Uses the existing design tokens from main.css (var(--primary) etc.).
   ═══════════════════════════════════════════════════════════════════ */

/* Bottom nav & FAB exist in the DOM on every page but are hidden until
   the app is installed/standalone. */
.pwa-bottomnav { display: none; }
.pwa-progress  { display: none; }

html.pwa-standalone {
  /* Convenience vars for safe areas (notch / Dynamic Island / Android bars) */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --appbar-h: 54px;
  --bottomnav-h: 60px;
}

/* ─── Global feel ──────────────────────────────────────────────────── */
html.pwa-standalone,
html.pwa-standalone body {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
/* overscroll-behavior-y: contain on BOTH html and body (rather than just
   one) is a known trigger for scroll-chaining bugs on some Android
   Chrome/WebView versions — the page can end up completely unable to
   scroll. Apply it once, on html only. */
html.pwa-standalone {
  overscroll-behavior-y: contain;   /* stops the rubber-band showing browser bg */
}
html.pwa-standalone body {
  background: var(--bg);
  /* Leave room for the fixed app bar (top) and bottom nav (bottom). */
  padding-bottom: calc(var(--bottomnav-h) + var(--sa-bottom));
}
html.pwa-standalone * { scrollbar-width: none; }
html.pwa-standalone *::-webkit-scrollbar { display: none; }

/* Slightly larger, app-sized base type */
html.pwa-standalone main { font-size: 15.5px; }

/* ─── Top app bar (reuse existing .navbar, slim it down) ───────────── */
html.pwa-standalone .navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  padding-top: var(--sa-top);           /* clear the notch / status bar */
}
html.pwa-standalone .navbar-inner {
  min-height: var(--appbar-h);
  display: flex;
  align-items: center;
  justify-content: center;              /* logo centred, app-style */
  gap: 8px;
  padding-inline-start: calc(12px + var(--sa-left));
  /* Reserve room matching the absolutely-positioned nav-more button below —
     otherwise the centered logo runs under it on narrow phones (it doesn't
     participate in flex layout, so nothing pushes the logo away). */
  padding-inline-end: calc(52px + var(--sa-right));
}
html.pwa-standalone .site-logo-img { height: 30px; width: auto; }

/* The desktop nav lives in the bottom bar now — hide top links + hamburger,
   and hide the normal desktop lang-toggle/user-menu (both folded into the
   single nav-more dropdown below). */
html.pwa-standalone .nav-links,
html.pwa-standalone .hamburger,
html.pwa-standalone .mobile-menu,
html.pwa-standalone .lang-toggle-desktop,
html.pwa-standalone .user-menu,
html.pwa-standalone .nav-actions .btn { display: none !important; }

html.pwa-standalone .nav-actions {
  position: absolute;
  inset-inline-end: calc(10px + var(--sa-right));
}

/* "More" menu — Profile/Login, About Us, and Language all live here in
   standalone mode: the bottom tab bar's Account slot was replaced by
   Marketplace, and the hamburger/mobile-menu (which normally hold these)
   is hidden. */
.nav-more { display: none; position: relative; }
html.pwa-standalone .nav-more { display: block; }
.nav-more-btn {
  width: 32px; height: 32px; border: none; background: transparent;
  color: var(--gray-500); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-more-dropdown {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); min-width: 190px; padding: 6px 0; z-index: 210;
}
.nav-more-lang { display: flex; gap: 6px; padding: 6px 12px; }
.nav-more-lang .lang-toggle-btn { flex: 1; padding: 6px 8px; font-size: 11px; border-radius: 8px; }

/* Native apps don't show the marketing footer */
html.pwa-standalone .footer { display: none !important; }

/* ─── Page transitions (fade + slight rise) ───────────────────────── */
@keyframes pwaPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.pwa-standalone main {
  animation: pwaPageIn .28s ease;
  /* No "forwards"/"both" fill-mode and no will-change here: per spec, any
     element with a computed transform other than "none" — including one
     left behind by animation-fill-mode after the animation ends — becomes
     the containing block for descendant position:fixed elements (drawers,
     modals, backdrops), confining them to <main>'s box instead of the
     real viewport. That's what turned the mobile filter drawer into a
     broken gray overlay on iOS standalone mode: main kept transform:
     translateY(0) applied forever after its one-time load animation. */
}
@media (prefers-reduced-motion: reduce) {
  html.pwa-standalone main { animation: none; }
}

/* ─── Top loading bar (shown during navigation) ───────────────────── */
html.pwa-standalone .pwa-progress {
  display: block;
  position: fixed;
  top: 0; inset-inline: 0;
  height: 3px;
  z-index: 400;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
html.pwa-standalone .pwa-progress.active { opacity: 1; }
html.pwa-standalone .pwa-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  transition: width .3s ease;
}
html.pwa-standalone .pwa-progress.active::before { width: var(--pwa-progress, 80%); }

/* ─── Pull-to-refresh spinner ─────────────────────────────────────── */
html.pwa-standalone .pwa-ptr {
  position: fixed;
  top: calc(var(--sa-top) + 6px);
  inset-inline: 0;
  margin: auto;
  width: 34px; height: 34px;
  z-index: 350;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-10px) scale(.8);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
html.pwa-standalone .pwa-ptr.visible { opacity: 1; transform: translateY(0) scale(1); }
html.pwa-standalone .pwa-ptr i { color: var(--primary); font-size: 16px; }
html.pwa-standalone .pwa-ptr.spin i { animation: pwaSpin .7s linear infinite; }
@keyframes pwaSpin { to { transform: rotate(360deg); } }

/* ─── Bottom navigation bar ───────────────────────────────────────── */
html.pwa-standalone .pwa-bottomnav {
  display: flex;
  position: fixed;
  bottom: 0; inset-inline: 0;
  z-index: 300;
  height: calc(var(--bottomnav-h) + var(--sa-bottom));
  padding-bottom: var(--sa-bottom);     /* respect Android/iOS home indicator */
  padding-inline: max(4px, var(--sa-left)) max(4px, var(--sa-right));
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}
html.pwa-standalone .pwa-tab {
  flex: 1;
  min-width: 44px;                       /* touch target */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  position: relative;
  overflow: hidden;                      /* contain ripple */
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
html.pwa-standalone .pwa-tab i { font-size: 20px; line-height: 1; }
html.pwa-standalone .pwa-tab.active { color: var(--primary); }
html.pwa-standalone .pwa-tab.active::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

/* Center Floating Action Button */
html.pwa-standalone .pwa-fab {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  margin-top: -22px;                     /* lift above the bar */
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(46,118,255,.45);
  gap: 0;
}
html.pwa-standalone .pwa-fab i { font-size: 24px; }
html.pwa-standalone .pwa-fab.active::after { display: none; }
html.pwa-standalone .pwa-fab span { display: none; }

/* ─── Bigger touch targets + rounder controls ─────────────────────── */
html.pwa-standalone .btn {
  min-height: 46px;
  border-radius: 14px;
  font-size: 15px;
}
html.pwa-standalone .btn-sm { min-height: 40px; }
html.pwa-standalone a,
html.pwa-standalone button { -webkit-tap-highlight-color: transparent; }

/* Rounded, elevated cards for the app look (broad, safe selectors) */
html.pwa-standalone .ad-h-card,
html.pwa-standalone .ad-card,
html.pwa-standalone .cat-card,
html.pwa-standalone .category-card,
html.pwa-standalone .card,
html.pwa-standalone .contact-info-card,
html.pwa-standalone .contact-form-card,
html.pwa-standalone .install-card {
  border-radius: 18px;
}

/* ─── Ripple (press) effect ───────────────────────────────────────── */
html.pwa-standalone .btn,
html.pwa-standalone .pwa-tab { position: relative; overflow: hidden; }
html.pwa-standalone .pwa-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.5);
  animation: pwaRipple .55s ease-out;
  pointer-events: none;
}
html.pwa-standalone .pwa-tab .pwa-ripple { background: rgba(46,118,255,.18); }
@keyframes pwaRipple { to { transform: scale(2.4); opacity: 0; } }

/* ─── Sticky submit buttons on forms ──────────────────────────────── */
html.pwa-standalone .contact-form .btn[type="submit"],
html.pwa-standalone form .btn-lg[type="submit"] {
  position: sticky;
  bottom: calc(var(--bottomnav-h) + var(--sa-bottom) + 10px);
  z-index: 5;
}

/* ─── Skeleton loader utility (for dynamic content) ───────────────── */
html.pwa-standalone .skeleton {
  position: relative;
  overflow: hidden;
  background: var(--gray-200);
  border-radius: 10px;
  color: transparent !important;
}
html.pwa-standalone .skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: pwaShimmer 1.2s infinite;
}
@keyframes pwaShimmer { to { transform: translateX(100%); } }

/* ─── Keep floating WhatsApp clear of the bottom nav ──────────────── */
html.pwa-standalone .float-wa {
  bottom: calc(var(--bottomnav-h) + var(--sa-bottom) + 14px);
}

/* ─── Branded launch splash ────────────────────────────────────────── */
.pwa-splash {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  background: linear-gradient(160deg, #1F5FE0, #2E76FF 55%, #1a4fc4);
  opacity: 1; transition: opacity .35s ease;
  overflow: hidden;
}
.pwa-splash.show { display: flex; }
.pwa-splash.fade { opacity: 0; }

.pwa-splash-glow {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  animation: pwaGlowPulse 2.6s ease-in-out infinite;
}

.pwa-splash-badge {
  width: 84px; height: 84px; border-radius: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 30px rgba(10,30,80,.35);
  display: flex; align-items: center; justify-content: center;
  animation: pwaSplashPop .5s cubic-bezier(.2,.9,.3,1.3) both;
}
.pwa-splash-badge img { width: 60px; height: 60px; border-radius: 14px; }

.pwa-splash-word {
  display: flex; align-items: baseline; gap: 8px;
  animation: pwaSplashFadeUp .5s ease-out .1s both;
}
.pwa-splash-word-ar { font-size: 20px; font-weight: 800; color: #fff; }
.pwa-splash-word-en { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.75); }

.pwa-splash-tagline {
  margin: 0; font-size: 13px; color: rgba(255,255,255,.65); font-weight: 600;
  animation: pwaSplashFadeUp .5s ease-out .18s both;
}

.pwa-splash-progress {
  width: 120px; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.2); margin-top: 14px;
}
.pwa-splash-progress span {
  display: block; width: 40%; height: 100%; border-radius: 4px;
  background: #fff; animation: pwaProgressSlide 1.1s ease-in-out infinite;
}
.pwa-splash-loading-text { margin: 6px 0 0; font-size: 12px; color: rgba(255,255,255,.55); font-weight: 600; }

@keyframes pwaGlowPulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes pwaSplashPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pwaSplashFadeUp { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pwaProgressSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }