/* mobile-native.css — UniBite native app feel */

@media (max-width: 991px) {
  /* ── 1. Touch primitives ── */
  html {
    touch-action: manipulation;       /* kills 300ms delay + double-tap zoom */
    -webkit-text-size-adjust: 100%;
  }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none; /* disable iOS long-press popup */
  }
  .bottom-nav, .bottom-nav-item, .site-header,
  .mobile-header-actions, .notif-bell, .mobile-cart-icon {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── 2. Input 16px floor — prevents iOS zoom on focus ── */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="url"], textarea, select,
  .input-field, .form-control, .form-select {
    font-size: 16px !important;
  }

  /* ── 3. Bottom nav — iOS pill active state ── */

  .bottom-nav-item {
    border-radius: 12px;
    padding: 0.45rem 0.875rem 0.4rem;
    transition:
      color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* spring back */
  }
  .bottom-nav-item.active {
    color: #FF6B35;
    background: rgba(255, 107, 53, 0.11);
    border-radius: 12px;
  }
  .bottom-nav-item:active {
    transform: scale(0.90);
    transition: transform 0.08s ease-out; /* fast compress */
  }

  /* ── 4. Spring press on all interactive elements ── */
  .btn:active,
  button:active:not(.notif-bell):not(.mobile-menu-close):not(.mobile-menu-toggle) {
    transform: scale(0.95);
    transition: transform 0.08s ease-out;
  }

  /* ── 5. Mobile header — show icon only, hide wordmark ── */
  .header-content { position: relative; }
  .logo a span { display: none; }
  .logo-icon { width: 1.75rem; height: 1.75rem; }

  /* ── 6. Notification panel — proper bottom sheet at 991px ── */
  .notif-panel {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.35s;
    opacity: 1;
    visibility: hidden;
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .notif-panel.active {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }
  /* Drag handle pill */
  .notif-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #E5DDD4;
    border-radius: 9999px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  /* Notification bottom-sheet backdrop */
  .notif-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 20, 16, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1099;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .notif-backdrop.active { opacity: 1; visibility: visible; }

  /* ── 7. Momentum scrolling on scrollable containers ── */
  .notif-list, .mobile-nav {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
  }
  .notif-list::-webkit-scrollbar, .mobile-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Webkit */
  }

  /* ── 8. Safe area — universal body fallback ── */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
      padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
    .bottom-nav {
      height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* notif-backdrop hidden on desktop (not inside media query to avoid conflict) */
.notif-backdrop { display: none; }