/* ======================================================== */
/* 📢 [البنرات]: إجبار نصوص وعناوين البنرات على الظهور الدائم */
/* ======================================================== */

/* 1. إظهار الحاوية النصية بالكامل وتثبيت تموضعها فوق البنر */
.banner-entry__text,
.banner-entry_text,
[class*="banner-entry__text"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* توسيط النص تماماً في منتصف الصورة */
    width: 90% !important;
    text-align: center !important;
    z-index: 5 !important;
}

/* 2. تثبيت ظهور العنوان والنص الوصفي للبنر بنسبة 100% */
.banner-entry h3, 
.banner-entry p,
.banner_title,
.banner_description,
[class*="banner_title"],
[class*="banner_description"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important; 
    transform: none !important;
}

/* 3. تصفير تأثير الـ Hover تماماً لضمان الثبات وعدم حدوث رفة */
.banner-entry:hover .banner-entry__text,
.banner-entry:hover .banner_description,
.banner-entry:hover h3 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ======================================================== */
/* 🚀 [سيستم الوضع الفاتح الموحد]: خلفيات بيضاء ونصوص زيتية بالكامل */
/* ======================================================== */

/* إجبار كل الخلفيات في الموقع بلا استثناء على اللون الأبيض */
html, body, #app, .main-content, .app-inner, .content-wrapper, .store-header-wrapper,
div, section, header, footer, aside, nav, .product-single, .product-single-container, 
div.container, .main-nav-container, .bg-white, .store-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* إجبار كافة النصوص والعناوين والروابط على اللون الزيتي الملكي هداية */
html *, p, h1, h2, h3, h4, h5, h6, span, a, li, button, label, i, .hedaya-main-title, .hedaya-description {
    color: #1c241b !important;
    border-color: rgba(28, 36, 27, 0.1) !important;
}

/* صبغ الأيقونات وخطوط الـ SVG باللون الزيتي في الوضع الفاتح */
i, svg, svg path, [class*="icon"], [class*="salla-icon"], .s-icon {
    fill: #1c241b !important; 
    stroke: #1c241b !important; 
    color: #1c241b !important; 
}

/* تخصيص الحقول والأزرار لتتناسب مع الثيم الفاتح النظيف */
button:not(.dark-mode-toggle), .s-button, input, select, textarea {
    background-color: rgba(28, 36, 27, 0.05) !important;
    color: #1c241b !important;
    border: 1px solid rgba(28, 36, 27, 0.2) !important;
}

/* تفعيل النزول السلس في الصفحة بالكامل */
html {
    scroll-behavior: smooth !important;
}

/* تصفير هوامش الصفحة بالكامل لتبدأ من النقطة صفر */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* نسف الفراغ الأبيض العلوي تماماً لدمج الهيدر المخصص */
.main-content, #app, .app-inner, .content-wrapper, .store-header-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* جعل الهيدر الافتراضي عائماً فوق الهيرو */
header, .store-header, .site-header, .header-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 100 !important; 
    border-bottom: 1px solid rgba(28, 36, 27, 0.1) !important;
}

.main-nav-container, .shadow-default, .header-inner, #mainnav {
    --tw-bg-opacity: 0 !important;
    border: none !important;
}

/* ======================================================== */
/* 🔍 [إخفاء شريط التنقل والبحث]: التخلص من الفراغ العلوي تماماً */
/* ======================================================== */
.top-navbar,
.store-header .top-navbar,
.s-search-input-wrapper,
.s-search-input,
.header-search, 
.top-navbar .search-btn, 
[class*="search-input"],
[class*="search-wrapper"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* إخفاء الحاوية الجانبية المخصصة للصورة إذا تركت فراغاً */
.sidebar.md\:sticky {
    display: none !important;
}

/* ======================================================== */
/* 🕋 [قسم الهيرو في الوضع الفاتح]: مدمج بالخلفية البيضاء */
/* ======================================================== */

.hedaya-hero-section {
    position: relative;
    width: 100% !important;
    height: 100vh; 
    margin-top: 0 !important;
    padding-top: 60px; /* تقليل الهامش لراحة العين بعد حذف شريط التنقل */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    direction: rtl;
    background-color: #ffffff !important; 
    z-index: 1 !important; 
    transition: background-color 0.3s ease;
}

/* صورة الخلفية للهيرو تظل بأبعادها */
.hedaya-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* طبقة تدرج ناعمة بيضاء تتناسب مع الثيم الفاتح الجديد */
.hedaya-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
    z-index: 2;
    transition: background 0.3s ease;
}

/* اللوحة الزجاجية الفاخرة متناسقة مع الخط الزيتي */
.hedaya-glass-card {
    position: relative;
    z-index: 3; 
    max-width: 700px;
    padding: 50px 40px;
    margin: 40px 20px 0 20px; 
    background: rgba(28, 36, 27, 0.03) !important; 
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(28, 36, 27, 0.1) !important;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(28, 36, 27, 0.08) !important;
    animation: hedayaFadeIn 1s ease-out forwards;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.hedaya-tag {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #cda250 !important; 
    margin-bottom: 12px;
}

.hedaya-hero-actions {
    display: flex;
    justify-content: center;
}

.hedaya-hero-actions a {
    text-decoration: none !important;
    padding: 14px 45px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* زر التبرع الرئيسي بلون زيتي ونصه أبيض في الوضع الفاتح */
.btn-hedaya-gold {
    background-color: #1c241b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(28, 36, 27, 0.15);
}

.btn-hedaya-gold:hover {
    transform: translateY(-3px);
    background-color: #2d3b2a !important;
    box-shadow: 0 6px 25px rgba(28, 36, 27, 0.25);
}

/* ======================================================== */
/* 🖼️ [البنرات العريضة]: الحفاظ على الامتداد الكامل للبنرات */
/* ======================================================== */

.s-block-banners {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    height: 150% !important;
}

.s-block-banners img {
    width: 100% !important;
    height: 150% !important;
    display: block !important;
    margin: 0 !important;
}

/* ======================================================== */
/* 🔘 [الزر العائم]: تصميم زر التبديل للوضع الداكن */
/* ======================================================== */

.dark-mode-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 999999 !important;
    background: #1c241b; 
    border: 2px solid #1c241b;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.dark-mode-toggle i, .dark-mode-toggle svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

/* ======================================================== */
/* 🕶️ [الوضع الداكن الصارم]: ينقلب بالكامل إلى الزيتي الملكي والأبيض */
/* ======================================================== */

html.dark-theme,
html.dark-theme body,
html.dark-theme #app,
html.dark-theme .main-content,
html.dark-theme .app-inner,
html.dark-theme div,
html.dark-theme section,
html.dark-theme header,
html.dark-theme footer,
html.dark-theme aside,
html.dark-theme nav,
html.dark-theme .product-single,
html.dark-theme .product-single-container,
html.dark-theme div.container,
html.dark-theme .store-header,
html.dark-theme .main-nav-container {
    background-color: #2d3b2a !important; 
}

html.dark-theme .top-navbar {
    display: none !important; /* ضمان الإخفاء حتى في الوضع الداكن */
}

html.dark-theme .hedaya-hero-section {
    background-color: #2d3b2a !important; 
}

html.dark-theme .hedaya-hero-overlay {
    background: linear-gradient(180deg, rgba(45, 59, 42, 0.95) 0%, rgba(20, 26, 18, 0.85) 100%) !important;
}

html.dark-theme .hedaya-glass-card {
    background: rgba(255, 255, 255, 0.01) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

/* إعادة تلوين النصوص للأبيض في الدارك مود */
html.dark-theme *,
html.dark-theme p,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme span,
html.dark-theme a,
html.dark-theme li,
html.dark-theme button,
html.dark-theme label,
html.dark-theme i {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* زر الهيرو يتحول للذهبي في الدارك مود للفخامة */
html.dark-theme .btn-hedaya-gold {
    background-color: #cda250 !important;
    color: #2d3b2a !important;
}

/* تحويل الأيقونات و SVG للون الأبيض في الوضع الداكن */
html.dark-theme i,
html.dark-theme svg,
html.dark-theme svg path,
html.dark-theme [class*="icon"],
html.dark-theme [class*="salla-icon"],
html.dark-theme .s-icon {
    fill: #ffffff !important; 
    stroke: #ffffff !important; 
    color: #ffffff !important; 
}

/* صبغ خلفية الحقول لتناسب الدارك مود */
html.dark-theme button:not(.dark-mode-toggle),
html.dark-theme .s-button,
html.dark-theme input,
html.dark-theme select,
html.dark-theme textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* استثناء الصور لحمايتها */
html.dark-theme img, 
html.dark-theme video, 
html.dark-theme .s-image,
html.dark-theme [style*="background-image"] {
    filter: none !important;
}

/* تعديل خلفية زر التبديل نفسه في الوضع الداكن ليصبح فاتحاً */
html.dark-theme .dark-mode-toggle {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}
html.dark-theme .dark-mode-toggle i, html.dark-theme .dark-mode-toggle svg {
    color: #1c241b !important;
    fill: #1c241b !important;
}

/* ======================================================== */
/* 📱 [الأنميشن والتجاوب]: تكييف الأبعاد لجميع شاشات الجوال */
/* ======================================================== */

@keyframes hedayaFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .hedaya-hero-section {
        height: 100vh;
        padding-top: 100px; 
    }
    .hedaya-glass-card {
        padding: 35px 20px;
    }
    .hedaya-main-title {
        font-size: 1.8rem;
    }
    .hedaya-description {
        font-size: 0.95rem;
    }
    .hedaya-hero-actions a {
        width: 100%;
        text-align: center;
    }
}