/* =======================
   Base (Almarai Theme)
======================= */
.nav a, nav a, .nav, nav {
    font-family: 'Almarai', sans-serif !important;
    font-size: 15px;
}

:root {
    --brand: #41040B;
    --bg: #f8f8f8;
    --line: rgba(0,0,0,.10);
    --shadow: 0 4px 8px rgba(0,0,0,0.10);
    --max: 1200px;
}

body {
    font-family: 'Almarai', sans-serif;
    margin: 0;
    background-color: var(--bg);
    direction: rtl;
    text-align: right;
}

/* =======================
   Header
======================= */
header.topbar,
header {
    background: #fff;
    padding-top: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    border-bottom: 1px solid #000; /* إضافة البوردَر الأسود */
}


/* لو عندك grid header-inner خليه */
.header-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* =======================
   Nav (Desktop)
======================= */
.nav {
    max-width: var(--max);
    margin: 0 auto;
    padding: 10px 16px 14px;
    display: flex;
    justify-content: center;
}

    .nav ul,
    nav ul {
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 15px 0;
        margin: 0;
        flex-wrap: wrap;
    }

        .nav ul li,
        nav ul li {
            position: relative;
        }

    .nav a,
    nav a {
        text-decoration: none;
        color: #000;
        font-size: 15px;
        font-weight: 400;
        padding: 10px 0;
        display: inline-block;
    }

nav ul li {
    position: relative;
}

    nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 15px; /* جرّب 14px أو 15px */
        font-weight: 400;
    }
/* =======================
   Mega Menu
======================= */
.mega-menu {
    position: relative;
}

.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    background: #fff;
    padding: 30px 40px;
    border-top: 1px solid #eee;
    display: none;
    z-index: 999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.mega-menu:hover .mega-dropdown {
    display: block;
}

/* منتجات داخل الميغا */
.mega-items {
    display: flex;
    justify-content: center;
    gap: 25px;
}

    .mega-items .item img {
        width: 120px;
        transition: 0.3s;
    }

    .mega-items .item p {
        font-size: 14px;
        margin-top: 8px;
        text-align: center;
    }

.view-all {
    display: inline-block;
    margin-top: 18px;
    font-size: 16px;
    color: #000;
    text-decoration: none;
}

/* =======================
   Footer
======================= */
footer {
    text-align: center;
    padding: 20px;
    background: #fff;
    margin-top: 40px;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.10);
}

/* =======================
   Tabs (if used)
======================= */
.tab-content {
    display: none;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
}

    .tab-content.active {
        display: flex;
    }

/* =======================
   Mobile Drawer + Overlay (مرة واحدة فقط)
======================= */
.menu-btn {
    display: none; /* يظهر فقط في الموبايل */
    gap: 8px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    z-index: 998;
}

    .overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

/* منع سكرول الخلفية عند فتح القائمة */
body.menu-open {
    overflow: hidden;
}

@media (max-width: 860px) {

    .header-inner {
        grid-template-columns: auto 1fr auto;
    }

    .menu-btn {
        display: inline-flex;
    }

    /* القائمة كـ Drawer */
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 78%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 90px 24px 24px;
        box-shadow: -20px 0 40px rgba(0,0,0,.12);
        transform: translateX(100%);
        transition: .3s ease;
        z-index: 999;
    }

        .nav.open {
            transform: translateX(0);
        }

        /* روابط القائمة داخل drawer */
        .nav ul,
        nav ul {
            flex-direction: column;
            gap: 14px;
            width: 100%;
            padding: 0;
        }

        .nav a,
        nav a {
            width: 100%;
            font-size: 16px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(0,0,0,.08);
            white-space: normal;
        }

    /* الميغا منيو بالموبايل: خليها أبسط (اختياري) */
    .mega-dropdown {
        width: 100%;
        left: 0;
        transform: none;
        position: static;
        box-shadow: none;
        padding: 14px 0;
        display: none;
    }

    .mega-menu:hover .mega-dropdown {
        display: block;
    }
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

    .brand .logo {
        height: 42px;
        width: 80%;
        object-fit: contain;
        display: block;
    }
@font-face {
    font-family: 'Al-Maari';
    src: url('path-to-al-maari-font.woff') format('woff'); /* تأكد من تضمين رابط الخط المناسب */
    font-weight: normal;
    font-style: normal;
}

.hero-inner {
    background: url('your-image-url.jpg') center/cover no-repeat; /* استبدل بـ رابط الصورة التي تستخدمها */
    padding: 60px 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); /* لتوضيح الظل حول العنصر */
}



.category-name {
    display: block;
    margin-top: 10px;
    font-size: 24px; /* تحديد الحجم 24px */
    margin: 0;
    font-weight: bold;
    font-family: 'Al-Maari', serif; /* تطبيق خط المعري هنا */
}

.hero-description {
    margin-top: 20px;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.7); /* لون النص مع شفافية */
    line-height: 1.5;
    font-family: 'Al-Maari', serif;
}

.cta {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: #41040B; /* اللون الأحمر */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}

    .cta:hover {
        background-color: #cc0000; /* تغيير اللون عند التمرير */
    }

/* ============ Desktop Mega Menu ============ */

.mega-menu {
    position: relative;
}

    .mega-menu > a {
        padding: 10px 15px;
        display: block;
    }

/* القائمة المنسدلة */
.mega-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%; /* خطوة مهمة جداً */
    transform: translateX(-50%); /* لتوسيط القائمة */
    width: 650px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    z-index: 50;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}


/* إظهارها عند تمرير الماوس */
.mega-menu:hover .mega-dropdown {
    display: block;
}

/* صف العناصر */
.mega-items {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
}

    /* كل عنصر */
    .mega-items .item a {
        font-size: 15px;
        color: #333;
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
    }

        .mega-items .item a:hover {
            color: #b30000;
        }

/* زر عرض الكل */
.view-all {
    margin-top: 15px;
    display: block;
    color: #b30000;
    font-weight: bold;
}


/* ============ Mobile Menu ============ */
@media (max-width: 768px) {

    .mega-menu {
        width: 100%;
    }

        .mega-menu > a {
            background: #eee;
            padding: 12px;
            display: block;
        }

    /* القائمة المنسدلة تصبح تحت بعضها */
    .mega-dropdown {
        position: static !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        display: none;
    }


    /* جعل العناصر عمودية */
    .mega-items {
        flex-direction: column;
        padding: 5px 0;
        max-height: 220px;
        overflow-y: auto;
        gap: 0;
    }


        .mega-items .item a {
            padding: 12px 10px;
            font-size: 16px;
            display: block;
            color: #333;
            border-bottom: 1px solid #eee;
        }


    /* إظهار القائمة عند الضغط */
    .mega-menu.open .mega-dropdown {
        display: block;
    }
}

@media (max-width: 768px) {

    /* إرجاع القائمة الفرعية إلى اليمين */
    .mega-items {
        direction: rtl !important;
        text-align: right !important;
    }

        .mega-items .item a {
            text-align: right !important;
            padding-right: 15px !important;
        }
}
@media (max-width: 768px) {
    .mega-dropdown {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        margin: 0;
    }
}
@media (max-width: 768px) {
    .mega-items {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: none !important;
    }
}
@media (max-width: 768px) {
    .mega-items .item a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
        font-size: 15px;
        text-align: right;
        color: #222;
    }
}
@media (max-width: 768px) {
    .mega-items .item a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
        font-size: 15px;
        text-align: right;
        color: #222;
    }
}
@media (max-width: 480px) {
    .survey-tab {
        padding: 12px 8px;
        border-radius: 0 12px 12px 0;
    }

    .survey-tab-text {
        font-size: 13px;
    }
}
.section-inner {
    max-width: 1200px; /* أو نفس var(--max) عندك */
    margin: 0 auto;
    padding: 0 16px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    justify-content: center; /* ✅ يوسّط الأعمدة */
    gap: 20px;
}
/* زر حجز ستايل Cartier-like */
.card .book-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    background: #000;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 14px 16px;
    border: 1px solid #000;
    border-radius: 0; /* حاد مثل الصورة */
    font-family: 'Almarai', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: .2s ease;
}

    .card .book-btn:hover {
        background: #fff;
        color: #000;
    }

/* اختياري: لو تبغى الزر يثبت أسفل الكارد دائمًا */
.card .body {
    display: flex;
    flex-direction: column;
}

.card .book-btn {
    margin-top: auto; /* يخليه تحت */
}
/* مسافة بين الهيرو وقسم الباقات */
.hero + .section {
    margin-top: 40px; /* غيّرها 30/50 حسب ذوقك */
}

/* لو عندك .section-inner استخدمها بدل كذا */
.section {
    padding-top: 10px;
}
.card .book-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    background: #41040B; /* ✅ عنابي مباشر */
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 14px 16px;
    border: 1px solid #41040B; /* ✅ عنابي مباشر */
    border-radius: 0;
    font-family: 'Almarai', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: .2s ease;
}

    .card .book-btn:hover {
        background: #fff;
        color: #41040B;
    }


/* ===== Mobile menu: make it scrollable ===== */
@media (max-width: 768px) {
    /* عدّل #siteNav حسب تصميمك (يمين/يسار) */
    #siteNav {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0; /* لو قائمتك تطلع من اليمين (RTL) */
        width: min(86vw, 360px);
        max-height: 100vh;
        overflow-y: auto; /* ✅ هذا أهم شيء */
        -webkit-overflow-scrolling: touch; /* ✅ سكرول سلس بالموبايل */
        touch-action: pan-y;
        padding: 18px 14px 22px;
    }

    /* لو عندك هيدر ثابت فوق داخل القائمة، زِد padding-top */
    /* .main-nav { padding-top: 70px; } */

    /* خلي الدروب داون في الموبايل "يتدفّق" داخل القائمة (مش absolute) */
    .mega-dropdown {
        position: static;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        margin-top: 8px;
    }

    .mega-menu.open .mega-dropdown {
        max-height: 1000px; /* قيمة كبيرة تكفي المحتوى */
    }
}
/* ===== Cartier-like Package Hero ===== */
.pkg-hero {
    position: relative;
    overflow: hidden;
    height: 320px;
    background: #111;
}

.pkg-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.pkg-hero-overlay {
    position: absolute;
    inset: 0;
    /* تدرّج مثل كارتير: من تحت غامق وفوق خفيف */
    background: linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 70%);
}

.pkg-hero-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 18px;
    text-align: center;
    color: #fff;
}

.pkg-hero-title {
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: .3px;
    font-size: 22px;
}

.pkg-hero-meta {
    font-size: 13px;
    opacity: .92;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .pkg-hero {
        height: 260px;
    }

    .pkg-hero-title {
        font-size: 18px;
    }

    .pkg-hero-content {
        padding: 18px 14px;
    }
}
.specs-box {
    max-width: 520px;
    text-align: right; /* النص يمين */
}
@media (max-width:768px) {
    .page-hero {
        height: 280px;
    }

    .page-hero-title {
        font-size: 24px;
    }

    .page-wrap {
        margin-top: -55px;
    }

    .page-card-body {
        font-size: 15px;
    }
}
@media (max-width:768px) {
    .page-hero {
        height: 280px;
    }

    .page-hero-title {
        font-size: 24px;
    }

    .page-wrap {
        margin-top: -55px;
    }

    .page-card-body {
        font-size: 15px;
    }
}
.page-title {
    font-size: 24px;
    margin: 0;
    text-align: center;
    /* ✅ خلفية شفافة خفيفة خلف النص */
    display: inline-block;
    padding: 10px 18px;
    background: rgba(0,0,0,0.35); /* زِد/قلّل الرقم الأخير للتحكم بالشفافية */
    border-radius: 14px;
    backdrop-filter: blur(3px); /* اختياري */
}
/* إزالة المربع الخلفي في وسط الهيرو */
.hero-inner {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}