/* ================================================================
   Ad Manager Pro — Frontend Styles
   ================================================================ */

/* ── Shared slot wrapper ── */
.amp-ad-slot {
    display: block;
    position: relative;
    width: 100%;
}

/* ── Standard box (dark container matching site theme) ── */
.amp-ad-box {
    background: #1e2329;
    border: 1px solid #2e3340;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
}

/* ── Sponsored badge label (sits above the box) ── */
.amp-sponsored-badge {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0 0 8px 0;
    font-family: inherit;
    line-height: 1;
}

/* ── Centered image wrapper ── */
.amp-ad-image-wrap,
.amp-ad-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 0;
}

.amp-ad-image-wrap img,
.amp-ad-link img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Placeholder (no image set) ── */
.amp-ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #252b35;
    color: #4b5563;
    font-family: inherit;
    line-height: 1.4;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
}
.amp-ad-placeholder span { font-size: 0.82rem; font-weight: 600; color: #6b7280; }
.amp-ad-placeholder small { font-size: 0.7rem; color: #4b5563; font-family: monospace; }

/* ================================================================
   FLOATING ADS
   - position: fixed — completely outside page content flow
   - auto-hidden below 1024px (too narrow for side banners)
   - device visibility checkboxes layer on top of the auto-hide
   ================================================================ */

.amp-ad-float {
    position: fixed !important;
    top: 0;               /* overridden by inline style % */
    z-index: 99;
    line-height: 0;
    /* No background, no border, no box — pure image */
}

.amp-ad-float-left  {
    left: 0 !important;
    right: auto !important;
}

.amp-ad-float-right {
    right: 0 !important;
    left: auto !important;
}

.amp-ad-float img {
    display: block;
    width: 100%;
    height: auto;
}

.amp-ad-float-link {
    display: block;
    line-height: 0;
}

/*
 * AUTO-HIDE floating ads on screens < 1024px
 * This fires regardless of the device-visibility checkbox setting.
 * The checkbox "Show on Mobile" adds an extra .amp-hide-mobile class
 * which also hides at <= 768px — both rules are independent.
 */
@media (max-width: 1023px) {
    .amp-ad-float {
        display: none !important;
    }
}

/* ================================================================
   DEVICE VISIBILITY (standard + plain ads)
   ================================================================ */

/* Hide on desktop (>= 769px) */
@media (min-width: 769px) {
    .amp-hide-desktop {
        display: none !important;
    }
}

/* Hide on mobile/tablet (<= 768px) */
@media (max-width: 768px) {
    .amp-hide-mobile {
        display: none !important;
    }
}