/* === إعدادات عامة وخطوط === */

:root {

--primary-bg: #0A192F; /* أزرق داكن قريب من الملكي */

--secondary-bg: #172A45;

--accent-color: #FFD700; /* ذهبي */

--text-color: #CCD6F6;

--heading-color: #FFFFFF;

--btn-bg: var(--accent-color);

--btn-text: var(--primary-bg);

--border-color: #233554;

--font-family: 'Tajawal', sans-serif;

}



* {

box-sizing: border-box;

margin: 0;

padding: 0;

}



html {

scroll-behavior: smooth;

}



body {

font-family: var(--font-family);

background-color: var(--primary-bg);

color: var(--text-color);

line-height: 1.6;

direction: rtl;

}



.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}



h1, h2, h3 {

color: var(--heading-color);

font-weight: 700;

margin-bottom: 20px;

}



h2 {

text-align: center;

font-size: 2.5rem;

padding-bottom: 10px;

border-bottom: 2px solid var(--accent-color);

display: inline-block;

}



section, footer {

padding: 60px 0;

}



/* === الهيدر والتنقل === */

.site-header {

background: rgba(10, 25, 47, 0.85);

backdrop-filter: blur(10px);

padding: 15px 0;

position: sticky;

top: 0;

z-index: 1000;

border-bottom: 1px solid var(--border-color);

}



.site-header .container {

display: flex;

justify-content: space-between;

align-items: center;

}



.logo {

height: 50px;

transition: transform 0.3s ease;

}



.logo:hover {

transform: scale(1.1);

}



.site-header nav ul {

list-style: none;

display: flex;

gap: 30px;

}



.site-header .nav-link {

color: var(--text-color);

text-decoration: none;

font-size: 1.1rem;

position: relative;

transition: color 0.3s ease;

}



.site-header .nav-link::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -5px;

right: 0;

background-color: var(--accent-color);

transition: width 0.3s ease-in-out;

}



.site-header .nav-link:hover {

color: var(--accent-color);

}



.site-header .nav-link:hover::after {

width: 100%;

}



.cart-icon-link {

color: var(--heading-color);

text-decoration: none;

font-size: 1.5rem;

position: relative;

}



#cart-item-count {

position: absolute;

top: -8px;

right: -12px;

background-color: var(--accent-color);

color: var(--btn-text);

border-radius: 50%;

width: 22px;

height: 22px;

display: flex;

justify-content: center;

align-items: center;

font-size: 0.8rem;

font-weight: bold;

transition: transform 0.2s ease;

}



/* === قسم الترحيب === */

.welcome-section {

min-height: 60vh;

display: flex;

align-items: center;

text-align: center;

background: linear-gradient(rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.9)), url('images/hero-bg.jpg') no-repeat center center/cover; /* يمكنك تغيير الصورة */

}

.welcome-section .container {

animation: fadeIn 1.5s ease-in-out;

}

.welcome-section h1 {

font-size: 3.5rem;

font-weight: 900;

color: var(--accent-color);

}

.welcome-section p {

font-size: 1.5rem;

}





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

.products-container {

text-align: center;

}

.products-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

gap: 30px;

margin-top: 40px;

}



.product-card {

background-color: var(--secondary-bg);

border: 1px solid var(--border-color);

border-radius: 10px;

overflow: hidden;

text-align: center;

transition: transform 0.3s ease, box-shadow 0.3s ease;

display: flex;

flex-direction: column;

}



.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.product-card img {

width: 100%;

height: 250px;

object-fit: cover;

transition: opacity 0.3s ease;

}

.product-card:hover img {

opacity: 0.9;

}



.product-info {

padding: 20px;

flex-grow: 1;

display: flex;

flex-direction: column;

justify-content: space-between;

}



.product-name {

font-size: 1.3rem;

color: var(--heading-color);

margin-bottom: 10px;

}



.product-price {

font-size: 1.5rem;

color: var(--accent-color);

font-weight: bold;

margin-bottom: 20px;

}



/* === أزرار الأضافة والكمية (عامة) === */

.add-to-cart-btn, .add-color-btn {

background-color: var(--btn-bg);

color: var(--btn-text);

border: none;

padding: 12px 20px;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

font-weight: bold;

transition: background-color 0.3s ease, transform 0.2s ease;

width: 100%;

margin-top: 10px; /* لترك مسافة بين السعر والزر */

}



.add-to-cart-btn:hover, .add-color-btn:hover {

background-color: #e6c300;

transform: scale(1.03);

}



.quantity-controls {

display: flex;

justify-content: center;

align-items: center;

gap: 15px;

margin-top: 10px; /* لترك مسافة بين السعر والعداد */

}



.quantity-btn {

background-color: var(--border-color);

color: var(--accent-color);

border: none;

width: 35px;

height: 35px;

border-radius: 50%;

font-size: 1.5rem;

cursor: pointer;

transition: background-color 0.3s;

display: flex;

justify-content: center;

align-items: center;

}



.quantity-btn:hover {

background-color: #3a506b;

}



.quantity-display {

font-size: 1.2rem;

font-weight: bold;

}



/* === تنسيقات الألوان الخاصة (معدلة) === */

.color-options-container {

display: none; /* مخفي افتراضياً */

flex-direction: column;

gap: 10px;

margin-top: 15px;

padding-top: 15px;

border-top: 1px solid var(--border-color);

text-align: right; /* لمحاذاة العناصر لليمين */

animation: fadeInColorOptions 0.3s ease-out forwards; /* تأثير ظهور سلس */

}



.color-options-container.active {

display: flex; /* يظهر عند إضافة الفئة 'active' */

}



.color-item-controls {

display: flex;

align-items: center;

justify-content: space-between;

background-color: var(--primary-bg);

border: 1px solid var(--border-color);

border-radius: 5px;

padding: 8px 12px;

width: 100%;

}



.color-name {

font-weight: bold;

color: var(--accent-color);

white-space: nowrap;

}



/* تنسيق زر "أضف" للون محدد */

.add-color-btn {

padding: 8px 15px; /* تصغير حجم الزر ليتناسب مع عنصر اللون */

font-size: 0.9rem;

width: auto; /* لإلغاء width: 100% من النمط العام */

margin-top: 0; /* لإزالة الهامش العلوي الزائد */

align-self: flex-end; /* لضمان محاذاة الزر لليمين */

}





/* === السلة المصغرة في الرئيسية === */

.on-page-cart-container {

background-color: var(--secondary-bg);

border-top: 2px solid var(--accent-color);

border-bottom: 2px solid var(--accent-color);

}

.on-page-cart-container .cart-header {

display: flex;

justify-content: space-between;

align-items: center;

border-bottom: 1px solid var(--border-color);

padding-bottom: 15px;

}

.clear-cart-button {

background: #c23b22;

color: white;

border: none;

padding: 8px 15px;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s;

}

.clear-cart-button:hover {

background: #a0301c;

}



#on-page-cart-items {

padding: 20px 0;

max-height: 300px;

overflow-y: auto;

}

.on-page-cart-item {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 15px;

padding: 10px;

background: var(--primary-bg);

border-radius: 5px;

}

.cart-summary {

padding-top: 20px;

border-top: 1px solid var(--border-color);

text-align: left;

font-size: 1.3rem;

}

.btn-view-cart {

display: block;

width: 100%;

text-align: center;

margin-top: 20px;

background-color: var(--accent-color);

color: var(--btn-text);

padding: 15px;

text-decoration: none;

border-radius: 5px;

font-size: 1.2rem;

font-weight: bold;

transition: background-color 0.3s;

}

.btn-view-cart:hover {

background-color: #e6c300;

}

.empty-cart-message {

text-align: center;

padding: 20px;

color: #8892b0;

}





/* === أقسام من نحن والتواصل === */

.about-us, .contact-us {

background-color: var(--secondary-bg);

text-align: center;

}

.about-us p, .contact-us p {

max-width: 800px;

margin: 0 auto 15px auto;

font-size: 1.1rem;

}

.social-links {

margin-top: 30px;

display: flex;

justify-content: center;

gap: 20px;

}

.social-links a {

color: var(--btn-text);

background-color: var(--accent-color);

padding: 10px 25px;

border-radius: 5px;

text-decoration: none;

font-weight: bold;

transition: transform 0.3s, background-color 0.3s;

}

.social-links a:hover {

transform: translateY(-5px);

background-color: #e6c300;

}



/* === صفحة السلة === */

.cart-details-section #cart-items-container {

border: 1px solid var(--border-color);

border-radius: 5px;

padding: 20px;

}

.cart-item {

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr auto;

align-items: center;

gap: 15px;

padding: 15px 0;

border-bottom: 1px solid var(--border-color);

}

.cart-item:last-child {

border-bottom: none;

}

.cart-item-name { font-size: 1.2rem; }

.cart-item-price, .cart-item-total { color: var(--accent-color); font-weight: bold; }



.remove-item-btn {

background: #c23b22;

color: white;

border: none;

padding: 8px 12px;

cursor: pointer;

border-radius: 5px;

transition: background-color 0.3s;

}

.remove-item-btn:hover {

background: #a0301c;

}



.order-summary {

background: var(--secondary-bg);

padding: 25px;

margin-top: 30px;

border-radius: 5px;

}

.summary-item {

display: flex;

justify-content: space-between;

margin-bottom: 15px;

font-size: 1.1rem;

}

.summary-item.total {

font-size: 1.4rem;

font-weight: bold;

color: var(--accent-color);

padding-top: 15px;

border-top: 1px solid var(--border-color);

}



.customer-form {

background: var(--secondary-bg);

padding: 25px;

margin-top: 30px;

border-radius: 5px;

}

.customer-form form {

display: flex;

flex-direction: column;

gap: 20px;

}

.customer-form input, .customer-form select {

width: 100%;

padding: 15px;

background: var(--primary-bg);

border: 1px solid var(--border-color);

border-radius: 5px;

color: var(--text-color);

font-family: var(--font-family);

font-size: 1rem;

}

.customer-form input::placeholder {

color: #8892b0;

}

.customer-form select {

cursor: pointer;

}



.btn-whatsapp {

background-color: #25D366;

color: white;

border: none;

padding: 15px;

font-size: 1.2rem;

font-weight: bold;

cursor: pointer;

border-radius: 5px;

transition: background-color 0.3s;

}

.btn-whatsapp:hover {

background-color: #1DA851;

}



/* === الفوتر === */

footer {

background-color: var(--secondary-bg);

text-align: center;

border-top: 1px solid var(--border-color);

padding: 25px 0;

}



/* === حركات و تأثيرات === */

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}



@keyframes fadeInColorOptions {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}



.product-card, .on-page-cart-item, .cart-item {

animation: fadeIn 0.5s ease-out forwards;

opacity: 0;

animation-delay: calc(var(--i, 0) * 50ms);

}



/* === تصميم متجاوب === */

@media (max-width: 768px) {

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

.site-header .container { flex-wrap: wrap; justify-content: center; }

.site-header nav { order: 3; width: 100%; margin-top: 15px; }

.site-header nav ul { justify-content: center; }


.cart-item {

grid-template-columns: 1fr;

text-align: center;

gap: 10px;

}



.color-item-controls {

flex-direction: column; /* عند الشاشات الصغيرة، ضع الاسم والعداد فوق بعض */

align-items: center;

gap: 5px;

padding: 10px;

}



.add-color-btn {

width: 100%; /* اجعل زر "أضف" يأخذ العرض الكامل على الشاشات الصغيرة */

}

}