/* =========================================
   GLOBAL LAYOUT
   ========================================= */
input, textarea, select, button {
  font-size: 16px !important;
}

/* مساحة للمحتوى تحت الهيدر وفوق البوتوم */
.withLayout{
  padding-top: 104px;   /* header height */
  padding-bottom: 20px; /* ✅ أقل من قبل (كان 82px) */
  padding-left: 10px;
  padding-right: 10px;
}

/* =========================================
   HEADER
   ========================================= */
.appHeader{
  position: fixed;
  top: 0; left: 0; right: 0;
  background:#fff;
  border-bottom:1px solid #eee;
  z-index: 1000;
}

.headerRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
}

.brandText{
  font-weight:900;
  letter-spacing:.5px;
  font-size:14px;
  white-space:nowrap;
}

.searchWrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:white;
  border:1px solid #e9e9e9;
  border-radius:12px;
  padding:4px 4px;
}

.searchIcon{ opacity:.7; }

.searchInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:13px;
}

.flagBtn{
  border:0;
  background:transparent;
  cursor:pointer;
}

.flagCircle{
  display:inline-flex;
  width:32px;
  height:32px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:#f3f3f3;
  border:1px solid #e9e9e9;
  font-size:18px;
}

/* =========================================
   CATEGORIES CHIPS (Header)
   ========================================= */
.catsRow{
  display:flex;
  gap:10px;
  padding:0 0 0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 5px;
}

.catChip{
  padding:5px 10px;
  border-radius:12px;
  background:white;
  border:1px solid #eee;
  font-size:13px;
  white-space:nowrap;
}

.iconChip{ font-weight:900; }

/* =========================================
   BOTTOM NAV (🔥 PREMIUM)
   ========================================= */
.bottomNav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background:#fff;
  border-top:1px solid #eee;
  z-index: 1000;

  display:flex;
  justify-content:space-around;
  align-items:flex-end;

  /* ✅ أصغر ارتفاع */
  padding:6px 10px 8px;
  height: 64px; /* ✅ ثابت و أصغر */
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}

/* كل زر */
.bnItem{
  width:20%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  padding:6px 0;
  font-size:12px;
  color:#8a8a8a;
  position:relative;

  border:0;
  background:transparent;
  cursor:pointer;

  -webkit-tap-highlight-color: transparent;
}

/* الأيقونة (FontAwesome) */
.bnIcon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
}

.bnIcon i{
  font-size: 22px;
  line-height: 1;
  color: #6f6f6f;
  transition: transform .18s ease, color .18s ease;
}

/* النص */
.bnText{
  font-size: 12px;
  line-height: 1;
  color:#8a8a8a;
  transition: color .18s ease;
}

/* ✅ Active مثل الصورة */
.bnItem.active .bnIcon i{
  color:#b3262d; /* أحمر أنيق */
  transform: translateY(-1px);
}
.bnItem.active .bnText{
  color:#1f1f1f;
  font-weight:700;
}

/* ✅ خط صغير فوق الأيقونة مثل بعض التطبيقات */
.bnItem.active::before{
  content:"";
  position:absolute;
  top:2px;
  width:22px;
  height:3px;
  border-radius:999px;
  background:#b71c1c;
  opacity:.9;
}

/* hover (لو سطح مكتب) */
@media (hover:hover){
  .bnItem:hover .bnIcon i{
    transform: translateY(-2px) scale(1.05);
    color:#444;
  }
}

/* =========================================
   CENTER BUTTON (🔥)
   ========================================= */
.bnCenter{
  width:20%;
  display:flex;
  justify-content:center;
  position:relative;

  /* ✅ أقل ارتفاع من قبل */
  top:-12px;

  border:0;
  background:transparent;
  cursor:pointer;

  -webkit-tap-highlight-color: transparent;
}

.bnCenterIcon{
  width:54px;
  height:54px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  border:1px solid #eee;

  /* ظل أفخم */
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    0 2px 0 rgba(0,0,0,.04);

  transition: transform .18s ease, box-shadow .18s ease;
}

/* FontAwesome icon داخل الوسط */
.bnCenterIcon i{
  font-size: 24px;
  color:#b71c1c;
}

.bnCenter:active .bnCenterIcon{
  transform: scale(.97);
}

/* =========================================
   BADGE (Cart count)
   ========================================= */
.bnBadge{
  position:absolute;
  top:-6px;
  right:-10px;

  min-width:18px;
  height:18px;
  padding:0 5px;

  border-radius:999px;
  background:#b71c1c;
  color:#fff;

  font-size:12px;
  font-weight:800;
  line-height:18px;
  text-align:center;

  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none;

  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* =========================================
   🔥 CATEGORIES VIEW — FORCE NO SIDE PADDING
   ========================================= */



/* Safari / iOS fallback */
body.view-categories #appMain.container.withLayout{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   HEADER / NAV HIDE ANIMATION
   ========================================= */
.appHeader,
.bottomNav{
  transition:
    transform 0.55s cubic-bezier(.25,.8,.25,1),
    opacity   0.45s ease;
  will-change: transform, opacity;
}

.appHeader.isHidden{
  transform: translateY(-110%);
  opacity: 0;
}

.bottomNav.isHidden{
  transform: translateY(120%);
  opacity: 0;
}

/* منع Zoom iOS عند الضغط على search */
.searchInput{
  font-size:16px !important;
  line-height:1.2;
  -webkit-text-size-adjust:100%;
}

.appHeader input,
.appHeader textarea,
.appHeader select{
  font-size:16px !important;
}