/**
 * DXN Platform - Bottom Navigation & Floating Cart CSS
 * File: assets/css/dxn-bottom-nav.css
 * Version: 2.3.1
 *
 * تصميم احترافي للشريط السفلي الثابت للعميل والعضو، مع زر السلة العائم.
 * ملاحظات مهمة:
 * - لا يغيّر أي مسارات أو slugs أو shortcodes.
 * - يحافظ على أسماء الكلاسات الحالية حتى يبقى متوافقًا مع ملفات PHP/JS.
 * - متناسق مع الهوية الجديدة: خط أوضح، أيقونات أكبر، ولمسة أسود/ذهبي مع أخضر DXN.
 */

/* =========================
   01. أساس عام
========================= */

.dxn-bottom-nav,
.dxn-bottom-nav *,
.dxn-bottom-nav *::before,
.dxn-bottom-nav *::after,
.dxn-floating-cart,
.dxn-floating-cart *,
.dxn-floating-cart *::before,
.dxn-floating-cart *::after {
    box-sizing: border-box;
}

:root {
    --dxn-bottom-font: "Tajawal", "Cairo", "Arial", "Tahoma", sans-serif;

    --dxn-bottom-green: #0b8f3c;
    --dxn-bottom-green-2: #16a34a;
    --dxn-bottom-green-3: #065f2b;
    --dxn-bottom-blue: #0284c7;
    --dxn-bottom-red: #ef4444;

    --dxn-bottom-gold: #d8b661;
    --dxn-bottom-gold-2: #f4df9a;
    --dxn-bottom-gold-3: #9c7327;
    --dxn-bottom-black: #050505;
    --dxn-bottom-black-2: #10100d;
    --dxn-bottom-black-3: #1a1710;

    --dxn-bottom-dark: #0f172a;
    --dxn-bottom-text: #243b35;
    --dxn-bottom-muted: #64748b;
    --dxn-bottom-line: rgba(11, 143, 60, 0.16);
    --dxn-bottom-white: #ffffff;

    --dxn-bottom-radius-bar: 26px 26px 18px 18px;
    --dxn-bottom-radius-item: 19px;
    --dxn-bottom-radius-icon: 15px;

    --dxn-bottom-shadow: 0 -16px 42px rgba(15, 23, 42, 0.16);
    --dxn-bottom-gold-shadow: 0 -18px 46px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(216, 182, 97, 0.16);
    --dxn-bottom-soft-shadow: 0 16px 38px rgba(11, 143, 60, 0.24);
}

/* مساحة احتياطية حتى لا يغطي الشريط السفلي محتوى الصفحة */
@supports selector(body:has(.dxn-bottom-nav)) {
    body:has(.dxn-bottom-nav) {
        padding-bottom: env(safe-area-inset-bottom);
    }

    body:not(:has(.dxn-bottom-nav)) {
        padding-bottom: 0;
    }
}

/* إخفاء قسري عند تمرير hidden أو aria-hidden */
.dxn-bottom-nav[hidden],
.dxn-floating-cart[hidden],
.dxn-bottom-nav[aria-hidden="true"],
.dxn-floating-cart[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================
   02. الشريط السفلي العام
========================= */

.dxn-bottom-nav {
    direction: rtl;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99980;
    display: flex;
    justify-content: center;
    padding: 0 10px calc(9px + env(safe-area-inset-bottom));
    pointer-events: none;
    font-family: var(--dxn-bottom-font);
    background: transparent !important;
}

.dxn-bottom-nav__bar {
    width: min(100%, 740px);
    min-height: 78px;
    display: grid;
    align-items: center;
    gap: 7px;
    padding: 9px;
    border-radius: var(--dxn-bottom-radius-bar);
    background:
        radial-gradient(circle at 16% 0%, rgba(244, 223, 154, 0.18), transparent 38%),
        radial-gradient(circle at 84% 12%, rgba(22, 163, 74, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 255, 251, 0.94));
    border: 1px solid rgba(11, 143, 60, 0.18);
    box-shadow: var(--dxn-bottom-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
    overflow: hidden;
}

/* عند استخدام التصميم الأسود/الذهبي العام، يعطي هذا الملف شكلًا متناسقًا بدون تغيير الكلاسات */
.dxn-platform .dxn-bottom-nav__bar,
.dxn-page .dxn-bottom-nav__bar,
.dxn-category-page .dxn-bottom-nav__bar,
.dxn-member-page .dxn-bottom-nav__bar,
.dxn-admin-page .dxn-bottom-nav__bar,
body.dxn-black-gold .dxn-bottom-nav__bar,
.dxn-black-gold .dxn-bottom-nav__bar,
.dxn-theme-black-gold .dxn-bottom-nav__bar {
    background:
        radial-gradient(circle at 12% 0%, rgba(244, 223, 154, 0.18), transparent 36%),
        radial-gradient(circle at 86% 20%, rgba(11, 143, 60, 0.16), transparent 40%),
        linear-gradient(145deg, rgba(5, 5, 5, 0.96), rgba(26, 23, 16, 0.94));
    border-color: rgba(216, 182, 97, 0.34);
    box-shadow: var(--dxn-bottom-gold-shadow);
}

.dxn-bottom-nav--items-4 .dxn-bottom-nav__bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dxn-bottom-nav--items-5 .dxn-bottom-nav__bar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* =========================
   03. أزرار الشريط السفلي
========================= */

.dxn-bottom-nav__item {
    position: relative;
    min-width: 0;
    min-height: 60px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 7px 4px 6px;
    border-radius: var(--dxn-bottom-radius-item);
    color: var(--dxn-bottom-muted);
    text-decoration: none !important;
    border: 1px solid transparent;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.dxn-platform .dxn-bottom-nav__item,
.dxn-page .dxn-bottom-nav__item,
.dxn-category-page .dxn-bottom-nav__item,
.dxn-member-page .dxn-bottom-nav__item,
.dxn-admin-page .dxn-bottom-nav__item,
body.dxn-black-gold .dxn-bottom-nav__item,
.dxn-black-gold .dxn-bottom-nav__item,
.dxn-theme-black-gold .dxn-bottom-nav__item {
    color: #f1dfad;
}

.dxn-bottom-nav__item:hover,
.dxn-bottom-nav__item:focus,
.dxn-bottom-nav__item:focus-visible {
    outline: none;
    transform: translateY(-2px);
    color: var(--dxn-bottom-green-3);
    background: rgba(11, 143, 60, 0.08);
    border-color: rgba(11, 143, 60, 0.14);
}

.dxn-platform .dxn-bottom-nav__item:hover,
.dxn-platform .dxn-bottom-nav__item:focus,
.dxn-page .dxn-bottom-nav__item:hover,
.dxn-page .dxn-bottom-nav__item:focus,
.dxn-category-page .dxn-bottom-nav__item:hover,
.dxn-member-page .dxn-bottom-nav__item:hover,
.dxn-admin-page .dxn-bottom-nav__item:hover,
body.dxn-black-gold .dxn-bottom-nav__item:hover,
.dxn-black-gold .dxn-bottom-nav__item:hover,
.dxn-theme-black-gold .dxn-bottom-nav__item:hover {
    color: #fff3c7;
    background: rgba(216, 182, 97, 0.10);
    border-color: rgba(216, 182, 97, 0.22);
}

.dxn-bottom-nav__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--dxn-bottom-radius-icon);
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--dxn-bottom-green-3);
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.dxn-platform .dxn-bottom-nav__icon,
.dxn-page .dxn-bottom-nav__icon,
.dxn-category-page .dxn-bottom-nav__icon,
.dxn-member-page .dxn-bottom-nav__icon,
.dxn-admin-page .dxn-bottom-nav__icon,
body.dxn-black-gold .dxn-bottom-nav__icon,
.dxn-black-gold .dxn-bottom-nav__icon,
.dxn-theme-black-gold .dxn-bottom-nav__icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(216, 182, 97, 0.08));
    border-color: rgba(216, 182, 97, 0.22);
    color: #f4df9a;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.dxn-bottom-nav__label {
    display: block;
    max-width: 100%;
    color: inherit;
    font-size: 11.5px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   04. الزر النشط
========================= */

.dxn-bottom-nav__item.is-active {
    color: var(--dxn-bottom-green-3);
    background:
        radial-gradient(circle at top, rgba(34, 197, 94, 0.13), transparent 58%),
        linear-gradient(180deg, #f3fff7 0%, #eafff1 100%);
    border-color: rgba(11, 143, 60, 0.16);
    box-shadow: 0 13px 24px rgba(11, 143, 60, 0.13);
}

.dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon {
    color: #fff;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.25), transparent 45%),
        linear-gradient(135deg, var(--dxn-bottom-green), var(--dxn-bottom-green-2));
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 24px rgba(11, 143, 60, 0.28);
    transform: translateY(-1px);
}

.dxn-platform .dxn-bottom-nav__item.is-active,
.dxn-page .dxn-bottom-nav__item.is-active,
.dxn-category-page .dxn-bottom-nav__item.is-active,
.dxn-member-page .dxn-bottom-nav__item.is-active,
.dxn-admin-page .dxn-bottom-nav__item.is-active,
body.dxn-black-gold .dxn-bottom-nav__item.is-active,
.dxn-black-gold .dxn-bottom-nav__item.is-active,
.dxn-theme-black-gold .dxn-bottom-nav__item.is-active {
    color: #fff3c7;
    background:
        radial-gradient(circle at top, rgba(244, 223, 154, 0.22), transparent 58%),
        linear-gradient(180deg, rgba(216, 182, 97, 0.16), rgba(11, 143, 60, 0.13));
    border-color: rgba(244, 223, 154, 0.30);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}

.dxn-platform .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
.dxn-page .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
.dxn-category-page .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
.dxn-member-page .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
.dxn-admin-page .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
body.dxn-black-gold .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
.dxn-black-gold .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon,
.dxn-theme-black-gold .dxn-bottom-nav__item.is-active .dxn-bottom-nav__icon {
    color: #151009;
    background: linear-gradient(135deg, #9c7327, #f4df9a 52%, #b88730);
    border-color: rgba(244, 223, 154, 0.48);
    box-shadow: 0 13px 26px rgba(216, 182, 97, 0.28);
}

.dxn-bottom-nav__item.is-active::before {
    content: "";
    position: absolute;
    top: 4px;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dxn-bottom-green), var(--dxn-bottom-green-2));
}

.dxn-platform .dxn-bottom-nav__item.is-active::before,
.dxn-page .dxn-bottom-nav__item.is-active::before,
.dxn-category-page .dxn-bottom-nav__item.is-active::before,
.dxn-member-page .dxn-bottom-nav__item.is-active::before,
.dxn-admin-page .dxn-bottom-nav__item.is-active::before,
body.dxn-black-gold .dxn-bottom-nav__item.is-active::before,
.dxn-black-gold .dxn-bottom-nav__item.is-active::before,
.dxn-theme-black-gold .dxn-bottom-nav__item.is-active::before {
    background: linear-gradient(90deg, #9c7327, #f4df9a, #b88730);
}

/* =========================
   05. شريط العضو
========================= */

.dxn-bottom-nav--member .dxn-bottom-nav__bar {
    width: min(100%, 800px);
}

.dxn-bottom-nav--member .dxn-bottom-nav__item--supply.is-active .dxn-bottom-nav__icon,
.dxn-bottom-nav--member .dxn-bottom-nav__item--supply:hover .dxn-bottom-nav__icon {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 44%),
        linear-gradient(135deg, #047857, #22c55e);
    color: #fff;
}

/* إبقاء تبويب مستودع الشركة واضحًا حتى مع 5 أزرار */
.dxn-bottom-nav--member .dxn-bottom-nav__item--supply .dxn-bottom-nav__label {
    font-size: 10.7px;
    letter-spacing: -0.45px;
}

/* =========================
   06. زر السلة العائم
========================= */

.dxn-floating-cart {
    direction: rtl;
    position: fixed;
    bottom: calc(104px + env(safe-area-inset-bottom));
    left: 14px;
    z-index: 99990;
    font-family: var(--dxn-bottom-font);
}

.dxn-floating-cart__link {
    position: relative;
    min-width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border-radius: 23px;
    color: #fff !important;
    text-decoration: none !important;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 42%),
        linear-gradient(135deg, var(--dxn-bottom-green), var(--dxn-bottom-green-2));
    box-shadow: var(--dxn-bottom-soft-shadow);
    border: 1px solid rgba(255, 255, 255, 0.24);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.dxn-floating-cart__link:hover,
.dxn-floating-cart__link:focus,
.dxn-floating-cart__link:focus-visible {
    outline: none;
    transform: translateY(-3px);
    filter: brightness(1.03);
    box-shadow: 0 20px 42px rgba(11, 143, 60, 0.32);
}

.dxn-floating-cart__icon {
    font-size: 28px;
    line-height: 1;
}

.dxn-floating-cart__count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--dxn-bottom-red);
    border: 2px solid #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 9px 18px rgba(239, 68, 68, 0.30);
}

.dxn-floating-cart__label {
    position: absolute;
    left: 72px;
    top: 50%;
    transform: translateY(-50%);
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--dxn-bottom-green-3);
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(11, 143, 60, 0.16);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    font-size: 12.5px;
    font-weight: 950;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.dxn-floating-cart__link:hover .dxn-floating-cart__label,
.dxn-floating-cart__link:focus .dxn-floating-cart__label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-2px);
}

/* إخفاء السلة إذا كانت فارغة اختياريًا */
.dxn-floating-cart[data-cart-count="0"] .dxn-floating-cart__count {
    background: #94a3b8;
}

.dxn-floating-cart[data-cart-count="0"] .dxn-floating-cart__link {
    opacity: 0.92;
}

/* حركة خفيفة عند تحديث السلة */
.dxn-floating-cart.is-updated .dxn-floating-cart__link,
.dxn-bottom-nav.is-updated .dxn-bottom-nav__item--shop .dxn-bottom-nav__icon {
    animation: dxnFloatingCartPulse 0.42s ease;
}

@keyframes dxnFloatingCartPulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

/* =========================
   07. تجاوب الشاشات
========================= */

@media (min-width: 1024px) {
    /* إظهار الشريط السفلي في الكمبيوتر أيضًا مع إبقائه ثابتًا ومتمركزًا. */
    .dxn-bottom-nav {
        display: flex !important;
        visibility: visible !important;
        pointer-events: none !important;
        padding-bottom: 10px;
    }

    .dxn-bottom-nav__bar {
        width: min(100%, 760px);
    }

    .dxn-bottom-nav--member .dxn-bottom-nav__bar {
        width: min(100%, 820px);
    }

    /* السلة العائمة تبقى فوق الشريط عند وجوده. */
    .dxn-floating-cart {
        bottom: calc(104px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 640px) {
    .dxn-bottom-nav {
        padding-right: 8px;
        padding-left: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .dxn-bottom-nav__bar {
        min-height: 76px;
        border-radius: 24px 24px 16px 16px;
        padding: 8px;
        gap: 5px;
    }

    .dxn-bottom-nav__item {
        min-height: 58px;
        border-radius: 17px;
        padding-right: 2px;
        padding-left: 2px;
        gap: 4px;
    }

    .dxn-bottom-nav__icon {
        width: 36px;
        height: 36px;
        border-radius: 14px;
        font-size: 21px;
    }

    .dxn-bottom-nav__label {
        font-size: 11px;
    }

    .dxn-bottom-nav--member .dxn-bottom-nav__label {
        font-size: 10.4px;
    }

    .dxn-bottom-nav--member .dxn-bottom-nav__item--supply .dxn-bottom-nav__label {
        font-size: 9.8px;
        letter-spacing: -0.55px;
    }

    .dxn-floating-cart {
        left: 12px;
        bottom: calc(100px + env(safe-area-inset-bottom));
    }

    .dxn-floating-cart__link {
        min-width: 60px;
        height: 60px;
        border-radius: 22px;
    }

    .dxn-floating-cart__icon {
        font-size: 26px;
    }

    .dxn-floating-cart__label {
        display: none;
    }
}

@media (max-width: 380px) {
    .dxn-bottom-nav {
        padding-right: 6px;
        padding-left: 6px;
    }

    .dxn-bottom-nav__bar {
        min-height: 72px;
        padding: 7px;
        gap: 4px;
    }

    .dxn-bottom-nav__item {
        min-height: 55px;
        gap: 3px;
    }

    .dxn-bottom-nav__icon {
        width: 34px;
        height: 34px;
        border-radius: 13px;
        font-size: 20px;
    }

    .dxn-bottom-nav__label {
        font-size: 10.3px;
        letter-spacing: -0.35px;
    }

    .dxn-bottom-nav--member .dxn-bottom-nav__label {
        font-size: 9.5px;
    }

    .dxn-bottom-nav--member .dxn-bottom-nav__item--supply .dxn-bottom-nav__label {
        font-size: 8.8px;
        letter-spacing: -0.65px;
    }

    .dxn-floating-cart {
        left: 10px;
        bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .dxn-floating-cart__link {
        min-width: 56px;
        height: 56px;
        border-radius: 20px;
    }

    .dxn-floating-cart__icon {
        font-size: 24px;
    }

    .dxn-floating-cart__count {
        min-width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* =========================
   08. تقليل الحركة
========================= */

@media (prefers-reduced-motion: reduce) {
    .dxn-bottom-nav__item,
    .dxn-bottom-nav__icon,
    .dxn-floating-cart__link,
    .dxn-floating-cart__label {
        transition: none;
    }

    .dxn-floating-cart.is-updated .dxn-floating-cart__link,
    .dxn-bottom-nav.is-updated .dxn-bottom-nav__item--shop .dxn-bottom-nav__icon {
        animation: none;
    }
}

/* =========================================================
   09. Reference Bottom Navigation Layout
   Component: templates/components/bottom-nav.php v2.3.0

   المرجع:
   - شريط تطبيق ثابت ومضغوط.
   - أيقونات واضحة فوق النص.
   - زر نشط مرتفع بصريًا.
   - السلة العائمة مستقلة وفوق الشريط.
   - الألوان مأخوذة من متغيرات النظام الأساسية فقط.
========================================================= */

:root {
    --dxn-bottom-reference-bar-height: 82px;
    --dxn-bottom-reference-offset: 98px;
}

/* حجز مساحة للشريط حتى لا يغطي آخر محتوى الصفحة. */
@supports selector(body:has(.dxn-bottom-nav--reference-layout)) {
    @media (max-width: 1023px) {
        body:has(.dxn-bottom-nav--reference-layout) {
            padding-bottom:
                calc(
                    var(--dxn-bottom-reference-offset)
                    + env(safe-area-inset-bottom)
                );
        }
    }
}

.dxn-bottom-nav--reference-layout {
    padding:
        0
        10px
        calc(8px + env(safe-area-inset-bottom));
}

.dxn-bottom-nav--reference-layout .dxn-bottom-nav__bar {
    position: relative;
    isolation: isolate;
    width: min(100%, 690px);
    min-height: var(--dxn-bottom-reference-bar-height);
    gap: 5px;
    padding: 8px;
    border-radius: 25px 25px 17px 17px;
    overflow: visible;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(244, 223, 154, 0.18),
            transparent 36%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(11, 143, 60, 0.16),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(5, 5, 5, 0.97),
            rgba(26, 23, 16, 0.95)
        );
    border: 1px solid rgba(216, 182, 97, 0.34);
    box-shadow:
        0 -17px 44px rgba(0, 0, 0, 0.44),
        0 0 0 1px rgba(216, 182, 97, 0.13) inset;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dxn-bottom-nav--reference-layout .dxn-bottom-nav__bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(244, 223, 154, 0.08),
            transparent
        );
}

/* توزيع ثابت حسب عدد العناصر. */
.dxn-bottom-nav--reference-layout.dxn-bottom-nav--items-4
.dxn-bottom-nav__bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dxn-bottom-nav--reference-layout.dxn-bottom-nav--items-5
.dxn-bottom-nav__bar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* الزر العام. */
.dxn-bottom-nav--reference-layout .dxn-bottom-nav__item {
    min-height: 64px;
    gap: 4px;
    padding: 6px 3px 5px;
    border-radius: 18px;
    color: #f1dfad;
    background: transparent;
    border: 1px solid transparent;
}

.dxn-bottom-nav--reference-layout .dxn-bottom-nav__item:hover,
.dxn-bottom-nav--reference-layout .dxn-bottom-nav__item:focus,
.dxn-bottom-nav--reference-layout .dxn-bottom-nav__item:focus-visible {
    color: #fff3c7;
    background: rgba(216, 182, 97, 0.10);
    border-color: rgba(216, 182, 97, 0.22);
    transform: translateY(-2px);
}

/* صندوق الأيقونة. */
.dxn-bottom-nav--reference-layout .dxn-bottom-nav__icon {
    width: 39px;
    height: 39px;
    border-radius: 15px;
    color: var(--dxn-bottom-gold-2);
    font-size: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(216, 182, 97, 0.08)
        );
    border: 1px solid rgba(216, 182, 97, 0.22);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

/* النص. */
.dxn-bottom-nav--reference-layout .dxn-bottom-nav__label {
    font-size: 11px;
    line-height: 1.2;
    color: inherit;
}

/* الزر النشط كما في تصميم التطبيقات. */
.dxn-bottom-nav--reference-layout .dxn-bottom-nav__item.is-active {
    color: #fff3c7;
    background:
        radial-gradient(
            circle at top,
            rgba(244, 223, 154, 0.22),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(216, 182, 97, 0.16),
            rgba(11, 143, 60, 0.13)
        );
    border-color: rgba(244, 223, 154, 0.30);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(244, 223, 154, 0.08) inset;
    transform: translateY(-4px);
}

.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item.is-active
.dxn-bottom-nav__icon {
    color: #151009;
    background:
        linear-gradient(
            135deg,
            var(--dxn-bottom-gold-3),
            var(--dxn-bottom-gold-2) 52%,
            var(--dxn-bottom-gold)
        );
    border-color: rgba(244, 223, 154, 0.48);
    box-shadow:
        0 13px 26px rgba(216, 182, 97, 0.28),
        0 0 0 2px rgba(255, 255, 255, 0.10) inset;
    transform: translateY(-1px);
}

.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item.is-active::before {
    top: 2px;
    width: 24px;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--dxn-bottom-gold-3),
            var(--dxn-bottom-gold-2),
            var(--dxn-bottom-gold)
        );
}

/* لمسة هوية مستقلة لكل زر دون تغيير لوحة الألوان الأساسية. */
.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item--shop.is-active
.dxn-bottom-nav__icon,
.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item--health.is-active
.dxn-bottom-nav__icon,
.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item--customers.is-active
.dxn-bottom-nav__icon,
.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item--orders.is-active
.dxn-bottom-nav__icon,
.dxn-bottom-nav--reference-layout
.dxn-bottom-nav__item--supply.is-active
.dxn-bottom-nav__icon {
    color: #ffffff;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.24),
            transparent 44%
        ),
        linear-gradient(
            135deg,
            var(--dxn-bottom-green-3),
            var(--dxn-bottom-green-2)
        );
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 13px 26px rgba(11, 143, 60, 0.27);
}

/* شريط العضو: المحافظة على وضوح خمسة أزرار. */
.dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
.dxn-bottom-nav__bar {
    width: min(100%, 800px);
}

.dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
.dxn-bottom-nav__label {
    font-size: 10.2px;
}

.dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
.dxn-bottom-nav__item--supply
.dxn-bottom-nav__label {
    font-size: 9.6px;
    letter-spacing: -0.55px;
}

/* =========================================================
   10. Floating Cart Compatibility
========================================================= */

/*
 * السلة تبقى مستقلة عن الشريط المرجعي وتتحرك فوقه.
 * يستخدم القالب:
 * dxn-bottom-nav--with-floating-cart
 * data-dxn-floating-cart="enabled"
 */
.dxn-bottom-nav--with-floating-cart ~ .dxn-floating-cart,
body:has(.dxn-bottom-nav--with-floating-cart) .dxn-floating-cart {
    bottom:
        calc(
            var(--dxn-bottom-reference-offset)
            + env(safe-area-inset-bottom)
        );
}

/* تصميم السلة بنفس ألوان النظام. */
.dxn-floating-cart {
    left: 14px;
}

.dxn-floating-cart__link {
    min-width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #ffffff !important;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.22),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--dxn-bottom-green-3),
            var(--dxn-bottom-green-2)
        );
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 16px 36px rgba(11, 143, 60, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.dxn-floating-cart__count {
    top: -7px;
    right: -7px;
    border-color: var(--dxn-bottom-black);
}

.dxn-floating-cart__label {
    color: #fff3c7;
    background:
        linear-gradient(
            135deg,
            rgba(5, 5, 5, 0.98),
            rgba(26, 23, 16, 0.96)
        );
    border-color: rgba(216, 182, 97, 0.34);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(216, 182, 97, 0.08) inset;
}

/* =========================================================
   11. Responsive Reference Layout
========================================================= */

@media (min-width: 1024px) {
    @supports selector(body:has(.dxn-bottom-nav--reference-layout)) {
        body:has(.dxn-bottom-nav--reference-layout) {
            padding-bottom:
                calc(
                    var(--dxn-bottom-reference-offset)
                    + env(safe-area-inset-bottom)
                );
        }
    }

    /* في الكمبيوتر يبقى الشريط المرجعي ظاهرًا، والسلة فوقه. */
    .dxn-bottom-nav--reference-layout {
        display: flex !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__bar {
        width: min(100%, 760px);
    }

    .dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
    .dxn-bottom-nav__bar {
        width: min(100%, 820px);
    }

    .dxn-floating-cart {
        bottom:
            calc(
                var(--dxn-bottom-reference-offset)
                + env(safe-area-inset-bottom)
            );
    }
}

@media (max-width: 640px) {
    :root {
        --dxn-bottom-reference-bar-height: 78px;
        --dxn-bottom-reference-offset: 96px;
    }

    .dxn-bottom-nav--reference-layout {
        padding-inline: 8px;
        padding-bottom:
            calc(7px + env(safe-area-inset-bottom));
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__bar {
        min-height: var(--dxn-bottom-reference-bar-height);
        gap: 4px;
        padding: 7px;
        border-radius: 23px 23px 15px 15px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__item {
        min-height: 60px;
        border-radius: 16px;
        gap: 3px;
        padding-inline: 2px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__icon {
        width: 36px;
        height: 36px;
        border-radius: 14px;
        font-size: 21px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__label {
        font-size: 10.7px;
    }

    .dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
    .dxn-bottom-nav__label {
        font-size: 9.7px;
    }

    .dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
    .dxn-bottom-nav__item--supply
    .dxn-bottom-nav__label {
        font-size: 8.9px;
    }

    .dxn-floating-cart {
        left: 12px;
        bottom:
            calc(
                var(--dxn-bottom-reference-offset)
                + env(safe-area-inset-bottom)
            );
    }

    .dxn-floating-cart__link {
        min-width: 58px;
        height: 58px;
        border-radius: 21px;
    }

    .dxn-floating-cart__icon {
        font-size: 26px;
    }

    .dxn-floating-cart__label {
        display: none;
    }
}

@media (max-width: 380px) {
    :root {
        --dxn-bottom-reference-bar-height: 74px;
        --dxn-bottom-reference-offset: 92px;
    }

    .dxn-bottom-nav--reference-layout {
        padding-inline: 6px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__bar {
        min-height: var(--dxn-bottom-reference-bar-height);
        padding: 6px;
        gap: 3px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__item {
        min-height: 57px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__icon {
        width: 33px;
        height: 33px;
        border-radius: 13px;
        font-size: 19px;
    }

    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__label {
        font-size: 9.8px;
        letter-spacing: -0.30px;
    }

    .dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
    .dxn-bottom-nav__label {
        font-size: 8.8px;
    }

    .dxn-bottom-nav--reference-layout.dxn-bottom-nav--member
    .dxn-bottom-nav__item--supply
    .dxn-bottom-nav__label {
        font-size: 8.1px;
        letter-spacing: -0.62px;
    }

    .dxn-floating-cart {
        left: 10px;
    }

    .dxn-floating-cart__link {
        min-width: 54px;
        height: 54px;
        border-radius: 19px;
    }

    .dxn-floating-cart__count {
        min-width: 23px;
        height: 23px;
        font-size: 9.5px;
    }
}

/* دعم LTR للواجهات المترجمة. */
.dxn-bottom-nav[dir="ltr"],
[dir="ltr"] .dxn-bottom-nav,
.dxn-floating-cart[dir="ltr"],
[dir="ltr"] .dxn-floating-cart {
    direction: ltr;
}

@media (hover: none) {
    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__item:hover,
    .dxn-floating-cart__link:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__item,
    .dxn-bottom-nav--reference-layout .dxn-bottom-nav__icon,
    .dxn-floating-cart__link,
    .dxn-floating-cart__label {
        transition: none;
    }
}