/* =========================================
   1. ترويسة المتجر (Header) - الحل الذكي للأيقونات والحركة
   ========================================= */

/* خلفية الهيدر والخط العسلي الفاخر */
.sticky.top-0 header {
    background-color: #111111 !important;
    border-bottom: 1px solid #EAA121 !important;
}

/* 1. توحيد ألوان النصوص والحاويات (مثل أزرار اللغة) للون الأبيض النقي */
.sticky.top-0 header a,
.sticky.top-0 header button,
.sticky.top-0 header span {
    color: #FFFFFF !important;
    transition: all 0.3s ease-in-out !important;
}

/* 2. تلوين الأيقونات بذكاء (لحل مشكلة السلة والكرة الأرضية معاً) */
/* الأيقونات ستأخذ لونها تلقائياً من الحاوية التي بداخلها (أبيض ثم عسلي) */
.sticky.top-0 header svg {
    color: #FFFFFF !important;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out !important;
}
.sticky.top-0 header svg[stroke],
.sticky.top-0 header svg [stroke] {
    stroke: currentColor !important;
}
.sticky.top-0 header svg[fill]:not([fill="none"]),
.sticky.top-0 header svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

/* 3. حركة التفاعل المجمعة (Group Hover) */
/* عند تمرير المؤشر على الرابط أو الزر، يضيء النص والأيقونة واللغة معاً بلون واحد */
.sticky.top-0 header a:hover,
.sticky.top-0 header button:hover,
.sticky.top-0 header a:hover span,
.sticky.top-0 header button:hover span,
.sticky.top-0 header a:hover svg {
    color: #EAA121 !important;
}

/* 4. تكبير ناعم للأيقونات عند وضع المؤشر على زِرّها لزيادة التفاعل */
.sticky.top-0 header a:hover svg,
.sticky.top-0 header button:hover svg {
    transform: scale(1.15) !important;
}


/* =========================================
   2. البانر الرئيسي (Hero Banner) - هوية فاخرة
   ========================================= */

/* إضافة طبقة تعتيم متدرجة (أسود فحمي) فوق الصورة لإبراز النصوص بقوة */
.section-carousel .bg-primary.absolute.inset-0 {
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.2), rgba(17, 17, 17, 0.8)) !important;
    opacity: 1 !important; /* إجبار القالب على إظهار طبقة التعتيم */
}

/* تنظيف نصوص البانر من الظلال العريضة وجعلها بيضاء ناصعة وراقية */
.section-carousel h1, 
.section-carousel h2, 
.section-carousel h3, 
.section-carousel p,
.section-carousel span {
    color: #FFFFFF !important;
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4) !important; /* ظل ناعم جداً وفخم بدلاً من الظل القاسي */
    letter-spacing: 0.5px !important; /* مسافة بسيطة بين الحروف لراحة العين */
}

/* أزرار البانر (إن وجدت) لتكون باللون العسلي المشرق */
.section-carousel a.button, 
.section-carousel button {
    background-color: #EAA121 !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 2px !important;
}
.section-carousel a.button:hover, 
.section-carousel button:hover {
    background-color: #FFFFFF !important;
    color: #111111 !important;
}


/* =========================================
   3. بطاقات المنتجات (Product Cards) - هوية فاخرة
   ========================================= */

/* تصميم الحاوية الرئيسية للمنتج (البطاقة بالكامل) */
[data-product-card] {
    background-color: #FFFFFF !important;
    border: 1px solid transparent !important; /* إطار مخفي مبدئياً */
    border-radius: 4px !important; /* حواف ناعمة جداً */
    padding: 10px !important; /* إضافة مساحة تنفس حول المنتج لزيادة الفخامة */
    transition: all 0.4s ease-in-out !important; /* حركة انتقالية ناعمة جداً */
}

/* حاوية الصورة لضمان أن تكون الخلفية بيضاء من ناحية الكود */
[data-product-card] .aspect-square {
    background-color: #FFFFFF !important;
}

/* تأثير تمرير الماوس (Hover) المذهل على بطاقة المنتج */
[data-product-card]:hover {
    border-color: #EAA121 !important; /* يظهر إطار ذهبي عسلي أنيق */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08) !important; /* ظل ناعم وفخم يبرز البطاقة */
    transform: translateY(-5px) !important; /* رفع المنتج للأعلى بانسيايبة (تأثير 3D) */
}

/* تنسيق اسم المنتج (النص) ليكون أنظف */
[data-product-card] h3, 
[data-product-card] a {
    color: #111111 !important; /* أسود فحمي */
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

/* تغيير لون اسم المنتج عند تمرير الماوس */
[data-product-card]:hover h3, 
[data-product-card]:hover a {
    color: #EAA121 !important;
}


/* تصميم أزرار التفاعل الرئيسية (مثل: اختر الخيارات) */
.btn.btn-outlined {
    background-color: #EAA121 !important; /* اللون العسلي المشرق */
    color: #111111 !important; /* لون النص أسود فحمي */
    border: 1px solid #EAA121 !important; /* إطار بلون العسل */
    border-radius: 2px !important; /* زوايا شبه حادة للفخامة */
    font-weight: bold !important;
    transition: all 0.4s ease-in-out !important; /* حركة انتقالية ناعمة */
}

/* تأثير تمرير الماوس على الزر */
.btn.btn-outlined:hover {
    background-color: #111111 !important; /* تحول الخلفية للأسود الفحمي */
    color: #EAA121 !important; /* تحول النص للعسلي */
    border-color: #111111 !important; 
}



/* ==================================================
   PREMIUM FOOTER - MULHUM HONEY
   ================================================== */

footer#footer{
    background:#111 !important;
    border-top:2px solid #EAA121;
    padding:55px 0 30px;
}

/* الحاوية */

footer#footer .theme-container{
    max-width:1280px;
    margin:auto;
    padding-inline:24px;
}

/* الأعمدة */

footer#footer .grid{
    gap:60px !important;
    align-items:start !important;
}

/* العناوين */

footer#footer h3{
    color:#EAA121 !important;
    font-size:22px;
    font-weight:700;
    margin-bottom:22px;
}

/* النصوص */

footer#footer p,
footer#footer li,
footer#footer a{
    color:#F5F5F5 !important;
    line-height:2;
}

footer#footer a{
    transition:.3s;
}

footer#footer a:hover{
    color:#EAA121 !important;
}

/* ================================
   العمود الأول (الشعار)
================================ */

footer#footer .grid>div:first-child{
    text-align:right;
}

footer#footer .grid>div:first-child picture,
footer#footer .grid>div:first-child img{
    display:block;
}

footer#footer .grid>div:first-child img{
    max-width:170px;
    height:auto;
}

footer#footer .grid>div:first-child p{
    margin-top:18px;
    max-width:300px;
}

/* أيقونات التواصل */

footer#footer .grid>div:first-child .flex{
    display:flex;
    gap:16px;
    margin-top:16px;
}

footer#footer .grid>div:first-child svg{
    width:22px;
    height:22px;
    transition:.3s;
}

footer#footer .grid>div:first-child a:hover svg{
    transform:translateY(-3px);
}

/* ================================
   السياسات
================================ */

footer#footer .grid>div:nth-child(2){
    text-align:center;
}

footer#footer .grid>div:nth-child(2) ul{
    list-style:none;
    padding:0;
    margin:0;
}

footer#footer .grid>div:nth-child(2) li{
    margin-bottom:12px;
}

/* ================================
   التواصل
================================ */

footer#footer .grid>div:nth-child(3){
    text-align:left;
}

footer#footer .grid>div:nth-child(3) li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

/* ================================
   الشريط السفلي
================================ */

footer#footer .border-t{
    margin-top:40px !important;
    padding-top:24px !important;
    border-color:rgba(255,255,255,.08)!important;
}

/* لا نعدل شعار زد إطلاقاً */

footer#footer .border-t a img{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
}

/* بطاقات الدفع فقط */

footer#footer .border-t .flex:last-child img{
    background:#fff;
    border-radius:6px;
    padding:4px;
    height:30px;
    width:auto;
}

/* السجل التجاري */

footer#footer .border-t p,
footer#footer .border-t span{
    color:#CFCFCF !important;
}

/* ================================
   الجوال
================================ */

@media (max-width:768px){

footer#footer{

padding-top:40px;

}

footer#footer .grid{

display:grid !important;

grid-template-columns:1fr !important;

gap:35px !important;

}

footer#footer .grid>div{

text-align:center !important;

align-items:center !important;

}

footer#footer .grid>div:first-child p{

max-width:100%;

}

footer#footer .grid>div:first-child .flex{

justify-content:center;

}

footer#footer .grid>div:nth-child(3) li{

justify-content:center;

}

footer#footer .border-t{

text-align:center;

}

}

/* =========================================
   7. القائمة الجانبية للجوال (Mobile Menu) - الحل الجذري والنهائي
   ========================================= */

/* 1. الشبكة الأمنية: تحويل الخلفية الشفافة خلف القائمة إلى أسود صلب */
/* هذا سيمنع ظهور أي منتجات أو صور من خلف القائمة تماماً */
el-dialog-backdrop {
    background-color: #111111 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

/* 2. تلوين كل قطرة داخل القائمة باللون الأسود الفحمي وإغلاق الفجوات */
el-dialog-panel,
el-dialog-panel *,
.group\/dialog-panel {
    background-color: #111111 !important;
}
el-dialog-panel .gap-8,
el-dialog-panel .pt-4 {
    gap: 0px !important;
    padding-top: 0px !important;
    margin: 0px !important;
}

/* 3. تنسيق الروابط لتكون أزراراً عريضة ومريحة للضغط بالجوال */
el-dialog-panel a.text-foreground {
    color: #FFFFFF !important;
    border-bottom: 1px solid #222222 !important;
    display: block !important;
    width: 100% !important;
    padding: 20px 20px !important; /* تكبير مساحة الزر لراحة العميل */
    font-weight: 500 !important;
    background-color: transparent !important; /* لضمان عمل تأثير اللمس */
}

/* إخفاء الخط من آخر رابط لجمالية التصميم */
el-dialog-panel a.text-foreground:last-child {
    border-bottom: none !important;
}

/* 4. تأثير اللمس (Active) المخصص لشاشات الجوال بدلاً من Hover */
/* بمجرد لمس الرابط سيضيء بلون عسلي فخم */
el-dialog-panel a.text-foreground:active {
    color: #EAA121 !important;
    background-color: rgba(234, 161, 33, 0.08) !important;
    border-right: 4px solid #EAA121 !important;
}

/* 5. تلوين أيقونة الإغلاق (X) لتكون بيضاء وتتحول للذهبي عند اللمس */
el-dialog-panel button svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
el-dialog-panel button:active svg {
    color: #EAA121 !important;
    fill: #EAA121 !important;
}