/* =========================================================
   FREESTYLE STORE
   BLACK GLOSSY — FINAL VERSION
   ========================================================= */


/* =========================================================
   01 — الخلفية العامة
   ========================================================= */

html,
body {
    background: #050505 !important;
    color: #ffffff !important;
}

body {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,0.045),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #050505 50%,
            #080808 100%
        ) !important;
}


/* =========================================================
   02 — الصفحة الرئيسية
   ========================================================= */

main,
.page-content,
.home,
.store-home,
.content {
    background:
        linear-gradient(
            180deg,
            #080808 0%,
            #050505 60%,
            #080808 100%
        ) !important;

    color: #ffffff !important;
}


/* الحاويات لا نريد لها خلفية بيضاء */

main > div,
main section,
section > div,
.container,
.container-fluid {
    color: #ffffff !important;
}


/* =========================================================
   03 — الهيدر
   ========================================================= */

header,
.header,
.site-header,
.navbar {
    background:
        linear-gradient(
            180deg,
            #191919 0%,
            #0c0c0c 50%,
            #050505 100%
        ) !important;

    color: #ffffff !important;

    border-bottom: 1px solid rgba(255,255,255,0.07) !important;

    box-shadow:
        0 5px 25px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}


header .container,
header .container-fluid,
header [class*="container"],
.header .container,
.header .container-fluid {
    background: transparent !important;
}


/* =========================================================
   04 — الشعار
   ========================================================= */

header img,
.header img,
header .logo img,
.header .logo img {
    filter: none !important;
    opacity: 1 !important;
}


/* =========================================================
   05 — الخطوط الثلاثة ☰
   ========================================================= */

header .sicon-menu,
header .sicon-menu-2,
header .sicon-menu-3,
header [class*="sicon-menu"],
.header .sicon-menu,
.header .sicon-menu-2,
.header .sicon-menu-3,
.header [class*="sicon-menu"] {
    color: #ffffff !important;
    opacity: 1 !important;
}


header .sicon-menu::before,
header .sicon-menu-2::before,
header .sicon-menu-3::before,
header [class*="sicon-menu"]::before,
.header .sicon-menu::before,
.header .sicon-menu-2::before,
.header [class*="sicon-menu"]::before {
    color: #ffffff !important;
    opacity: 1 !important;
}


header [class*="menu"] svg,
header [class*="Menu"] svg,
header .menu-toggle svg,
header .navbar-toggler svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
}


header .menu-toggle,
header .mobile-menu-button,
header .navbar-toggler,
header [class*="menu-toggle"],
header [class*="hamburger"] {
    color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
}


header [class*="hamburger"] span,
header [class*="menu-toggle"] span,
header .hamburger span,
header .menu-toggle span {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
}


/* =========================================================
   06 — النصوص العامة
   ========================================================= */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main span,
main a,
main label {
    color: #ffffff !important;
}


/* =========================================================
   07 — بطاقات المنتجات
   تدرج خفيف واحترافي
   ========================================================= */

.product-card,
.product-item,
[class*="product-card"],
[class*="ProductCard"],
[class*="product-item"],
[class*="ProductItem"] {
    background:
        linear-gradient(
            145deg,
            #1b1b1b 0%,
            #111111 45%,
            #080808 100%
        ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.08) !important;

    border-radius: 12px !important;

    box-shadow:
        0 8px 28px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}


/* عناوين المنتجات */

.product-card h2,
.product-card h3,
.product-card h4,
.product-card .product-title,
.product-item h2,
.product-item h3,
.product-item h4,
[class*="product-card"] h2,
[class*="product-card"] h3,
[class*="product-card"] h4 {
    color: #ffffff !important;
}


/* الأسعار */

.product-card .price,
.product-card .product-price,
.product-item .price,
.product-item .product-price,
[class*="product-card"] .price,
[class*="product-card"] [class*="price"] {
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* السعر القديم */

.product-card del,
.product-card s,
.product-item del,
.product-item s {
    color: #999999 !important;
}


/* الصور */

.product-card img,
.product-item img,
[class*="product-card"] img {
    filter: none !important;
    opacity: 1 !important;
}


/* =========================================================
   08 — أزرار المتجر
   ========================================================= */

button,
.btn,
button[type="button"],
button[type="submit"] {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #292929 0%,
            #111111 55%,
            #070707 100%
        ) !important;

    border: 1px solid rgba(255,255,255,0.12) !important;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}


/* =========================================================
   09 — القائمة الجانبية بعد الضغط على ☰
   ========================================================= */

.mobile-menu,
.side-menu,
.sidebar-menu,
.mobile-nav,
.mobile-menu-content,
[class*="mobile-menu"],
[class*="MobileMenu"],
[class*="side-menu"],
[class*="SideMenu"] {
    background:
        linear-gradient(
            145deg,
            #191919 0%,
            #0d0d0d 48%,
            #050505 100%
        ) !important;

    color: #ffffff !important;

    border-left: 1px solid rgba(255,255,255,0.08) !important;

    box-shadow:
        -12px 0 35px rgba(0,0,0,0.70) !important;
}


/* روابط القائمة */

.mobile-menu a,
.side-menu a,
.sidebar-menu a,
.mobile-nav a,
[class*="mobile-menu"] a,
[class*="MobileMenu"] a,
[class*="side-menu"] a {
    color: #ffffff !important;

    background: transparent !important;

    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}


/* تمييز التخفيضات */

.mobile-menu a[href*="offer"],
.mobile-menu a[href*="discount"],
.side-menu a[href*="offer"],
.side-menu a[href*="discount"],
[class*="mobile-menu"] a[href*="offer"],
[class*="mobile-menu"] a[href*="discount"] {
    color: #ff3b3b !important;
}


/* زر الإغلاق × */

.mobile-menu button,
.side-menu button,
.sidebar-menu button,
[class*="mobile-menu"] button,
[class*="side-menu"] button {
    color: #ffffff !important;
    background: transparent !important;
}


.mobile-menu button svg,
.side-menu button svg,
.sidebar-menu button svg,
[class*="mobile-menu"] button svg,
[class*="side-menu"] button svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
}


/* =========================================================
   10 — الفواصل
   ========================================================= */

hr,
.divider,
[class*="divider"] {
    border-color: rgba(255,255,255,0.07) !important;
}


/* =========================================================
   11 — الفوتر
   مهم جدًا:
   لا نستخدم opacity على كل العناصر
   ولا bg-white بشكل عام
   ========================================================= */

footer,
.footer {
    position: relative !important;

    background:
        linear-gradient(
            145deg,
            #1a1a1a 0%,
            #101010 42%,
            #070707 100%
        ) !important;

    color: #ffffff !important;

    border-top: 1px solid rgba(255,255,255,0.08) !important;

    box-shadow:
        0 -10px 35px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}


/* =========================================================
   12 — إزالة الغشاء الأبيض من الفوتر
   ========================================================= */

/* الطبقات الزائفة */

footer::before,
footer::after,
.footer::before,
.footer::after {
    content: none !important;
    display: none !important;
}


/* الحاويات المباشرة فقط */

footer > div,
footer > section,
.footer > div,
.footer > section {
    background: transparent !important;
}


/* الحاويات الداخلية */

footer .container,
footer .container-fluid,
footer [class*="container"],
.footer .container,
.footer .container-fluid,
.footer [class*="container"] {
    background: transparent !important;
}


/* =========================================================
   13 — معلومات المتجر
   ========================================================= */

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: #ffffff !important;

    font-weight: 700 !important;
}


footer p,
footer li,
footer label,
.footer p,
.footer li,
.footer label {
    color: #dddddd !important;
}


footer a,
.footer a {
    color: #e8e8e8 !important;
}


footer a:hover,
.footer a:hover {
    color: #ffffff !important;
}


/* =========================================================
   14 — أيقونات معلومات المتجر
   ========================================================= */

footer svg,
.footer svg,
footer i,
.footer i {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* =========================================================
   15 — حقوق المتجر
   ========================================================= */

footer small,
footer .copyright,
footer [class*="copyright"],
.footer small,
.footer .copyright {
    color: #999999 !important;
    background: transparent !important;
}


/* =========================================================
   16 — مهم:
   منع العناصر البيضاء داخل الفوتر من عمل غشاء
   ========================================================= */

footer .bg-white,
footer .bg-light,
.footer .bg-white,
.footer .bg-light,
footer [class~="bg-white"],
footer [class~="bg-light"],
.footer [class~="bg-white"],
.footer [class~="bg-light"] {
    background: transparent !important;
}


/* =========================================================
   17 — حقول الإدخال
   ========================================================= */

input,
textarea,
select {
    background:
        linear-gradient(
            145deg,
            #181818,
            #090909
        ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.12) !important;
}


input::placeholder,
textarea::placeholder {
    color: #999999 !important;
}


/* =========================================================
   18 — النصوص الثانوية
   ========================================================= */

.text-muted,
.text-gray,
[class*="text-muted"] {
    color: #aaaaaa !important;
}


/* =========================================================
   19 — الجوال
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        background: #050505 !important;
    }


    header,
    .header,
    .navbar {
        background:
            linear-gradient(
                180deg,
                #191919 0%,
                #050505 100%
            ) !important;
    }


    /* المنتجات */

    .product-card,
    .product-item,
    [class*="product-card"] {
        background:
            linear-gradient(
                145deg,
                #181818 0%,
                #0d0d0d 50%,
                #050505 100%
            ) !important;
    }


    /* ☰ */

    header .sicon-menu,
    header .sicon-menu-2,
    header .sicon-menu-3,
    header [class*="sicon-menu"],
    header [class*="hamburger"],
    header [class*="menu-toggle"] {
        color: #ffffff !important;
        opacity: 1 !important;
    }


    header .sicon-menu::before,
    header .sicon-menu-2::before,
    header .sicon-menu-3::before,
    header [class*="sicon-menu"]::before {
        color: #ffffff !important;
    }


    /* الفوتر في الجوال */

    footer,
    .footer {
        background:
            linear-gradient(
                145deg,
                #191919 0%,
                #0d0d0d 50%,
                #050505 100%
            ) !important;
    }
}


/* =========================================================
   20 — لمعة خفيفة جدًا للمنتجات
   ========================================================= */

.product-card,
.product-item,
[class*="product-card"] {
    position: relative !important;
    overflow: hidden !important;
}


.product-card::before,
.product-item::before,
[class*="product-card"]::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 8% !important;
    right: 8% !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.10),
            transparent
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   END
   ========================================================= */