/* KYG OrderHub V7.4 — request-aware status, skeleton and micro-interactions.
   Additive styling only: preserves brand, logo, existing layout and document templates. */
.ol-progress-bar {
  position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 3px;
  opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #ffcf11 35%, #ffe781 55%, #d41b25 85%, transparent 100%);
  background-size: 240% 100%; transform: translateY(-100%);
  transition: opacity .16s ease, transform .16s ease;
}
.ol-progress-bar.is-active {opacity:1; transform:translateY(0);animation: ol-bar-move 1.4s linear infinite;}
@keyframes ol-bar-move {from{background-position:240% 0}to{background-position:-240% 0}}
.ol-operation-status {
  position: fixed; right: 22px; bottom: 24px; z-index: 100001;
  display: flex; align-items: center; gap: 12px;
  max-width: min(410px,calc(100vw - 30px)); min-width: 220px;
  padding: 15px 18px; background: #111314; color:#fff;
  border:1px solid rgba(255,211,28,.4); border-left:4px solid #ffcf11;
  border-radius: 13px; box-shadow: 0 13px 36px rgba(0,0,0,.26);
  font: 650 13px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;
  opacity:0; transform:translateY(14px); visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  pointer-events:none;
}
.ol-operation-status.is-active {opacity:1; transform:translateY(0); visibility:visible;}
.ol-spin, .ol-report-spinner {
  display:inline-block; flex:0 0 auto; width:19px; height:19px;
  border:3px solid rgba(255,255,255,.20);border-top-color:#ffcf11;
  border-radius:50%; animation:ol-spin .8s linear infinite;
}
@keyframes ol-spin {to{transform:rotate(360deg)}}
.ol-btn-busy {position:relative;cursor:progress!important;opacity:.83;}
.ol-btn-busy:not([data-ol-no-inline])::after {
  content:"";display:inline-block;width:12px;height:12px;margin-left:9px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%; vertical-align:-2px;animation:ol-spin .75s linear infinite;
}
/* Do not block page scrolling or mutate application layout while the network is pending. */
#content.ol-section-enter {animation: ol-section-in .2s ease both;}
@keyframes ol-section-in {from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.ol-report-skeleton {
  min-height:170px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;padding:25px!important;
}
.ol-report-skeleton .ol-report-spinner {border-color:rgba(16,16,16,.12);border-top-color:#dbaf00;width:25px;height:25px}
.ol-report-skeleton>strong {font-size:16px;color:#151515}
.ol-report-skeleton>span:not(.ol-report-spinner) {color:#626262;font-size:13px}
.ol-skeleton-line {height:11px;width:86%;border-radius:30px;background:linear-gradient(90deg,#e7e7e7 20%,#f4f4f4 50%,#e7e7e7 80%);background-size:210% 100%;animation:ol-bar-move 1.8s linear infinite;}
.ol-skeleton-line.short {width:53%}
@media(max-width:700px){.ol-operation-status{right:12px;left:12px;bottom:14px;max-width:none;min-width:0;padding:13px 14px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.ol-progress-bar.is-active,.ol-spin,.ol-report-spinner,.ol-btn-busy::after,.ol-skeleton-line,#content.ol-section-enter{animation:none!important}.ol-operation-status{transition:none}}

/* KYG FAST BOOT 2026-10-27: visible, accessible loading + retry (no white screen). */
.kyg-boot-screen{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:#f8f8f5;padding:22px;color:#172032}
.kyg-boot-card{width:min(100%,410px);text-align:center;background:#fff;border:1px solid #e6e3d9;border-top:4px solid #ffd21a;border-radius:20px;padding:37px 30px;box-shadow:0 12px 40px #18233412}
.kyg-boot-mark{font-size:24px;font-weight:900;letter-spacing:1px;color:#111}
.kyg-boot-mark span{font-size:12px;letter-spacing:2px;color:#6a7079}
.kyg-boot-spinner{width:34px;height:34px;border:4px solid #e8e8e5;border-top-color:#e1b900;border-radius:50%;margin:24px auto;animation:kyg-boot-spin .8s linear infinite}
@keyframes kyg-boot-spin{to{transform:rotate(360deg)}}
.kyg-boot-card h1{font-size:19px;line-height:1.4;margin:0 0 8px}
.kyg-boot-card p{font-size:13px;color:#617081;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.kyg-boot-card small{font-size:11px;color:#98a0a9;display:block;margin-top:17px}
.kyg-boot-card button{background:#ffd21a;border:1px solid #e1b900;border-radius:9px;padding:11px 17px;font-weight:800;color:#111;cursor:pointer}
@media(prefers-reduced-motion:reduce){.kyg-boot-spinner{animation:none}}


/* Ayam Gepuk Artisan — opening screen branding (ORDERLIVE 10 replacement only).
   Does not affect page-loading indicators, transaction loaders, print or app layout. */
.kyg-boot-screen[hidden] { display: none !important; }
.kyg-boot-screen .kyg-boot-card {
  box-sizing: border-box;
  width: min(100%, 462px);
  padding: 27px 25px 31px;
  border-top-color: #ffd10d;
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(22, 29, 44, .075);
}
.kyg-boot-screen .aga-boot-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-height: 165px;
}
.kyg-boot-screen .aga-boot-logo {
  display: block;
  width: auto;
  height: 165px;
  max-width: 100%;
  object-fit: contain;
}
.kyg-boot-screen .kyg-boot-spinner {
  margin: 17px auto 23px;
  border-top-color: #e4b900;
}
.kyg-boot-screen .kyg-boot-card h1 {
  margin-bottom: 10px;
  color: #0c1b32;
  font-weight: 800;
}
@media (max-width: 480px) {
  .kyg-boot-screen .kyg-boot-card { padding: 22px 18px 27px; border-radius: 19px; }
  .kyg-boot-screen .aga-boot-brand { min-height: 142px; }
  .kyg-boot-screen .aga-boot-logo { height: 142px; }
}