/* XBC Mobile v17.19.33 — hybrid mini-SPA interactions + pull to refresh */
.xbc-action-busy{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important;cursor:wait!important;opacity:.86;transition:opacity .12s ease,transform .12s ease}
.xbc-action-busy.xbc-busy-positioned{position:relative!important}
.xbc-action-busy .xbc-action-spinner{position:absolute;z-index:999;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(20,47,65,.18);display:grid;place-items:center;pointer-events:none}
.xbc-action-busy .xbc-action-spinner:after{content:"";width:10px;height:10px;border:2px solid rgba(11,134,243,.22);border-top-color:#0b86f3;border-radius:50%;animation:xbcSpin .62s linear infinite}
input.xbc-action-busy{opacity:.64}
@keyframes xbcSpin{to{transform:rotate(360deg)}}

/* Progress bar muncul hanya saat request tidak selesai cepat. */
.xbc-nav-progress{position:fixed;z-index:100001;left:0;right:0;top:0;height:3px;opacity:0;pointer-events:none;transform:translateZ(0);transition:opacity .12s ease}
.xbc-nav-progress.show{opacity:1}
.xbc-nav-progress i{display:block;width:18%;height:100%;border-radius:0 999px 999px 0;background:#0b86f3;box-shadow:0 0 10px rgba(11,134,243,.48);transform:translateX(-105%);animation:xbcNavProgress 1.05s cubic-bezier(.22,.72,.25,1) infinite}
.xbc-nav-progress.done i{width:100%;transform:translateX(0);animation:none;transition:width .12s ease,transform .12s ease}
@keyframes xbcNavProgress{0%{transform:translateX(-105%);width:15%}55%{width:42%}100%{transform:translateX(680%);width:18%}}

/* Overlay dipakai hanya pada submit/request yang benar-benar lambat. */
.xbc-page-loader{position:fixed;z-index:99999;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:8vh;background:rgba(242,247,250,.24);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility .14s ease}
.xbc-page-loader.show{opacity:1;visibility:visible;pointer-events:all}
.xbc-page-loader-card{min-width:116px;min-height:48px;padding:9px 15px;border:1px solid rgba(207,220,228,.88);border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 12px 34px rgba(28,65,86,.14);display:flex;align-items:center;justify-content:center;gap:10px;color:#4c626e;font-size:11px;font-weight:750}
.xbc-page-loader-spinner{width:18px;height:18px;border:2.5px solid #dceaf2;border-top-color:#0b86f3;border-radius:50%;animation:xbcSpin .66s linear infinite;flex:0 0 18px}

/* Shell dan bottom nav tetap diam; hanya <main> yang bergerak. */
.app-shell>main{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.xbc-pjax-leave-tab{animation:xbcTabOut .09s ease-out both;pointer-events:none}
.xbc-pjax-enter-tab{opacity:0;transform:scale(.995)}
.xbc-pjax-enter-tab.xbc-pjax-enter-active{opacity:1;transform:none;transition:opacity .16s ease-out,transform .16s ease-out}
.xbc-pjax-leave-forward{animation:xbcForwardOut .125s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.xbc-pjax-enter-forward{opacity:.35;transform:translate3d(22px,0,0)}
.xbc-pjax-enter-forward.xbc-pjax-enter-active{opacity:1;transform:none;transition:opacity .2s ease-out,transform .2s cubic-bezier(.2,.8,.2,1)}
.xbc-pjax-leave-back{animation:xbcBackOut .125s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.xbc-pjax-enter-back{opacity:.35;transform:translate3d(-18px,0,0)}
.xbc-pjax-enter-back.xbc-pjax-enter-active{opacity:1;transform:none;transition:opacity .2s ease-out,transform .2s cubic-bezier(.2,.8,.2,1)}
@keyframes xbcTabOut{to{opacity:.35;transform:scale(.995)}}
@keyframes xbcForwardOut{to{opacity:.2;transform:translate3d(-14px,0,0)}}
@keyframes xbcBackOut{to{opacity:.2;transform:translate3d(14px,0,0)}}

/* Full navigation fallback tetap halus. */
body.xbc-page-leaving .app-shell>main{opacity:.45;transform:translate3d(-8px,0,0);transition:opacity .1s ease,transform .1s ease;pointer-events:none}
body.xbc-page-leaving .bottom-nav{opacity:.92}

/* Browser yang mendukung cross-document View Transition akan memperhalus fallback full reload. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:xbcCrossOld .12s ease-in both}
::view-transition-new(root){animation:xbcCrossNew .18s ease-out both}
@keyframes xbcCrossOld{to{opacity:.55}}
@keyframes xbcCrossNew{from{opacity:.55}to{opacity:1}}

@media(max-width:768px){
  .xbc-page-loader{padding-bottom:14vh}
  .xbc-page-loader-card{min-height:46px;padding:8px 14px;font-size:10px}
  .xbc-nav-progress{top:env(safe-area-inset-top)}
}
@media(prefers-reduced-motion:reduce){
  .xbc-action-busy,.xbc-page-loader,.xbc-nav-progress,.app-shell>main,body.xbc-page-leaving .app-shell>main,.xbc-pjax-enter-active{animation:none!important;transition:none!important;transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}


/* XBC Mobile v17.19.33 — native-like Pull to Refresh */
.xbc-pull-refresh{--xbc-pull-y:0px;--xbc-pull-progress:0;position:fixed;z-index:100002;left:50%;top:max(8px,env(safe-area-inset-top));height:52px;transform:translate3d(-50%,calc(var(--xbc-pull-y) - 64px),0);opacity:clamp(0,var(--xbc-pull-progress),1);pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease;will-change:transform,opacity}
.xbc-pull-refresh.dragging{transition:opacity .08s linear}
.xbc-pull-refresh-pill{height:42px;min-width:42px;max-width:min(230px,calc(100vw - 32px));padding:0 13px;border:1px solid rgba(205,220,229,.92);border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 10px 28px rgba(27,66,88,.16);display:flex;align-items:center;justify-content:center;gap:8px;color:#607782;font-size:10px;font-weight:800;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.xbc-pull-refresh-icon{width:21px;height:21px;display:grid;place-items:center;color:#0b86f3;transform:rotate(calc(var(--xbc-pull-progress) * 180deg));transition:transform .12s ease;flex:0 0 21px}
.xbc-pull-refresh.ready .xbc-pull-refresh-pill{border-color:rgba(11,134,243,.3);color:#2473a5}
.xbc-pull-refresh.ready .xbc-pull-refresh-icon{transform:rotate(180deg)}
.xbc-pull-refresh.refreshing{opacity:1!important;transition:transform .18s ease,opacity .12s ease}
.xbc-pull-refresh.refreshing .xbc-pull-refresh-icon svg{display:none}
.xbc-pull-refresh.refreshing .xbc-pull-refresh-icon:after{content:"";width:16px;height:16px;border:2.5px solid #dceaf2;border-top-color:#0b86f3;border-radius:50%;animation:xbcSpin .66s linear infinite}
body.xbc-pull-active{overscroll-behavior-y:contain}
@media(min-width:769px){.xbc-pull-refresh{display:none!important}}
@media(prefers-reduced-motion:reduce){.xbc-pull-refresh,.xbc-pull-refresh-icon{transition:none!important}.xbc-pull-refresh.refreshing .xbc-pull-refresh-icon:after{animation-duration:1.1s}}