/* =======================================================
   THEME: ROYAL HERBALIST - FINAL CLEAN (إصلاح نهائي للأزرار)
   ======================================================= */

/* 1. تجهيز الألوان */
:root {
    /* الخلفية: بيج ذهبي (الشمبانيا) */
    --bg-royal: #EFDDB8;
    
    /* لون الكروت: بيج كريمي غامق */
    --card-bg: #F5E8D3; 
    
    /* اللون البني المحروق (اسبريسو) */
    --brown-royal: #2e2008; 
    
    /* ذهبي لامع */
    --gold-main: #d4af37;       
}

/* 2. خلفية المتجر */
body, html, .content-wrapper, .store-wrapper, .app-layout {
    background-color: var(--bg-royal) !important;
    background-image: linear-gradient(180deg, #F5E8CC 0%, #EFDDB8 100%) !important;
    font-family: 'Tajawal', sans-serif !important;
}

/* تنظيف خلفيات الأقسام */
section, .section, .s-block, .container, [class*="section--"] {
    background: transparent !important;
}

/* =======================================================
   🏷️ تنسيق العناوين (أقسامنا) - اسبريسو
   ======================================================= */
h2, 
.section-title, 
.s-block__title, 
.section-header h2,
.component-title {
    color: var(--brown-royal) !important;
    text-align: center !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    margin-bottom: 30px !important;
    margin-top: 20px !important;
    width: 100% !important;
    display: block !important;
}

/* =======================================================
   🏰 1. الهيدر البني الفاخر
   ======================================================= */
header, .site-header, .header-wrapper {
    background-color: var(--gold-main) !important;
    background-image: linear-gradient(to bottom, #3b2a0c, #231804) !important; 
    border-bottom: 2px solid var(--gold-main) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* نصوص وأيقونات الهيدر */
.header-top-right, .header-top-left, .site-header a, 
.header-wrapper a, .nav-link, .menu-link {
    color: #fff !important; 
}
.header-top-right .btn-icon, .cart-btn svg, .search-btn svg,
.icon-search, .icon-cart, .icon-user {
    color: var(--gold-main) !important; 
    fill: var(--gold-main) !important;
}
.cart-btn:hover svg, .btn-icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px var(--gold-main));
}

/* شريط البحث */
input[type="search"] {
    background-color: #fff !important;
    border: 1px solid var(--gold-main) !important;
    border-radius: 25px !important;
    color: #333 !important;
}

/* =======================================================
   🏰 2. الفوتر البني الملكي
   ======================================================= */
footer, .site-footer, .s-footer, #footer, .footer-wrapper, 
.footer-top, .footer-middle, .footer-bottom, .copyright, .sub-footer {
    background-image: none !important;
    background-color: var(--brown-royal) !important;
    background: linear-gradient(180deg, #3b2a0c 0%, #231804 100%) !important;
    border-top: 4px solid var(--gold-main) !important;
    color: #e0e0e0 !important; 
}

footer div, footer section, [class*="footer-widget"] {
    background: transparent !important; border: none !important;
}

/* عناوين الفوتر */
footer h1, footer h2, footer h3, footer h4, .footer-title, 
.footer-menu-title {
    color: var(--gold-main) !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    text-align: right !important;
}

/* روابط الفوتر */
footer a, footer li, footer p, .footer-menu a {
    color: #f0f0f0 !important;
    font-weight: 500 !important;
}
footer a:hover {
    color: var(--gold-main) !important;
    padding-right: 5px !important;
}

/* أيقونات السوشيال */
.social-links__item a, .footer__social a {
    background: transparent !important;
    border: 1px solid var(--gold-main) !important;
    color: var(--gold-main) !important;
}
.social-links__item a:hover {
    background: var(--gold-main) !important;
    color: var(--brown-royal) !important;
}

/* شريط الحقوق */
.footer-bottom, .copyright, .sub-footer {
    background: #1a1202 !important; 
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* =======================================================
   ✨ 3. الكروت الموحدة (الكل)
   ======================================================= */
.product-entry, .s-product-card-entry, 
[class*="features__item"], .s-block--features__item,
a.banner, .banner-entry, [class*="banner--"] {
    background-color: var(--card-bg) !important;
    border: 1px solid rgba(197, 171, 114, 0.6) !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 15px rgba(46, 32, 8, 0.1) !important;
}

[class*="features__item"]::before, .s-block--features__item::before {
    background: var(--gold-main) !important;
}
.product-entry:hover, .s-product-card-entry:hover {
    transform: translateY(-8px) !important;
    border-color: var(--gold-main) !important;
    background-color: #fff !important;
}

/* =======================================================
   🛒 الأزرار الموحدة (إضافة للسلة + القلب) - للكل
   ======================================================= */

/* 1. توحيد الشكل واللون (اسبريسو غامق) */
[class*="add-to-cart"], 
.btn--add-to-cart,
.s-product-card-entry .btn--add-to-cart,
.product-entry .btn--wishlist, 
.s-product-card-entry .btn--wishlist,
.btn-icon {
    background-color: var(--brown-royal) !important; /* خلفية اسبريسو */
    color: var(--gold-main) !important;              /* نص وأيقونة ذهبي */
    border: 1px solid var(--brown-royal) !important; /* إطار اسبريسو */
    transition: all 0.3s ease !important;
}

/* 2. تخصيص زر القلب (دائري) */
.product-entry .btn--wishlist,
.s-product-card-entry .btn--wishlist,
.btn-icon {
    border-radius: 50% !important;
}

/* 3. تخصيص زر السلة (بيضاوي) */
[class*="add-to-cart"], 
.btn--add-to-cart,
.s-product-card-entry .btn--add-to-cart {
    border-radius: 50px !important;
    font-weight: bold !important;
}

/* 4. تأثير الحركة (هوفر) - يصير أبيض */
[class*="add-to-cart"]:hover, 
.btn--add-to-cart:hover,
.s-product-card-entry .btn--add-to-cart:hover,
.product-entry .btn--wishlist:hover,
.s-product-card-entry .btn--wishlist:hover,
.btn-icon:hover {
    background-color: #fff !important;               /* خلفية بيضاء */
    color: var(--brown-royal) !important;            /* نص بني */
    border-color: var(--gold-main) !important;       /* إطار ذهبي */
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(46, 32, 8, 0.2) !important;
}

/* 🔄 إزالة أي خلفية غامقة من شريط البحث */
header .search-bar,
header .header-search,
header input[type="search"],
.search-input,
.header-search input,
.header-search__input {
    background-color: #F5E8D3 !important;  /* حليبي فاتح */
    border: 1px solid #E8DCC7 !important;  /* إطار بيج ناعم */
    color: #2e2008 !important;             /* خط بني */
    border-radius: 30px !important;
    box-shadow: none !important;
}

/* 🎯 إزالة الخلفية الغامقة من خلف شريط البحث */
header, 
.site-header, 
.header-wrapper {
    background-image: none !important;
    background-color: #EFDDB8 !important; /* نفس لون المتجر الحليبي */
    border: none !important;
}

/* 🎨 لون أيقونة البحث */
.search-btn svg,
.icon-search {
    fill: #2e2008 !important;   /* بني ناعم */
    color: #2e2008 !important;
}