/* Instant navigation skeletons + tap/submit feedback — public/js/nav-skeleton.js (owner 2026-11-02 «زي الفيسبوك … shimmer»).
   One shimmer for every skeleton in the app: page-to-page (.dxs), in-page loads (DXSkel.html) and the feed's infinite scroll (.sk).
   The sweep is a transformed pseudo-element (compositor only — smooth on low-end Android web views), right-to-left in Arabic. */
:root {
  --dxs-bg: var(--dx-bg, #f2f5fa);
  --dxs-card: #fff;
  --dxs-line: #e3e9f2;
  --dxs-base: #e7ecf3;
  --dxs-hi: rgba(255, 255, 255, .75);
  --dxs-accent: var(--dx-accent, #0b6fe0);
}
body.dx-front { --dxs-bg: #f1f4f9; }
[data-bs-theme=dark] { --dxs-bg: #10151d; --dxs-card: #181f2a; --dxs-line: #263041; --dxs-base: #222b38; --dxs-hi: rgba(255, 255, 255, .07); }

/* the page underneath stays in place (scroll, bfcache) — only hidden */
.dxs-hide { visibility: hidden !important; }
.dxs-hide * { animation-play-state: paused !important; }

.dxs { position: fixed; z-index: 1028; overflow: hidden; background: var(--dxs-bg); pointer-events: none; animation: dxs-in .12s ease-out both; }
.dxs-in { max-width: 1180px; margin: 0 auto; padding: 1rem clamp(.75rem, 2.4vw, 1.5rem) 2rem; }
body.dx-front .dxs-in { max-width: 720px; padding-inline: clamp(.5rem, 2vw, 1rem); }
body.dx-front .dxs-t-grid .dxs-in, body.dx-front .dxs-t-map .dxs-in, body.dx-front .dxs-t-detail .dxs-in, body.dx-front .dxs-t-dash .dxs-in { max-width: 1180px; }
.dxs-inline { padding: .25rem 0; }
@keyframes dxs-in { from { opacity: 0; } to { opacity: 1; } }

/* blocks */
.dxs-b, .sk { display: block; position: relative; overflow: hidden; background: var(--dxs-base); border-radius: 7px; }
.dxs-b::after, .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0, var(--dxs-hi) 50%, transparent 100%); animation: dxs-sweep 1.25s ease-in-out infinite; }
[dir=rtl] .dxs-b::after, [dir=rtl] .sk::after { animation-name: dxs-sweep-rtl; }
@keyframes dxs-sweep { to { transform: translateX(100%); } }
@keyframes dxs-sweep-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.sk { background-image: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .dxs { animation: none; }
  .dxs-b::after, .sk::after { animation: none; display: none; }
  .dxs-b, .sk { animation: dxs-pulse 2s ease-in-out infinite; }
}
@keyframes dxs-pulse { 50% { opacity: .62; } }

.dxs-l { height: 11px; margin-bottom: .55rem; max-width: 100%; }
.dxs-l.dxs-h { height: 17px; margin-bottom: .7rem; }
.dxs-card { background: var(--dxs-card); border: 1px solid var(--dxs-line); border-radius: 16px; padding: 1rem; margin-bottom: .9rem; }
.dxs-card.dxs-flush { padding: 0; overflow: hidden; }
.dxs-row { display: flex; align-items: center; gap: .75rem; }
.dxs-col { display: flex; flex-direction: column; }
.dxs-grow { flex: 1 1 auto; min-width: 0; }
.dxs-row .dxs-l:last-child { margin-bottom: 0; }
.dxs-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; }
.dxs-av.dxs-sm { width: 34px; height: 34px; }
.dxs-av.dxs-xl { width: 96px; height: 96px; border: 4px solid var(--dxs-card); margin-top: -48px; }
.dxs-sq { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; align-self: flex-start; }
.dxs-media { height: clamp(140px, 30vw, 220px); border-radius: 12px; margin: .4rem 0 .2rem; }
.dxs-media.dxs-tall { height: clamp(180px, 38vw, 320px); margin: .6rem 0 1rem; }
.dxs-acts { margin-top: .8rem; gap: .6rem; }
.dxs-pill { flex: 0 0 auto; width: 64px; height: 26px; border-radius: 999px; }
.dxs-chip { flex: 0 0 auto; width: 84px; height: 30px; border-radius: 999px; }
.dxs-chips { gap: .5rem; margin-bottom: 1rem; overflow: hidden; }
.dxs-field { flex: 1 1 0; min-width: 90px; height: 38px; border-radius: 10px; }
.dxs-fg .dxs-field { width: 100%; }
.dxs-field.dxs-area { height: 92px; }
.dxs-btn { flex: 0 0 auto; width: 110px; height: 38px; border-radius: 10px; }
.dxs-btn.dxs-wide { width: 100%; max-width: 260px; margin-top: .5rem; }
.dxs-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.dxs-li { padding: .8rem 1rem; border-bottom: 1px solid var(--dxs-line); }
.dxs-li:last-child { border-bottom: 0; }
.dxs-card .dxs-li { padding-inline: 1rem; }
.dxs-side .dxs-li { padding-inline: 0; }
.dxs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.dxs-tile { padding: .6rem; margin: 0; }
.dxs-img { aspect-ratio: 1 / 1; border-radius: 10px; margin-bottom: .6rem; }
.dxs-price { height: 15px; }
.dxs-split { display: flex; gap: 1rem; align-items: flex-start; }
.dxs-side { flex: 0 0 320px; }
@media (max-width: 991.98px) { .dxs-split { flex-direction: column; align-items: stretch; } .dxs-side { flex-basis: auto; } }
.dxs-cover { height: clamp(110px, 22vw, 180px); border-radius: 0; }
.dxs-prof { display: flex; align-items: flex-end; gap: 1rem; padding: 0 1rem .8rem; }
.dxs-tabs { gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--dxs-line); overflow: hidden; }
.dxs-form { max-width: 760px; }
.dxs-fg { margin-bottom: 1rem; }
.dxs-fg .dxs-l { margin-bottom: .45rem; }
.dxs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: .2rem; }
@media (max-width: 767.98px) { .dxs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dxs-stat { margin-bottom: .75rem; }
.dxs-stat .dxs-av { margin-bottom: .7rem; }
.dxs-chart { height: clamp(160px, 28vw, 260px); border-radius: 12px; }
.dxs-mapbox { height: calc(100vh - 220px); min-height: 260px; border-radius: 16px; }

/* the tapped item: pressed the instant a finger lands, accent while its page loads */
.dxs-press { transition: transform .08s ease, opacity .08s ease; }
a.dxs-press, .btn.dxs-press, button.dxs-press { opacity: .78; }
.btn.dxs-press, .dx-bn-item.dxs-press, .fx-chip.dxs-press, .fx-ic.dxs-press { transform: scale(.97); }
a.dxs-tap:not(.btn) { color: var(--dxs-accent) !important; }
.dx-bn-item.dxs-tap .bi, .fx-nav-i.dxs-tap .bi { color: var(--dxs-accent) !important; }

/* submit button while the form is on its way: spinner, no second tap */
.dxs-busy { pointer-events: none !important; cursor: progress; opacity: .85; }
.dxs-busy::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.16em; margin-inline-end: .45em;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: dxs-spin .7s linear infinite; }
@keyframes dxs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dxs-busy::before { animation-duration: 1.6s; } .btn.dxs-press, .dx-bn-item.dxs-press { transform: none; } }
@media print { .dxs { display: none !important; } .dxs-hide { visibility: visible !important; } }