/* PSTNE bottom navigation — clear active state, 2026-09-29 */
@media (max-width: 900px) {
  .pstne-bottom-nav a {
    box-sizing: border-box;
    border-radius: 14px;
    padding: 4px 2px;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .pstne-bottom-nav a[aria-current="page"] {
    color: #133c4d !important;
    background: #f6ead2;
    box-shadow: inset 0 0 0 1px rgba(213, 172, 105, .82);
    font-weight: 800 !important;
  }

  .pstne-bottom-nav a[aria-current="page"] svg {
    color: #133c4d;
  }

  .pstne-bottom-nav .pstne-nav-add[aria-current="page"] svg {
    background: #d5ac69;
    color: #133c4d;
    box-shadow: 0 0 0 2px #133c4d, 0 5px 14px rgba(19, 60, 77, .18);
  }

  .pstne-bottom-nav a:active {
    transform: scale(.97);
  }
}


/* Native React bottom bar: use the same selected appearance when it owns the page. */
@media (max-width: 900px) {
  .mobile-bottom-nav > button {
    box-sizing: border-box;
    border-radius: 14px;
    padding: 4px 2px;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .mobile-bottom-nav > button[aria-current="page"] {
    color: #133c4d !important;
    background: #f6ead2;
    box-shadow: inset 0 0 0 1px rgba(213, 172, 105, .82);
    font-weight: 800 !important;
  }

  .mobile-bottom-nav > button[aria-current="page"] svg {
    color: #133c4d;
  }

  .mobile-bottom-nav > .mobile-add[aria-current="page"] .mobile-nav-icon {
    background: #d5ac69 !important;
    color: #133c4d !important;
    box-shadow: 0 0 0 2px #133c4d, 0 5px 14px rgba(19, 60, 77, .18);
  }
}


/* PSTNE UX/performance pass v4: compact mobile navigation and persistent detail actions. */
@media (max-width: 900px) {
  .pstne-bottom-nav { padding-top: 6px !important; padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; }
  .pstne-bottom-nav a { min-height: 42px !important; gap: 3px !important; }
  .pstne-bottom-nav svg { width: 21px !important; height: 21px !important; }
  .pstne-has-nav { padding-bottom: 78px !important; }
  .pstne-has-nav .support-fab,.pstne-has-nav .support-widget { bottom: 88px !important; }

  .pstne-bottom-nav .pstne-nav-add[aria-current="page"] {
    background: #f6ead2 !important;
    box-shadow: inset 0 0 0 1px rgba(213,172,105,.9) !important;
  }
  .pstne-bottom-nav .pstne-nav-add[aria-current="page"] svg {
    background: #d5ac69 !important;
    box-shadow: 0 0 0 3px #133c4d, 0 5px 14px rgba(19,60,77,.2) !important;
  }
}

@media (max-width: 767px) {
  body:not(.pstne-has-nav) { padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  .mobile-bottom-nav { padding: 5px 5px calc(5px + env(safe-area-inset-bottom)) !important; }
  .mobile-bottom-nav > button { min-height: 44px !important; gap: 3px !important; border-radius: 13px !important; }
  .mobile-bottom-nav > button[aria-current="page"] {
    background: #f6ead2 !important;
    box-shadow: inset 0 0 0 1px rgba(213,172,105,.86) !important;
  }
  .mobile-bottom-nav > .mobile-add[aria-current="page"] .mobile-nav-icon {
    background: #d5ac69 !important;
    color: #133c4d !important;
    box-shadow: 0 0 0 3px #133c4d, 0 5px 14px rgba(19,60,77,.2) !important;
  }
  .pstne-browse .pb-detail .pb-back {
    position: sticky; top: 0; z-index: 32; background: rgba(255,255,255,.96);
    margin: -6px -8px 8px; padding: 9px 8px 10px !important; backdrop-filter: blur(8px);
  }
  .pstne-browse .pb-detail .pb-seller .pb-contact {
    position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 31;
    background: rgba(255,255,255,.97); border: 1px solid #e6eaec; border-radius: 11px;
    padding: 7px; box-shadow: 0 -5px 20px rgba(19,60,77,.10); backdrop-filter: blur(8px);
  }
}