/* ======================================================
   1. الخطوط (خطوط سيمبل ونظيفة)
====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ======================================================
   2. الإعدادات العامة 
====================================================== */
body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: #FFFFFF !important; /* خلفية بيضاء صريحة */
    color: #444444 !important; /* رمادي غامق شيك ومريح للقراءة */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: #1A1A1A !important; /* أسود للعناوين عشان تبرز */
}

/* لون تحديد النصوص */
::selection {
    background-color: #C59A3F !important; /* لون الجولد بتاع اللوجو */
    color: #FFFFFF !important;
}

/* ======================================================
   3. شريط التمرير (Scrollbar)
====================================================== */
::-webkit-scrollbar {
    width: 6px !important;
}
::-webkit-scrollbar-track {
    background: #F9F9F9 !important;
}
::-webkit-scrollbar-thumb {
    background: #C59A3F !important; /* لون الجولد */
    border-radius: 10px !important;
}

/* ======================================================
   4. الأزرار (Buttons & Add to Cart)
====================================================== */
button, .btn, .button, .add-to-cart, input[type="submit"], input[type="button"] {
    background-color: #C59A3F !important; /* الجولد الأساسي للوجو */
    color: #FFFFFF !important; /* نص أبيض */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    padding: 12px 25px !important;
    border: none !important;
    border-radius: 6px !important; /* دوران خفيف وبسيط */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(197, 154, 63, 0.3) !important; /* ظل جولد خفيف بيدي فخامة */
}

button:hover, .btn:hover, .button:hover, .add-to-cart:hover, input[type="submit"]:hover {
    background-color: #A88132 !important; /* جولد أغمق سنة لما تقف عليه بالماوس */
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

/* ======================================================
   5. كروت المنتجات والصور
====================================================== */
.product, .product-card, .card, .item {
    background-color: #FFFFFF !important;
    border: 1px solid #F0F0F0 !important; /* إطار رمادي فاتح جداً */
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.product:hover, .product-card:hover, .card:hover, .item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04) !important; /* ظل ناعم */
    border-color: #C59A3F !important; /* الإطار ينور بلون الجولد */
}

/* ======================================================
   6. حقول الإدخال والفورم (Order Form)
====================================================== */
/* الفورم بيضاء بالكامل */
form, .order-form, .checkout-form {
    background-color: #FFFFFF !important;
    padding: 25px !important;
    border-radius: 8px !important;
    border: 1px solid #F5F5F5 !important;
}

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    background-color: #FAFAFA !important; /* أوف وايت خفيف للحقل نفسه */
    border: 1px solid #EAEAEA !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #444444 !important;
    transition: all 0.3s ease !important;
    width: 100%;
    box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    background-color: #FFFFFF !important;
    border-color: #C59A3F !important; /* الإطار يبقى جولد لما العميل يكتب بياناته */
    box-shadow: 0 0 0 3px rgba(197, 154, 63, 0.15) !important;
}

/* ======================================================
   7. الروابط
====================================================== */
a {
    color: #888888 !important; /* رمادي هادي للروابط */
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

a:hover {
    color: #C59A3F !important; /* جولد */
}