/* CSS Variables & Global Styles */
:root {
    --gold: #c19a6b;
    --gold-dark: #9e7e56;
    --black: #111;
    --white: #fff;
    --gray: #f5f5f5;
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Montserrat', sans-serif;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
    --transition: all 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body { font-family: var(--font-ar); background: var(--white); color: var(--black); padding-top: 60px; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; }
.hidden { display: none !important; }

/* Language and Direction Styles */
.en-text { direction: ltr; font-family: var(--font-en); }
.ar-text { direction: rtl; font-family: var(--font-ar); }

/* الهيدر والبانر */
.top-banner { 
    background: var(--black); color: var(--white); text-align: center; 
    padding: 8px; font-size: 14px; position: fixed; top: 0; width: 100%; z-index: 1000; 
}

header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
    position: fixed; top: 35px; width: 100%; z-index: 900;
    padding: 5px 0;
}

.header-inner {
    max-width: 1200px; margin: 0 auto; display: flex;
    justify-content: space-between; align-items: center; padding: 0 20px;
}

.logo { cursor: pointer; flex-grow: 1; text-align: center; }
.header-logo-img { max-height: 50px; width: auto; display: block; margin: 0 auto; }

.cart-btn {
    background: var(--white); border: 1px solid #ccc; padding: 8px 15px; 
    border-radius: 5px; font-weight: bold; transition: 0.3s; min-width: 80px;
}

/* القائمة الجانبية */
.sidebar {
    height: 100%; width: 0; position: fixed; z-index: 1000; top: 0;
    background-color: var(--white); overflow-x: hidden; transition: 0.5s;
    padding-top: 20px;
}
.sidebar.open { width: 300px; }
.sidebar.ar { right: 0; border-left: 1px solid #ddd; }
.sidebar.en { left: 0; border-right: 1px solid #ddd; }

.menu-list { list-style: none; padding: 0 30px; }
.menu-list li { padding: 15px 0; border-bottom: 1px solid #eee; }
.menu-list li a { font-weight: 600; display: block; transition: 0.3s; }

/* شبكة المنتجات */
.products-grid { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
    gap: 20px; max-width: 1200px; margin: 0 auto; padding: 20px; 
}
.product-card { border: 1px solid #eee; border-radius: 8px; padding: 15px; text-align: center; transition: 0.3s; }
.product-card img { width: 100%; height: 130px; object-fit: contain; }

/* تفاصيل المنتج */
.product-view-container { max-width: 900px; margin: 40px auto; display: flex; flex-wrap: wrap; gap: 40px; padding: 20px; }
.main-img-wrapper { background: #f9f9f9; border-radius: 15px; padding: 20px; }
.p-price { font-size: 1.5rem; color: var(--gold-dark); font-weight: bold; }

/* السلة والدفع */
.cart-item { display: flex; align-items: center; border-bottom: 1px solid #eee; padding: 15px 0; }
.checkout-container { max-width: 500px; margin: 40px auto; padding: 20px; border: 1px solid #eee; border-radius: 10px; }
.form-group { margin-bottom: 15px; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }

/* أزرار الواتساب */
.btn-whatsapp-send { background: #25D366; color: white; padding: 15px; width: 100%; border-radius: 5px; }
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; background: #25D366; color: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2000; }

/* Loader */
.spinner { border: 5px solid #f3f3f3; border-top: 5px solid var(--gold); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }