/* ==========================================================================
   1. تهيئة الخطوط، المتغيرات العامة، والتأثيرات الأساسية
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --main-dark-brown: #3B2416;
    --luxury-gold: #C8A86B;
    --light-beige: #F7F2EA;
    --pure-white: #FFFFFF;
    --text-muted: #8E837A;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --luxury-shadow: 0 10px 30px rgba(59, 36, 22, 0.05);
    --luxury-shadow-hover: 0 15px 35px rgba(59, 36, 22, 0.12);
}

/* تطبيق الخط الاحترافي على المتجر بالكامل */
body, html, p, a, h1, h2, h3, h4, h5, h6, span, button, input, select, textarea {
    font-family: 'Tajawal', sans-serif !important;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. شريط التنبيهات العُلوي (Announcement Bar)
   ========================================================================== */
.announcement-bar,
.top-header,
[class*="announcement"] {
    background-color: var(--luxury-gold) !important;
    color: var(--pure-white) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    border-radius: 0 0 8px 8px; /* حواف ناعمة في الأطراف السفلى */
}

.announcement-bar a,
[class*="announcement"] a {
    color: var(--pure-white) !important;
    text-decoration: underline !important;
    transition: var(--transition-smooth);
}

.announcement-bar a:hover {
    opacity: 0.9;
}
/* ==========================================================================
   3. رأس الموقع (Header) بتأثير زجاجي وتثبيت ذكي
   ========================================================================== */
.main-header,
header.header,
.site-header {
    background-color: rgba(59, 36, 22, 0.95) !important; /* بني غامق مع شفافية للمظهر الزجاجي */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky !important;
    top: 0;
    z-index: 9999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    transition: var(--transition-smooth);
    border-bottom: 1px solid rgba(200, 168, 107, 0.15);
}

/* روابط القائمة الرئيسية */
.main-menu .nav-link,
.header-menu a,
.site-nav a,
.main-header .nav-item a {
    color: var(--pure-white) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: var(--transition-smooth) !important;
    position: relative;
    padding: 8px 12px !important;
}

/* تأثير الخط الذهبي عند المرور فوق الروابط */
.main-menu .nav-link:hover,
.header-menu a:hover,
.site-nav a:hover,
.main-header .nav-item a:hover {
    color: var(--luxury-gold) !important;
}

.main-menu .nav-link::after,
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--luxury-gold);
    transition: var(--transition-smooth);
    transform: translateX(-50%);
}

.main-menu .nav-link:hover::after,
.site-nav a:hover::after {
    width: 80%;
}

/* أرقام السلة والأيقونات في الهيدر */
.header-icon, 
.cart-icon-wrapper a,
.header .icon-user {
    color: var(--pure-white) !important;
    transition: var(--transition-smooth);
}

.header-icon:hover, 
.cart-icon-wrapper a:hover {
    color: var(--luxury-gold) !important;
}

.cart-badge,
.badge-cart {
    background-color: var(--luxury-gold) !important;
    color: var(--main-dark-brown) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   4. شريط البحث الاحترافي (Search Bar)
   ========================================================================== */
.search-bar,
.header-search form,
.search-wrapper {
    background: var(--pure-white) !important;
    border: 1px solid rgba(200, 168, 107, 0.3) !important;
    border-radius: 30px !important; /* حواف دائرية بالكامل */
    overflow: hidden;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* حقل الإدخال */
.search-bar input,
.header-search input[type="text"] {
    background: transparent !important;
    color: var(--main-dark-brown) !important;
    padding-right: 20px !important;
    font-size: 14px !important;
    border: none !important;
}

.search-bar input:focus,
.header-search input:focus {
    outline: none !important;
}

/* تأثير التوهج الفاخر عند التركيز على البحث */
.search-bar:focus-within,
.header-search form:focus-within {
    border-color: var(--luxury-gold) !important;
    box-shadow: 0 0 15px rgba(200, 168, 107, 0.25) !important;
}

/* زر البحث */
.search-btn,
.header-search button[type="submit"],
.search-submit {
    background: var(--luxury-gold) !important;
    color: var(--pure-white) !important;
    border: none !important;
    border-radius: 0 30px 30px 0 !important; /* متوافق مع الاتجاه العربي */
    padding: 0 25px !important;
    transition: var(--transition-smooth) !important;
    cursor: pointer;
}

.search-btn:hover,
.header-search button[type="submit"]:hover {
    background: var(--main-dark-brown) !important;
    color: var(--luxury-gold) !important;
}
/* ==========================================================================
   5. الأزرار العامة الفاخرة (Buttons)
   ========================================================================== */
.btn-primary,
.btn-main,
.s-button-primary,
button[type="submit"]:not(.search-submit) {
    background-color: var(--luxury-gold) !important;
    color: var(--pure-white) !important;
    border: 1px solid var(--luxury-gold) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    padding: 12px 28px !important;
    box-shadow: 0 4px 15px rgba(200, 168, 107, 0.2) !important;
    transition: var(--transition-smooth) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover,
.btn-main:hover,
.s-button-primary:hover {
    background-color: var(--main-dark-brown) !important;
    border-color: var(--main-dark-brown) !important;
    color: var(--luxury-gold) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(59, 36, 22, 0.2) !important;
}

/* ==========================================================================
   6. بطاقات المنتجات (Product Cards) والأسعار وزر أضف للسلة
   ========================================================================== */
.product-card,
.product-item,
.s-product-card {
    background: var(--pure-white) !important;
    border: 1px solid rgba(59, 36, 22, 0.05) !important;
    border-radius: 12px !important; /* زوايا ناعمة */
    overflow: hidden;
    padding: 15px !important;
    transition: var(--transition-smooth) !important;
    box-shadow: var(--luxury-shadow) !important;
    position: relative;
}

/* التأثير الاحترافي عند مرور الماوس فوق بطاقة المنتج */
.product-card:hover,
.product-item:hover,
.s-product-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--luxury-gold) !important;
    box-shadow: var(--luxury-shadow-hover) !important;
}

/* اسم المنتج داخل البطاقة */
.product-title,
.product-card .title,
.s-product-card-title {
    color: var(--main-dark-brown) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    transition: var(--transition-smooth);
}

.product-card:hover .product-title {
    color: var(--luxury-gold) !important;
}

/* الأسعار الفاخرة */
.product-price,
.price-wrapper,
.s-product-card-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--luxury-gold) !important; /* السعر الحالي ذهبي */
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

/* السعر القديم قبل الخصم */
.product-price-old,
.price-before,
.s-product-card-price-before {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* زر أضف للسلة داخل البطاقة */
.add-to-cart-btn,
.product-card .btn-add-to-cart,
.s-product-card-button {
    background-color: var(--main-dark-brown) !important;
    color: var(--pure-white) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 10px 15px !important;
    width: 100% !important;
    margin-top: 15px !important;
    transition: var(--transition-smooth) !important;
}

.add-to-cart-btn:hover,
.product-card .btn-add-to-cart:hover,
.s-product-card-button:hover {
    background-color: var(--luxury-gold) !important;
    color: var(--main-dark-brown) !important;
    font-weight: 700 !important;
}

/* البادجات الفاخرة (مثل: جديد / خصم) */
.product-badge,
.badge-sale,
.badge-new,
.s-product-card-badge {
    background: linear-gradient(135deg, var(--luxury-gold), #b39256) !important;
    color: var(--pure-white) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(200, 168, 107, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
   7. تصاميم بطاقات الأقسام (Categories)
   ========================================================================== */
.category-card,
.category-item,
.box-category {
    background: var(--light-beige) !important;
    border: 1px solid rgba(200, 168, 107, 0.15) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    text-align: center;
    transition: var(--transition-smooth) !important;
    box-shadow: var(--luxury-shadow) !important;
}

.category-card:hover,
.category-item:hover {
    background: var(--pure-white) !important;
    border-color: var(--luxury-gold) !important;
    transform: translateY(-5px) !important;
    box-shadow: var(--luxury-shadow-hover) !important;
}

.category-card img,
.category-item img {
    border-radius: 50%; /* أو حواف دائرية ناعمة حسب رغبتك */
    transition: var(--transition-smooth) !important;
    border: 2px solid transparent;
}

.category-card:hover img {
    border-color: var(--luxury-gold);
    transform: scale(1.05);
}

/* ==========================================================================
   8. السلة الجانبية الحديثة (Side Cart Drawer)
   ========================================================================== */
.side-cart,
.cart-drawer,
.s-cart-drawer {
    background-color: var(--pure-white) !important;
    box-shadow: -10px 0 40px rgba(59, 36, 22, 0.15) !important;
}

.cart-drawer-header {
    background-color: var(--main-dark-brown) !important;
    color: var(--pure-white) !important;
    border-bottom: 2px solid var(--luxury-gold);
    padding: 20px !important;
}

.cart-drawer-title {
    color: var(--pure-white) !important;
    font-weight: 700 !important;
}

/* أزرار إتمام الطلب في السلة */
.cart-drawer-footer .btn-checkout,
.s-cart-drawer-footer .btn {
    background-color: var(--luxury-gold) !important;
    color: var(--main-dark-brown) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    padding: 14px !important;
    transition: var(--transition-smooth) !important;
}

.cart-drawer-footer .btn-checkout:hover {
    background-color: var(--main-dark-brown) !important;
    color: var(--luxury-gold) !important;
}

/* ==========================================================================
   9. تذييل الموقع الفاخر (Footer)
   ========================================================================== */
footer,
.site-footer,
.main-footer {
    background-color: var(--main-dark-brown) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 60px 0 30px 0 !important;
    border-top: 3px solid var(--luxury-gold) !important;
}

footer h4, footer h3, footer .footer-title {
    color: var(--luxury-gold) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 25px !important;
    position: relative;
    padding-bottom: 10px;
}

footer h4::after, footer .footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background-color: var(--luxury-gold);
}

footer a, .site-footer a {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: var(--transition-smooth) !important;
    font-size: 14px !important;
    display: inline-block;
    margin-bottom: 10px;
}

footer a:hover, .site-footer a:hover {
    color: var(--luxury-gold) !important;
    transform: translateX(-5px); /* حركة انزلاق خفيفة لليمين/اليسار حسب الاتجاه */
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-top: 20px !important;
    margin-top: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
}
/* ==========================================================================
   10. صفحة المنتج التفصيلية (Product Single Page)
   ========================================================================== */
/* معرض صور المنتج */
.product-images-carousel,
.product-slider,
.s-product-bg-slider {
    border: 1px solid rgba(200, 168, 107, 0.15) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--pure-white) !important;
    box-shadow: var(--luxury-shadow) !important;
}

/* محدد كمية المنتج */
.quantity-selector,
.product-quantity,
.s-product-options-quantity {
    border: 1px solid rgba(59, 36, 22, 0.2) !important;
    border-radius: 8px !important;
    overflow: hidden;
    max-width: 130px;
}

.quantity-selector button,
.s-product-options-quantity button {
    background-color: var(--light-beige) !important;
    color: var(--main-dark-brown) !important;
    font-weight: bold !important;
    transition: var(--transition-smooth);
}

.quantity-selector button:hover {
    background-color: var(--luxury-gold) !important;
    color: var(--pure-white) !important;
}

/* زر الشراء المباشر الفاخر */
.btn-buy-now,
.submit-product-details,
.s-product-options-add-to-cart {
    background: linear-gradient(135deg, var(--main-dark-brown), #26160d) !important;
    color: var(--luxury-gold) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    border: 1px solid var(--luxury-gold) !important;
    border-radius: 8px !important;
    padding: 15px 35px !important;
    box-shadow: 0 5px 20px rgba(59, 36, 22, 0.15) !important;
}

.btn-buy-now:hover,
.s-product-options-add-to-cart:hover {
    background: var(--luxury-gold) !important;
    color: var(--main-dark-brown) !important;
    transform: translateY(-2px);
}

/* وصف المنتج والتطبيبات */
.product-description,
.tabs-wrapper,
.s-product-tabs {
    background: var(--pure-white) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: var(--luxury-shadow) !important;
    border: 1px solid rgba(200, 168, 107, 0.1) !important;
    line-height: 1.8 !important;
    color: var(--main-dark-brown) !important;
}

/* ==========================================================================
   11. تحسين الصفحة الرئيسية والمسافات (Layout & Typography)
   ========================================================================== */
.section-title,
.main-title,
.store-section-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--main-dark-brown) !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    position: relative;
}

.section-title::after,
.store-section-title::after {
    content: "❖" !important; /* لمسة فاخرة تفصل العناوين */
    display: block;
    font-size: 16px;
    color: var(--luxury-gold);
    margin-top: 5px;
}

.store-section {
    padding: 50px 0 !important; /* مسافات تمنح التصميم فخامة وراحة للعين */
}

/* ==========================================================================
   12. تحسين تجربة الجوال الكاملة (Mobile Optimization)
   ========================================================================== */
@media (max-width: 768px) {
    .section-title, .main-title {
        font-size: 22px !important;
    }
    
    .product-card, .s-product-card {
        padding: 10px !important;
    }
    
    .product-title, .s-product-card-title {
        font-size: 14px !important;
    }
    
    .product-price, .s-product-card-price {
        font-size: 15px !important;
    }
    
    /* منع تداخل عناصر القائمة السفلية للجوال */
    .mobile-nav,
    .mobile-bottom-bar {
        background-color: var(--main-dark-brown) !important;
        border-top: 2px solid var(--luxury-gold) !important;
    }
    
    .mobile-nav a,
    .mobile-bottom-bar a {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    .mobile-nav a.active,
    .mobile-bottom-bar a:hover {
        color: var(--luxury-gold) !important;
    }
}