/*
 * service-products.css
 * قسم منتجات الخدمة + السلة العالمية (Feature 2)
 * يتبع نفس متغيرات التصميم في site-comments.css
 * أسماء الكلاسات مخصصة بادئة sp- لتفادي التعارض مع أي CSS عام بالموقع
 */

:root {
  --sp-primary   : var(--primary-color,   #1a365d);
  --sp-accent    : var(--secondary-color, #2b6cb0);
  --sp-bg        : #ffffff;
  --sp-surface   : #f8fafc;
  --sp-border    : #e8edf3;
  --sp-text      : #1e293b;
  --sp-muted     : #64748b;
  --sp-green     : #10b981;
  --sp-red       : #ef4444;
  --sp-radius    : 14px;
  --sp-radius-sm : 8px;
  --sp-shadow    : 0 2px 8px rgba(0,0,0,.06);
  --sp-shadow-md : 0 6px 24px rgba(0,0,0,.12);
}

.sp-section {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.sp-title {
  font-size: 1.4rem;
  color: var(--sp-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── تبويبات التصنيفات ── */
.sp-cate-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}
.sp-cate-tab {
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--sp-border);
  background: var(--sp-bg);
  color: var(--sp-text);
  font-size: .9rem;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}
.sp-cate-tab.active,
.sp-cate-tab:hover {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
  color: #fff;
}

/* ── شبكة المنتجات ── */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.sp-card {
  background: var(--sp-bg);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  overflow: hidden;
  box-shadow: var(--sp-shadow);
  transition: .2s ease;
  display: flex;
  flex-direction: column;
}
.sp-card:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-2px); }

.sp-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--sp-surface);
}
.sp-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 2rem;
}

.sp-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sp-card-name { font-size: 1rem; color: var(--sp-text); margin: 0; }
.sp-card-desc { font-size: .82rem; color: var(--sp-muted); margin: 0; line-height: 1.5; flex: 1; }

.sp-card-price { display: flex; align-items: baseline; gap: 8px; }
.sp-price { font-size: 1.05rem; font-weight: 700; color: var(--sp-primary); }
.sp-old-price { font-size: .82rem; color: #94a3b8; text-decoration: line-through; }

.sp-add-btn {
  margin-top: 4px;
  padding: 9px 12px;
  border: none;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-accent);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: .18s ease;
}
.sp-add-btn:hover { background: var(--sp-primary); }
.sp-add-btn.sp-added { background: var(--sp-green); }

/* ── بطاقة عرض (Feature 3) ── */
.sp-card-offer {
  position: relative;
  border-color: #8f6b1e66;
  box-shadow: 0 2px 10px rgba(245,158,11,.15);
}
.sp-offer-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #b8892b, #8f6b1e);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.sp-offer-countdown {
  font-size: .78rem;
  color: #8f6b1e;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── مكوّن "مدة العرض + عدّاد تنازلي حي" الموحّد (Feature 3 تحديث) ── */
.sp-offer-timer {
  margin-top: 6px;
  padding: 8px 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
}
.sp-offer-daterange {
  font-size: .76rem;
  color: #9a3412;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sp-countdown-boxes {
  display: flex;
  gap: 6px;
}
.sp-cd-box {
  flex: 1;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  text-align: center;
  padding: 4px 2px;
}
.sp-cd-num {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: #c2410c;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sp-cd-label {
  display: block;
  font-size: .62rem;
  color: #9a3412;
  margin-top: 1px;
}

/* ── تمييز مؤقت للمنتج عند الوصول إليه من صفحة العروض ── */
.sp-card-highlight {
  animation: sp-pulse-highlight 1.8s ease 2;
}
@keyframes sp-pulse-highlight {
  0%, 100% { box-shadow: 0 2px 10px rgba(245,158,11,.15); }
  50% { box-shadow: 0 0 0 6px rgba(245,158,11,.35); }
}

/* ── صفحة العروض والخصومات (Feature 3) ── */
.sp-offers-hero {
  position: relative;
}
.sp-offers-count-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  background: linear-gradient(135deg, #b8892b, #8f6b1e);
  color: #fff;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.sp-offers-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--sp-muted);
}
.sp-offers-empty i {
  font-size: 2.4rem;
  margin-bottom: 14px;
  display: block;
  color: #cbd5e1;
}
.sp-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 20px;
}
.sp-offer-card {
  display: block;
  background: var(--sp-bg);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sp-shadow);
  text-decoration: none;
  color: inherit;
  transition: .25s ease;
}
.sp-offer-card:hover {
  box-shadow: 0 10px 30px rgba(245,158,11,.2);
  transform: translateY(-4px);
  border-color: #8f6b1e55;
}
.sp-offer-card-img-wrap { position: relative; height: 180px; overflow: hidden; }
.sp-offer-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sp-offer-card:hover .sp-offer-card-img-wrap img { transform: scale(1.06); }
.sp-offer-card-gradient {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
.sp-offer-discount-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-radius: 12px;
  padding: 6px 10px;
  text-align: center;
  line-height: 1.05;
  box-shadow: 0 3px 10px rgba(220,38,38,.35);
}
.sp-offer-discount-ribbon strong { display: block; font-size: 1.15rem; }
.sp-offer-discount-ribbon small { display: block; font-size: .62rem; opacity: .9; }
.sp-offer-cate-chip {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 2;
  background: rgba(255,255,255,.92);
  color: var(--sp-primary);
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.sp-offer-card-body { padding: 16px; }
.sp-offer-card-service {
  font-size: .78rem;
  color: var(--sp-accent);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-weight: 600;
}
.sp-offer-card-name { font-size: 1.05rem; color: var(--sp-text); margin: 0 0 8px; line-height: 1.35; }
.sp-offer-view-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(43,108,176,.1);
  color: var(--sp-accent);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  margin-top: 10px;
  transition: .2s;
}
.sp-offer-card:hover .sp-offer-view-btn {
  background: var(--sp-accent);
  color: #fff;
}

/* ── أيقونة السلة داخل شريط التواصل العائم (تُحقن عبر JS بنفس كلاسات itm-fixed-social-link) ── */
.itm-fixed-cart {
  background: linear-gradient(135deg, #b8892b, #8f6b1e);
}

/* ── أيقونة السلة الثابتة في top-nav ── */
#sp-navcart-btn,
#sp-navcart-btn-mobile {
  cursor: pointer;
}

/* ── لفتة انتباه (Buzz) لأيقونة السلة الثابتة عند الإضافة (ثانيتان) ── */
@keyframes sp-cart-buzz-anim {
  0%, 100% { transform: scale(1) rotate(0); }
  10% { transform: scale(1.35) rotate(-12deg); }
  20% { transform: scale(1.2) rotate(10deg); }
  30% { transform: scale(1.3) rotate(-8deg); }
  40% { transform: scale(1.15) rotate(6deg); }
  50% { transform: scale(1.25) rotate(-4deg); }
  60% { transform: scale(1.1) rotate(3deg); }
  75% { transform: scale(1.15) rotate(0); }
}
.sp-cart-buzz {
  display: inline-block;
  animation: sp-cart-buzz-anim 2s ease;
  color: #b8892b !important;
}

/* ── حالة "السلة نشطة" — توهج مستمر خفيف طالما فيها منتجات (Feature: تمييز السلة) ── */
#sp-navcart-btn,
#sp-navcart-btn-mobile { position: relative; }
#sp-navcart-btn.sp-cart-active::after,
#sp-navcart-btn-mobile.sp-cart-active::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid #b8892b;
  opacity: .5;
  animation: sp-cart-pulse-ring 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sp-cart-pulse-ring {
  0%, 100% { transform: scale(.9); opacity: .55; }
  50% { transform: scale(1.3); opacity: .1; }
}

/* ── توست "أُضيف للسلة" — يظهر بجانب أيقونة السلة عند كل إضافة ── */
.sp-add-toast {
  position: fixed;
  z-index: 100000;
  background: linear-gradient(135deg, #b8892b, #8f6b1e);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(224,138,30,.42);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-add-toast.sp-add-toast-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── نافذة السلة (عالمية) ── */
.sp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
}
.sp-modal-overlay.open { display: flex; }

.sp-modal {
  background: var(--sp-bg);
  width: 100%;
  max-width: 480px;
  height: 92vh;
  max-height: 92vh;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sp-slide-up .25s ease;
}
@media (min-width: 560px) {
  .sp-modal-overlay { align-items: center; }
  .sp-modal { border-radius: 18px; height: auto; max-height: 90vh; }
}
@keyframes sp-slide-up { from { transform: translateY(30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.sp-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sp-border);
  position: relative;
}
.sp-modal-head::after {
  content: '';
  position: absolute;
  right: 0; left: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #b8892b, #8f6b1e);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.sp-modal-overlay.sp-has-items .sp-modal-head::after { transform: scaleX(1); }
.sp-modal-head h3 { margin: 0; color: var(--sp-primary); }
.sp-modal-close { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--sp-muted); line-height: 1; }

/* ── المنطقة الوسطى القابلة للتمرير (عناصر السلة + فورم البيانات) ── */
.sp-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sp-modal-body { padding: 14px 18px; }

.sp-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sp-border);
}
.sp-cart-item-info { flex: 1; }
.sp-cart-item-name { font-size: .92rem; color: var(--sp-text); }
.sp-cart-item-price { font-size: .82rem; color: var(--sp-muted); }

.sp-qty-control { display: flex; align-items: center; gap: 8px; }
.sp-qty-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--sp-border);
  background: var(--sp-surface);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.sp-qty-val { min-width: 20px; text-align: center; font-weight: 600; }
.sp-remove-btn { color: var(--sp-red); background: none; border: none; cursor: pointer; font-size: 1rem; padding: 4px; }

.sp-cart-empty { text-align: center; color: var(--sp-muted); padding: 30px 0; }

/* ── فورم بيانات العميل (داخل المنطقة القابلة للتمرير) ── */
.sp-checkout-form {
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-checkout-form label { font-size: .85rem; color: var(--sp-muted); margin-top: 4px; }
.sp-checkout-form label span { color: var(--sp-red); margin-right: 3px; }
.sp-checkout-form input,
.sp-checkout-form textarea {
  padding: 10px 12px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  font-size: .9rem;
  font-family: inherit;
  resize: vertical;
}
.sp-form-msg { font-size: .85rem; padding: 6px 0; min-height: 20px; }
.sp-form-msg.error { color: var(--sp-red); }
.sp-form-msg.success { color: var(--sp-green); }

/* ── تذييل ثابت أسفل النافذة (الإجمالي + الأزرار) — يبقى ظاهراً دائماً بدون تمرير ── */
.sp-modal-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--sp-border);
  background: var(--sp-bg);
  padding: 12px 18px 16px;
}

.sp-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: var(--sp-text);
}

.sp-footer-actions {
  display: flex;
  gap: 10px;
}

.sp-clear-btn {
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-surface);
  color: var(--sp-red);
  font-size: .92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.sp-clear-btn:hover { background: #fee2e2; }

.sp-submit-btn {
  flex: 1 1 auto;
  padding: 12px;
  border: none;
  border-radius: var(--sp-radius-sm);
  background: #25D366;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sp-submit-btn:disabled,
.sp-clear-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Confirm dialog (استبدال السلة عند تبديل الخدمة، وتأكيد التفريغ) ── */
.sp-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.sp-confirm-overlay.open { display: flex; }
.sp-confirm-box {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  max-width: 340px;
  text-align: center;
  box-shadow: var(--sp-shadow-md);
}
.sp-confirm-box p { color: var(--sp-text); margin-bottom: 18px; line-height: 1.6; }
.sp-confirm-actions { display: flex; gap: 10px; }
.sp-confirm-actions button {
  flex: 1;
  padding: 10px;
  border-radius: var(--sp-radius-sm);
  border: none;
  cursor: pointer;
  font-size: .9rem;
}
.sp-confirm-cancel { background: var(--sp-surface); color: var(--sp-text); }
.sp-confirm-ok { background: var(--sp-red); color: #fff; }

/* ============================================================
   توافق كامل مع كل الأجهزة (موبايل/تابلت/ديسكتوب)
   ============================================================ */

/* ── حد أدنى لمساحة اللمس على العناصر التفاعلية (توصية Apple/Google: 44×44px) ── */
#sp-navcart-btn,
#sp-navcart-btn-mobile,
.sp-modal-close,
.sp-qty-btn,
.sp-remove-btn {
  min-width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── الجوال الكبير والتابلت الصغير (≤ 640px) ── */
@media (max-width: 640px) {
  .sp-offers-grid,
  .offers-grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  .sp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .sp-offer-card-img-wrap { height: 130px; }
  .sp-offer-card-body { padding: 12px; }
  .sp-offer-card-name { font-size: .92rem; }
  .sp-offer-card-service { font-size: .72rem; }
  .sp-offer-discount-ribbon { top: 8px; right: 8px; padding: 4px 8px; }
  .sp-offer-discount-ribbon strong { font-size: .95rem; }
  .sp-offer-view-btn { font-size: .78rem; padding: 7px 10px; }
}

/* ── الجوال الصغير جداً (≤ 380px) — خانات العدّاد التنازلي تحتاج انضغاط أكبر ── */
@media (max-width: 380px) {
  .sp-cd-box { padding: 3px 1px; }
  .sp-cd-num { font-size: .8rem; }
  .sp-cd-label { font-size: .56rem; }
  .sp-offer-daterange { font-size: .68rem; }
  .sp-price { font-size: .95rem; }
  .sp-old-price { font-size: .74rem; }
  .sp-offers-count-badge { font-size: .74rem; padding: 4px 10px; }
}

/* ── نافذة السلة على الشاشات الصغيرة جداً (ارتفاع الجهاز محدود، مثل أجهزة قديمة) ── */
@media (max-height: 560px) {
  .sp-modal { height: 98vh; max-height: 98vh; }
  .sp-modal-head { padding: 10px 14px; }
  .sp-modal-footer { padding: 8px 14px 10px; }
}

/* ── دعم الشاشات العريضة جداً (ديسكتوب كبير) — تحديد أقصى عدد أعمدة حتى لا تتمدد الكروت بلا داعٍ ── */
@media (min-width: 1400px) {
  .sp-offers-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── دعم أجهزة اللمس: تكبير مساحة زر "أضف للسلة" قليلاً لسهولة الضغط بالإصبع ── */
@media (hover: none) and (pointer: coarse) {
  .sp-add-btn { padding: 11px 12px; }
  .sp-cate-tab { padding: 10px 18px; }
}