/* Mobile-specific tweaks */
/* -----------------------------------------------------
   u19b1 - Mobile topbar LOCK (no shrink / no layout shift)
   Tujuan: topbar storefront tetap "diam" saat scroll di mobile.
   (Mematikan efek compact-on-scroll yang bikin elemen bergeser.)
   ----------------------------------------------------- */

@media (max-width: 767.98px) {
  /* Lock navbar padding/height (override rules in inline <style>) */
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-topbar,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-topbar {
    padding-top: var(--bs-navbar-padding-y, .5rem) !important;
    padding-bottom: var(--bs-navbar-padding-y, .5rem) !important;
  }

  /* Keep brand/icon sizing stable */
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-topbar .navbar-brand img,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-topbar .navbar-brand img {
    height: 28px !important;
  }

  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-topbar .sf-actions .sf-nav-icon,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-topbar .sf-actions .sf-nav-icon {
    width: 38px !important;
    height: 38px !important;
  }
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-topbar .sf-actions .sf-nav-icon i,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-topbar .sf-actions .sf-nav-icon i {
    font-size: 18px !important;
  }

  /* Keep mobile search field stable */
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-searchbar--mobile .input-group-text,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-searchbar--mobile .input-group-text {
    padding: .45rem .65rem !important;
  }
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-searchbar--mobile .form-control,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-searchbar--mobile .form-control {
    padding: .45rem .65rem !important;
    font-size: .9rem !important;
  }
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-searchbtn,
  html body .sf-header-sticky.sf-header-sticky.is-scrolled:not(.sf-m-search-open) .sf-searchbtn {
    padding: .45rem .85rem !important;
  }

  /* Jangan swap/hide search saat scroll (bikin header terasa geser) */
  html body .sf-header-sticky.sf-header-sticky.sf-hide-m-search-on-scroll.is-scrolled:not(.sf-m-search-open) .sf-searchbar--mobile {
    display: block !important;
  }
  html body .sf-header-sticky.sf-header-sticky.sf-hide-m-search-on-scroll.is-scrolled:not(.sf-m-search-open) .sf-m-searchbtn {
    display: none !important;
  }

  /* Lock announcement row (promo) supaya nggak mengecil/hilang */
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-ann {
    max-height: none !important;
    overflow: visible !important;
    padding-top: .5rem !important;   /* match .py-2 */
    padding-bottom: .5rem !important;
  }
  html body .sf-header-sticky.sf-header-sticky.is-scrolled .sf-ann .sf-ann-link {
    display: inline !important;
  }
}

/* -----------------------------------------------------
   u21b2e — desktop notif offcanvas offset */
:root{--nifa-fixed-header-offset:0px;}
@media (min-width: 768px){
  /* Store has a fixed header (.sf-header-sticky, z-index:2000). Keep notif panel below it. */
  .offcanvas[data-notif-panel="1"]{
    top: calc(var(--nifa-fixed-header-offset, 0px) + env(safe-area-inset-top));
  }
}

/* u22h — Portal mobile topbar spacing (fix icons too close to edge) */
@media (max-width: 767.98px){
  .portal-mobile-topbar .container-fluid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@supports (padding-left: env(safe-area-inset-left)){
  @media (max-width: 767.98px){
    .portal-mobile-topbar .container-fluid{
      padding-left: calc(16px + env(safe-area-inset-left)) !important;
      padding-right: calc(16px + env(safe-area-inset-right)) !important;
    }
  }
}