/* Site-wide mobile header + drawer styles (phones only)
   Canonical source for mobile header UX across the whole site (replaces site.mobile.css)
*/
@media (max-width: 767px) {
  /* Site container gutters on phones */
  .site-container { width: 96%; padding-left: 8px; padding-right: 8px; }

  /* Global anti-overflow safeguards */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, svg, canvas { max-width: 100% !important; height: auto !important; }
  iframe { max-width: 100% !important; }
  table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .container, main, section, .content, .wrapper { width: 100% !important; max-width: 100% !important; overflow-wrap: anywhere; }
  [class*="grid"], [class*="row"], [class*="cols"], .grid { min-width: 0; }
  [class*="col"], .col, .cell { min-width: 0; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }
  html, body { overflow-x: hidden; }
  body { --site-drawer-w: 78vw; }

  /* Header spacing & compact sizing */
  .header-main { padding: 4px 0 !important; }
  .header-nav { margin: 4px 0 !important; }
  .header-main .header-bar { padding: 4px 0; }
  .header-logo-container { height: 36px !important; min-height: 36px !important; display: flex !important; align-items: center !important; }
  .header-left a.header-logo { margin: 0 8px !important; height: 36px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; }
  .header-left a.header-logo img { height: 28px !important; max-width: 140px !important; width: auto !important; margin-top: 0 !important; display: block !important; }
  .header-right { gap: 6px; padding-right: 8px; }
  .header-main .header-right a,
  .header-main .header-right .header-logout-link,
  .header-main .header-right .shop-cart-icon { gap: 0 !important; }

  /* Header action buttons are icon-only on phones */
  .header-main .header-right a.header-logout-btn,
  .header-main .header-right .header-logout-link,
  .header-main .header-right a[href*="account.php"],
  .header-main .header-right a[href*="register.php"],
  .header-main .header-right .shop-cart-icon {
    font-size: 0 !important;
    width: 36px !important; min-width: 36px !important;
    height: 36px !important; min-height: 36px !important;
    padding: 0 !important; border-radius: 10px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important; position: relative; line-height: 1 !important; transition: none !important;
    -webkit-tap-highlight-color: transparent; outline: none !important;
    border: 1px solid #6d00c7 !important; background-color: transparent !important; color: #ffffff !important; box-shadow: none !important;
  }
  .header-main .header-right a.header-logout-btn:hover,
  .header-main .header-right .header-logout-link:hover,
  .header-main .header-right a[href*="account.php"]:hover,
  .header-main .header-right a[href*="register.php"]:hover,
  .header-main .header-right .shop-cart-icon:hover,
  .header-main .header-right a.header-logout-btn:active,
  .header-main .header-right .header-logout-link:active,
  .header-main .header-right a[href*="account.php"]:active,
  .header-main .header-right a[href*="register.php"]:active,
  .header-main .header-right .shop-cart-icon:active,
  .header-main .header-right a.header-logout-btn:focus,
  .header-main .header-right .header-logout-link:focus,
  .header-main .header-right a[href*="account.php"]:focus,
  .header-main .header-right a[href*="register.php"]:focus,
  .header-main .header-right .shop-cart-icon:focus,
  .header-main .header-right a.header-logout-btn:focus-visible,
  .header-main .header-right .header-logout-link:focus-visible,
  .header-main .header-right a[href*="account.php"]:focus-visible,
  .header-main .header-right a[href*="register.php"]:focus-visible,
  .header-main .header-right .shop-cart-icon:focus-visible {
    height: 36px !important; min-height: 36px !important; padding: 0 !important;
    border-width: 1px !important; background-color: inherit !important; color: inherit !important; border-color: #6d00c7 !important; box-shadow: none !important; text-decoration: none !important; outline: none !important; border: 1px solid #6d00c7 !important;
  }
  .header-main .header-right a.header-logout-btn i,
  .header-main .header-right a[href*="account.php"] i,
  .header-main .header-right .header-logout-link i,
  .header-main .header-right .shop-cart-icon i {
    font-size: 18px !important; margin: 0 !important; line-height: 1 !important; display: inline-block !important;
  }
  .header-main .header-right a.header-logout-btn[href*="/auth/login.php"] { font-size: 0 !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; position: relative; line-height: 1 !important; transition: none !important; border: 1px solid #6d00c7 !important; background-color: transparent !important; color: #ffffff !important; box-shadow: none !important; }
  .header-main .header-right .header-logout-link::before { content: "\f2f5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 18px; line-height: 1; display: inline-block; }
  .header-main .header-right a[href*="register.php"]::before { content: "\f234"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 18px; line-height: 1; display: inline-block; }
  .header-main .header-right a.header-logout-btn[href*="/auth/login.php"]::before { content: "\f2f6"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 18px; line-height: 1; display: inline-block; }
  .header-main .cart-badge {
    width: 16px !important; height: 16px !important; min-width: 16px !important; padding: 0 !important; font-size: 0.65rem !important; margin-left: 0; border: 2px solid #6d00c7 !important; position: absolute; right: -6px; top: -6px; border-radius: 9999px !important; line-height: 1 !important; text-align: center !important;
  }

  /* Mobile hamburger and drawer for non-partner pages */
  .mobile-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin-left: 8px; margin-right: 4px; padding: 0 !important; line-height: 1 !important; border-radius: 10px !important; border: 1px solid #6d00c7 !important; background: transparent !important; color: #ffffff !important; box-shadow: none !important; }
  .mobile-menu-toggle i { font-size: 18px; color: #ffffff !important; }
  .mobile-menu-toggle:hover, .mobile-menu-toggle:active, .mobile-menu-toggle:focus { background: transparent !important; border-color: #6d00c7 !important; color: #ffffff !important; outline: none !important; box-shadow: none !important; }

  #site-mobile-menu.account-menubar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--site-drawer-w); background: #fff; box-shadow: 6px 0 24px rgba(34,0,66,0.18); border-right: 1px solid #ece6f6; transform: translateX(-100%); transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1); z-index: 1000; padding-top: 64px; overflow-y: auto; overflow-x: hidden; }
  #site-mobile-menu .menu-cursor { display: none !important; }
  #site-mobile-menu .main-menu { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 8px 16px 8px; min-height: auto; }
  #site-mobile-menu .main-menu > li { margin: 0; }
  #site-mobile-menu .main-menu > li > a { width: 100% !important; height: auto !important; min-height: 44px !important; font-size: 1.08em !important; font-weight: 500 !important; padding: 12px 4px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; color: #222 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 8px !important; }
  #site-mobile-menu .main-menu > li > a:hover, #site-mobile-menu .main-menu > li > a.active { background: transparent !important; color: #6d00c7 !important; }
  #site-mobile-menu .main-menu > li > a.active { border-left: 3px solid #6d00c7 !important; padding-left: 10px !important; }
  body.menu-open #site-mobile-menu.account-menubar { transform: translateX(0) !important; }
  .menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: saturate(80%) blur(1px); -webkit-backdrop-filter: saturate(80%) blur(1px); z-index: 999; }
  body.menu-open { overflow: hidden; }
  /* Avoid baseline transforms that create new stacking contexts (iOS/Android),
     which can cause the scrollbar to appear behind header/footer. Only keep
     the transition; we apply transforms in the menu-open state below. */
  .header-main, main, .footer-bar, .footer-copyright {
    transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  body.menu-open .header-main, body.menu-open main, body.menu-open .footer-bar, body.menu-open .footer-copyright { transform: translate3d(var(--site-drawer-w), 0, 0) !important; }
  body.menu-open main, body.menu-open .footer-bar, body.menu-open .footer-copyright { pointer-events: none; }
  body.menu-open .mobile-menu-toggle { position: relative; z-index: 1002; }

  @media (prefers-reduced-motion: reduce) {
    .header-main, main, .footer-bar, .footer-copyright, #site-mobile-menu.account-menubar { transition: none !important; }
  }
  /* Same rationale for footer: no baseline transform to avoid scrollbar overlap */
  .footer-bar, .footer-copyright {
    -webkit-transition: -webkit-transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1) !important;
    transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1) !important;
  }
  body.menu-open .footer-bar, body.menu-open .footer-copyright { -webkit-transform: translate3d(var(--site-drawer-w), 0, 0) !important; transform: translate3d(var(--site-drawer-w), 0, 0) !important; }

  /* Footer compact sizing on phones */
  .footer-bar { flex-direction: column; align-items: flex-start; padding: 18px 12px; gap: 16px; font-size: 0.95rem; }
  .footer-copyright { font-size: 0.95rem; padding: 8px 0 6px 0; }

  /* Unified password toggle (mobile adjustments if needed) */
  .with-toggle input[type="password"],
  .with-toggle input[type="text"] { padding-right: 60px !important; }
  .with-toggle .password-toggle { height: var(--password-toggle-size); min-height: var(--password-toggle-size); }

  /* Flash message: ensure full-width and correct stacking under mobile header/menu */
  .global-flash { left: 0; right: 0; width: 100%; padding: 0 6px; }
  .global-flash .flash-inner { border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; }
  body.has-mobile-flash-padding main { padding-top: var(--mobile-flash-offset, 0); }

  @supports (padding-top: env(safe-area-inset-top)) {
    .header-main::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: inherit !important; z-index: 998; pointer-events: none; }
  }
}