/* ==============================================
   Dida Shop - Performance & UX Polish (Optimized)
   ============================================== */

img { max-width: 100%; height: auto; }
img[loading="lazy"] {
    background: #f3f3f3;
    background-image: linear-gradient(90deg,#f3f3f3 0%,#f8f8f8 50%,#f3f3f3 100%);
    background-size: 200% 100%;
    animation: img-shimmer 1.4s ease-in-out infinite;
}
img.loaded, img:not([loading]) { animation: none; background: transparent; }
@keyframes img-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

body {
    font-display: swap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Touch targets — Apple HIG 44px+ */
@media (max-width: 768px) {
    .btn, .nav-link, .dropdown-item, a.text-muted, a.text-white-50 { min-height: 44px; }
    .nav-link, .dropdown-item { display: flex; align-items: center; }
}

/* WhatsApp Float — pulse animation only (positioning lives in style.css) */
.whatsapp-float::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: #25d366; opacity: .4;
    animation: wa-pulse 2s ease-out infinite; z-index: -1;
}
@keyframes wa-pulse { 0%{transform:scale(1);opacity:.4} 100%{transform:scale(1.6);opacity:0} }

.product-card, .product-card-wrap { transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover, .product-card-wrap:hover { transform: translateY(-4px); }

/* A11y focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--brand-color); outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* contrast fix — text-muted على bg-white الافتراضي يكون low contrast */
.text-muted { color: #5a6268 !important; }
.text-white-50 { color: rgba(255,255,255,.78) !important; }

/* Sticky add to cart mobile — positioning lives in style.css to avoid conflict with mobile-bottom-nav */
@media (max-width: 767px) {
    body.has-sticky-cart { padding-bottom: 128px; }
}

@media print {
    .whatsapp-float, .top-bar, .announcement-bar, .sticky-add-cart-mobile, nav, footer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .whatsapp-float::before { animation: none !important; }
}

/* CLS guards */
/* ⚠️ تم إزالة aspect-ratio:16/7 على .hero-slider/.carousel-item img لأنه كان
   يتعارض مع height:440px في style.css → فراغ تحت السلايدر/قص سيء.
   الـ height الثابت + object-fit:cover (في style.css) كافيان لمنع CLS. */
.carousel-item img { object-fit: cover; }
.category-img-wrap { aspect-ratio: 1/1; overflow: hidden; }
.category-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.review-img-wrap { aspect-ratio: 1/1; overflow: hidden; }
.review-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* تقليل DOM heavy reflow في الـ carousel */
.carousel-item { contain: layout paint; }

/* ============ Mobile Bottom Navigation (Jumia/Noon-style) ============ */
.mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    z-index: 1040;
    padding: 6px 4px env(safe-area-inset-bottom);
}
.mobile-bottom-nav .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #374151;
    text-decoration: none;
    font-size: 11px;
    padding: 6px 4px;
    border-radius: 8px;
    transition: .2s;
    position: relative;
}
.mobile-bottom-nav .mbn-item i { font-size: 20px; }
.mobile-bottom-nav .mbn-item:hover,
.mobile-bottom-nav .mbn-item:active { color: var(--brand-color, #e91e63); background: #f9fafb; }
.mobile-bottom-nav .mbn-item.active {
    color: var(--brand-color, #e91e63);
    font-weight: 700;
}
.mobile-bottom-nav .mbn-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--brand-color, #e91e63);
    border-radius: 0 0 6px 6px;
}
.mobile-bottom-nav .mbn-whatsapp { color: #25D366; }
.mbn-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(20px);
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-weight: 700;
    line-height: 1;
}
@media (max-width: 767.98px) {
    body { padding-bottom: 64px; }
    body.has-sticky-cart { padding-bottom: 128px; } /* sticky add to cart + bottom nav */
}