/* ===== Product Quick-View Modal (كشري الخديوي) ===== */
:root {
  --kh-main: #6C7A89;
  --kh-dark: #111;
  --kh-border: #e5e5e5;
  --kh-bg: #fff;
}

.khed-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.khed-modal-backdrop.active { display: flex; }

.khed-modal {
  width: min(1050px, 95vw);
  max-height: 92vh;
  background: var(--kh-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: grid;
  grid-template-columns: 56% 44%;
}

.khed-modal__left {
  background: #fafafa;
  border-left: 1px solid var(--kh-border);
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.khed-modal__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.khed-modal__thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
}
.khed-modal__thumbs img.active { border-color: var(--kh-main); }

.khed-modal__stage {
  background: #fff;
  border: 1px solid var(--kh-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  overflow: hidden;
}
.khed-modal__stage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.khed-modal__right {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.khed-close {
  position: absolute;
  top: 10px; left: 10px;
  background: #fff;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--kh-border);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.khed-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}

.khed-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.khed-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.khed-price .now { color: var(--kh-main); font-weight: 800; font-size: 22px; }
.khed-price .old { color: #999; text-decoration: line-through; font-size: 14px; }

.khed-options { display: grid; gap: 12px; }

.khed-option-group { display: grid; gap: 8px; }
.khed-option-label { font-weight: 700; color: var(--kh-dark); }

.khed-color-pills, .khed-size-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.khed-pill {
  border: 1px solid var(--kh-border);
  background: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: .2s;
  user-select: none;
}
.khed-pill[data-color] { padding: 0; width: 34px; height: 34px; border-radius: 999px; }
.khed-pill:hover { transform: translateY(-1px); }
.khed-pill.active { border-color: var(--kh-main); box-shadow: 0 0 0 2px rgba(253,152,0,.15); }

.khed-qty {
  display: flex; align-items: center; gap: 10px;
}
.khed-qty button {
  width: 34px; height: 34px; border-radius: 8px; border:1px solid var(--kh-border);
  background:#fff; cursor:pointer; font-size:18px;
}
.khed-qty input {
  width: 64px; text-align: center; height: 34px; border:1px solid var(--kh-border); border-radius:8px;
}

.khed-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.khed-btn {
  border: 2px solid var(--kh-main);
  background: var(--kh-main);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s;
  text-align: center;
}
.khed-btn.secondary {
  background: #fff; color: var(--kh-dark);
}
.khed-btn:hover { transform: translateY(-1px); }

@media (max-width: 880px) {
  .khed-modal { grid-template-columns: 1fr; }
  .khed-modal__left { order: -1; }
}


/* === Mobile usability fixes === */
.khed-modal {
  max-height: 92vh;
  overflow: auto; /* allow internal scroll */
  position: relative;
}

.khed-modal__right {
  overflow: auto;
  max-height: calc(92vh - 36px);
}

.khed-modal__left {
  max-height: calc(92vh - 36px);
  overflow: auto;
}

@media (max-width: 880px) {
  .khed-modal {
    height: 95vh;          /* full height on phones */
    max-height: 95vh;
    overflow: auto;
  }
  .khed-modal__right,
  .khed-modal__left {
    max-height: calc(95vh - 36px);
    overflow: auto;
  }
  .khed-modal__stage {
    min-height: 260px;     /* smaller stage on phones so options are reachable */
  }
  .khed-modal__thumbs {
    padding-bottom: 30px;
  }
}

/* Make the close button stick on top for easy access */
.khed-close {
  position: sticky;
  top: 10px;
  left: auto;
  right: 10px;
  z-index: 5;
}

/* Ensure thumb row is finger-scrollable */
.khed-modal__thumbs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

 






/* === KH FINAL OVERRIDES — Quick View Modal (2025-10-20) ===
   - الصورة الكبيرة كاملة بدون قص (contain)
   - مساحة ثابتة معقولة بلا سكرول رأسي
   - الثمبنيل واضحة وتمرير أفقي
============================================================ */
.khed-modal{
  width: min(1120px, 96vw) !important;
  max-height: 94vh !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}
.khed-modal__left{
  display:grid !important; grid-template-rows: auto 1fr !important; gap:12px !important;
}
.khed-modal__stage{
  min-height: clamp(360px, 62vh, 720px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important;
}
.khed-modal__stage img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important;
}
.khed-modal__thumbs{
  display:flex !important; gap:10px !important; overflow-x:auto !important; padding-bottom:6px !important;
  -webkit-overflow-scrolling: touch;
}
.khed-modal__thumbs img{
  width:86px !important; height:86px !important; border-radius:10px !important;
}
@media (max-width: 900px){
  .khed-modal{ grid-template-columns: 1fr !important; }
  .khed-modal__stage{ min-height: clamp(300px, 52vh, 640px) !important; }
  .khed-modal__thumbs img{ width:72px !important; height:72px !important; }
}






/* === KH FIX • Desktop full + Single scroll + Clear thumbs (2025-10-20) === */

/* 1) المودال نفسه هو اللي يعمل سكرول واحد فقط */
.khed-modal{
  width: min(1120px, 96vw) !important;
  max-height: 94vh !important;
  overflow: auto !important;           /* سكرول واحد للمودال كله */
  border-radius: 22px !important;
  grid-template-columns: 50% 50% !important; /* عمودين متساويين على الديسكتوب */
  align-items: start !important;
}

/* 2) إيقاف أي سكرول داخلي كان مضاف قبل كده */
.khed-modal__right,
.khed-modal__left{
  overflow: visible !important;
  max-height: none !important;
}

/* 3) ترتيب اليسار: ثمنبيل فوق + الصورة الكبيرة تحتهم */
.khed-modal__left{
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 12px !important;
}

/* صف الثمنبيل: واضح، غير مقصوص، يتمرر أفقياً لو زاد */
.khed-modal__thumbs{
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  padding: 6px 4px !important;
  margin-top: 4px !important;
  -webkit-overflow-scrolling: touch;
}
.khed-modal__thumbs img{
  flex: 0 0 auto !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 10px !important;
}

/* 4) الصورة الكبيرة تحت الثمنبيل – تظهر كاملة وغير مقصوصة */
.khed-modal__stage{
  /* أقلل الارتفاع شوية على الديسكتوب عشان الجهة اليمين (الألوان/المقاسات) تبان */
  min-height: clamp(320px, 52vh, 680px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.khed-modal__stage img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;    /* الصورة كاملة */
  object-position: center !important;
}

/* 5) موبايل/تابلت: عمود واحد، نفس الفكرة لكن بارتفاع مناسب */
@media (max-width: 900px){
  .khed-modal{
    grid-template-columns: 1fr !important;
  }
  .khed-modal__stage{
    min-height: clamp(300px, 52vh, 620px) !important;
  }
  .khed-modal__thumbs img{
    width: 80px !important;
    height: 80px !important;
  }
}