/* Mobile UI enhancements (progressive, scoped) */

:root {
  --tabbar-height: 60px;
  --tabbar-bg: #ffffff;
  --tabbar-border: #e5e7eb;
  --tabbar-active: #0d6efd; /* Bootstrap primary */
  --cta-height: 56px; /* product page sticky CTA */
}

/* Ensure safe area on iOS */
@supports (padding: max(0px)) {
  .mobile-tabbar { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
}

/* Base: only affects small screens */
@media (max-width: 768px) {
  body.is-mobile main {
    /* Reserve space for both CTA bar and bottom tab bar */
    padding-bottom: calc(var(--tabbar-height) + var(--cta-height) + 20px);
  }

  .mobile-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--tabbar-height);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    background: var(--tabbar-bg);
    border-top: 1px solid var(--tabbar-border);
    z-index: 1030; /* above footer */
  }
  .mobile-tabbar .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: #374151;
    text-decoration: none;
    background: transparent;
    border: 0;
  }
  .mobile-tabbar .tab-item i { font-size: 18px; }
  .mobile-tabbar .tab-item.active,
  .mobile-tabbar .tab-item:focus,
  .mobile-tabbar .tab-item:hover { color: var(--tabbar-active); }

  /* Header tweaks */
  header .navbar { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  header .navbar .form-control { font-size: 14px; }

  /* Footer spacing on mobile */
  .footer { padding-bottom: calc(var(--tabbar-height) + 16px) !important; }

  /* Product page sticky CTA bar (sits above bottom tab bar) */
  .product-cta-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--tabbar-height);
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--tabbar-border);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
  }
  @supports(padding: max(0px)) {
    .product-cta-bar { padding-bottom: max(env(safe-area-inset-bottom), 10px); }
  }
  .product-cta-bar .btn { flex: 1 1 auto; }
}

/* Utility: hide desktop-only clutter when .is-mobile is present */
body.is-mobile .d-desktop-only { display: none !important; }

/* Prevent overlap for sticky elements if any future additions */
body.is-mobile .sticky-bottom { bottom: var(--tabbar-height); }