/**
 * Wasla pre-roll ad overlay (js/wasla-preroll.js) — used by the podcasts page and the
 * homepage YouTube slider. Self-contained: resets theme button styles inside the overlay.
 */

.wpr-ad,
.wpr-ad *,
.wpr-ad *::before,
.wpr-ad *::after {
    box-sizing: border-box;
    font-family: inherit;
}

.wpr-ad [hidden] {
    display: none !important;
}

/* Base reset only — a :hover/:focus variant here would outrank each button's own look on hover. */
.wpr-ad button {
    border: 0;
    margin: 0;
    font: inherit;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.wpr-ad {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    direction: rtl;
}

.wpr-ad__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.wpr-ad__top {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: clamp(.6rem, 2vw, 1rem);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent);
    font-size: .85rem;
}

.wpr-ad__badge {
    padding: .1rem .55rem;
    border-radius: 6px;
    background: #ffcc00;
    color: #1a1400;
    font-weight: 800;
}

.wpr-ad__time {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: #fff;
    font-weight: 700;
}

.wpr-ad__note {
    margin-inline-start: auto;
    color: rgba(255, 255, 255, .8);
}

.wpr-ad__bottom {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding: clamp(.6rem, 2vw, 1rem) clamp(.6rem, 2vw, 1rem) calc(clamp(.6rem, 2vw, 1rem) + 6px);
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
    pointer-events: none;
}

.wpr-ad__bottom > * {
    pointer-events: auto;
}

.wpr-ad .wpr-ad__sound,
.wpr-ad a.wpr-ad__cta,
.wpr-ad .wpr-ad__skip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.wpr-ad .wpr-ad__sound {
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    color: #fff;
}

.wpr-ad a.wpr-ad__cta {
    background: #ffcc00;
    color: #1a1400;
}

.wpr-ad a.wpr-ad__cta:hover {
    transform: translateY(-1px);
}

.wpr-ad .wpr-ad__skip {
    margin-inline-start: auto;
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.wpr-ad .wpr-ad__skip:disabled {
    cursor: default;
    opacity: .75;
    font-weight: 500;
}

.wpr-ad .wpr-ad__skip:not(:disabled):hover {
    background: #fff;
    color: #000;
}

.wpr-ad .wpr-ad__tap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .8rem 1.6rem;
    border-radius: 999px;
    background: #ffcc00;
    color: #1a1400;
    font-weight: 800;
}

.wpr-ad__progress {
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: rgba(255, 255, 255, .2);
}

.wpr-ad__progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #ffcc00;
    transition: width .25s linear;
}


.wpr-ad {
    container-type: inline-size;
}

.wpr-ad .wpr-ad__video {
    display: block;
    max-width: none;
    height: 100% !important;
    margin: 0;
}

/* Small players (e.g. homepage sidebar column): keep the bars compact. */
@container (max-width: 480px) {
    .wpr-ad__note { display: none; }
    .wpr-ad .wpr-ad__sound,
    .wpr-ad a.wpr-ad__cta,
    .wpr-ad .wpr-ad__skip { min-height: 32px; padding: .3rem .75rem; font-size: .8rem; }
}