/* Host page styles (outside iframe). Keep very specific + !important to beat theme CSS. */
.lwgojek-app-host{
  margin:0 !important;
  background:#fff !important;
}

html, body.lwgojek-app-host{
  background:#fff !important;
}


/* Stop theme layout from creating extra scroll on mobile (causes bottom nav to look like it floats) */
@media (max-width: 520px){
  html, body.lwgojek-app-host{
    height:100% !important;
    overflow:hidden !important;
  }
}
.lwgojek-app-host .site,
.lwgojek-app-host .site-content{
  background:#fff !important;
}

#lwgojek-host.lwgojek-host-wrap{
  width:100% !important;
  min-height: calc(100vh - 0px) !important;
  display:flex !important;
  justify-content:center !important;
  align-items:stretch !important;
  padding: 18px 12px !important;
  margin:0 !important;
  background:#fff !important;
}

#lwgojek-host .lwgojek-frame{
  width: min(420px, 100%) !important;
  height: min(860px, calc(100vh - 36px)) !important;
  /* Add a subtle device-like border so the phone frame feels finished */
  border: 1px solid rgba(17,24,39,.10) !important;
  border-radius: 28px !important;
  box-shadow: 0 12px 40px rgba(17,24,39,.14), 0 0 0 1px rgba(255,255,255,.75) inset !important;
  background: #fff !important;
}

@media (max-width: 520px){
  #lwgojek-host.lwgojek-host-wrap{
    padding:0 !important;
    min-height: calc(var(--lw-host-vh, 1vh) * 100) !important;
  }
  #lwgojek-host .lwgojek-frame{
    width:100% !important;
    height: calc(var(--lw-host-vh, 1vh) * 100) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}