/* Sticky bottom nav + mobile categories overlay (Demo 2: Zhaket) */

.mlm-mobile-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0) + 6px);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}

.mlm-mobile-sticky .mi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  background: transparent;
  border: 0;
  color: #9aa0a6;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 0;
}

.mlm-mobile-sticky .mi .icon { font-size: 20px; }
.mlm-mobile-sticky .mi .lbl { font-weight: 500; }

.mlm-mobile-sticky .mi:focus,
.mlm-mobile-sticky .mi:hover { color: #111; }

.mlm-mobile-sticky .mi .badge {
  position: absolute;
  margin-top: -8px;
  margin-right: -18px;
  background: #ff3b30;
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  min-width: 18px;
  text-align: center;
}
.mlm-mobile-sticky .mi .badge.is-empty { display: none; }

/* Overlay */
.mlm-cats-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1061;
  display: none;
}
.mlm-cats-overlay.open { display: block; }

.mlm-cats-shell{ display:flex; flex-direction:column; height:100%; }
.mlm-cats-header{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #eee;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.mlm-cats-header .mlm-ajax-search{ position:relative; flex:1; }
.mlm-cats-header .mlm-ajax-search .form-control{
  width:100%;
  height:48px;
  border:1px solid #e8e8e8;
  border-radius:9999px; /* pill */
  padding:10px 54px 10px 16px; /* icon inside on the left (LTR); overridden for RTL below */
  background:#fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.mlm-cats-header .mlm-ajax-search .form-control::placeholder{
  color:#9aa0a6;
  opacity:1;
}
.mlm-cats-header .mlm-ajax-search .form-control:focus{
  outline:0;
  border-color:#e3e6ea;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.mlm-cats-header .mlm-ajax-search .search-btn{
  position:absolute; right:8px; top:6px; /* fixed anchor to prevent jitter */
  width:36px; height:36px; line-height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:9999px;
  color:#b3b6ba; font-size:16px;
  box-shadow: none;
  outline: none;
}
.mlm-cats-header .mlm-ajax-search .search-btn:hover,
.mlm-cats-header .mlm-ajax-search .search-btn:focus,
.mlm-cats-header .mlm-ajax-search .search-btn:active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.mlm-cats-header .mlm-ajax-search .search-btn svg{ width:20px; height:20px; }
/* Force neutral icon colors to avoid theme orange */
.mlm-cats-header .mlm-ajax-search .search-btn svg{ fill:#b3b3b3 !important; stroke:#4d4d4d !important; }
.mlm-cats-header .mlm-ajax-search .search-btn:hover svg,
.mlm-cats-header .mlm-ajax-search .search-btn:focus svg{ fill:#666 !important; stroke:#333 !important; }
html[dir="rtl"] .mlm-cats-header .mlm-ajax-search .form-control{ padding:10px 16px 10px 54px; }
html[dir="rtl"] .mlm-cats-header .mlm-ajax-search .search-btn{ left:8px; right:auto; }
.mlm-cats-overlay .mlm-ajax-search .search-btn,
.mlm-cats-overlay .mlm-ajax-search .search-btn:hover,
.mlm-cats-overlay .mlm-ajax-search .search-btn:focus,
.mlm-cats-overlay .mlm-ajax-search .search-btn:active{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.mlm-cats-overlay .mlm-ajax-search .search-btn svg{ fill:#b3b3b3 !important; stroke:#4d4d4d !important; }
.mlm-cats-overlay .mlm-ajax-search .search-btn:hover svg,
.mlm-cats-overlay .mlm-ajax-search .search-btn:focus svg{ fill:#666 !important; stroke:#333 !important; }
.mlm-cats-overlay .mlm-ajax-search .form-control:focus{ box-shadow:0 6px 24px rgba(0,0,0,.08) !important; border-color:#e3e6ea !important; }
.mlm-cats-header .mlm-cats-close{ background:#f5f5f5; border:0; border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }

.mlm-cats-body{ display:flex; min-height:0; flex:1; }
.mlm-cats-sidebar{
  width:36%; max-width:210px; border-left:1px solid #f0f0f0; overflow:auto; -webkit-overflow-scrolling:touch;
}
.mlm-cats-sidebar .cat-tab{
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; background:none; border:0; border-bottom:1px solid #f7f7f7; color:#555; text-align:right;
}
.mlm-cats-sidebar .cat-tab.active{ background:#fafafa; color:#111; font-weight:600; }

.mlm-cats-content{ flex:1; overflow:auto; padding:6px 10px 80px; -webkit-overflow-scrolling:touch; }
.mlm-cats-content .cat-panel{ display:none; }
.mlm-cats-content .cat-panel.shown{ display:block; }
.mlm-cats-content .cat-head{ padding:10px 6px; }
.mlm-cats-content .all-link{ color:#0d6efd; font-weight:600; text-decoration:none; }

.mlm-cats-content .cat-list{ list-style:none; margin:0; padding:0; }
.mlm-cats-content .cat-item{ border-bottom:1px solid #f4f4f4; }
.mlm-cats-content .row-1{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 6px; }
.mlm-cats-content .link{ color:#333; text-decoration:none; font-weight:500; }
.mlm-cats-content .toggle{ width:28px; height:28px; border:1px solid #e6e6e6; border-radius:6px; background:#fff; position:relative; }
.mlm-cats-content .toggle:after{ content:'\003E'; /* > */ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#666; }
.mlm-cats-content .cat-item.open > .row-1 .toggle:after{ content:'\02C5'; /* ˅ */ }
.mlm-cats-content .level-2{ display:none; padding:0 8px 8px; }
.mlm-cats-content .cat-item.open > .level-2{ display:block; }

/* Hide on desktop */
@media (min-width: 992px){
  .mlm-mobile-sticky{ display:none; }
  /* mobile categories overlay is disabled on desktop */
  .mlm-cats-overlay{ display:none !important; }
  .mlm-cats-overlay.open{ display:none !important; }
  /* keep header static on scroll and avoid duplicate second row */
  .app-fixed-header.hide{ -webkit-transform:none !important; transform:none !important; }
  /* Show only desktop logo in home-header; keep mobile logo hidden on desktop */
  .app-fixed-header.home-header .hinv.d-none.d-lg-flex{ display:flex !important; }
  .app-fixed-header.home-header .hinv.d-lg-none{ display:none !important; }
}

/* Header desktop layout embellishments */
@media (min-width: 992px){
  .app-header-menu .header-nav{ flex-wrap: nowrap; }
  /* Reduce outer side paddings and tighten header spacing */
  .app-header-menu .container{ max-width:100%; padding-left:12px; padding-right:12px; }
  .app-header-menu .header-nav > li{ margin-left:6px; margin-right:6px; }
  /* Keep auth snug to the edge */
  .app-header-menu .header-nav .header-auth{ margin-left:0; margin-right:0; }
  /* Remove default basket separator line */
  .app-header-menu .app-basket-btn:after{ content:none !important; display:none !important; }
  /* Orders: keep left group later in flow */
  .app-header-menu .header-nav .header-search,
  .app-header-menu .header-nav .header-cart,
  .app-header-menu .header-nav .header-user{ order: 10; }

  /* Search field rectangle with rounded corners */
  .app-header-menu .header-nav .header-search .search-input .input{
    width: 360px; max-width: 40vw; height: 40px; padding: 8px 44px 8px 12px;
    background: #f5f7fb; border: 1px solid #e6eaf0; border-radius: 12px !important;
  }
  html[dir="rtl"] .app-header-menu .header-nav .header-search .search-input .input{ padding:8px 12px 8px 44px; }
  .app-header-menu .header-nav .header-search .search-input .search-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; padding:0; }
  .app-header-menu .header-nav .header-search .search-input .search-btn svg{ width:18px; height:18px; }
  html[dir="rtl"] .app-header-menu .header-nav .header-search .search-input .search-btn{ left:8px; right:auto; }

  /* Cart square with rounded corners */
  .app-header-menu .header-nav .header-cart .app-basket-btn{
    width:40px; height:40px; padding:8px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#f5f7fb !important; border:1px solid #e6eaf0 !important;
  }
  .app-header-menu .header-nav .header-cart .app-basket-btn svg{ width:22px; height:22px; fill:#9aa0a6; }
  .app-header-menu .header-nav .header-cart .app-basket-btn:hover{
    background:rgba(254,160,0,.12) !important; border-color:rgba(254,160,0,.25) !important;
  }
  .app-header-menu .header-nav .header-cart .app-basket-btn:hover svg{ fill:#fea000; }
  /* Cart alignment */
  .app-header-menu .header-nav .header-cart{ display:flex; align-items:center; }

  /* Avatar square with rounded corners */
  .app-header-menu .header-nav .header-user img{ border-radius:12px !important; }
  /* Remove caret next to avatar dropdown */
  .app-header-menu .user-tools .dropdown-toggle:after,
  .app-header-menu .user-tools.show .dropdown-toggle:after{ content:none !important; display:none !important; }

  /* Inline mega-menu fixes inside header row */
  .app-header-menu .mega-nav .nav-link{ color:#333 !important; }
  .app-header-menu .mega-nav .menu-item-has-children{ position:relative; }
  .app-header-menu .mega-nav .sub-menu{ display:none; min-width:280px; box-shadow:0 10px 30px rgba(0,0,0,.08); border-radius:12px; }
  .app-header-menu .mega-nav .menu-item-has-children:hover > .sub-menu{ display:block; }

  /* Auth button: light grey, hover darker grey, with user icon */
  .app-header-menu .header-nav .header-auth .header-auth-btn{
    height:40px; line-height:40px; border-radius:12px;
    background:#f2f4f7; border:1px solid #e6eaf0; color:#6b7280;
    padding:0 14px; font-weight:700; white-space:nowrap;
    display:inline-flex; align-items:center; gap:8px;
  }
  .app-header-menu .header-nav .header-auth .header-auth-btn .icon{ color:inherit; font-size:18px; line-height:1; }
  .app-header-menu .header-nav .header-auth .header-auth-btn:hover{
    background:#6b7280; border-color:#6b7280; color:#fff;
  }
  /* Place auth button at far-left (RTL) */
  .app-header-menu .header-nav .header-auth{ order:20; }
}

/* Hide legacy hamburger in Zhaket mobile header only (keeps desktop intact) */
@media (max-width: 991.98px){
  #mlm-toggle-mobile-menu{ display:none !important; }
  .app-header-menu .header-nav > li.d-lg-none .toggle-btn{ display:none !important; }
  /* Mobile: remove default basket separator */
  .app-header-menu .app-basket-btn:after{ content:none !important; display:none !important; }
  /* Mobile: basket button same style as desktop */
  .app-header-menu .header-nav .header-cart .app-basket-btn{
    width:40px; height:40px; padding:8px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#f5f7fb !important; border:1px solid #e6eaf0 !important;
  }
  .app-header-menu .header-nav .header-cart .app-basket-btn svg{ width:22px; height:22px; fill:#9aa0a6; }
  .app-header-menu .header-nav .header-cart .app-basket-btn:hover{
    background:rgba(254,160,0,.12) !important; border-color:rgba(254,160,0,.25) !important;
  }
  .app-header-menu .header-nav .header-cart .app-basket-btn:hover svg{ fill:#fea000; }

  /* Mobile: auth button same style as desktop */
  .app-header-menu .header-nav .header-auth .header-auth-btn{
    height:40px; line-height:40px; border-radius:12px;
    background:#f2f4f7; border:1px solid #e6eaf0; color:#6b7280;
    padding:0 14px; font-weight:700; white-space:nowrap;
    display:inline-flex; align-items:center; gap:8px;
  }
  .app-header-menu .header-nav .header-auth .header-auth-btn .icon{ color:inherit; font-size:18px; line-height:1; }
  .app-header-menu .header-nav .header-auth .header-auth-btn:hover{
    background:#6b7280; border-color:#6b7280; color:#fff;
  }
  /* Mobile: place auth button at far-left (RTL) */
  .app-header-menu .header-nav .header-auth{ order:20; }
}