/* APNA TRAVELS B2B: one layout for phones, tablets, laptops and wide screens, and the installed app. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
/* wide screens: use more of the space */
@media (min-width:1600px){ .wrap{max-width:1440px!important} }
@media (min-width:2200px){ .wrap{max-width:1680px!important} html{font-size:17px} }
/* tablets and phones */
@media (max-width:900px){
  .bar .tabs,.tabs#tabs,.wrap.tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bar .tabs::-webkit-scrollbar,.wrap.tabs::-webkit-scrollbar{display:none}
  .tbl{-webkit-overflow-scrolling:touch}
}
@media (max-width:760px){
  input,select,textarea{font-size:16px!important} /* stops the phone zooming into fields */
  .btn{min-height:40px}
  .btn.sm{min-height:34px}
  [data-go].btn{white-space:normal;text-align:left}
  /* instant package cards slide sideways instead of a long list */
  #pkgDests.dests,.dests:not(.soon){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  #pkgDests.dests::-webkit-scrollbar,.dests:not(.soon)::-webkit-scrollbar{display:none}
  .dests:not(.soon)>.dest{flex:0 0 82%;scroll-snap-align:start;min-height:190px}
  .auth .dests{display:flex!important;flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .drawer .panel,.modal .box{border-radius:0}
}
/* bottom bar in the portal on phones (like an app) */
.bnav{display:none}
@media (max-width:760px){
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.98);border-top:1px solid var(--line,#E3DACB);box-shadow:0 -8px 24px -16px rgba(14,27,46,.4);padding:4px 4px max(4px,env(safe-area-inset-bottom,0px))}
  .bnav a,.bnav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font:600 11px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--muted,#586174);text-decoration:none;cursor:pointer;min-width:0}
  .bnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
  .bnav .on{color:var(--navy,#0E1B2E)}
  .bnav .on svg{stroke:var(--gold,#A8844A)}
  body.has-bnav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.has-bnav #apnaInstall{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  body.has-bnav .save,body.has-bnav .savebar{bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}
/* installed app: room for the phone status bar */
@media (display-mode: standalone){
  .mast,.top,header.mast{padding-top:max(env(safe-area-inset-top,0px),0px)}
  body{overscroll-behavior-y:contain}
}
@media print{ .bnav,#apnaInstall{display:none!important} body.has-bnav{padding-bottom:0} }
.bnav:empty{display:none!important}
@media (max-width:900px){ .tabs>button,.tabs>a{flex:none!important;white-space:nowrap!important} }
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .chip{white-space:nowrap}
  .mast .who{font-size:12px}
}
@media (min-width:1300px){ #pkgDests.dests{grid-template-columns:repeat(4,minmax(0,1fr))!important} }