/* ==========================================================================
   0. متغيرات الألوان الموحدة لهوية "نقار الخشب" (Woodpecker Brand Colors)
   استخدام متغيرات CSS بيضمن إن كل الألوان في الموقع متناسقة مع بعضها،
   ولو حبيت تغيّر أي لون تانى المستقبل هتغيره مرة واحدة هنا بس.
   ========================================================================== */
:root {
    --wp-brown-dark: #4a2c11;    /* البني الغامق الأساسي (لون اللوجو) */
    --wp-brown-footer: #3d2410;  /* بني غامق أعمق شوية لخلفية الفوتر (متناسق مع الأساسي) */
    --wp-brown-mid: #6b4327;     /* بني متوسط لعناصر الفوتر (بديل موحّد للـ #5D4037 القديم) */
    --wp-gold: #d19a5b;          /* الذهبي/العسلي - لون التفاعل والهوفر */
    --wp-beige: #b58253;         /* البيج الغامق - لون ثانوي */
    --wp-cream: #fdfbf7;         /* الكريمي/الأوف وايت - الخلفية الفاتحة */
    --wp-cream-soft: #F5F5DC;    /* بيج فاتح ناعم لنصوص الفوتر */
    --wp-border-light: #f4ebe1;  /* لون الفواصل الخفيفة */
    --wp-text-muted: #8a7461;    /* بني رمادي فاتح للنصوص الثانوية (بديل موحّد لأي لون رمادي/أزرق كان مستخدم غلط) */
    --wp-whatsapp: #25D366;      /* أخضر الواتساب - ثابت مش بيتغير */
    --wp-shadow-color: 74, 44, 17; /* قيمة RGB للون البني عشان نستخدمها في rgba() للظلال */
}

/* --- إعدادات عامة لتصفير المسافات وتحديد الاتجاه --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    box-sizing: border-box;
    direction: rtl;
}

/* ==========================================================================
   1. شريط التوب بار العلوي (Top Bar)
   ========================================================================== */
.top_bar_container {
    background-color: var(--wp-brown-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    padding: 12px 40px;
    box-sizing: border-box;
    direction: rtl;
}

.top_bar_item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    flex: 1; /* كل قسم بياخد مساحة قد التاني عشان السلوجان يفضل في النص */
}

/* --- 1.1 أيقونات السوشيال ميديا (أقصى اليمين) --- */
.top_bar_socials {
    justify-content: flex-start;
    gap: 12px;
}

.top_bar_socials a {
    color: var(--wp-brown-dark);
    background-color: var(--wp-cream);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.top_bar_socials a:hover {
    background-color: var(--wp-gold);
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- 1.2 الجملة التسويقية (في المنتصف بالظبط) --- */
.top_bar_slogan {
    color: var(--wp-cream);
    font-size: 15px;
    letter-spacing: 0.5px;
    justify-content: center;
    text-align: center;
}

/* --- 1.3 جهة الواتساب والرقم (أقصى اليسار) --- */
.top_bar_phone {
    justify-content: flex-end;
}

.top_bar_phone a {
    color: var(--wp-cream);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.top_bar_phone a i {
    color: var(--wp-whatsapp);
    font-size: 18px;
}

.top_bar_phone a:hover span {
    color: var(--wp-gold);
}

/* --- 📱 تجاوب التوب بار --- */
@media (max-width: 992px) {
    .top_bar_socials {
        display: none !important;
    }
    .top_bar_slogan {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .top_bar_container {
        padding: 10px 15px;
    }
    .top_bar_phone {
        display: none !important;
    }
    .top_bar_slogan {
        font-size: 14px;
        justify-content: center;
    }
}

/* ==========================================================================
   2. مسافة أمان في نهاية الموقع لمنع شريط الموبايل من تغطية المحتوى
   ⬅️ اترفع الرقم هنا لأننا خفينا شريط "Powered By Easyorders" اللي كان
      بيوفر مساحة أمان أصلية من تصميم المنصة. الرقم اتظبط بناءً على
      قياس فعلي لارتفاع شريط #tabs (67px) + هامش أمان إضافي
      + مساحة الآيفونات اللي فيها Home Indicator
   ========================================================================== */
@media (max-width: 992px) {
    body {
        padding-bottom: calc(67px + 30px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   3. الهيدر الرئيسي بالكامل (Sphinx Header)
   ========================================================================== */
.sphinx_header {
    background-color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 8px 25px rgba(var(--wp-shadow-color), 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
}

.sphinx_header nav.sphinx_header_container,
.sphinx_header .max-w-7xl {
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px 40px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

.sphinx_header nav .h-14.flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 20px !important;
}

/* --- 3.1 اللوجو (أقصى اليمين) --- */
.sphinx_header_logo {
    margin: 0 !important;
    order: 1 !important;
}
.sphinx_header_logo img {
    height: 65px !important; /* 💡 مقاس اللوجو للكمبيوتر - غيّره براحتك */
    width: auto !important;
}

/* --- 3.2 مربع البحث --- */
.sphinx_header nav .ms-auto.flex-1 {
    order: 2 !important;
    margin: 0 !important;
    flex: 1 !important;
    max-width: 600px !important;
    display: flex !important;
    justify-content: center !important;
}
.sphinx_header nav input[type="text"] {
    background-color: var(--wp-cream) !important;
    border: 1px solid rgba(var(--wp-shadow-color), 0.11) !important;
    border-radius: 12px !important;
    height: 48px !important;
    color: var(--wp-brown-dark) !important;
    font-family: 'Cairo', sans-serif;
    width: 100% !important;
}
.sphinx_header nav input[type="text"]:focus {
    border-color: var(--wp-gold) !important;
    outline: none !important;
}

.sphinx_header nav button.bg-skin-primary {
    background-color: var(--wp-brown-dark) !important;
    border-radius: 10px !important;
    left: 6px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.sphinx_header nav button.bg-skin-primary svg {
    color: var(--wp-cream) !important;
}

/* --- 3.3 سلة المشتريات (أقصى اليسار) --- */
.sphinx_header nav .flow-root {
    order: 3 !important;
    margin: 0 !important;
}
.sphinx_header nav button.relative.flex.bg-white {
    background-color: var(--wp-brown-dark) !important;
    color: var(--wp-cream) !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.sphinx_header nav button.relative.flex.bg-white svg {
    color: var(--wp-cream) !important;
}
.sphinx_header nav .bg-\[\#F44336\] {
    background-color: var(--wp-gold) !important;
    color: #ffffff !important;
}

/* --- 3.4 شريط المنيو والصفحات السفلي --- */
.sphinx_header_links {
    background-color: #ffffff !important;
    border-top: 1px solid var(--wp-border-light) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
}
.sphinx_header_links .flex.space-s-8 {
    display: flex !important;
    justify-content: center !important;
    gap: 35px !important;
}
.sphinx_header_links a {
    color: var(--wp-brown-dark) !important;
    background: transparent !important;
    font-family: 'Cairo', sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: color 0.3s ease;
}
.sphinx_header_links a:hover {
    color: var(--wp-gold) !important;
}

/* ==========================================================================
   4. شريط التنقل السفلي للموبايل (Mobile Tab Bar)
   ========================================================================== */
#tabs {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(var(--wp-shadow-color), 0.08) !important;
    box-shadow: 0px -10px 40px rgba(var(--wp-shadow-color), 0.08) !important;
    border-radius: 20px 20px 0 0 !important;
}

#tabs a,
#tabs button {
    color: var(--wp-beige) !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.25s ease !important;
}

#tabs a:hover,
#tabs button:hover,
#tabs .text-\[\#010101\],
#tabs a:focus,
#tabs button:focus {
    color: var(--wp-brown-dark) !important;
    font-weight: 700 !important;
}

#tabs a svg,
#tabs button svg {
    color: var(--wp-beige) !important;
    transition: all 0.25s ease !important;
}

#tabs a:hover svg,
#tabs button:hover svg,
#tabs .text-\[\#010101\] svg {
    color: var(--wp-brown-dark) !important;
    transform: scale(1.05);
}

/* ==========================================================================
   5. تجاوب الهيدر لشاشات الموبايل
   ========================================================================== */
@media (max-width: 768px) {
    .sphinx_header nav.sphinx_header_container,
    .sphinx_header .max-w-7xl {
        padding: 10px 8px !important;
    }

    .sphinx_header nav .h-14.flex {
        gap: 10px !important;
    }

    .sphinx_header_logo img {
        height: 50px !important; /* 💡 مقاس اللوجو للموبايل - ممكن ترفعه لـ 55 لو حبيت */
        width: 50px !important;
        object-fit: contain !important;
    }

    .sphinx_header nav button.relative.flex.bg-white {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .sphinx_header .block.md\:hidden.w-full.mt-2 {
        display: none !important;
    }

    .hidden.md\:block.w-full {
        display: block !important;
        margin: 0 !important;
    }
    .sphinx_header nav input[type="text"] {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0 10px 0 35px !important;
    }
    .sphinx_header nav button.bg-skin-primary {
        height: 32px !important;
        width: 32px !important;
        left: 4px !important;
    }
}

/* ==========================================================================
   6. قسم الترحيب البانر (Home Section - Text Fill Animation)
   ========================================================================== */
.home_section_container.css-996p8r {
    background-color: var(--wp-cream) !important;
    padding: 40px 20px !important;
    text-align: center !important;
    overflow: hidden;
}

.home_section_container .editor-paragraph,
.home_section_container .editor-paragraph span {
    font-family: 'Cairo', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
    white-space: pre-wrap !important;
    display: inline-block !important;

    opacity: 1 !important;
    animation: none !important;

    /* أنيميشن النص: خلفية جراديانت بتتملي بالتدريج من البيج للبني */
    background: linear-gradient(to left, var(--wp-brown-dark) 50%, var(--wp-beige) 50%) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    animation: fillTextToBrown 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes fillTextToBrown {
    0% {
        background-position: 100% 0 !important;
    }
    100% {
        background-position: 0% 0 !important;
    }
}

@media (max-width: 768px) {
    .home_section_container .editor-paragraph,
    .home_section_container .editor-paragraph span {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }
    .home_section_container {
        padding: 25px 15px !important;
    }
}

/* ==========================================================================
   7. قسم عرض المنتجات ثلاثية الأبعاد (3D Model Viewer Section)
   ========================================================================== */
.threed_section {
    background-color: var(--wp-cream) !important;
    padding: 60px 20px !important;
    direction: rtl;
}

.threed_container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.threed_header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.threed_header h2 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--wp-brown-dark) !important;
    margin-bottom: 10px !important;
}

.threed_header p {
    font-family: 'Cairo', sans-serif !important;
    font-size: 16px !important;
    color: var(--wp-beige) !important;
}

.threed_grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 30px !important;
}

.threed_card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(var(--wp-shadow-color), 0.04) !important;
    box-shadow: 0 10px 30px rgba(var(--wp-shadow-color), 0.04) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.threed_card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(var(--wp-shadow-color), 0.08) !important;
}

.model_wrapper {
    width: 100% !important;
    height: 350px !important;
    background-color: #faf6f0 !important;
    position: relative !important;
}

model-viewer {
    width: 100% !important;
    height: 100% !important;
    --progress-bar-color: var(--wp-gold) !important;
}

.ar_button {
    background-color: var(--wp-brown-dark) !important;
    color: var(--wp-cream) !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    border: none !important;
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.2s !important;
}

.ar_button:hover {
    background-color: var(--wp-gold) !important;
}

.product_info {
    padding: 20px !important;
    text-align: center !important;
}

.product_info h3 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--wp-brown-dark) !important;
    margin-bottom: 8px !important;
}

.product_info p {
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    color: var(--wp-text-muted) !important; /* ⬅️ كان لون رمادي مائل للأزرق مش متناسق، اتظبط لبني فاتح متناسق مع الهوية */
    line-height: 1.5 !important;
}

@media (max-width: 768px) {
    .threed_section {
        padding: 40px 15px !important;
    }
    .threed_header h2 {
        font-size: 22px !important;
    }
    .model_wrapper {
        height: 280px !important;
    }
}

/* ==========================================================================
   8. الفوتر (Footer)
   ⬅️ اتظبطت ألوانه هنا عشان تبقى من نفس عيلة ألوان الهوية بتاعت الموقع
      (بني/بيج) بدل الألوان المنفصلة اللي كانت مستخدمة قبل كده
   ========================================================================== */
footer {
    background-color: var(--wp-brown-footer) !important;
    color: var(--wp-cream-soft) !important;
    direction: rtl !important;
}

footer p, footer span, footer h3 {
    color: var(--wp-cream-soft) !important;
}

footer a {
    color: var(--wp-cream-soft) !important;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease !important;
}

/* --- أنيميشن خط سفلي متحرك عند التمرير فوق روابط الفوتر --- */
footer ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--wp-gold) !important;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

footer ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom right;
}

footer ul li a:hover {
    color: var(--wp-gold) !important;
}

footer h3 {
    font-weight: 700 !important;
    border-bottom: 2px solid var(--wp-brown-mid);
    padding-bottom: 8px;
    margin-bottom: 16px !important;
}

/* --- أيقونات التواصل الاجتماعي وبيانات الاتصال --- */
footer .bg-skin-primary {
    background-color: var(--wp-brown-mid) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

footer a.bg-skin-primary:hover {
    background-color: var(--wp-gold) !important;
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

footer .text-skin-a11y,
footer .bg-skin-primary svg {
    color: var(--wp-cream-soft) !important;
    fill: currentColor !important;
    transition: color 0.4s ease !important;
}

footer a.bg-skin-primary:hover svg {
    color: var(--wp-brown-footer) !important;
}

/* --- التوافق وإخفاء الحقوق --- */
footer .border-t.bg-skin-primary {
    display: none !important;
}

footer .border-t {
    border-color: var(--wp-brown-mid) !important;
}

@media (max-width: 1023px) {
    footer button[id^="headlessui-disclosure-button"] {
        background: transparent !important;
        border: none !important;
        color: var(--wp-cream-soft) !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 0 !important;
    }

    footer .max-lg\:pb-20 {
        padding-bottom: 3rem !important;
    }
}