/* Add custom CSS styles below */

/* ===== 1. المتغيرات ===== */
:root {
    --main-color: #66b9c4;
    --main-dark: #4aa8b3;
    --text-color: #2f3e3e;
    --bg-light: #f9f7f4;
}

/* ===== 2. الأساس ===== */
body {
    background-color: var(--bg-light);
    color: var(--text-color);
}

/* ===== 3. الهيدر كامل + شريط التصنيفات ===== */
/* نخلي كل المنطقة العلوية تركواز */
header,
.header,
.topbar,
.salla-header,
.salla-navigation,
.navbar,
.main-nav,
.top-menu {
    background-color: var(--main-color) !important;
    border: none !important;
}

/* مهم جداً: إزالة أي خلفية بيضاء داخلية */
header *,
.salla-navigation *,
.navbar *,
.main-nav *,
.top-menu * {
    background-color: transparent !important;
}

/* النصوص والروابط */
header a,
header span,
header svg,
.salla-navigation a,
.navbar a,
.main-nav a,
.top-menu a {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-weight: 600;
}

/* الهوفر */
header a:hover,
.salla-navigation a:hover {
    color: #e6f7fa !important;
}

/* ===== 4. الكروت ===== */
.product-card, .card, .section {
    border-radius: 16px !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease;
    border: none !important;
}

.product-card:hover, .card:hover {
    transform: translateY(-6px);
}

/* ===== 5. الصور ===== */
.product-image img {
    border-radius: 14px;
    transition: 0.3s;
}

.product-image img:hover {
    transform: scale(1.03);
}

/* ===== 6. الأزرار ===== */
button, .btn, .button, .s-button-element {
    border-radius: 12px !important;
    background-color: var(--main-color) !important;
    color: #fff !important;
    padding: 10px 18px;
    font-weight: 600;
    border: none !important;
}

button:hover, .btn:hover {
    background-color: var(--main-dark) !important;
    transform: translateY(-2px);
}

/* ===== 7. البانر ===== */
.hero, .banner {
    border-radius: 20px;
    overflow: hidden;
}

/* ===== 8. الفوتر (إصلاح كامل) ===== */
/* المشكلة كانت من العناصر الداخلية */
footer,
.main-footer,
#footer,
footer .container,
footer .row,
footer .col,
footer .footer,
footer .footer-main {
background-color: #66b9c4 !important;
  color: #ffffff !important;
}

/* إزالة أي خلفية بيضاء داخل الفوتر */
footer * {
    background-color: transparent !important;
}

/* النصوص */
footer p,
footer a,
footer span,
footer h1,
footer h2,
footer h3 {
    color: #ffffff !important;
}

/* الروابط */
footer a {
    opacity: 0.9;
}

footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ===== 9. تحسينات عامة ===== */
h1, h2, h3 {
    font-weight: 700;
}

.section, .container {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* حركة ناعمة */
* {
    transition: all 0.2s ease-in-out;
}

/* ===== خلفية الموقع بالكامل (Pattern متكرر) ===== */

body {
    position: relative;
}

/* طبقة الخلفية */
body::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image: url("https://i.postimg.cc/9MxmJjSv/bwks-thwr-3.png");
    background-repeat: repeat;

    /* حجم التكرار (تحكم في حجم الدوائر) */
    background-size: 400px;

    /* شفافية */
    opacity: 0.1;

    pointer-events: none;
    z-index: -1;
}