:root{
  --radius: 18px;
}
.card, .btn, .form-control, .form-select { border-radius: var(--radius) !important; }
.shadow-soft{ box-shadow: 0 10px 35px rgba(0,0,0,.08); }
.cover{
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 180px;
  background: #f2f2f2;
  position: relative;
}
.cover img{ width:100%; height:220px; object-fit:cover; display:block; }
.logo{
  width:86px; height:86px; border-radius: 22px;
  object-fit: cover; background:#fff; border: 3px solid #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.menu-dark{
  background:#0b0f14;
  color:#e9eef5;
}
.menu-dark .card, .menu-dark .navbar, .menu-dark .bg-body{
  background:#101826 !important; color:#e9eef5 !important;
}
.menu-dark .border-bottom, .menu-dark .border{ border-color: rgba(255,255,255,.08) !important; }
.price-badge{ font-weight:700; }
.product-img{ width:72px; height:72px; border-radius: 18px; object-fit: cover; background:#f3f3f3; }
/* ===== Responsive improvements ===== */
.container { max-width: 1100px; }
@media (max-width: 576px){
  .container { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.4rem !important; }
  .cover img { height: 190px !important; }
  .logo { width:72px; height:72px; border-radius:18px; }
}

/* Navbar brand accent */
.brand-dot{
  width:10px;height:10px;border-radius:999px;background:#111;
  display:inline-block;
}
.menu-dark .brand-dot{ background:#fff; }

/* Menu grid cards */
.menu-product-card{
  border-radius: 18px;
  overflow:hidden;
}
.menu-product-img{
  width:100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background:#f2f2f2;
}
.menu-dark .menu-product-card{ background:#101826; }
/* ===== Typography + contrast ===== */
:root{
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --dark-bg: #070b12;
  --dark-card: #0f172a;
  --dark-text: #e6edf7;
  --dark-muted: rgba(230,237,247,.72);
}

body { color: var(--text); }
.text-muted { color: var(--muted) !important; }

.menu-dark{
  background: radial-gradient(900px 400px at 20% 10%, rgba(90,120,255,.12), transparent 60%),
              radial-gradient(900px 400px at 80% 0%, rgba(0,200,255,.10), transparent 55%),
              var(--dark-bg);
  color: var(--dark-text);
}
.menu-dark .text-muted { color: var(--dark-muted) !important; }
.menu-dark .bg-body,
.menu-dark .navbar { background: rgba(10,14,22,.75) !important; backdrop-filter: blur(10px); }
.menu-dark .border-bottom { border-color: rgba(255,255,255,.08) !important; }

/* ===== Cover: no empty big area ===== */
.cover{
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  min-height: 0;
}
.cover.has-cover img{ height: 220px; object-fit: cover; display:block; }
.cover.no-cover{ display:none; } /* إذا ما في صورة خلفية لا نعرض شي */

/* ===== Header area on menu ===== */
.menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.shop-title{
  font-weight: 800;
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing:.2px;
}
.shop-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ===== Icon buttons ===== */
.icon-btn{
  width:44px; height:44px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color:#0f172a;
  transition: transform .12s ease, box-shadow .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow:0 10px 25px rgba(0,0,0,.12); }
.menu-dark .icon-btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: var(--dark-text);
}

/* ===== Product cards polish ===== */
.menu-product-card{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
}
.menu-dark .menu-product-card{
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.menu-product-img{
  width:100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: rgba(0,0,0,.04);
}
.menu-dark .menu-product-img{ background: rgba(255,255,255,.06); }

.price-badge{
  font-weight: 800;
  letter-spacing:.2px;
}

/* ===== Footer single line ===== */
.site-footer{
  opacity:.9;
}
.menu-dark .site-footer a{ color: #7dd3fc; }
.product-card{ cursor:pointer; }
.product-card:active{ transform: scale(.99); }

.modal-content{
  border: 1px solid rgba(0,0,0,.08);
}
.menu-dark .modal-content{
  background: #0f172a;
  color: #e6edf7;
  border-color: rgba(255,255,255,.10);
}
.menu-dark .modal-header, .menu-dark .modal-footer{
  border-color: rgba(255,255,255,.08);
}
.menu-dark .btn-close{ filter: invert(1); }
/* ===== Copy link toast ===== */
.copy-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15,23,42,.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 9999;
}

.copy-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* دعم الثيم الداكن */
.menu-dark .copy-toast{
  background: rgba(255,255,255,.92);
  color: #0f172a;
}
/* ===== Menu UX pack ===== */

/* Sticky categories bar */
.catbar{
  position: sticky;
  top: 64px; /* تحت الناف */
  z-index: 50;
  padding: 10px 0;
}
.catbar-inner{
  display:flex;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.catbar-inner::-webkit-scrollbar{ display:none; }

.cat-chip{
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: #0f172a;
  transition: .15s ease;
}
.cat-chip:hover{ transform: translateY(-1px); }
.cat-chip.active{
  background: #0f172a;
  color:#fff;
  border-color:#0f172a;
}

.menu-dark .cat-chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.9);
}
.menu-dark .cat-chip.active{
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.35);
  color:#e6edf7;
}

/* Search bar */
.searchbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.search-input{
  border-radius: 999px !important;
  padding: 12px 14px !important;
}
.search-clear{
  border-radius: 999px !important;
}

/* Product card (prettier) */
.product-card{
  cursor:pointer;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.menu-dark .product-card{
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.product-img{
  width:100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: rgba(0,0,0,.04);
}
.menu-dark .product-img{ background: rgba(255,255,255,.06); }

.product-body{
  padding: 10px 12px 12px;
}
.product-name{
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.product-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.product-price{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 15px;
}
.badge-mini{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.menu-dark .badge-mini{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}

/* Improve mobile */
@media (max-width: 576px){
  .catbar{ top: 58px; }
  .product-name{ font-size: 14px; }
}

/* Bottom quick bar (mobile only) */
.mobilebar{
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display:none;
  gap:10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.menu-dark .mobilebar{
  background: rgba(16,24,38,.72);
  border-color: rgba(255,255,255,.10);
}
@media (max-width: 768px){
  .mobilebar{ display:flex; }
  body{ padding-bottom: 90px; } /* مساحة للبار */
}

/* Smooth scroll */
html{ scroll-behavior: smooth; }
.copy-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  background: rgba(15,23,42,.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0;              /* مخفي افتراضياً */
  visibility: hidden;      /* مهم */
  pointer-events: none;
  transition: all .25s ease;
  z-index: 9999;
}

.copy-toast.show{
  opacity: 1;
  visibility: visible;     /* يظهر فقط عند show */
  transform: translateX(-50%) translateY(0);
}

.menu-dark .copy-toast{
  background: rgba(255,255,255,.92);
  color: #0f172a;
}
/* تكبير كرت المنتج قليلاً */
.menu-product-card,
.product-card {
  border-radius: 20px;
  overflow: hidden;
}

/* جعل الصورة أوضح وأكبر */
.menu-product-img,
.product-img {
  width: 100%;
  height: 180px;          /* أكبر من قبل */
  object-fit: contain;    /* مهم: يعرض الصورة كاملة */
  background: #fff;       /* خلفية نظيفة */
  padding: 10px;          /* فراغ خفيف حول الصورة */
}

/* تكبير الكرت على الموبايل */
@media (max-width: 576px) {
  .menu-product-img,
  .product-img {
    height: 200px;
  }

  .product-card {
    border-radius: 22px;
  }
}

/* تحسين محتوى الكرت */
.product-body,
.menu-product-card .p-2 {
  padding: 12px 14px;
}

/* اسم المنتج */
.product-name,
.menu-product-card .fw-semibold {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* السعر */
.product-price,
.price-badge {
  font-size: 15px;
  font-weight: 700;
}
/* ✅ تكبير صورة كرت المنتج + عرضها كاملة */
.product-img{
  height: 170px;          /* زِد/نقص حسب ذوقك */
  object-fit: contain;    /* يعرض الصورة كاملة */
  background: #fff;       /* خلفية نظيفة */
  padding: 10px;          /* فراغ بسيط حول الصورة */
}

@media (max-width: 576px){
  .product-img{
    height: 190px;        /* أكبر على الموبايل */
    padding: 12px;
  }
}
/* ✅ تأثير فتح المودال بشكل جميل */
#productModal .modal-dialog{
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: all .25s ease;
}

#productModal.show .modal-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ✅ تأثير لطيف للصورة داخل المودال */
#pmImg{
  transition: transform .25s ease, opacity .25s ease;
}
#productModal.show #pmImg{
  transform: scale(1.02);
}
.product-card-click:active{
  transform: scale(.99);
}
/* Modal Layout */
.pm-header{
  justify-content: center;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pm-close{
  position: absolute;
  top: 14px;
  /* RTL: خليها يسار */
  left: 14px;
  right: auto;
}
.pm-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 14px 16px;
}
.pm-btn-close{
  border-radius: 14px;
  padding: 12px 14px;
}

/* Product header inside body */
.pm-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pm-name{
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
}
.pm-price{
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
}

/* Options sections */
.pm-section-title{
  font-weight: 800;
  margin-bottom: 10px;
}
.pm-options-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 576px){
  .pm-options-grid{
    grid-template-columns: 1fr 1fr; /* على الشاشات الأكبر عمودين */
  }
}

/* Option Card */
.pm-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
  cursor: pointer;
  user-select: none;
}
.pm-opt:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.pm-opt-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pm-opt-name{
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-opt-sub{
  font-size: 12px;
  color: #6c757d;
}

/* Badge price */
.pm-badge{
  font-weight: 800;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Hide native inputs */
.pm-opt input{
  display: none;
}

/* Selected state */
.pm-opt.is-selected{
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.pm-opt.is-selected .pm-badge{
  background: rgba(0,0,0,.12);
}

/* Total row */
.pm-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.18);
}
.pm-total-label{ color:#6c757d; font-weight:700; }
.pm-total-value{ font-weight:900; font-size: 22px; }

/* Dark theme support (اذا عندك menu-dark) */
.menu-dark .pm-opt{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.menu-dark .pm-opt:hover{
  border-color: rgba(255,255,255,.22);
}
.menu-dark .pm-badge{
  background: rgba(255,255,255,.10);
}
.menu-dark .pm-section-title,
.menu-dark .pm-opt-name,
.menu-dark .pm-total-value,
.menu-dark .pm-name,
.menu-dark .pm-price{
  color: #fff;
}
.menu-dark .pm-opt-sub,
.menu-dark .pm-total-label{
  color: rgba(255,255,255,.65);
}
.menu-dark .pm-header,
.menu-dark .pm-footer{
  border-color: rgba(255,255,255,.10);
}
.pm-card-footer{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.pm-btn-close{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
}

/* Dark mode */
.menu-dark .pm-card-footer{
  border-color: rgba(255,255,255,.12);
}
/* Modal Layout */
.pm-header{
  justify-content: center;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pm-close{
  position: absolute;
  top: 14px;
  /* RTL: خليها يسار */
  left: 14px;
  right: auto;
}
.pm-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 14px 16px;
}
.pm-btn-close{
  border-radius: 14px;
  padding: 12px 14px;
}

/* Product header inside body */
.pm-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pm-name{
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
}
.pm-price{
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
}

/* Options sections */
.pm-section-title{
  font-weight: 800;
  margin-bottom: 10px;
}
.pm-options-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 576px){
  .pm-options-grid{
    grid-template-columns: 1fr 1fr; /* على الشاشات الأكبر عمودين */
  }
}

/* Option Card */
.pm-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
  cursor: pointer;
  user-select: none;
}
.pm-opt:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.pm-opt-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pm-opt-name{
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-opt-sub{
  font-size: 12px;
  color: #6c757d;
}

/* Badge price */
.pm-badge{
  font-weight: 800;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Hide native inputs */
.pm-opt input{
  display: none;
}

/* Selected state */
.pm-opt.is-selected{
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.pm-opt.is-selected .pm-badge{
  background: rgba(0,0,0,.12);
}

/* Total row */
.pm-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.18);
}
.pm-total-label{ color:#6c757d; font-weight:700; }
.pm-total-value{ font-weight:900; font-size: 22px; }

/* Dark theme support (اذا عندك menu-dark) */
.menu-dark .pm-opt{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.menu-dark .pm-opt:hover{
  border-color: rgba(255,255,255,.22);
}
.menu-dark .pm-badge{
  background: rgba(255,255,255,.10);
}
.menu-dark .pm-section-title,
.menu-dark .pm-opt-name,
.menu-dark .pm-total-value,
.menu-dark .pm-name,
.menu-dark .pm-price{
  color: #fff;
}
.menu-dark .pm-opt-sub,
.menu-dark .pm-total-label{
  color: rgba(255,255,255,.65);
}
.menu-dark .pm-header,
.menu-dark .pm-footer{
  border-color: rgba(255,255,255,.10);
}
.pm-header{
  position: relative;
  justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.pm-close{
  position: absolute;
  top: 12px;
  left: 12px !important;
  right: auto !important;
  margin: 0 !important;
  float: none !important;
  z-index: 5;
}
.pm-sec-title{
  font-weight: 800;
  margin: 14px 0 10px;
}

.pm-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 520px){
  .pm-grid{ grid-template-columns: 1fr 1fr; }
}

.pm-opt{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  cursor: pointer;
  transition: .12s ease;
}

.pm-opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.22);
}

.pm-opt input{ display:none; }

.pm-opt-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.pm-dot{
  width:18px;height:18px;border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
  display:inline-flex;align-items:center;justify-content:center;
  flex: 0 0 auto;
}

.pm-dot::after{
  content:"";
  width:10px;height:10px;border-radius:999px;
  background: transparent;
}

.pm-opt.is-selected{
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 12px 22px rgba(0,0,0,.08);
}

.pm-opt.is-selected .pm-dot{
  border-color: rgba(0,0,0,.8);
}
.pm-opt.is-selected .pm-dot::after{
  background: rgba(0,0,0,.85);
}

.pm-opt-name{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-opt-sub{
  font-size: 12px;
  color: #6c757d;
  margin-top: 2px;
}

.pm-badge{
  font-weight: 900;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Total */
.pm-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.18);
}
.pm-total-label{ color:#6c757d; font-weight:800; }
.pm-total-value{ font-weight:900; font-size: 22px; }

/* Dark */
.menu-dark .pm-opt{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.menu-dark .pm-opt:hover{ border-color: rgba(255,255,255,.22); }
.menu-dark .pm-opt-name, .menu-dark .pm-total-value, .menu-dark .pm-sec-title{ color:#fff; }
.menu-dark .pm-opt-sub, .menu-dark .pm-total-label{ color: rgba(255,255,255,.65); }
.menu-dark .pm-badge{ background: rgba(255,255,255,.10); }
.menu-dark .pm-dot{ border-color: rgba(255,255,255,.35); }
.menu-dark .pm-opt.is-selected .pm-dot{ border-color: rgba(255,255,255,.85); }
.menu-dark .pm-opt.is-selected .pm-dot::after{ background: rgba(255,255,255,.85); }