/*
 * The video player's page (templates/spilari/video.html): the player fills the frame it's in (an iframe on our pages and
 * others'), black around a video of another shape, a vertical one too. The skin's own look is Video.js 10's default,
 * in the outlet's colour (--spilari-accent). The paywall over it, as the old player had it.
 */
html,
body {
    height: 100%;
    margin: 0;
    background: #000;
    color: #fff;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.spilari {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* (as Video.js's own global.css has them, before its elements are defined: no jump as they are) */
.spilari media-i18n,
.spilari video-player {
    display: contents;
}

.spilari__skin {
    display: block;
    width: 100%;
    height: 100%;
    --media-accent-color: var(--spilari-accent, #d60000);
    --media-accent-text-color: #fff;
    --media-border-radius: 0;
    --media-border-color: transparent;
}

.spilari__media {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

.spilari--cover .spilari__skin,
.spilari--cover .spilari__media {
    --media-object-fit: cover;
    object-fit: cover;
}

/* A list's teaser (?mini=1): small, muted, looping; its title is the list's. */
.spilari--mini .spilari__skin {
    --media-scale-unit: 13px;
}

/* The paywall: over the video, blurred, as the old player had it. */
.spilari.is-paywalled .spilari__skin,
.spilari.is-paywalled .spilari__media {
    opacity: 0.5;
    filter: blur(3px);
    transition: opacity 750ms ease-in-out, filter 750ms ease-in-out;
    pointer-events: none;
}

.spilari-paywall {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.spilari-paywall[hidden] {
    display: none;
}

.spilari-paywall__content {
    max-width: 300px;
}

.spilari-paywall__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.spilari-paywall__message {
    font-size: 0.875rem;
    line-height: 1.4;
}

.spilari-paywall__message a {
    color: inherit;
}

.spilari-paywall__options {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    margin: 1rem auto 0;
}

.spilari-paywall__button {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0 1.25em;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 18px;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 34px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.spilari-paywall__button:hover {
    background: #fff;
    color: #000;
}

.spilari-paywall__button--main {
    border-color: hsl(120, 47%, 52%);
    background: hsl(120, 47%, 52%);
}

.spilari-paywall__teaser {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: blur(3px);
}

@media (min-width: 768px) {
    .spilari-paywall__content {
        max-width: 500px;
    }

    .spilari-paywall__title {
        font-size: 2.5rem;
    }

    .spilari-paywall__message {
        font-size: 1.125rem;
    }

    .spilari-paywall__button {
        height: 44px;
        border-radius: 22px;
        font-size: 1.125rem;
        line-height: 42px;
    }
}

/* The chapter chip (templates/spilari/video.html, spilari.js): the chapter it's in at the top, its list under it. Over
   the video in the skin's own glass, there with the controls (a touch, the pointer, paused), away with them. */
.spilari-kaflar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 15;
    max-width: min(26rem, calc(100% - 24px));
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
    font-size: 14px;
    line-height: 1.3;
}

.spilari-kaflar.is-awake,
.spilari-kaflar.is-open,
.spilari-kaflar:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.spilari-kaflar button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.spilari-kaflar__now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px 6px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.spilari-kaflar__now svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.spilari-kaflar__now span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.spilari-kaflar__listi {
    margin: 8px 0 0;
    padding: 6px;
    max-height: min(18rem, calc(100vh - 120px));
    overflow-y: auto;
    list-style: none;
    border-radius: 12px;
    background: rgba(20, 20, 20, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.spilari-kaflar__listi[hidden] {
    display: none;
}

.spilari-kaflar__listi button {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
}

.spilari-kaflar__listi button:hover,
.spilari-kaflar__listi button:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.spilari-kaflar__listi button[aria-current] {
    background: rgba(255, 255, 255, 0.16);
    font-weight: 600;
}

.spilari-kaflar__time {
    flex: none;
    min-width: 3.25em;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.spilari-kaflar button:focus-visible {
    outline: 2px solid var(--spilari-accent, #d60000);
    outline-offset: 2px;
}

.spilari--mini .spilari-kaflar,
.spilari.is-paywalled .spilari-kaflar {
    display: none;
}