/* ============================================================
   شريط الموبايل العلوي (عنوان التوصيل + بحث + أيقونات سريعة)
   + الشريط السفلي الثابت — بيظهروا بس على شاشات الموبايل، عشان
   الديسكتوب عنده الهيدر الكامل (مينيو + بحث + أيقونات) بالفعل.
   ============================================================ */

/* ============================================================
   حالة "active" — مستخدمة في صفحات المتاجر الجديدة (stores.php)
   واختيار قضية/مبلغ التبرع (donate.php) لتمييز الاختيار الحالي.
   عامة (مش بس موبايل) لأنها بتتستخدم على الديسكتوب برضه.
   ============================================================ */
.donate-amount-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.mega-menu-tile.active {
    background: var(--primary);
    color: #fff;
}
.mega-menu-tile.active .mega-menu-tile-icon {
    background: rgba(255,255,255,.25) !important;
    color: #fff !important;
}

/* ============================================================
   كروت الروابط في صفحة "حسابك" الجديدة (account.php) — عامة، تشتغل
   على الديسكتوب والموبايل، مش مربوطة بالـ media query الخاص بالموبايل.
   ============================================================ */
/* ============================================================
   Hero صفحة "اكتشف" (discover.php) — خلفية متدرجة مميزة عشان تتفرق
   بصريًا عن صفحات القوائم العادية (زي طلباتي/المفضلة). عامة (ديسكتوب
   وموبايل).
   ============================================================ */
/* ============================================================
   توست الإشعارات الداخلي + اهتزاز جرس الإشعارات — عامة (ديسكتوب وموبايل)
   ============================================================ */
.notif-toast-container {
    position: fixed;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    width: calc(100% - 28px);
    pointer-events: none;
}
@media (max-width: 480px) {
    .notif-toast-container { top: auto; bottom: 76px; inset-inline: 10px; max-width: none; }
}
.notif-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    border-inline-start: 4px solid var(--primary);
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
}
.notif-toast.show { opacity: 1; transform: translateY(0); }
.notif-toast-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.notif-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-toast-body strong { font-size: 13.5px; }
.notif-toast-body span { font-size: 12.5px; color: var(--muted, #888); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-toast-close {
    background: none; border: none; font-size: 18px; line-height: 1; color: #bbb; cursor: pointer;
    padding: 0; margin-inline-start: auto; flex-shrink: 0;
}
.notif-toast-close:hover { color: #888; }

@keyframes notifBellShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-16deg); }
    30% { transform: rotate(13deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
    90% { transform: rotate(2deg); }
}
.notif-bell-shake { animation: notifBellShake .7s ease; transform-origin: top center; }

.discover-hero {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    padding: 34px 0 44px;
    margin-bottom: 12px;
}
.discover-hero-inner { text-align: center; color: #fff; }
.discover-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    margin-bottom: 10px;
}
.discover-hero-inner h1 { font-size: 26px; margin: 0 0 8px; }
.discover-hero-inner p { margin: 0; opacity: .9; font-size: 14px; }

.account-links-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border, #eee);
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.account-link-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}
.account-link-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.account-link-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.account-link-text strong { font-size: 14.5px; }
.account-link-text small { color: var(--muted, #888); font-size: 12px; margin-top: 2px; }
.account-link-arrow { color: #ccc; font-size: 13px; }

.mbar,
.mbottom-nav,
.mbar-address-sheet { display: none; }

@media (max-width: 980px) {

    /* على الموبايل: البحث القديم في الهيدر الأساسي بيتخفي لأن .mbar بيوفر
       بحث مكانه بنفس الوظيفة، عشان محدش يشوف صندوقين بحث فوق بعض */
    .site-header .search-wrap.header-search-wrap { display: none !important; }

    /* ------------------------------------------------------------------
       إلغاء الهيدر القديم الضخم (اللوجو + قائمة الأقسام + الهامبرجر) على
       الموبايل، وتحويله لشريط نحيف فيه بس الأيقونات اللي مفيش لها بديل في
       الشريط الجديد (تنبيهات/مفضلة/سلة السوق/السلة). مفيش أي حذف لكود —
       العناصر دي هي نفسها الأصلية بتاعة الهيدر (نفس الـ IDs ونفس الجافاسكريبت
       شغال زيها)، إحنا بس غيّرنا مكانها وشكلها بالـ CSS عشان محدش يتكسر.
       ------------------------------------------------------------------ */
    .site-header .header-topbar,
    .site-header .header-inner .logo,
    .site-header .mega-menu-wrap,
    .site-header .header-mobile-toggle { display: none !important; }

    .site-header { background: #fff !important; box-shadow: none !important; }
    .site-header .header-inner {
        min-height: auto !important;
        padding: 8px 14px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }

    .site-header .header-nav {
        position: static !important;
        inset-inline-start: auto !important;
        top: auto !important; bottom: auto !important;
        height: auto !important; width: auto !important; max-width: none !important;
        background: transparent !important; box-shadow: none !important;
        flex-direction: row !important; align-items: center !important;
        padding: 0 !important; margin: 0 !important; gap: 18px !important;
        overflow: visible !important; transition: none !important;
    }
    .site-header .header-nav .header-icon-link-home,
    .site-header .header-nav .account-menu-wrap,
    .site-header .header-nav a[href="profile.php"],
    .site-header .header-nav a[href="affiliate.php"] { display: none !important; }

    .site-header .header-nav .header-icon-link {
        flex-direction: column !important; width: auto !important; padding: 0 !important; gap: 0 !important;
        color: #444 !important;
    }
    .site-header .header-nav .header-icon-link .nav-text,
    .site-header .header-nav .header-icon-link .nav-text-col { display: none !important; }
    .site-header .header-nav .header-icon-link i { font-size: 18px; }
    /* في التصميم القديم كانت .cart-badge بتتحول لـ position:static + margin-inline-start:auto
       (header-fix.css) عشان كانت جوه قائمة عمودية كاملة العرض. دلوقتي الشريط بقى صف أفقي
       نحيف، فده كان بيخلي الرقم يطلع بلونة كبيرة عائمة بعيدة عن أيقونة السلة تمامًا.
       بنرجّعها هنا لشكل شارة دائرية صغيرة طبيعية فوق الأيقونة زي الأصل */
    .site-header .header-nav .cart-badge {
        position: absolute !important;
        top: -6px !important;
        inset-inline-end: -8px !important;
        inset-inline-start: auto !important;
        margin: 0 !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        padding: 0 4px !important;
    }
    .site-header .notif-bell-wrap { position: relative; }

    .mbar {
        display: block;
        background:
            radial-gradient(circle at 92% -10%, rgba(255,255,255,.16) 0%, transparent 55%),
            radial-gradient(circle at -10% 110%, rgba(255,255,255,.10) 0%, transparent 45%),
            linear-gradient(165deg, var(--primary) 0%, var(--primary-dark, var(--primary)) 100%);
        padding: 14px 14px 26px;
        position: relative;
        z-index: 10;
        border-radius: 0 0 26px 26px;
        box-shadow: 0 14px 24px -12px rgba(0,0,0,.28);
    }

    .mbar-top { margin-bottom: 14px; }

    .mbar-address {
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.22);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-radius: 14px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        cursor: pointer;
        font-family: inherit;
    }
    .mbar-address-pin {
        width: 30px; height: 30px; flex-shrink: 0;
        background: #fff; color: var(--primary);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px;
    }
    .mbar-address-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: start; overflow: hidden; min-width: 0; }
    .mbar-address-text small { font-size: 10.5px; opacity: .85; line-height: 1.3; }
    .mbar-address-text span:last-child {
        font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: #fff;
    }
    .mbar-address-change {
        flex-shrink: 0;
        display: flex; align-items: center; gap: 4px;
        background: rgba(255,255,255,.9);
        color: var(--primary);
        font-size: 11.5px; font-weight: 700;
        padding: 6px 10px;
        border-radius: 999px;
    }
    .mbar-address-change i { font-size: 9px; }

    .mbar-search { margin-bottom: 18px; }
    .mbar-search form {
        background: #fff;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 8px 12px 18px;
        box-shadow: 0 10px 22px -8px rgba(0,0,0,.22);
    }
    .mbar-search-icon-badge {
        width: 30px; height: 30px; flex-shrink: 0;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px;
    }
    .mbar-search input {
        border: none; outline: none; flex: 1; font-size: 14px; font-family: inherit; background: transparent; color: #222;
    }
    .mbar-search input::placeholder { color: #9a9a9a; }

    .mbar-quick-icons {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .mbar-quick-icons::-webkit-scrollbar { display: none; }

    .mbar-quick-icon {
        flex: 0 0 auto;
        width: 74px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: #fff;
        transition: transform .12s ease;
    }
    .mbar-quick-icon:active { transform: scale(.93); }
    .mbar-quick-icon-circle {
        width: 56px; height: 56px;
        border-radius: 18px;
        background: linear-gradient(160deg, #ffffff 0%, #fff4e8 100%);
        border: 1px solid rgba(255,255,255,.5);
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
        color: var(--primary);
        box-shadow: 0 8px 16px -6px rgba(0,0,0,.35);
    }
    .mbar-quick-icon-label {
        font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.3;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.15);
    }

    /* --------- نافذة اختيار العنوان --------- */
    .mbar-address-sheet {
        position: fixed; inset: 0; z-index: 100000;
        background: rgba(0,0,0,.45);
        align-items: flex-end;
        justify-content: center;
    }
    .mbar-address-sheet.open { display: flex; }
    .mbar-address-sheet-inner {
        background: #fff;
        width: 100%;
        max-width: 480px;
        border-radius: 18px 18px 0 0;
        padding: 18px 18px 26px;
        max-height: 78vh;
        overflow-y: auto;
    }
    .mbar-address-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .mbar-address-sheet-head h3 { margin: 0; font-size: 16px; }
    .mbar-address-sheet-head button {
        background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888;
    }
    .mbar-address-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
    .mbar-address-item {
        display: flex; align-items: center; gap: 12px;
        background: #FFF8EF; border: 1px solid #ffe4c4; border-radius: 10px;
        padding: 12px 14px; cursor: pointer; text-align: start; width: 100%;
        font-family: inherit;
    }
    .mbar-address-item i { color: var(--primary); }
    .mbar-address-item strong { display: block; font-size: 14px; }
    .mbar-address-item small { color: var(--muted, #888); font-size: 12px; }

    /* --------- الشريط السفلي الثابت --------- */
    .mbottom-nav {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 99997;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -4px 14px rgba(0,0,0,.06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mbottom-nav-item {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        text-decoration: none; color: #8a8a8a; font-size: 10.5px; font-weight: 600;
        padding: 4px 2px;
    }
    .mbottom-nav-item i { font-size: 18px; }
    .mbottom-nav-item.active { color: var(--primary); }

    .mbottom-nav-live-dot {
        position: absolute;
        top: 2px;
        inset-inline-end: 22%;
        width: 9px; height: 9px;
        border-radius: 50%;
        background: #D7263D;
        border: 1.5px solid #fff;
        animation: mbottomLivePulse 1.4s ease-in-out infinite;
    }
    @keyframes mbottomLivePulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.35); opacity: .55; }
    }

    body { padding-bottom: 64px; } /* مساحة تحت المحتوى عشان الشريط السفلي ميغطيش آخر عنصر */
}