/* ═══════════════════════════════════════════════════════
   cart-light.css — السلة والمفضلة | محمصة سليمان
   ألوان كريمية + bottom sheet على الموبايل
   يُحمَّل بعد style.css — لا يمس أي كود آخر
   ═══════════════════════════════════════════════════════ */


/* ════════════════════════════════
   1. الألوان — ديسكتوب + موبايل
   ════════════════════════════════ */

.cart-pnl,
.wish-pnl {
  background: #fdf5e4;
  border-right-color: rgba(34, 40, 51, 0.1);
  border-left-color:  rgba(34, 40, 51, 0.1);
}

.cphead {
  border-bottom-color: rgba(34, 40, 51, 0.1);
  background: #f9e6c0;
}
.cphead h3       { color: var(--dark); font-size: 1.1rem; font-weight: 700; }
.cpclose         { background: rgba(34,40,51,0.06); color: var(--dark); }
.cpclose:hover   { background: rgba(237,97,59,0.12); color: var(--org); }

.cp-empty        { color: var(--dark); opacity: 0.3; }

/* ── عناصر السلة ── */
.ci {
  border-bottom-color: rgba(34,40,51,0.08);
  padding: 1rem 0;
}
.ci-ic           { background: rgba(34,40,51,0.05); }

/* اسم المنتج — أوضح وأكبر */
.ci-nm {
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}

/* الوزن — مميز بلون مختلف */
.ci-wt {
  color: #c04e28 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  margin-bottom: 6px;
  text-transform: none !important;
}

.ci-grind { color: var(--org); font-size: 0.78rem; }

/* السعر — واضح وبولد */
.ci-pr {
  color: var(--dark) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* السعر المشطوب — أغمق وأوضح */
.ci-pr span[style*="line-through"] {
  color: rgba(34,40,51,0.45) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

/* ── أزرار الطحن — أكبر وأوضح ── */
.grind-sel {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 0.3rem !important;
  margin-top: 0.4rem !important;
}
.gbtn {
  border-color: rgba(34,40,51,0.2);
  color: var(--dark);
  font-size: 0.75rem;
  padding: 0.28rem 0.72rem;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.15s;
  background: rgba(34,40,51,0.03);
}
.gbtn:hover {
  border-color: var(--org);
  color: var(--org);
  background: rgba(237,97,59,0.06);
}
.gbtn.active {
  border-color: var(--org);
  color: #fff;
  background: var(--org);
  font-weight: 700;
}

/* ── أزرار الكمية ── */
.qb {
  background: rgba(34,40,51,0.06);
  border-color: rgba(34,40,51,0.14);
  color: var(--dark);
  font-weight: 600;
}
.qb:hover        { background: var(--org); border-color: var(--org); color: #fff; }
.qb.qb-del       { background: transparent; border-color: rgba(34,40,51,0.12); color: rgba(34,40,51,0.4); opacity: 1; }
.qb.qb-del:hover { background: transparent; border-color: rgba(229,62,62,0.4); color: #e53e3e; }
.qn              { color: var(--dark); font-weight: 700; font-size: 0.95rem; }

.cp-qty button       { background: rgba(34,40,51,0.06); border-color: rgba(34,40,51,0.14); color: var(--dark); }
.cp-qty button:hover { background: var(--org); border-color: var(--org); color: #fff; }
.cp-qty span         { color: var(--dark); font-weight: 700; }

/* ── فوتر السلة ── */
.cpfoot {
  border-top-color: rgba(34,40,51,0.1);
  background: #f9e6c0;
}
.cptlbl {
  color: var(--dark);
  font-size: 0.82rem;
  opacity: 0.5;
}
.cptvl {
  color: var(--dark);
  font-size: 1.1rem;
  font-weight: 700;
}

/* المجموع المشطوب بالفوتر */
#ctotal span[style*="line-through"] {
  color: rgba(34,40,51,0.4) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

/* خصم الكود بالفوتر */
#ctotal div {
  font-size: 0.78rem !important;
  color: #2a9d5c !important;
  font-weight: 600 !important;
  margin-top: 2px;
}

/* ── نموذج التوصيل ── */
.delivery-form   { background: rgba(34,40,51,0.03); border-color: rgba(34,40,51,0.08); }
.df-title        { color: var(--dark); font-weight: 700; font-size: 0.88rem; }
.df-label        { color: var(--dark); opacity: 0.55; font-size: 0.75rem; }
.df-input,
.df-select,
.df-notes        { background: #fff; border-color: rgba(34,40,51,0.15); color: var(--dark); color-scheme: light; font-size: 0.9rem; }
.df-input:focus,
.df-select:focus,
.df-notes:focus  { border-color: rgba(237,97,59,0.5); outline: none; }
.df-input::placeholder,
.df-notes::placeholder { color: var(--dark); opacity: 0.25; }
.df-select option { background: #fff; color: var(--dark); }

/* ── كود الخصم ── */
.discount-section        { border-bottom-color: rgba(34,40,51,0.08); }
.discount-active-code    { color: var(--dark); font-weight: 700; }
.discount-active-cats    { color: rgba(34,40,51,0.5); font-size: 0.78rem; }
.discount-remove-btn     { color: rgba(34,40,51,0.3); }
.discount-remove-btn:hover { color: #e53e3e; }
.discount-apply-btn      { background: var(--dark); color: var(--cream); font-weight: 600; }
.discount-apply-btn:hover { background: var(--org); }

/* ── عناصر المفضلة ── */
.wi              { border-bottom-color: rgba(34,40,51,0.08); }
.wi-ic           { background: rgba(34,40,51,0.05); }
.wi-nm           { color: var(--dark); font-weight: 700; font-size: 0.92rem; }
.wi-cat          { color: var(--dark); opacity: 0.4; font-size: 0.75rem; }
.wi-pr           { color: var(--org); font-weight: 700; }
.wi-remove       { color: var(--dark); border-color: rgba(34,40,51,0.15); }
.wi-remove:hover { color: #e53e3e; border-color: rgba(229,62,62,0.4); }

.wi-wbtn         { border-color: rgba(34,40,51,0.18); color: var(--dark); font-size: 0.78rem; }
.wi-wbtn.active  { border-color: var(--org); color: #fff; background: var(--org); }
.wi-wbtn:hover   { border-color: rgba(34,40,51,0.4); }
.wi-single-w     { color: var(--dark); opacity: 0.35; }

/* wish-actions */
.wish-view             { background: rgba(34,40,51,0.06); color: var(--dark) !important; font-weight: 600; }
.wish-view:hover       { background: rgba(237,97,59,0.1); color: var(--org) !important; }
.wish-actions button   { background: none; border-color: rgba(34,40,51,0.14) !important; color: rgba(34,40,51,0.5) !important; }
.wish-actions button:hover { border-color: rgba(229,62,62,0.4) !important; color: #e53e3e !important; }

/* cp-item (المفضلة) */
.cp-item         { border-bottom-color: rgba(34,40,51,0.08); }
.cp-name         { color: var(--dark); font-weight: 700; font-size: 0.92rem; }
.cp-weight       { color: rgba(34,40,51,0.45); font-size: 0.78rem; }

/* ── Scrollbar ── */
.cart-pnl ::-webkit-scrollbar-track,
.wish-pnl ::-webkit-scrollbar-track  { background: #f0ddb8; }
.cart-pnl ::-webkit-scrollbar-thumb,
.wish-pnl ::-webkit-scrollbar-thumb  { background: rgba(34,40,51,0.2); border-radius: 4px; }
.cart-pnl ::-webkit-scrollbar-thumb:hover,
.wish-pnl ::-webkit-scrollbar-thumb:hover { background: rgba(34,40,51,0.35); }


/* ════════════════════════════════════════════
   2. BOTTOM SHEET — موبايل فقط (max 768px)
   ════════════════════════════════════════════ */

@media (max-width: 768px) {

  .cart-pnl {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 88svh !important;
    max-height: 88svh !important;
    transform: translateY(100%) !important;
    border-radius: 20px 20px 0 0 !important;
    border-right: none !important;
    border-top: 1px solid rgba(34,40,51,0.08) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .cart-pnl.open {
    transform: translateY(0) !important;
  }

  .wish-pnl {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 88svh !important;
    max-height: 88svh !important;
    transform: translateY(100%) !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(34,40,51,0.08) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .wish-pnl.open {
    transform: translateY(0) !important;
  }

  /* شريط السحب */
  .cphead::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(34,40,51,0.15);
    border-radius: 2px;
    margin: 0 auto 0.9rem;
  }

  .cphead {
    flex-direction: column !important;
    padding-top: 0.9rem !important;
    position: relative !important;
  }
  .cphead h3 { font-size: 1.15rem; }
  .cpclose {
    position: absolute !important;
    top: 0.85rem !important;
    left: 1.2rem !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
  }

  /* Body */
  .cpbody {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.8rem 1.1rem !important;
  }

  /* أزرار الكمية — أكبر للإبهام */
  .qb {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  /* أزرار الطحن — صف أفقي متعدد الأسطر */
  .grind-sel {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 0.28rem !important;
  }
  .ci-wt {
    color: #c04e28 !important;
    opacity: 1 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }
  .gbtn {
    font-size: 0.72rem !important;
    padding: 0.28rem 0.65rem !important;
    min-height: unset !important;
  }

  /* الـ inputs */
  .df-input,
  .df-select,
  .df-notes {
    font-size: 1rem !important;
    padding: 0.85rem 0.9rem !important;
  }

  /* زر الواتساب */
  .wabtn {
    padding: 1.1rem !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
  }

  /* إزالة الشريط الكريمي تحت الزر */
  .cart-pnl,
  .wish-pnl {
    padding-bottom: 0 !important;
  }
  .cpfoot {
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom)) !important;
  }
}