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

:root {
  --tabbar-height: 60px;
  --tabbar-bg: #ffffff;
  --tabbar-border: #e5e7eb;
  --tabbar-active: #16a34a;
  /* brand accent */
  --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);
  }

  /* Pages without the bottom CTA bar (e.g. product page) only need tabbar space */
  body.is-mobile.no-cta-bar main {
    padding-bottom: calc(var(--tabbar-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;
  }

  /* Pages without the bottom CTA bar only need tabbar space */
  body.is-mobile.no-cta-bar .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;
  }

  /* Specification/Reviews sticky nav scrolls normally on mobile */
  .pd-snav {
    position: static;
  }
}

/* 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);
}

/* ---- Mobile modal fixes (inquiry / bulk price popups) ---- */

/* Hide bottom bars while any modal is open so the popup uses the full screen */
body.modal-open .mobile-tabbar,
body.modal-open .floating-cta,
body.modal-open .product-cta-bar {
  display: none !important;
}

@media (max-width: 767.98px) {
  /* Fix centered + scrollable dialog: keep header visible and allow body scroll */
  .modal-dialog-centered.modal-dialog-scrollable {
    align-items: flex-start;
    margin-top: 8px;
  }
  .modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 16px);
  }
  .modal-dialog-scrollable .modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Small screens: make the dialog full-width with a little breathing room */
  .modal-dialog {
    margin: 8px;
  }
  .modal-dialog-centered {
    min-height: calc(100% - 16px);
  }
}

/* iOS Safari: guard for older vh units */
@supports not (height: 100dvh) {
  @media (max-width: 767.98px) {
    .modal-dialog-centered.modal-dialog-scrollable .modal-content {
      max-height: calc(100vh - 16px);
    }
  }
}

/* ---- Bulk Price inquiry modal: keep it fully inside the mobile viewport ---- */
@media (max-width: 767.98px) {
  #bulkInquiryModal .modal-dialog {
    margin: 8px auto;
    max-height: calc(100dvh - 16px);
    display: flex;
    flex-direction: column;
  }
  #bulkInquiryModal .modal-content,
  #bulkInquiryModal .bulk-inq,
  #bulkInquiryModal form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
  }
  #bulkInquiryModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #bulkInquiryModal .bulk-inq-head,
  #bulkInquiryModal .modal-footer {
    flex: 0 0 auto;
  }
  #bulkInquiryModal .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}