/* GAM banner centering + overlays + continue-after lock. All scoped under the
 * aio-gam- prefix. Ported from the upstream gam-frontend.css. */

/* In-content banner: centre the GPT iframe within the content column. */
.aio-gam-banner { text-align: center; margin-left: auto; margin-right: auto; }
.aio-gam-banner iframe,
.aio-gam-banner > div { margin-left: auto; margin-right: auto; }
.aio-gam-banner iframe { display: block; max-width: 100%; }

/* Overlay scrim: fixed full-viewport, hidden until JS sets display:flex. */
.aio-gam-overlay {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    z-index: 2147483647; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    animation: aio-gam-fade-in 0.2s ease-out;
}

/* Ad box: transparent, thin border, close button stacks above the ad. */
.aio-gam-adbox {
    position: relative; box-sizing: border-box;
    min-width: 250px; min-height: 250px; overflow: hidden;
    border: 1px solid #888; border-radius: 5px; padding: 10px;
}
.aio-gam-label { display: none; }

.aio-gam-close {
    display: block; position: relative; width: 30px; height: 30px;
    margin: 0 0 10px; padding: 0; background: #ebebeb; color: #000;
    border: 2px solid #000; border-radius: 20%;
    font-family: arial, sans-serif; font-weight: 700; font-size: 25px;
    line-height: 25px; text-align: center; cursor: pointer;
    touch-action: manipulation; transition: background 0.15s ease, transform 0.15s ease;
}
.aio-gam-close:hover { background: #e0e0e0; }
.aio-gam-close:active { transform: scale(0.92); }

/* Slot: kill GPT's inline width/height so the creative shows at natural size. */
.aio-gam-slot { width: auto !important; height: auto !important; margin: 0 auto; overflow: hidden; }
.aio-gam-slot iframe { max-width: 100%; display: block; margin: 0 auto; }
.aio-gam-continue-slot { width: 300px !important; height: 250px !important; }

#aio-gam-continue-done,
#aio-gam-rewarded-continue { display: block; margin: 14px auto 0; }

.aio-gam-spinner {
    width: 36px; height: 36px; margin: 70px auto;
    border: 3px solid #e8eaed; border-top-color: #1a73e8; border-radius: 50%;
    animation: aio-gam-spin 0.8s linear infinite;
}
@keyframes aio-gam-spin { to { transform: rotate(360deg); } }

/* Rewarded "fetching ad" scrim (#aio-gam-rw-loading). White-on-dark so it reads
 * over the .aio-gam-overlay blur; spinner margin reset for the centred box. */
.aio-gam-loading-box { text-align: center; color: #fff; }
.aio-gam-loading-box .aio-gam-spinner {
    margin: 0 auto 16px; border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff;
}
.aio-gam-loading-text { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }

/* Locked content region: faded with a mask gradient; unlock removes it. */
.aio-gam-locked {
    max-height: 160px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 98%);
}
.aio-gam-locked.aio-gam-unlocked {
    max-height: none; -webkit-mask-image: none; mask-image: none;
}

.aio-gam-cta { text-align: center; margin: 20px 0; }
.aio-gam-btn {
    display: inline-block; min-height: 48px; padding: 13px 28px;
    background: #1a73e8; color: #fff; border: none; border-radius: 24px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    touch-action: manipulation; transition: background 0.15s ease, transform 0.15s ease;
}
.aio-gam-btn:hover { background: #1765cc; }
.aio-gam-btn:active { transform: scale(0.97); }

@keyframes aio-gam-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .aio-gam-overlay { animation: none; }
}