/* css/mobile-nav.css
   Mobile navigation styles and hamburger button
   Place at: /home/www/shaliimpex/css/mobile-nav.css
*/

/* Hide toggle on wide screens */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  margin-right: 6px;
  cursor: pointer;
}

/* Hamburger lines */
.mobile-toggle .hamburger {
  display:inline-block;
  width:22px;
  height:16px;
  position:relative;
}
.mobile-toggle .hamburger span {
  display:block;
  position:absolute;
  height:2px;
  width:100%;
  background:#0f1720;
  left:0;
  border-radius:2px;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}
.mobile-toggle .hamburger span:nth-child(1) { top:0; }
.mobile-toggle .hamburger span:nth-child(2) { top:7px; }
.mobile-toggle .hamburger span:nth-child(3) { top:14px; }

/* Mobile nav panel (hidden by default) */
.mobile-nav {
  display: none;
  background: #fff;
  border-top: 1px solid #eef2f7;
  position: relative;
  z-index: 1200;
}

/* Inner container for padding and layout */
.mobile-nav .mobile-nav-inner {
  padding: 12px 18px;
}

/* Mobile nav links */
.mobile-nav nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mobile-nav nav a {
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#0f1720;
  border:1px solid transparent;
}
.mobile-nav nav a:hover {
  background:#f8fafc;
  border-color:#eef2f7;
}

/* mobile actions (language, login) */
.mobile-nav .mobile-actions {
  margin-top:10px;
  color:#6b7280;
  font-size:0.95rem;
}

/* When open */
.mobile-nav.open { display:block; }

/* Transform hamburger into X when open */
.mobile-toggle.open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); top:7px; }
.mobile-toggle.open .hamburger span:nth-child(2) { opacity:0; transform: scale(0.8); }
.mobile-toggle.open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); top:7px; }

/* Responsive show/hide */
@media (max-width:860px) {
  .site-nav { display:none; }
  .mobile-toggle { display:inline-block; }
  .header-actions { display:none; } /* hide header actions, languages appear in mobile nav */
}

/* Keep desktop layout unchanged */
@media (min-width:861px) {
  .mobile-nav { display:none !important; }
  .mobile-toggle { display:none !important; }
}