/* =====================================================
   MOBILE HEADER - M2.1 Mobile-First Responsive
   Desktop = Main Product
   [ Hamburger ]   LOGO   [ WhatsApp CTA ]
   ===================================================== */

/* =====================================================
   1. HAMBURGER BUTTON STYLES
   ===================================================== */
.wt-mobile-menu-button {
  display: none; /* Hidden on desktop */
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: var(--z-fixed, 1000);
  position: relative;
  flex-shrink: 0;
}

.wt-mobile-menu-button__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin: auto;
  position: relative;
}

.wt-mobile-menu-button__icon span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-color, #1a1a1a);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  left: 1px;
}

.wt-mobile-menu-button__icon span:nth-child(1) {
  top: 5px;
}

.wt-mobile-menu-button__icon span:nth-child(2) {
  top: 11px;
}

.wt-mobile-menu-button__icon span:nth-child(3) {
  top: 17px;
}

/* Hamburger X Animation */
.wt-mobile-menu-button[aria-expanded="true"] .wt-mobile-menu-button__icon span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}

.wt-mobile-menu-button[aria-expanded="true"] .wt-mobile-menu-button__icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.wt-mobile-menu-button[aria-expanded="true"] .wt-mobile-menu-button__icon span:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

/* =====================================================
   2. MOBILE WHATSAPP CTA BUTTON
   ===================================================== */
.mobile-whatsapp-cta {
  display: none; /* Hidden on desktop */
  width: 44px;
  height: 44px;
  background: #25D366;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mobile-whatsapp-cta i {
  font-size: 20px;
  color: white;
}

.mobile-whatsapp-cta:hover,
.mobile-whatsapp-cta:active {
  background: #128C7E;
  transform: scale(1.05);
}

/* =====================================================
   3. MOBILE MENU PANEL (Fullscreen Drawer)
   ===================================================== */
.wt-mobile-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-color, #ffffff);
  z-index: calc(var(--z-fixed, 1000) - 1);
  padding-top: 80px; /* Header height */
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

body.wt-mobile-menu-open .wt-mobile-menu-panel {
  transform: translateX(0);
  visibility: visible;
}

/* Prevent body scroll when menu is open */
body.wt-mobile-menu-open {
  overflow: hidden;
}

/* Menu Content */
.wt-mobile-menu-panel__content {
  padding: 24px;
}

/* Navigation Links */
.wt-mobile-menu-panel__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wt-mobile-menu-panel__nav-item {
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.wt-mobile-menu-panel__nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 8px;
  color: var(--text-color, #1a1a1a);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.wt-mobile-menu-panel__nav-link:hover,
.wt-mobile-menu-panel__nav-link:active {
  color: var(--primary-color, #2563eb);
  background: var(--bg-light, #f5f7fa);
}

.wt-mobile-menu-panel__nav-link.active {
  color: var(--primary-color, #2563eb);
  font-weight: 600;
}

.wt-mobile-menu-panel__nav-link i {
  width: 24px;
  text-align: center;
  font-size: 18px;
  color: var(--text-muted, #6b7280);
}

.wt-mobile-menu-panel__nav-link:hover i,
.wt-mobile-menu-panel__nav-link.active i {
  color: var(--primary-color, #2563eb);
}

/* Section Divider */
.wt-mobile-menu-panel__divider {
  height: 1px;
  background: var(--border-color, #e5e7eb);
  margin: 16px 0;
}

/* Language & Currency Section */
.wt-mobile-menu-panel__settings {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.wt-mobile-menu-panel__settings-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-light, #f5f7fa);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color, #1a1a1a);
  transition: all 0.2s ease;
}

.wt-mobile-menu-panel__settings-btn:hover,
.wt-mobile-menu-panel__settings-btn:active {
  border-color: var(--primary-color, #2563eb);
  background: white;
}

/* CTA Buttons */
.wt-mobile-menu-panel__cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wt-mobile-menu-panel__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.wt-mobile-menu-panel__cta-btn--whatsapp {
  background: #25D366;
  color: white;
}

.wt-mobile-menu-panel__cta-btn--whatsapp:hover {
  background: #128C7E;
}

.wt-mobile-menu-panel__cta-btn--call {
  background: var(--success-color, #22c55e);
  color: white;
}

.wt-mobile-menu-panel__cta-btn--call:hover {
  background: #16a34a;
}

/* =====================================================
   4. MOBILE RESPONSIVE RULES (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
  /* Show hamburger button */
  .wt-mobile-menu-button {
    display: flex;
  }

  /* Show mobile WhatsApp CTA */
  .mobile-whatsapp-cta {
    display: flex;
  }

  /* Hide desktop navigation */
  .premium-header .header-nav {
    display: none;
  }

  /* Hide desktop call button */
  .premium-header .call-btn {
    display: none !important;
  }

  /* Hide language/currency selectors on mobile header */
  .premium-header .language-selector,
  .premium-header .currency-selector {
    display: none;
  }

  /* Adjust header height */
  .premium-header {
    height: 64px;
  }

  /* Adjust header container */
  .premium-header .header-container {
    padding: 0 16px;
    gap: 12px;
  }

  /* Logo adjustments */
  .premium-header .header-logo {
    width: auto;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .premium-header .logo-link {
    font-size: 18px;
    gap: 8px;
  }

  .premium-header .logo-icon {
    font-size: 22px;
  }

  /* Actions area for mobile */
  .premium-header .header-actions {
    width: auto;
    gap: 8px;
  }

  /* Cart button on mobile */
  .premium-header .cart-btn {
    width: 40px;
    height: 40px;
  }

  /* Mobile menu panel visible */
  .wt-mobile-menu-panel {
    padding-top: 64px; /* Match mobile header height */
  }
}

/* =====================================================
   5. TABLET RESPONSIVE (769px - 1024px)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Hide hamburger on tablet - keep desktop nav */
  .wt-mobile-menu-button {
    display: none;
  }

  /* Hide mobile WhatsApp CTA on tablet */
  .mobile-whatsapp-cta {
    display: none;
  }

  /* Reduce nav spacing */
  .premium-header .nav-list {
    gap: 20px;
  }

  .premium-header .nav-link {
    font-size: 13px;
  }
}

/* =====================================================
   6. DESKTOP (1025px+)
   ===================================================== */
@media (min-width: 1025px) {
  /* Ensure hamburger is hidden */
  .wt-mobile-menu-button {
    display: none !important;
  }

  /* Ensure mobile WhatsApp CTA is hidden */
  .mobile-whatsapp-cta {
    display: none !important;
  }

  /* Ensure menu panel is hidden */
  .wt-mobile-menu-panel {
    display: none !important;
  }
}

/* =====================================================
   7. ACCESSIBILITY & FOCUS STATES
   ===================================================== */
.wt-mobile-menu-button:focus-visible,
.mobile-whatsapp-cta:focus-visible,
.wt-mobile-menu-panel__nav-link:focus-visible,
.wt-mobile-menu-panel__cta-btn:focus-visible {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: 2px;
}

/* =====================================================
   8. DARK MODE SUPPORT
   ===================================================== */
@media (prefers-color-scheme: dark) {
  .wt-mobile-menu-panel {
    background: var(--mobile-background, #121212);
  }

  .wt-mobile-menu-button__icon span {
    background: var(--mobile-text, #f5f5f5);
  }

  .wt-mobile-menu-panel__nav-link {
    color: var(--mobile-text, #f5f5f5);
  }

  .wt-mobile-menu-panel__nav-item {
    border-color: var(--mobile-border, rgba(255, 255, 255, 0.1));
  }
}