/* app.css — مشروع الحانوت (واجهة المستخدم) */

/* ألوان عامة */
:root{
  --main-green:#007c37;
  --main-yellow:#fecb56;
  --main-brown:#4e2e1e;
  --pill:#f6f6f6;
  --pill-border:#e7e7e7;
  --pill-active:#e9f7f0;
  --text:#222;
}
body{ background:#fffef9; }

/* شريط البحث (موبايل فقط) */
.big-search-bar{
  display:none; position:sticky; top:0; z-index:30; background:#fff;
  padding:.75rem; border-bottom:1px solid #eee; gap:.5rem; align-items:center;
}
.big-search-bar .form-control{
  height:44px; border:1px solid #ddd; border-radius:10px; padding-inline:1rem;
}
.big-search-bar .clear-btn{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1px solid #ddd; background:#fafafa;
  font-size:20px; line-height:1; cursor:pointer; user-select:none;
}
.big-search-bar.has-value .clear-btn{ display:flex; }
@media (max-width:1024px){ .big-search-bar{ display:flex !important; } }
@media (min-width:1025px){ .big-search-bar{ display:none !important; } }

/* شريط أقسام أفقي (اختياري) */
.cat-strip{
  display:flex; gap:.5rem; overflow:auto; white-space:nowrap;
  padding:.5rem .25rem; scroll-snap-type:x mandatory;
}
.cat-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--pill); color:#333; border:1px solid var(--pill-border);
  border-radius:999px; padding:.5rem .75rem; text-decoration:none;
  scroll-snap-align:center; user-select:none;
}
.cat-pill .icon-emoji{ font-size:18px; line-height:1; }
.cat-pill .icon-img{ width:20px; height:20px; object-fit:contain; }
.cat-pill.active{
  background:var(--pill-active); color:var(--main-green);
  border-color:#cfe9dd; font-weight:600;
}

/* كروت المنتجات */
.product-card-container{ padding:.5rem; }
.card.product{
  border:1px solid #eee; border-radius:14px; overflow:hidden; transition:transform .12s ease;
}
.card.product:hover{ transform:translateY(-2px); }
.card.product img{ height:170px; object-fit:contain; background:#fff; }
.card.product .card-title{ font-size:.95rem; min-height:2.5em; }
.price{ font-weight:700; color:#1a1a1a; }
.btn-add{ background:var(--main-green); border:none; }
.btn-add:hover{ background:#066a32; }

/* رسالة لا نتائج */
#no-results{ color:#666; }

/* ===== Cats Overlay (Fullscreen) ===== */
#cats-overlay{
  position:fixed; inset:0; z-index:2147483647; /* فوق أي حاجة بما فيها bottom-nav */
  display:none;
}
#cats-overlay.show{ display:block; }

.cats-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s ease;
}
#cats-overlay.show .cats-backdrop{ opacity:1; }

/* Panel كامل الشاشة مع Slide-in */
.cats-panel{
  position:absolute; inset:0; background:#fff;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .28s ease;
  -webkit-overflow-scrolling: touch;
}
#cats-overlay.show .cats-panel{ transform:none; }

/* Header */
.cats-header{
  position:sticky; top:0; z-index:2;
  background:#fff; border-bottom:1px solid #eee;
  padding:12px 16px;
}
.cats-title{
  margin:0; font-size:18px; font-weight:700; color:#111;
}

/* لائحة الفئات */
.cats-list{
  flex:1; overflow:auto; padding:8px 0;
}
.cats-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; text-decoration:none; color:#222;
  border-bottom:1px solid #f2f2f2;
}
.cats-item:active{ background:#f9f9f9; }
.cats-item.active{ background:#e9f7f0; }

.cats-icon{
  width:32px; height:32px; object-fit:contain; flex:0 0 32px;
  border-radius:8px; background:#fff;
}
.cats-emoji{ font-size:22px; line-height:1; width:32px; text-align:center; }

.cats-name{ flex:1; font-size:15px; font-weight:600; }
.cats-chev{ color:#999; font-size:18px; }

/* شوية تحسين فالديسكتوب */
@media (min-width: 992px){
  .cats-panel{ max-width:480px; margin-inline:auto; border:1px solid #eee; border-radius:16px; }
}

/* ===== خلي bottom-nav فوق الفئات، وقطع overlay من التحت ===== */
:root { --bn-h: 64px; } /* قيمة افتراضية، JS غيحدّثها حسب القياس الحقيقي */

.bottom-nav{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 2147483647; /* أعلى من أي شي */
}

/* overlay ما يغطيش منطقة الناف */
#cats-overlay{
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 0;            /* ✅ نحترمو علُوّ الناف */
}
#cats-overlay .cats-backdrop{
  position: absolute; top: 0; left: 0; right: 0;
  bottom: var(--bn-h);            /* حتى الخلفية متغطّيش الناف */
}
#cats-overlay .cats-panel{
  position: absolute; top: 0; left: 0; right: 0;
  bottom: var(--bn-h);            /* البانيل ما يهبطش تحت الناف */
  padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom));
}

/* فالديسكتوب الناف مخفي، خليه ياخذ الشاشة كاملة */
@media (min-width: 992px){
  :root { --bn-h: 0px; }
}