/* A native modal stays above sticky headers and the mobile navigation dock. */
.bgcg-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
}
.bgcg-dialog:not([open]) { display: none; }
.bgcg-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.bgcg-dialog::backdrop { background: rgba(10, 16, 43, .94); }
.bgcg-dialog * { box-sizing: border-box; }
.bgcg-toolbar { display: flex; justify-content: flex-end; }
.bgcg-dialog .bgcg-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 116px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: #1c244b;
    font: 700 15px/1.2 system-ui, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    touch-action: manipulation;
}
.bgcg-dialog .bgcg-close:hover { background: #eaf7fb; color: #1c244b; }
.bgcg-dialog .bgcg-close:focus-visible { outline: 3px solid #fb0444; outline-offset: 3px; }
.bgcg-close svg { width: 20px; height: 20px; flex: 0 0 20px; stroke: currentColor; fill: none; }
.bgcg-stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.bgcg-dialog .bgcg-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; border: 0; border-radius: 4px; }
.bgcg-dialog .bgcg-image[hidden], .bgcg-dialog .bgcg-status[hidden] { display: none; }
.bgcg-dialog .bgcg-status { position: absolute; inset-inline: 8px; margin: 0; color: #fff; text-align: center; font: 500 15px/1.5 system-ui, sans-serif; }
.bgcg-dialog .bgcg-caption { margin: 0; max-height: 4.5em; overflow-y: auto; color: #fff; text-align: center; font: 500 14px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
html.bgcg-open { overflow: hidden; }
html.bgcg-open body { position: fixed; top: var(--bgcg-scroll-top); inset-inline: 0; width: 100%; overflow: hidden; }
