/* BALI 2026-10-26: one viewport contract for guest, admin and staff dialogs.
   Loaded AFTER existing page styles; do not change page navigation or card geometry. */
:root{
  --bali-dialog-edge:clamp(10px,2.5vw,24px);
  --bali-dialog-inline-gutter:var(--bali-dialog-edge);
  --bali-dialog-block-gutter:var(--bali-dialog-edge);
  --bali-dialog-usable-width:calc(var(--bali-visible-width) - 2 * var(--bali-dialog-inline-gutter));
  --bali-dialog-usable-height:calc(var(--bali-visible-height) - 2 * var(--bali-dialog-block-gutter));
  --bali-visible-width:100vw;
  --bali-visible-height:100vh;
  --bali-visible-left:0px;
  --bali-visible-top:0px;
  --bali-dialog-center-x:50vw;
  --bali-dialog-center-y:50vh;
}
@supports (height:100dvh){:root{--bali-visible-height:100dvh;--bali-dialog-center-y:50dvh}}
@media(max-width:1179px){
  :root{
    /* Symmetric gutters keep every window centered despite a camera notch. */
    --bali-dialog-inline-gutter:max(var(--bali-dialog-edge),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
    --bali-dialog-block-gutter:max(var(--bali-dialog-edge),env(safe-area-inset-top,0px),env(safe-area-inset-bottom,0px));
  }
}
html{width:100%;max-width:100%;overflow-x:clip}
body{box-sizing:border-box;min-width:0;max-width:100%}
img,video,canvas,svg{max-width:100%}
:where(body) :is(input,textarea,select){max-width:100%}

/* Native HTML dialogs always use the full browser viewport, not a scrollable
   parent, a sidebar or a header as their positioning reference. */
html body dialog[open]{
  position:fixed!important;
  box-sizing:border-box!important;
  top:var(--bali-dialog-center-y)!important;
  left:var(--bali-dialog-center-x)!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  max-width:var(--bali-dialog-usable-width)!important;
  max-height:var(--bali-dialog-usable-height)!important;
  overscroll-behavior:contain;
}
/* Existing ID/class and !important rules must not offset a specific dialog. */
html body dialog[open][id]{
  top:var(--bali-dialog-center-y)!important;
  left:var(--bali-dialog-center-x)!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  max-width:var(--bali-dialog-usable-width)!important;
  max-height:var(--bali-dialog-usable-height)!important;
}
html body dialog#baliAgeGate.bali-age-dialog[open]{
  top:var(--bali-dialog-center-y)!important;
  left:var(--bali-dialog-center-x)!important;
  max-height:var(--bali-dialog-usable-height)!important;
}
html body dialog:not([open]){display:none!important}
html body dialog[open] :is(.bali-qr-shell,.bali-bank-dialog-shell,.bali-id-welcome-shell){
  box-sizing:border-box;max-width:100%;min-width:0;
}
html body dialog[open] :is(input,select,textarea,button){box-sizing:border-box;max-width:100%}
html body dialog[open] :is(form,fieldset,.bali-qr-shell,.bali-bank-dialog-shell,.bali-id-welcome-shell){min-width:0;max-width:100%}
html body dialog[open] :is(h1,h2,h3,label,p){overflow-wrap:anywhere}
html body dialog[open] :is(h1,h2,h3,p,small,span){overflow-wrap:break-word}
html body dialog[open] :is(.bali-id-welcome-shell,.bali-bank-dialog-shell){
  max-height:var(--bali-dialog-usable-height);
}
/* Existing div-based login, cart and success overlays center by flexbox.
   Reposition their backdrop too when a virtual keyboard is open. */
html body .modal.active{
  position:fixed!important;
  box-sizing:border-box!important;
  top:var(--bali-visible-top)!important;
  left:var(--bali-visible-left)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--bali-visible-width)!important;
  height:var(--bali-visible-height)!important;
  max-width:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:var(--bali-dialog-block-gutter) var(--bali-dialog-inline-gutter)!important;
  overflow-x:hidden;
  overflow-y:auto;
}
html body .modal.active > .modal-content{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%;
  max-height:var(--bali-dialog-usable-height)!important;
  overflow-y:auto;
  overscroll-behavior:contain;
  margin:auto!important;
}
@media(max-width:600px){
  /* Full available width with a consistent gutter, including 320px phones. */
  html body dialog[open][id]{
    width:var(--bali-dialog-usable-width)!important;
  }
  html body .modal.active > .modal-content{border-radius:clamp(12px,3vw,20px)}
  /* Do not hide transfer/reward form actions on short mobile screens. */
  html body dialog[open][id]{overflow-x:hidden!important;overflow-y:auto!important}
  html body dialog.bali-bank-dialog[open]{overflow-y:auto!important}
  html body dialog.bali-bank-dialog[open] .bali-bank-dialog-shell{
    height:auto!important;max-height:none!important;overflow:visible!important;
  }
  html body dialog.bali-bank-dialog[open] .bali-bank-step{
    overflow:visible!important;
  }

  html body :is(dialog[open],.modal.active) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:max(16px,1em);
  }
}
@media(max-height:700px){
  /* Landscape phones and open keyboards may be much shorter than portraits. */
  html body dialog[open][id]{overflow-y:auto!important}
  html body dialog[open] .bali-bank-dialog-shell{
    height:auto!important;max-height:none!important;overflow:visible!important;
  }
  html body dialog[open] .bali-bank-step{overflow-y:auto!important}
  html body dialog[open] .bali-id-welcome-shell{height:auto;overflow-y:auto}
  html body dialog[open] #baliIdWelcomeScroll{max-height:38dvh}
}