/* =========================
   produitsql.css — Modern 2025 (RTL) (Cleaned)
   ========================= */
   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap');

/* تطبيق الخط بشكل موحّد على كل عناصر الموقع */
html, body, button, input, select, textarea {
  font-family: 'Noto Sans Arabic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
:root{
  --bg:#f6f8fb; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --brand:#16a34a; --brand-600:#128a3e; --brand-700:#0f7033;
  --sky:#0ea5e9; --amber:#f59e0b; --rose:#ef4444; --border:#e5e7eb;
  --shadow:0 12px 30px rgba(15, 23, 42, .08); --radius:16px;
  --fs-100:clamp(10px,.7vw,12px); --fs-200:clamp(13px,.9vw,15px);
  --fs-300:clamp(14px,1vw,16px); --fs-400:clamp(15px,1.2vw,18px);
  --fs-500:clamp(18px,1.8vw,24px); --fs-600:clamp(20px,2.4vw,28px);
  --wrap:min(1200px,94vw);
  --gap-2:10px; --gap-3:14px; --gap-4:18px; --gap-5:24px; --gap-6:32px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1020; --card:#0f172a; --text:#e5e7eb; --muted:#9aa7bd; --border:#1f2a44; --shadow:0 12px 30px rgba(0,0,0,.35); }
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Noto Sans Arabic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Utils */
.wrap{width:var(--wrap); margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* Topbar */
.topbar{
  background:#0b1220; color:#fff; font-size:var(--fs-200);
  position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{ display:flex; gap:10px; align-items:center; justify-content:center; padding:8px 0; }
.topbar a{color:#cbd5e1; text-decoration:none}
.topbar a:hover{color:#fff}

/* Header / Nav */
header{ background:linear-gradient(90deg, #0b1220, #113b24 55%, #0b1220); color:#fff; box-shadow:var(--shadow); }
.nav{
  width:var(--wrap); margin:auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 4px; position:relative; z-index:200;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand img{width:42px; height:42px; object-fit:contain; border-radius:12px; background:#fff; padding:6px}
.brand span{font-size:var(--fs-500)}
.nav-menu{display:flex; gap:18px; align-items:center}
.nav-menu a{
  color:#e5e7eb; text-decoration:none; font-size:var(--fs-300); padding:10px 12px; border-radius:12px;
  transition:background .2s ease, transform .08s ease;
}
.nav-menu a:hover{background:rgba(255,255,255,.08); transform:translateY(-1px)}
.nav-actions{display:flex; gap:10px; align-items:center}
.hamburger{ display:none; background:transparent; border:0; font-size:26px; cursor:pointer; color:#fff; line-height:1; }
.hamburger{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; }
.hamburger:focus-visible{ outline:3px solid #38bdf8; outline-offset:2px; }

/* Mobile nav (slide-down) */
.nav-menu.is-open{
  display:flex !important; flex-direction:column; position:absolute; inset-inline:0; top:100%;
  background:#0b1220; border-bottom:1px solid rgba(255,255,255,.12);
  padding:12px; gap:6px; box-shadow:0 16px 30px rgba(2,6,23,.35);
}
.nav-menu.is-open a{ color:#e5e7eb; padding:12px 10px; border-radius:10px }
.nav-menu.is-open a:focus-visible{ outline:3px solid #38bdf8; outline-offset:2px; background:rgba(255,255,255,.06) }

/* Cart button */
.cart-btn{
  position: relative; background: linear-gradient(135deg, var(--brand), var(--brand-700));
  border: 0; color: #fff; font-size: 20px; border-radius: 16px; padding: 12px 18px; cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .2s ease; box-shadow: 0 14px 28px rgba(22,163,74,.30);
}
.cart-btn:hover{ filter: brightness(.96); }
.cart-btn:active{ transform: translateY(1px) scale(.99); }
.cart-badge{
  position: absolute; inset-inline-end: -10px; top: -10px;
  background: var(--rose); color:#fff; min-width: 26px; height: 26px; border-radius: 999px; font-size: 13px;
  display: grid; place-items: center; padding: 0 7px; border: 2px solid #0b1220; box-shadow: 0 6px 16px rgba(239,68,68,.35);
}

/* Controls */
.controls{
  display: grid; grid-template-columns: 1fr minmax(180px, 220px); gap: 12px; margin-block: 10px 6px;
}
.controls input, .controls select{
  appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 12px 14px; border-radius: 12px; font-size: var(--fs-300);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.controls input:focus, .controls select:focus{
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px #a7f3d0;
}

/* ===== Category chips ===== */
.cats{
  margin: 6px 0 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cats__row{
  display: flex; gap: 10px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 0; scrollbar-width: thin;
}
.cats__row::-webkit-scrollbar{ height: 6px; }
.cats__row::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 999px; }
.chip{
  appearance: none; border: 1px solid transparent;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  color: var(--text); padding: 10px 16px; font-size: var(--fs-100); font-weight: 600;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.06); backdrop-filter: blur(4px) saturate(120%); min-height: 40px;
}
.chip:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, #f1f5f9, #dbeafe);
  border-color: var(--sky); color: var(--sky);
  box-shadow: 0 6px 14px rgba(14,165,233,.2);
}
.chip:active{ transform: scale(.97); }
.chip:focus-visible{ outline: 3px solid #38bdf8; outline-offset: 2px; }
.chip.is-active{
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border-color: var(--brand-700); color: #fff;
  box-shadow: 0 6px 14px rgba(22,163,74,.35);
}

/* Products grid */
.products{ width:var(--wrap); margin: var(--gap-6) auto; display:grid; gap:var(--gap-5); grid-template-columns: repeat(12, 1fr); }

/* Card */
.card{
  grid-column: span 3; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--gap-5); display:flex; flex-direction:column; gap:var(--gap-4);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,.14); border-color:rgba(22,163,74,.35)}
.card img{
  width:100%; height:auto; object-fit:contain; background:#fff; border:3px solid var(--brand); border-radius:14px; padding:6px;
  box-shadow:0 8px 18px rgba(22,163,74,.12);
}
.card h3{ margin:0; font-size:var(--fs-400); display:flex; align-items:center; justify-content:center; gap:10px; text-wrap:balance; line-height:1.35; }
.copy-icon{ cursor:pointer; user-select:none; opacity:.85; transition:opacity .2s ease, transform .08s ease; }
.copy-icon:hover{opacity:1; transform:translateY(-1px)}
.muted{color:var(--muted); font-size:var(--fs-200); margin:0}
.price-label{font-size:var(--fs-300); font-weight:700; margin:0}
.price{font-size:var(--fs-500); font-weight:900; color:var(--brand-700)}
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:var(--fs-200); font-weight:700; border:1px solid transparent; }
.badge.available{background:#dcfce7; color:#166534; border-color:#16a34a}
.badge.not-available{background:#fee2e2; color:#991b1b; border-color:#ef4444}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:15px; background:var(--brand); color:#fff; padding:10px 14px; border:0; border-radius:42px;
  font-size:var(--fs-100); font-weight:300; cursor:pointer; box-shadow:0 10px 24px rgba(22,163,74,.24);
  transition:background .15s ease, transform .06s ease, box-shadow .2s ease;
}
.btn:hover{background:var(--brand-600)} .btn:active{transform:translateY(1px) scale(.99)}
.btn--ghost{ background:transparent; color:var(--brand); border:2px solid var(--brand); box-shadow:none }
.btn--ghost:hover{ background:color-mix(in oklab, var(--brand) 12%, transparent) }
.btn-add{ background: var(--amber); box-shadow: 0 10px 24px rgba(245, 158, 11, .24); }
.btn-add:hover{ filter: brightness(.95); }
button:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.2); }
.card-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Empty */
.products:empty::before{
  content:"❌ لا توجد منتجات"; color:var(--muted); display:block; text-align:center; grid-column:1 / -1;
  font-size:var(--fs-400); padding:40px 0;
}

/* Cart bar bottom */
.cart-bar{
  position: sticky; bottom: 0; background: color-mix(in oklab, #0b1220 85%, transparent);
  backdrop-filter: blur(8px) saturate(120%); border-top: 1px solid rgba(255,255,255,.08); padding: 10px 0; z-index: 60; color:#fff;
}
.cart-bar__content{
  width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cart-bar__actions{ display: flex; gap: 10px; flex-wrap:wrap; }
.icon-btn{
  --size: 44px;
  display:inline-flex; align-items:center; gap:8px; height: var(--size); padding: 0 12px;
  border:2px solid color-mix(in oklab, var(--brand) 65%, transparent); color:#c7f7d7; background:transparent;
  border-radius: 12px; cursor:pointer; backdrop-filter: blur(6px) saturate(120%);
  transition: transform .06s ease, background .15s ease, border-color .2s ease, color .2s ease;
}
.icon-btn:hover{
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border-color: color-mix(in oklab, var(--brand) 85%, transparent);
  color:#eafff0;
}
.icon-btn:active{ transform: translateY(1px) scale(.99); }
.icon-btn svg{ width: 22px; height: 22px; fill: currentColor; display:block; }
.icon-btn .label{ font-size: var(--fs-300); }
.icon-btn--primary{ background: linear-gradient(135deg, var(--brand), var(--brand-700)); color:#fff; border-color: transparent; box-shadow: 0 10px 24px rgba(22,163,74,.28); }
.icon-btn--primary:hover{ filter: brightness(.96); }

/* Receipt (print) */
#receiptSheet{ display:none; }
.receipt{ width:80mm; margin:0 auto; background:#fff; color:#0f172a; }
.receipt-table{ width:100%; border-collapse:collapse; font-size:12px; }
.receipt-table thead th{ border-bottom:1px dashed #cbd5e1; padding:3px 0; font-weight:800; }
.receipt-table td{ padding:3px 0; border-bottom:1px dashed #e5e7eb; }
.receipt-line{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:2px 0; }
.receipt-footer{ text-align:center; margin-top:8px; font-size:12px; color:#64748b; }
@media print{
  @page{ size:80mm auto; margin:6mm; }
  body *{ visibility:hidden !important; }
  #receiptSheet, #receiptSheet *{ visibility:visible !important; }
  #receiptSheet{ display:block !important; position:absolute; inset:0; margin:0 auto; padding:0; background:#fff; }
}

/* ===== Popup Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999 !important; /* فوق الجميع */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(4px);
  padding: 14px;
}
.modal.is-open{ display:flex; }
.modal__dialog{
  width: min(960px, 96vw); background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto; max-height: 90vh;
}
.modal__head, .modal__foot{ padding: 12px 14px; border-bottom: 1px solid var(--border); }
.modal__foot{ border-top: 1px solid var(--border); border-bottom: 0; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.modal__title{ margin:0; font-size: var(--fs-500); }
.modal__close{ background: transparent; border: 0; font-size: 22px; cursor: pointer; line-height: 1; color: var(--muted); }
.modal__close:hover{ color: var(--text); }
.modal__body{ padding: 12px 14px; overflow: auto; color: var(--text); } /* تأكيد لون النص داخل الـpopup */

/* Cart table inside popup (full border) */
.cart-table{ width:100%; border-collapse:collapse; min-width:620px; color:var(--text); } /* فرض اللون */
.cart-table--popup{ border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cart-table--popup thead th{ border-bottom: 1px solid var(--border); }
.cart-table--popup td{ border-bottom: 1px dashed var(--border); }

/* ✅ إصلاح ظهور أسماء السلع */
.cart-table td:nth-child(1){
  text-align:right; font-weight:700;
  white-space: normal;        /* اسم قابل للالتفاف */
  word-break: break-word;     /* كسر الكلمات الطويلة */
  overflow: visible;          /* لا تُخفِ النص */
  max-width: 360px;           /* عرض منطقي للاسم */
}
/* إن كان عندك عنصر باسم محدد */
.cart-table .item-name,
.cart-table .item-title{ color:var(--text); font-weight:800; display:block; }

.cart-table td:nth-child(2),
.cart-table td:nth-child(3){ text-align:center; white-space:nowrap }
.cart-table td:nth-child(4){ text-align:left; white-space:nowrap; font-weight:800; color: var(--brand-700) }
.cart-table tfoot td{ padding:12px; font-size: var(--fs-400); font-weight:900 }
.total-label{ text-align:right }
.total-value{ text-align:left; color: var(--brand-700) }

/* Qty & delete buttons in popup */
.qty-ctrl{ display:flex; align-items:center; justify-content:center; gap:8px }
.qty-ctrl button{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--border);
  background: var(--card); cursor:pointer; font-weight:900;
}
.remove-row{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:transparent; cursor:pointer;
}
/* حالة المنتج داخل الس





لة */
.btn-add.in-cart{
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  box-shadow: 0 10px 24px rgba(22,163,74,.28);
}

.modal__share{ display:flex; align-items:center; gap:10px; }
.modal__actions{ display:flex; align-items:center; gap:10px; }

/* ===== Responsive ===== */
@media (max-width: 560px){
  .controls{ grid-template-columns: 1fr; }
  .nav-menu{ display:none; }
  .hamburger{ display:block; }
  .chip{ padding: 10px 14px; font-size: 10px; }
  .cart-btn.fab{
    position: fixed; inset-inline-end: 14px; bottom: 14px; border-radius: 999px;
    width: 64px; height: 64px; padding: 0; font-size: 24px; display: grid; place-items: center; z-index: 90;
  }
  .cart-btn.fab .cart-badge{ inset-inline-end: -6px; top: -6px; }
  .cart-bar__content{ flex-wrap: wrap; }
  .cart-bar__content > span{ font-size: var(--fs-300); }
  .cart-table td:nth-child(1){ max-width: 70vw; } /* مساحة أكبر للاسم على الموبايل */
}
@media (min-width: 561px) and (max-width: 768px){
  .nav-menu{ display:none; }
  .hamburger{ display:block; }
}
@media (min-width: 769px){
  .nav-menu{ display:flex; gap:18px; align-items:center; position: static !important; }
  .hamburger{ display:none; }
}
@media (max-width: 480px){
  .nav{padding:10px 0}
  .products{grid-template-columns:repeat(6,1fr); gap:var(--gap-4)}
  .card{grid-column: span 6; padding:var(--gap-4)}
  .brand span{font-size:var(--fs-400)}
}
@media (min-width: 481px) and (max-width: 768px){
  .products{grid-template-columns:repeat(8,1fr)}
  .card{grid-column: span 8}
}
@media (min-width: 769px) and (max-width: 1024px){
  .products{grid-template-columns:repeat(12,1fr)}
  .card{grid-column: span 6}
}
@media (min-width: 1025px) and (max-width: 1280px){ .card{grid-column: span 4} }
@media (min-width: 1281px){ .card{grid-column: span 3} }
@media (max-width: 600px){
  .cart-bar__actions{ gap:8px }

  /* اجعل الزرّ مربعًا ويحتوي الأيقونة فقط */
  .icon-btn{
    width:44px; height:44px;
    padding:0;
    justify-content:center;
  }
  .icon-btn svg{ width:22px; height:22px; }

  /* أخفِ النص تمامًا */
  .icon-btn .label{
    display:none !important;
  }

  /* زر التفريغ الأساسي أيضًا أيقونة فقط */
  .icon-btn--primary .label{
    display:none !important;
  }
}
/* === Responsive Cart Table in Modal === */

/* الوضع العادي (ديسكتوب) يبقى جدول */
.cart-table-wrap{ overflow-x:auto; }

body {
  font-family: "Cairo", sans-serif;
  background: #f8f9fa;
  margin: 0;
  padding: 20px;
  direction: rtl;
}
.card {
  display: inline-block;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin: 10px;
  padding: 10px;
  width: 220px;
  text-align: center;
}
.card img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
}
.btn {
  display: inline-block;
  background: #007bff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}
.popup {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  position: relative;
}
.close {
  position: absolute;
  top: 10px; left: 10px;
  cursor: pointer;
  font-size: 22px;
  color: red;
}
form input, form select {
  width: 100%;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

@media (max-width: 560px){
  .cart-table{
    table-layout: fixed;   /* يجبر الأعمدة على التوزيع */
    width: 60%;
  }

  .cart-table th,
  .cart-table td {
    font-size: 11px;
    padding: 4px 2px;      /* تقليص الهوامش الداخلية */
  }

  /* عرض مخصص لكل عمود */
  .cart-table th:nth-child(1),
  .cart-table td:nth-child(1){ width: 10%; } /* التعيين */
  .cart-table th:nth-child(2),
  .cart-table td:nth-child(2){ width: 5%; } /* السعر */
  .cart-table th:nth-child(3),
  .cart-table td:nth-child(3){ width: 10%; } /* الكمية */
  .cart-table th:nth-child(4),
  .cart-table td:nth-child(4){ width: 5%; } /* القيمة */
  .cart-table th:nth-child(5),
  .cart-table td:nth-child(5){ width: 20%; } /* زر الحذف */

  /* الأزرار (± و الحذف) أصغر قليلاً */
  .qty-ctrl button{
    width: 26px; height: 26px;
    font-size: 14px;
  }
  .remove-row{
    width: 28px; height: 28px;
    font-size: 14px;
  }
}