/* =====================================================
   /store/assets/css/product_details.css
   PRODUCT DETAILS PAGE — CLEAN OCEAN / ORANGE
   ملاحظة: كل القواعد Scoped على صفحة المنتج حتى لا تبوظ الهيدر أو كروت الرئيسية
===================================================== */

:root {
  --pd-bg: #eef6f9;
  --pd-card: #ffffff;
  --pd-text: #0f172a;
  --pd-muted: #64748b;
  --pd-line: #dbe7ef;
  --pd-ocean: #06738f;
  --pd-ocean-dark: #053b58;
  --pd-orange: #ff7a18;
  --pd-orange-2: #ff9f1c;
  --pd-blue: #2563eb;
  --pd-green: #16a34a;
}

* { box-sizing: border-box; }

/* شريط اسم المنتج وزر العودة */
.p-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--pd-line) !important;
  padding: 14px 20px !important;
  box-shadow: 0 8px 24px rgba(5, 59, 88, .045) !important;
}

.p-topbar-inner {
  max-width: min(1320px, calc(100% - 28px)) !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.p-title {
  margin: 0 !important;
  color: var(--pd-ocean-dark) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
}

.back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid var(--pd-line) !important;
  color: var(--pd-ocean-dark) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: .2s ease !important;
}

.back-btn:hover {
  background: var(--pd-ocean-dark) !important;
  color: #fff !important;
  border-color: var(--pd-ocean-dark) !important;
}

/* الحاوية الرئيسية */
.product-page {
  max-width: min(1320px, calc(100% - 28px)) !important;
  margin: 28px auto 34px !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 1.05fr) minmax(380px, .95fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(5, 59, 88, .10) !important;
}

.product-left {
  position: sticky !important;
  top: 128px !important;
  align-self: start !important;
}

.gallery {
  background: #fff !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: none !important;
}

.gallery-main {
  height: 480px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at center, rgba(255, 122, 24, .045), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.gallery-main img,
.gallery-main video {
  width: 100% !important;
  height: 100% !important;
  max-width: 94% !important;
  max-height: 94% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  transition: none !important;
}

.gallery-main img:hover { transform: none !important; }

.gallery-thumbs {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding: 2px 1px 4px !important;
  scrollbar-width: none !important;
}
.gallery-thumbs::-webkit-scrollbar { display: none !important; }

.thumb {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  border-radius: 10px !important;
  border: 1px solid var(--pd-line) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 4px !important;
  transition: .2s ease !important;
}

.thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.thumb:hover,
.thumb.active {
  border-color: var(--pd-orange) !important;
  box-shadow: 0 0 0 2px rgba(255, 122, 24, .16) !important;
  transform: none !important;
}

.product-right {
  background:
    linear-gradient(135deg, rgba(5, 59, 88, .045), rgba(255, 122, 24, .035)),
    #ffffff !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 18px !important;
}

.product-title {
  margin: 0 !important;
  color: var(--pd-text) !important;
  font-size: 30px !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.product-title .brand { color: var(--pd-ocean) !important; font-weight: 950 !important; }
.product-title .model { color: var(--pd-text) !important; }

.product-page .price-box {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 !important;
  border-top: 1px dashed var(--pd-line) !important;
  border-bottom: 1px dashed var(--pd-line) !important;
}

.product-page .price {
  color: var(--pd-orange) !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
}

.product-page .old-price {
  color: #94a3b8 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-decoration: line-through !important;
}

.product-page .tabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}

.product-page .tab {
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--pd-line) !important;
  background: #fff !important;
  color: var(--pd-ocean-dark) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: .2s ease !important;
}

.product-page .tab.active {
  background: var(--pd-ocean-dark) !important;
  color: #fff !important;
  border-color: var(--pd-ocean-dark) !important;
}

.product-page .tab-content {
  display: none !important;
  background: #fff !important;
  border: 1px solid var(--pd-line) !important;
  color: #475569 !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  line-height: 1.9 !important;
  font-size: 14px !important;
}

.product-page .tab-content.active { display: block !important; }

.product-page .actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

.product-page .actions .btn,
.product-page .store-btn,
.product-page .buy-btn {
  width: 100% !important;
  min-height: 52px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: .2s ease !important;
}

.product-page .store-btn-cart {
  background: linear-gradient(135deg, var(--pd-orange), var(--pd-orange-2)) !important;
  color: #fff !important;
}

.product-page .store-btn-buy,
.product-page .buy-btn:not(.whatsapp) {
  background: linear-gradient(135deg, var(--pd-blue), #1d4ed8) !important;
  color: #fff !important;
}

.product-page .store-btn-whatsapp,
.product-page .buy-btn.whatsapp,
.product-page .btn.primary {
  background: var(--pd-green) !important;
  color: #fff !important;
}

.product-page .store-btn:hover,
.product-page .buy-btn:hover,
.product-page .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(5, 59, 88, .12) !important;
  opacity: 1 !important;
}

/* Related products */
.related-section {
  max-width: min(1320px, calc(100% - 28px)) !important;
  margin: 28px auto 42px !important;
  padding: 22px !important;
  background: #ffffff !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(5, 59, 88, .08) !important;
}

.related-title {
  margin: 0 0 16px !important;
  color: var(--pd-ocean-dark) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

.related-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-inline: 0 !important;
}

.related-slider {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 4px 2px 10px !important;
  flex: 1 !important;
  scrollbar-width: none !important;
}
.related-slider::-webkit-scrollbar { display: none !important; }

.related-card {
  min-width: 220px !important;
  background: #fff !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: var(--pd-text) !important;
  overflow: hidden !important;
  transition: .2s ease !important;
}

.related-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(5, 59, 88, .10) !important;
}

.related-img {
  width: 100% !important;
  height: 165px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.related-img img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
.related-body { padding: 10px !important; }
.related-name { color: var(--pd-text) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 900 !important; margin-bottom: 6px !important; }
.related-price { color: var(--pd-orange) !important; font-weight: 1000 !important; }

.rel-btn,
.rel2-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--pd-ocean-dark) !important;
  box-shadow: 0 12px 26px rgba(5, 59, 88, .12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
.rel-btn.prev,.rel2-btn.prev { right: 8px !important; }
.rel-btn.next,.rel2-btn.next { left: 8px !important; }
.rel-btn:hover,.rel2-btn:hover { background: var(--pd-orange) !important; color: #fff !important; border-color: var(--pd-orange) !important; }

/* Checkout popup */
.checkout-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(5, 59, 88, .62) !important;
  backdrop-filter: blur(6px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}

.checkout-box {
  width: 95% !important;
  max-width: 420px !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  border: 1px solid var(--pd-line) !important;
  box-shadow: 0 28px 70px rgba(5, 59, 88, .28) !important;
  position: relative !important;
}
.checkout-title { text-align: center !important; font-size: 20px !important; font-weight: 900 !important; margin-bottom: 18px !important; color: var(--pd-ocean-dark) !important; }
.checkout-close { position:absolute !important; top:12px !important; left:12px !important; border:0 !important; background:#f1f5f9 !important; width:34px !important; height:34px !important; border-radius:10px !important; cursor:pointer !important; font-size:18px !important; }
.form-group { margin-bottom: 14px !important; display: flex !important; flex-direction: column !important; }
.form-group label { font-size: 13px !important; font-weight: 800 !important; margin-bottom: 6px !important; color: #334155 !important; }
.form-group input { height: 42px !important; padding: 0 12px !important; border-radius: 8px !important; border: 1px solid #e2e8f0 !important; font-size: 14px !important; outline: none !important; }
.form-group input:focus { border-color: var(--pd-ocean) !important; box-shadow: 0 0 0 2px rgba(6, 115, 143, .15) !important; }
.qty-group input { width: 100px !important; }
.order-btn,.checkout-box button[type="submit"] { width: 100% !important; height: 44px !important; border: 0 !important; background: linear-gradient(135deg, var(--pd-orange), var(--pd-orange-2)) !important; color: #fff !important; font-size: 15px !important; font-weight: 900 !important; border-radius: 10px !important; cursor: pointer !important; margin-top: 10px !important; }
.order-msg { text-align: center !important; font-size: 13px !important; margin-top: 10px !important; color: var(--pd-green) !important; }

.store-toast {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) translateY(20px) !important;
  min-width: 220px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--pd-ocean-dark) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
  opacity: 0;
  visibility: hidden;
  transition: .25s ease !important;
  z-index: 9999 !important;
}
.store-toast.show { opacity:1 !important; visibility:visible !important; transform:translateX(-50%) translateY(0) !important; }

@media (max-width: 900px) {
  .p-topbar { padding: 12px 10px !important; }
  .p-topbar-inner { max-width: calc(100% - 8px) !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .p-title { font-size: 15px !important; }
  .back-btn { width: 100% !important; }

  .product-page {
    grid-template-columns: 1fr !important;
    max-width: calc(100% - 18px) !important;
    margin: 16px auto 24px !important;
    padding: 12px !important;
    gap: 14px !important;
    border-radius: 14px !important;
  }
  .product-left { position: static !important; grid-row: 1 !important; }
  .product-right { grid-row: 2 !important; padding: 18px 14px !important; border-radius: 14px !important; }
  .gallery { padding: 12px !important; border-radius: 14px !important; }
  .gallery-main { height: 330px !important; border-radius: 12px !important; }
  .product-title { font-size: 22px !important; }
  .product-page .price { font-size: 26px !important; }
  .product-page .actions { grid-template-columns: 1fr !important; }
  .related-section { max-width: calc(100% - 18px) !important; padding: 14px 10px !important; border-radius: 14px !important; }
  .related-card { min-width: 190px !important; }
  .related-img { height: 145px !important; }
}

@media (max-width: 480px) {
  .gallery-main { height: 280px !important; }
  .thumb { width: 62px !important; height: 62px !important; min-width: 62px !important; }
  .product-title { font-size: 20px !important; }
  .product-page .price { font-size: 24px !important; }
}