/* ===================================================
   Meguiar's Master Custom CSS - Salla Raed Theme
   =================================================== */

/* ---------------------------------------------------
   1. متغيرات الألوان العامة (Color Variables)
   --------------------------------------------------- */
:root {
    --color-primary: #ffd700 !important;
    --color-primary-dark: #e6c200 !important;
    --color-primary-reverse: #000000 !important;
}

/* ---------------------------------------------------
   2. جسم المتجر والروابط العامة (Body & Global Links)
   --------------------------------------------------- */
body {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

/* الروابط العامة باللون الذهبي في الحالة العادية */
a,
.link {
    color: #ffd700 !important;
    fill: #ffd700 !important;
    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out !important;
}

/* تحول الروابط العامة للأبيض عند الهوفر */
a:hover, 
a:hover *, 
.link:hover {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ---------------------------------------------------
   3. الهيدر والشريط العلوي (Header)
   --------------------------------------------------- */
header, 
header .bg-white,
header [class*="bg-white"],
header .header-wrapper,
header .site-header {
    background-color: #000000 !important;
    background: #000000 !important;
    border-bottom: 2px solid #ffd700 !important;
}

header a, 
header span, 
header p, 
header i, 
header svg,
header .text-gray-500,
header .text-gray-600,
header .text-gray-700,
header .text-gray-800,
header .text-gray-900,
header .text-black {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

header a:hover, 
header a:hover span, 
header a:hover i, 
header a:hover svg,
header [class*="icon"]:hover {
    color: #ffd700 !important;
    fill: #ffd700 !important;
    stroke: #ffd700 !important;
}

/* ---------------------------------------------------
   4. المنيو الفرعية في الكمبيوتر (Desktop Submenus)
   --------------------------------------------------- */
@media (min-width: 992px) {
    header .sub-menu,
    header .dropdown-menu,
    header [class*="sub-menu"],
    header [class*="dropdown-menu"],
    header .mega-menu,
    header [class*="mega-menu"],
    .s-menu-children,
    [class*="menu-children"] {
        background-color: rgba(18, 18, 18, 0.95) !important;
        background: rgba(18, 18, 18, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    }

    header .sub-menu a,
    header .dropdown-menu a,
    header [class*="sub-menu"] a,
    header [class*="dropdown-menu"] a,
    header .mega-menu a,
    .s-menu-children a {
        color: #ffffff !important;
        transition: color 0.2s ease-in-out !important;
    }

    header .sub-menu a:hover,
    header .dropdown-menu a:hover,
    header [class*="sub-menu"] a:hover,
    header [class*="dropdown-menu"] a:hover,
    header .mega-menu a:hover,
    .s-menu-children a:hover {
        color: #ffd700 !important;
    }
}

/* ---------------------------------------------------
   5. الأقسام والروابط السريعة (slide--cat-entry)
   --------------------------------------------------- */
.slide--cat-entry,
[class*="slide--cat-entry"] {
    background-color: rgba(26, 26, 26, 0.85) !important;
    background: rgba(26, 26, 26, 0.85) !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    transition: all 0.3s ease-in-out !important;
}

.slide--cat-entry *,
[class*="slide--cat-entry"] * {
    background-color: transparent !important;
}

.slide--cat-entry,
.slide--cat-entry a,
.slide--cat-entry span,
.slide--cat-entry h3,
.slide--cat-entry h4,
.slide--cat-entry p,
[class*="slide--cat-entry"] a,
[class*="slide--cat-entry"] span {
    color: #ffffff !important;
}

.slide--cat-entry:hover,
[class*="slide--cat-entry"]:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2) !important;
}

.slide--cat-entry:hover a,
.slide--cat-entry:hover span,
.slide--cat-entry a:hover,
.slide--cat-entry a:hover span,
[class*="slide--cat-entry"]:hover a,
[class*="slide--cat-entry"]:hover span {
    color: #ffd700 !important;
}

/* ---------------------------------------------------
   6. كروت المنتجات وبوكس السعر (Product Cards & Price Box)
   --------------------------------------------------- */
salla-product-card,
.product-card, 
.s-product-card-entry,
.s-product-card-vertical,
[class*="product-card"] {
    background-color: #161616 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease-in-out !important;
}

/* اسم المنتج في الكارت قبل الهوفر أبيض صريح */
salla-product-card a,
salla-product-card h3,
salla-product-card h3 a,
salla-product-card .product-title,
salla-product-card [class*="title"],
.product-card a,
.product-card h3,
.product-card .product-title,
.s-product-card-entry a,
.s-product-card-entry [class*="title"],
.product-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease-in-out !important;
}

/* هوفر كارت المنتج وعنوانه للأصفر */
salla-product-card:hover,
.product-card:hover,
.s-product-card-entry:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.18) !important;
}

salla-product-card:hover a,
salla-product-card:hover h3,
salla-product-card:hover h3 a,
salla-product-card:hover .product-title,
salla-product-card:hover [class*="title"],
salla-product-card a:hover,
.product-card:hover a,
.product-card:hover h3,
.product-card:hover .product-title,
.product-card a:hover,
.s-product-card-entry:hover a,
.s-product-card-entry:hover [class*="title"] {
    color: #ffd700 !important;
}

/* إلغاء الصندوق الخارجي الكبير وتفريغه */
.s-product-card-entry-price,
.s-product-card-content-sub,
[class*="card-entry-price"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 6px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* الصندوق الصغير مع مسافة داخلية (Padding) وخلفية صفراء خفيفة */
salla-product-card salla-price,
salla-product-card .s-product-card-price,
salla-product-card [class*="price-wrapper"],
.product-card .product-price {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 215, 0, 0.05) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    margin: 5px auto !important;
    gap: 6px !important;
    transition: all 0.3s ease-in-out !important;
}

salla-product-card salla-price,
salla-product-card salla-price *,
salla-product-card .s-price-amount,
salla-product-card .s-price-currency,
.product-card .product-price,
.product-card .product-price * {
    color: #ffd700 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    text-align: center !important;
}

salla-product-card:hover salla-price,
.product-card:hover .product-price {
    border-color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.1) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25) !important;
}

salla-product-card .s-price-crossed,
.product-card .price-crossed,
.s-price-crossed {
    color: #888888 !important;
    font-size: 0.85rem !important;
    font-weight: normal !important;
    text-decoration: line-through !important;
    margin-inline-start: 6px !important;
}

/* ---------------------------------------------------
   7. الوسوم والتاجات (Product Tags & Badges)
   --------------------------------------------------- */
salla-tags,
salla-tags a,
.product-tags,
.product-tags a,
.s-product-tags,
.s-product-tags a,
.tags-list,
.tags-list a,
.tag-item,
.s-tag,
[class*="product-tag"],
[class*="tags"] a,
[class*="tag-item"],
a[href*="tag"],
a[href*="tags"] {
    color: #cccccc !important;
    border: 1px solid #333333 !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.25s ease-in-out !important;
}

salla-tags a *,
.product-tags a *,
.s-product-tags a *,
.tags-list a *,
a[href*="tag"] *,
a[href*="tags"] * {
    color: inherit !important;
}

salla-tags a:hover,
salla-tags a:hover *,
.product-tags a:hover,
.product-tags a:hover *,
.s-product-tags a:hover,
.s-product-tags a:hover *,
.tags-list a:hover,
.tags-list a:hover *,
a[href*="tag"]:hover,
a[href*="tag"]:hover *,
a[href*="tags"]:hover,
a[href*="tags"]:hover *,
.tag-item:hover,
.s-tag:hover,
[class*="product-tag"]:hover,
[class*="tags"] a:hover,
[class*="tag-item"]:hover,
salla-product-card:hover [class*="tag"],
salla-product-card:hover [class*="badge"] {
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    background-color: rgba(255, 215, 0, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* ---------------------------------------------------
   8. صفحة تفاصيل المنتج (Single Product Page)
   --------------------------------------------------- */
h1.product-title,
.product-title h1,
.product-details h1,
.product-single h1,
.s-product-entry-title,
[class*="product-details"] h1,
[class*="product-info"] h1,
salla-product-details h1 {
    color: #ffd700 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.product-details salla-price,
.product-details salla-price *,
.product-single salla-price,
.product-single salla-price *,
.s-product-entry-price,
.s-product-entry-price *,
.product-details .product-price,
.product-details .product-price *,
.product-single .product-price,
.product-single .product-price *,
[class*="product-details"] [class*="price"],
[class*="product-info"] [class*="price"] {
    color: #ffd700 !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
}

.product-details .bg-white,
.product-single .bg-white,
.product-details [class*="bg-white"],
.product-single [class*="bg-white"],
.s-product-options-wrapper,
.product-options,
.s-product-entry-options,
salla-product-options {
    background-color: #161616 !important;
    background: #161616 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
}

.product-details label,
.product-single label,
.form-label,
.s-product-options-wrapper label,
.product-options label,
.product-sku-title,
.s-product-options-title,
[class*="product-details"] label,
[class*="product-details"] dt,
[class*="product-info"] label,
[class*="product-info"] dt,
[class*="sku"] label,
.sku-label,
.product-fields-title {
    color: #ffd700 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.product-sku,
.product-sku-val,
.product-sku span,
.s-product-sku,
[class*="sku"] span,
[class*="sku"] dd,
[class*="sku"] p,
[class*="model"],
[class*="model"] span,
.product-details dd,
.product-details [class*="sku"],
.product-details span:not([class*="price"]):not(.sku-label),
.product-details p,
.product-single .text-gray-500,
.product-single .text-gray-600,
.product-single .text-gray-700 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------
   9. خانة ومحدد الكمية (Quantity Input)
   --------------------------------------------------- */
salla-quantity-input,
.s-quantity-input,
.quantity-input,
.product-quantity,
[class*="quantity-input"],
.s-quantity-input-container {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
}

salla-quantity-input input,
.s-quantity-input input,
.quantity-input input,
input[name="quantity"],
[class*="quantity"] input {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    border: none !important;
}

salla-quantity-input button,
.s-quantity-input button,
.quantity-input button,
[class*="quantity"] button,
.s-quantity-input-btn {
    background-color: #262626 !important;
    color: #ffd700 !important;
    fill: #ffd700 !important;
    border: none !important;
    transition: all 0.2s ease-in-out !important;
}

salla-quantity-input button:hover,
.s-quantity-input button:hover,
[class*="quantity"] button:hover {
    background-color: #ffd700 !important;
    color: #000000 !important;
    fill: #000000 !important;
}

/* ---------------------------------------------------
   10. الأزرار العامة (Buttons)
   --------------------------------------------------- */
salla-button, 
salla-add-product-button, 
.btn-primary {
    --color-primary: #ffd700 !important;
    --color-primary-reverse: #000000 !important;
}

/* ---------------------------------------------------
   11. الفوتر (Footer)
   --------------------------------------------------- */
footer, 
footer .bg-white,
footer [class*="bg-white"],
footer .footer-wrapper,
footer .site-footer {
    background-color: #0a0a0a !important;
    background: #0a0a0a !important;
    border-top: 2px solid #ffd700 !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer .footer-title,
footer [class*="title"] {
    color: #ffd700 !important;
    font-weight: bold !important;
}

footer a, 
footer span, 
footer p, 
footer li,
footer .text-gray-500,
footer .text-gray-600,
footer .text-gray-700,
footer .text-gray-800,
footer .text-gray-900 {
    color: #ffffff !important;
}

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

/* ---------------------------------------------------
   12. تحسينات الموبايل (Mobile & Tablet)
   --------------------------------------------------- */
@media (max-width: 991px) {
    salla-mobile-menu,
    .mobile-menu,
    [class*="mobile-menu"] {
        background-color: #0d0d0d !important;
        color: #ffffff !important;
    }

    salla-mobile-menu a,
    .mobile-menu a {
        color: #ffffff !important;
    }

    salla-bottom-nav,
    .bottom-nav,
    [class*="bottom-nav"] {
        background-color: #000000 !important;
        border-top: 2px solid #ffd700 !important;
    }

    salla-bottom-nav a,
    salla-bottom-nav i,
    salla-bottom-nav svg,
    salla-bottom-nav span {
        color: #ffffff !important;
        fill: #ffffff !important;
    }
}