/*
 * MANADO.NEWS — FLOATING ADS WAKTU-STYLE R6
 * 160x600 desktop wings, top alignment, ADS badge and dismiss button.
 * The existing Manado.news creative, click URL and admin ad slots are retained.
 */

.mn-floating-ads .mn-floating-ad.is-dismissed {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Waktu.news only reveals floating wings on sufficiently wide/tall screens. */
@media (max-width: 1459px), (max-height: 719px) {
    .mn-floating-ads {
        display: none !important;
    }
}

@media (min-width: 1460px) and (min-height: 720px) {
    .mn-floating-ads:not(.is-hidden-disabled) {
        display: block !important;
    }

    .mn-floating-ads .mn-floating-ad {
        position: fixed;
        z-index: 35;
        top: clamp(112px, 14vh, 154px) !important;
        display: block;
        width: 160px !important;
        height: auto !important;
        max-height: min(600px, calc(100vh - 180px));
        transition: opacity .2s ease, transform .2s ease;
    }

    .mn-floating-ads .mn-floating-ad-left {
        left: auto !important;
        right: calc(50% + 545px) !important;
    }

    .mn-floating-ads .mn-floating-ad-right {
        right: auto !important;
        left: calc(50% + 545px) !important;
    }

    .mn-floating-ads .mn-floating-ad-card {
        position: relative;
        display: block;
        width: 160px !important;
        height: min(600px, calc(100vh - 180px)) !important;
        min-height: 0 !important;
        max-height: 600px !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid rgba(18, 31, 62, .10);
        border-radius: 16px;
        background: #09172f !important;
        box-shadow: 0 18px 45px rgba(18, 31, 62, .16);
    }

    .mn-floating-ads .mn-floating-ad-card::before {
        display: none !important;
    }

    /* Both x-ad-slot image mode and its placeholder mode use the full frame. */
    .mn-floating-ads .mn-floating-ad-card > a,
    .mn-floating-ads .mn-floating-ad-card > div:not(.mn-floating-ad-ads-badge-r6) {
        position: relative;
        z-index: 1;
        display: block;
        width: 160px !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 16px;
    }

    .mn-floating-ads .mn-floating-ad-card .mn-floating-ad-link {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 15px 8px !important;
        color: #fff;
    }

    .mn-floating-ads .mn-floating-ad-card img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        /* Existing 120x600 creatives remain legible until a 160x600 is uploaded. */
        object-fit: contain !important;
        object-position: center !important;
        background: #09172f;
    }

    .mn-floating-ads .mn-floating-ad-ads-badge-r6 {
        position: absolute;
        z-index: 12;
        top: 8px;
        left: 8px;
        max-width: 105px;
        padding: 5px 8px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(14, 24, 51, .76);
        color: #fff;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .06em;
        line-height: 1;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
        backdrop-filter: blur(8px);
        pointer-events: none;
    }

    .mn-floating-ads .mn-floating-ad-close-r6 {
        position: absolute;
        z-index: 20;
        top: 7px;
        right: 7px;
        display: grid;
        width: 25px;
        height: 25px;
        min-height: 25px;
        padding: 0;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 50%;
        background: rgba(14, 24, 51, .78);
        color: #fff;
        font: 700 16px/1 Arial, sans-serif;
        cursor: pointer;
        backdrop-filter: blur(8px);
        pointer-events: auto;
        touch-action: manipulation;
    }

    .mn-floating-ads .mn-floating-ad-close-r6:hover,
    .mn-floating-ads .mn-floating-ad-close-r6:focus-visible {
        background: #ef5a49;
        outline: 2px solid #fff;
        outline-offset: 2px;
    }
}