/* Sumber aturan ukuran: ubah HANYA breakpoint CSS ini. */
#ulb-root { display:none; }
@media (max-width:999.98px) {
  /* Mode 1: Overlay (Menimpa layar penuh & Kunci Scroll Penuh - Tidak Bisa Di-scroll) */
  #ulb-root[data-ready="true"][data-mode="overlay"], #ulb-root[data-ready="true"]:not([data-mode]) {
    display:flex; position:fixed; inset:0; z-index:2147483000; background:#fff; align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
    box-sizing:border-box; padding:16px 16px calc(145px + env(safe-area-inset-bottom));
  }
  body:has(#ulb-root[data-ready="true"][data-mode="overlay"]), body:has(#ulb-root[data-ready="true"]:not([data-mode])) {
    overflow:hidden !important; position:fixed; width:100%; height:100%;
  }

  /* Mode 2: Scrollable */
  #ulb-root[data-ready="true"][data-mode="scrollable"] {
    display:flex; position:relative; width:100%; min-height:100dvh; background:#fff; align-items:center; justify-content:center; cursor:pointer; z-index:99;
    box-sizing:border-box; padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(145px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }
}
#ulb-root img { display:block; width:100%; height:100%; object-fit:contain; }
#ulb-root:focus-visible { outline:4px solid #1473e6; outline-offset:-4px; }

/* Tombol Thumb Reach */
.ulb-btn-wrap {
  position:absolute; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  width:min(calc(100% - 24px), 380px); z-index:10; pointer-events:auto;
}

/* Styling Tombol Standar / Default BSV10 (Royal Blue Bersih Tanpa Kilau) */
.ulb-btn {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; padding:14px 24px;
  border:none; border-radius:999px; background:linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff;
  font-size:17px; font-weight:800; letter-spacing:0.02em; text-transform:none;
  box-shadow:0 10px 28px rgba(37,99,235,.48), 0 2px 6px rgba(0,0,0,.12); cursor:pointer;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease, box-shadow .15s ease;
}

.ulb-btn:active { transform:scale(.96); box-shadow:0 4px 14px rgba(37,99,235,.35); }
.ulb-btn svg { width:20px; height:20px; transition:transform .2s ease; flex-shrink:0; stroke:#fff; color:#fff; }
.ulb-btn:hover svg { transform:translateX(3px); }
