/* ================================
  (النسخة النهائية والمُرتبة) CSS موحد — ثيم أسود/ذهبي
  يتضمن ترتيب صفحة الطلب (Checkout) إلى عمودين
================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* ==================
  0. متغيرات الألوان (Theme Variables)
================== */
:root {
  --black: #000000;
  --white: #adadad;
  --gold: #D4AF37;
  --muted: #AAAAAA;
  --accent: #111111; /* مظلم جداً لتأثير الظل */
  --light-gray: #F8F8F8; /* خلفية صفحة الطلب الفاتحة */
  --dark-text: #333333; /* لون نص داكن للخلفيات الفاتحة */
  --light-border: #EEEEEE; /* خط فاصل خفيف */
}

/* ==================
  1. القواعد الأساسية والعامة (Base & Global Styles)
================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0 solid transparent;
}
body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--black);
  color: var(--white);
  line-height: 1.6;
}

/* عناوين */
h1,h2,h3,h4,h5,h6{
  font-family: 'Playfair Display', serif;
  color: var(--white);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .5em;
}
h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.5rem}

/* روابط */
a{ color:var(--gold); text-decoration:none; transition:color .25s;}
a:hover{ color:var(--white); }

/* شريط التنقل */
.navbar, .top-nav, .main-nav-container {
  background: var(--black) !important;
  color: var(--white) !important;
  border-bottom: 1px solid var(--gold);
  padding: 15px;
  box-shadow: 0 2px 10px rgba(212,175,55,0.12);
}
.navbar a, .top-nav a { color:var(--white) !important; text-transform:uppercase; font-weight:bold; }
.navbar a:hover, .top-nav a:hover { color:var(--gold) !important; }

/* أزرار عامة */
button, .btn {
  background-color: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
  padding: 10px 10px;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s ease;
}
button:hover, .btn:hover {
  background-color: var(--D4AF37);
  color: var(--black);
}

/* بطاقات المنتجات */
.card, .product-card {
  background-color: var(--accent);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px;
  padding: 20px;
  transition: transform .25s ease;
  box-shadow: 0 0 12px rgba(212,175,55,0.08);
}
.card:hover, .product-card:hover { transform: translateY(-5px); }

.card-title, .product-title {
  color: var(--white);
  font-size: 24px;
  margin-bottom: 10px;
}
.card-text, .product-description { color: var(--muted); font-size:16px; }

/* الأسعار */
.product-price {
  color: var(--gold);
  font-weight: 800;
  font-size: 2.9rem;
  line-height: 1;
  display: block;
  margin-top: 8px;
  text-align: center;
}

/* ==================
  2. تنسيق وترتيب صفحة الطلب (Checkout Layout)
================== */
.order-page {
  background-color: var(--light-gray); /* خلفية فاتحة للصفحة */
  color: var(--dark-text);
  padding: 40px 20px;
  min-height: 100vh;
}

/* الحاوية الرئيسية - استخدام Grid لترتيب العمودين */
.order-container {
  max-width: 1200px;
  margin: 0 auto;
  background: transparent !important;
  border: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  grid-template-columns: 350px 1fr; /* عمود يسار (350px) وعمود يمين مرن (1fr) */
  gap: 30px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* حاوية ملخص الطلب والبطاقات الجانبية (العمود الأيسر) */
.cart-summary-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky; /* لجعل الملخص ثابتاً أثناء التمرير */
  top: 40px;
}

/* حاوية تفاصيل الطلب والحقول (العمود الأيمن) */
.order-details-container {
  background-color: var(--white); /* خلفية بيضاء لتفاصيل المنتج والحقول */
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.1);
  padding: 40px;
}

/* حماية الألوان الداخلية */
.order-container .bg-white {
  background: transparent !important;
  color: var(--dark-text) !important;
}
.order-container * {
  background-image: none !important;
}
.order-page h1, .order-page h2 {
  color: var(--dark-text);
  text-align: left;
  margin-bottom: 25px;
  font-family: 'Playfair Display', serif;
}


/* ==================
  3. بطاقة السلة / ملخص الطلب (Cart/Summary Styles)
================== */
.cart {
  /* تصميم مشابه للصورة: خلفية بيضاء وظل ناعم */
  background-color: var(--black);
  border: none;
  border-radius: 10px;
  padding: 25px; 
  max-width: none; 
  margin: 0; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: var(--dark-text);
}

.cart h2 {
  text-align: center;
  color: var(--dark-text);
  font-size:32px;
  margin-bottom: 25px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  text-transform: none; /* إزالة التحويل إلى أحرف كبيرة للعنوان "ملخص الطلب" */
}

.cart-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--light-border);
  font-size: 15px;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-name { color: var(--dark-text); }
.cart-item-price { color: var(--dark-text); font-weight: 600; }

/* إجمالي السلة */
.cart-total {
  text-align: right;
  font-size: 3.5rem;
  color: var(--gold);
  margin-top: 20px;
  font-weight: 800;
  border-top: 1px solid var(--light-border);
  padding-top: 15px;
}

/* زر إتمام الطلب داخل السلة */
.cart .submit-order-btn,
.cart .btn {
  width: 100%;
  background-color: var(--gold) !important;
  color: var(--black) !important;
  border: none !important;
  padding: 15px 20px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  margin-top: 25px;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
  transition: all 0.2s ease;
}

.cart .submit-order-btn:hover,
.cart .btn:hover {
  background-color: var(--white) !important;
  color: var(--gold) !important;
  box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

/* ==================
  4. بطاقة الشحن (Free Shipping Card Styles)
================== */
.free-shipping-card {
  background-color: var(--black);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dark-text);
  max-width: none;
  margin: 0;
}

.free-shipping-card .icon {
  background-color: var(--gold);
  color: var(--white);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.free-shipping-card .text-content {
  margin-right: 15px;
  text-align: right;
  flex-grow: 1;
}

.free-shipping-card h3 {
  color: var(--dark-text);
  font-size: 1.2rem;
  margin-bottom: 5px;
  font-family: 'Cairo', sans-serif;
  text-transform: none;
}

.free-shipping-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ==================
  5. تنسيق الحقول ونموذج الطلب (Form Styles)
================== */
/* الحقول */
.order-form label {
  display:block;
  color: var(--dark-text);
  margin-bottom:8px;
  font-weight:700;
  font-size: 14px;
}
.order-form input,
.order-form select,
.order-form textarea {
  width:100%;
  padding:12px;
  border:1px solid #DDDDDD;
  border-radius:6px;
  background-color: var(--white);
  color:var(--dark-text);
  margin-bottom:px;
  transition: box-shadow .18s ease;
}
.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus {
  outline:none;
  box-shadow: 0 0 12px rgba(212,175,55,0.15);
  border-color: var(--gold);
}

/* ملخص الطلب داخل نموذج الطلب (إذا كان منفصلاً) */
.order-summary {
  background-color: transparent;
  border-top: 1px dashed #DDDDDD;
  padding-top: 18px;
  margin-top: 20px;
}
.order-summary h3 { color: var(--dark-text); margin-bottom:12px; font-size:1.1rem; }
.order-summary-item {
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  color:var(--dark-text);
  border-bottom: 1px solid #EEEEEE;
}
.order-summary-item:last-child { border-bottom:none; }

/* إجمالي الطلب */
.order-total {
  text-align: right;
  font-size: 1.6rem;
  color: var(--gold);
  font-weight: 900;
  margin-top: 14px;
}

/* زر الإرسال في صفحة الطلب (داخل order-details-container) */
.order-form button.submit-order,
.order-details-container .btn,
.order-details-container button {
  width:100% !important;
  background-color: var(--gold) !important;
  color: var(--black) !important;
  border: none !important;
  font-weight:800;
  padding:15px;
  border-radius:8px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  font-size: 1.1rem;
  margin-top: 30px;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}
.order-form button.submit-order:hover,
.order-details-container .btn:hover,
.order-details-container button:hover {
  transform: translateY(-2px);
  background-color: var(--white) !important;
  color: var(--gold) !important;
  box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4);
}

/* رسالة النجاح */
.order-success {
  text-align:center;
  background-color: rgba(26,26,26,0.6);
  color: var(--gold);
  border:1px solid rgba(212,175,55,0.14);
  border-radius:10px;
  padding:26px;
  margin-top:30px;
  box-shadow: 0 0 20px rgba(212,175,55,0.12);
}

/* ==================
  6. تنسيقات إضافية و Utilities
================== */
.font-bold{ font-weight:700 }
.text-xl{ 
  font-family: 'Cairo', sans-serif;
  font-size: 2rem;
  line-height: 2rem;
  color: var(--white);
}
.inline-block{ display:inline-block }
.p-5{ padding:1.25rem }
.rounded-md{ border-radius:.375rem }

/* زر كمية السلة */
.s-quantity-input-button {
  width: 2.75rem;
  background-color: var(--gold);
  fill: var(--black);
}

.s-button-btn, .s-price-range-number-input {
  border-radius: .50rem;
}
.s-button-primary-outline {
  fill: var(--gold);
  color: var(--gold);
  border: 1px solid var(--gold);
  background-color: transparent;
}

/* تنسيق بطاقة الميزات */
.s-block--features__item {
  align-items: center;
  border-radius: .375rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--accent);
  color: var(--white);
  padding: 2rem 1rem;
  text-align: center;
  transition-duration: .5s;
  transition-property: box-shadow, transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  border: 1px solid rgba(212,175,55,0.12);
}
.s-block--features__item:hover {
    box-shadow: 0 0 15px rgba(212,175,55,0.25);
    transform: translateY(-3px);
}

/* تعديلات التخطيط */
.s-block--features__item:first-child {
  grid-column: span 1 / span 1;
}

/* سعر بطاقة المنتج */
.s-product-card-price, .s-product-card-starting-price h4 {
  font-family: 'Cairo', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: var(--gold);
  text-align: center;
}

/* ==================
  7. التجاوب (Media Queries)
================== */
@media (max-width: 992px) {
  .order-container {
    grid-template-columns: 1fr; /* عمود واحد في الموبايل */
    gap: 20px;
  }
  .cart-summary-wrapper {
    position: relative; /* إزالة الـ sticky في الموبايل */
    top: 0;
  }
  .order-details-container, .cart, .free-shipping-card { 
    max-width: 100%; /* استخدام كامل العرض */
  }

  /* تعديلات الخطوط والمقاسات للهواتف */
  .product-title { font-size:25px; }
  .product-description { font-size:14px; }
  .product-price { font-size:2.6rem; }
  .order-total { font-size:2.35rem; }

  .s-block--features__item:first-child {
      grid-column: span 1 / span 1;
  }
  .free-shipping-card {
    flex-direction: column; 
    text-align: center;
  }
  .free-shipping-card .icon {
    margin-bottom: 10px;
    margin-right: 0;
  }
}

@media (min-width: 1200px) {
  .s-block--features__item {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .s-block--features__item:first-child {
    grid-column: span 1 / span 1; 
  }
  .s-comments-product {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}

.text-xl {
    font-family: 'Cairo', sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    color: var(--Red);
}