/* =========================
   Salla – Car Rental Product Look
   Scoped broadly to product pages
   ========================= */
:root{
  --rent-bg:#0b0f17;
  --rent-card:#0f1626;
  --rent-b:rgba(255,255,255,.10);
  --rent-t:rgba(255,255,255,.92);
  --rent-m:rgba(255,255,255,.65);
  --rent-a:#7c3aed; /* بنفسجي فاخر */
  --rent-ok:#22c55e;
}

/* خلفية صفحة المنتج */
body:has(h1){
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(124,58,237,.18), transparent 55%),
    linear-gradient(180deg, rgba(124,58,237,.10), transparent 40%),
    var(--rent-bg) !important;
}

/* اجعل النصوص مناسبة للخلفية الداكنة داخل منطقة المنتج */
main, .container, [class*="container"]{
  color: var(--rent-t);
}

/* الكرت الرئيسي (يستهدف أغلب قوالب سلة) */
main :is(
  .product, .product-details, .product-single,
  .salla-product-details, [class*="product-details"], [class*="product-single"]
){
  background: rgba(15,22,38,.72);
  border: 1px solid var(--rent-b);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  overflow: hidden;
}

/* توزيع “تأجير سيارة”: جاليري يسار + تفاصيل يمين (يتحول عمودي بالموبايل) */
main :is(.product, .product-details, .product-single, .salla-product-details, [class*="product-details"]) > .container,
main :is(.product, .product-details, .product-single, .salla-product-details, [class*="product-details"]) .container{
  padding: 14px !important;
}

@media (min-width: 920px){
  main :is(.product, .product-details, .product-single, .salla-product-details, [class*="product-details"]) .container{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 16px;
    align-items: start;
  }
}

/* الصور */
main img{
  border-radius: 16px !important;
  filter: saturate(1.05) contrast(1.05);
}

/* عنوان المنتج */
h1{
  font-weight: 900 !important;
  letter-spacing: .2px;
  margin: 6px 0 8px !important;
}

/* صندوق السعر + إضافة "/ اليوم" */
main :is(.price, .product-price, [class*="price"]){
  display: inline-flex !important;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, rgba(124,58,237,.22), rgba(255,255,255,.06)) !important;
  border: 1px solid var(--rent-b) !important;
  font-weight: 900 !important;
  color: var(--rent-t) !important;
}
main :is(.price, .product-price, [class*="price"])::after{
  content: " / اليوم";
  font-size: 13px;
  color: var(--rent-m);
  font-weight: 800;
  margin-inline-start: 6px;
}

/* حالة التوفر “نفدت الكمية” شكلها كبادج */
main :is(.out-of-stock, [class*="stock"], [class*="availability"]){
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(15,22,38,.75);
  border: 1px solid var(--rent-b);
  backdrop-filter: blur(10px);
  font-weight: 800;
}
main :is(.out-of-stock, [class*="stock"], [class*="availability"])::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background: var(--rent-ok);
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}

/* أزرار */
main :is(button, .btn, [class*="btn"], [class*="add-to-cart"], [class*="buy"]){
  border-radius: 12px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(124,58,237,.35) !important;
}
main :is(.btn-primary, button.primary, [class*="primary"]){
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(124,58,237,.55)) !important;
  color: #fff !important;
}

/* “شارات مواصفات” تلقائيًا لو كتبتها كنقاط داخل الوصف */
main :is(.product-description, [class*="description"]) ul{
  padding: 0 !important;
  margin: 10px 0 0 !important;
}
main :is(.product-description, [class*="description"]) ul li{
  list-style: none !important;
  display: inline-flex;
  margin: 6px 8px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--rent-b) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 13px !important;
}

/* إزالة خلفيات بيضاء داخلية لبعض القوالب */
main :is(.card, .panel, .box, [class*="card"], [class*="panel"], [class*="box"]){
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
}