/* 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: reserve for both tabbar and sticky CTA */
  .footer {
    padding-bottom: calc(var(--tabbar-height) + var(--cta-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);
}