/*
 * JBA v16.20.147
 * Mobile header search: keep the logo on the first row and show the existing
 * live search form as a full-width open field directly below it.
 */
@media (max-width:900px), (pointer:coarse) {
  :root{
    --jba-v1620147-navy:#062550;
    --jba-v1620147-search-bg:#f1f3f6;
    --jba-v1620147-search-border:#e2e7ee;
    --jba-v1620147-search-text:#172033;
    --jba-v1620147-search-muted:#7d8490;
  }

  body #menu-indo{
    min-height:142px!important;
    overflow:visible!important;
  }

  body #menu-indo .jba-v1018-topbar{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:64px 54px!important;
    grid-template-areas:
      "logo"
      "search"!important;
    align-items:center!important;
    justify-items:center!important;
    gap:8px!important;
    width:100%!important;
    height:auto!important;
    min-height:142px!important;
    margin:0!important;
    padding:6px 12px 14px!important;
    overflow:visible!important;
    background:#fff!important;
  }

  body #menu-indo .jba-v1018-topbar::after{
    bottom:0!important;
    height:3px!important;
    background:var(--jba-v1620147-navy)!important;
  }

  body #menu-indo .jba-v1018-logo-link{
    grid-area:logo!important;
    align-self:center!important;
    display:flex!important;
    width:auto!important;
    max-width:76vw!important;
    height:60px!important;
    min-height:60px!important;
    margin:0 auto!important;
    padding:0!important;
  }

  body #menu-indo .jba-v1018-logo-link img{
    width:auto!important;
    max-width:210px!important;
    height:auto!important;
    max-height:56px!important;
    object-fit:contain!important;
  }

  /* Override the older mobile cleanup rule that hid the real search form. */
  body #menu-indo .jba-v1018-top-search,
  body #menu-indo form.jba-v1018-top-search.jba-v143-ajax-search{
    grid-area:search!important;
    position:relative!important;
    inset:auto!important;
    z-index:1005!important;
    box-sizing:border-box!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    direction:rtl!important;
    width:100%!important;
    max-width:680px!important;
    height:48px!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    background:var(--jba-v1620147-search-bg)!important;
    border:1px solid var(--jba-v1620147-search-border)!important;
    border-radius:13px!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body #menu-indo .jba-v1018-top-search .jba-v143-search-input,
  body #menu-indo .jba-v1018-top-search input[type="text"],
  body #menu-indo .jba-v1018-top-search input[type="search"]{
    box-sizing:border-box!important;
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:46px!important;
    min-width:0!important;
    margin:0!important;
    padding:0 48px 0 14px!important;
    color:var(--jba-v1620147-search-text)!important;
    background:transparent!important;
    border:0!important;
    border-radius:13px!important;
    outline:0!important;
    box-shadow:none!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:46px!important;
    text-align:right!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }

  body #menu-indo .jba-v1018-top-search .jba-v143-search-input::placeholder,
  body #menu-indo .jba-v1018-top-search input::placeholder{
    color:var(--jba-v1620147-search-muted)!important;
    opacity:1!important;
    font-weight:600!important;
  }

  body #menu-indo .jba-v1018-top-search .jba-v143-search-submit,
  body #menu-indo .jba-v1018-top-search button[type="submit"]{
    position:absolute!important;
    top:4px!important;
    right:5px!important;
    left:auto!important;
    z-index:2!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    color:#555e6d!important;
    background:transparent!important;
    border:0!important;
    border-radius:10px!important;
    box-shadow:none!important;
    cursor:pointer!important;
  }

  body #menu-indo .jba-v1018-top-search .jba-v143-search-submit .glyphicon{
    display:block!important;
    color:inherit!important;
    font-size:20px!important;
    line-height:1!important;
  }

  body #menu-indo .jba-v1018-top-search:focus-within{
    background:#fff!important;
    border-color:#b9c9df!important;
    box-shadow:0 0 0 3px rgba(6,37,80,.07)!important;
  }

  body #menu-indo .jba-v1018-top-search .jba-v143-search-results{
    position:absolute!important;
    top:54px!important;
    right:0!important;
    left:0!important;
    z-index:2147481500!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(58vh,420px)!important;
    margin:0!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    background:#fff!important;
    border:1px solid #dfe5ed!important;
    border-radius:14px!important;
    box-shadow:0 16px 38px rgba(6,37,80,.18)!important;
  }

  /* The old floating/mobile search trigger is no longer needed. */
  body #menu-indo #jba-v15266-mobile-search-btn,
  body #menu-indo .jba-v162115-mobile-search{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body #menu-indo .jba-v1018-loginbox{
    display:none!important;
  }
}

@media (max-width:420px){
  body #menu-indo .jba-v1018-topbar{
    padding-right:10px!important;
    padding-left:10px!important;
  }
  body #menu-indo .jba-v1018-logo-link img{
    max-width:190px!important;
  }
}