/* =========================================================
   Alraed Menu — تحديث تصميم واجهة الزبون (احترافي، بأسلوب تطبيقات المنيو الحديثة)
   ملف مستقل يُحمّل بعد باقي ملفات الـ CSS ليطغى عليها. لا يغيّر أي منطق.
   ========================================================= */

:root {
    --menu-radius: 18px;
    --menu-radius-sm: 12px;
    --menu-shadow-1: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
    --menu-shadow-2: 0 10px 26px rgba(16,24,40,.12), 0 3px 8px rgba(16,24,40,.06);
    --menu-ink-1: #1f2937;
    --menu-ink-2: #4b5563;
    --menu-line: #eef0f4;
}

/* ---------- بطاقات الأصناف ---------- */
.overlay-container,
.overlay-container-2 {
    width: 100% !important;
    border-radius: var(--menu-radius) !important;
    box-shadow: var(--menu-shadow-1) !important;
    background: #ffffff;
    overflow: hidden;
    border: 1px solid var(--menu-line);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .overlay-container:hover,
    .overlay-container-2:hover {
        transform: translateY(-4px);
        box-shadow: var(--menu-shadow-2) !important;
    }

    .overlay-container img,
    .overlay-container-2 img {
        width: 100% !important;
        aspect-ratio: 4 / 3;
        height: auto !important;
        object-fit: cover !important;
        transition: transform .4s ease;
        background: #f4f5f7;
    }

    .overlay-container:hover img {
        transform: scale(1.06);
    }

/* نص البطاقة */
.overlay-container .text-dark,
.overlay-container-2 .text-dark {
    color: var(--menu-ink-1) !important;
}

/* ---------- صور الأقسام (دوائر) ---------- */
.category-img {
    width: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 2px solid var(--menu-line);
    box-shadow: var(--menu-shadow-1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

a:hover .category-img {
    transform: translateY(-3px);
    box-shadow: var(--menu-shadow-2);
    border-color: var(--tabs-active-color, var(--indicator-active-color, #f40000));
}

/* ---------- شريط التنقّل العلوي ---------- */
.shadow-nav {
    box-shadow: 0 2px 14px rgba(16,24,40,.08) !important;
}

.logo-resto {
    border: 2px solid #ffffff;
    box-shadow: var(--menu-shadow-1);
}

/* ---------- الشريط السفلي (موبايل) ---------- */
.bottom-bar {
    box-shadow: 0 -3px 16px rgba(16,24,40,.10);
    border-radius: 20px 20px 0 0;
}

/* ---------- تبويبات (اطباق مميزة / الاكثر طلباً / عروض) ---------- */
.nav-tabs-custom-site .nav-item .nav-link {
    font-weight: 600;
}

/* ---------- تحسينات طباعة عربية ---------- */
.text-justify {
    text-align: start !important;
}

p, span, a, li {
    line-height: 1.7;
}

/* ---------- سعر بارز بلون النشاط ---------- */
.price-front {
    color: var(--tabs-active-color, var(--indicator-active-color, #f40000));
    font-family: "Cairo-Bold";
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* ---------- لوحة عنوان صفحة الصنف ---------- */
.bg-most-request {
    box-shadow: var(--menu-shadow-1);
}