/*
 * Video.js 10 / @videojs/html
 * Flayer usa a skin padrão atual. Blog usa UI própria inspirada no YouTube.
 */

.ajm-videojs10-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.ajm-videojs10-shell video-player,
.ajm-videojs10-shell video-skin,
.ajm-videojs10-shell media-container {
    display: block;
    width: 100%;
    height: 100%;
}

.ajm-videojs10-shell media-container {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.ajm-videojs10-shell .ajm-videojs10-media,
.ajm-videojs10-shell video,
.ajm-videojs10-shell hlsjs-video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: #000;
    --media-object-fit: contain;
    --media-video-border-radius: 0px;
}

/* Flayer: preserva a skin oficial atual, apenas normalizando o encaixe no tema. */
.ajm-videojs10-shell--flayer video-skin,
.ajm-jw-shell.is-videojs10-fallback video-skin {
    width: 100%;
    height: 100%;
    background: #000;
}

/* Blog / YouTube */
.ajm-videojs10-shell--youtube {
    --ajm-v10-accent: #ff0000;
    --ajm-v10-control-size: 46px;
    --ajm-v10-icon-size: 27px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.ajm-videojs10-shell--youtube .ajm-videojs10-container::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.26) 55%, transparent);
}

.ajm-videojs10-shell--youtube media-controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    padding: 0 14px max(8px, env(safe-area-inset-bottom));
    pointer-events: none;
    transition: opacity .18s ease;
}

.ajm-videojs10-shell--youtube media-controls:not([data-visible]) {
    opacity: 0;
}

.ajm-videojs10-shell--youtube media-controls-group {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    pointer-events: auto;
}

.ajm-videojs10-shell--youtube .ajm-v10-bottom,
.ajm-videojs10-shell--youtube .ajm-v10-left,
.ajm-videojs10-shell--youtube .ajm-v10-right,
.ajm-videojs10-shell--youtube .ajm-v10-volume,
.ajm-videojs10-shell--youtube .ajm-v10-time {
    display: flex;
    align-items: center;
}

.ajm-videojs10-shell--youtube .ajm-v10-bottom {
    min-height: 48px;
    justify-content: space-between;
    gap: 14px;
}

.ajm-videojs10-shell--youtube .ajm-v10-left,
.ajm-videojs10-shell--youtube .ajm-v10-right {
    gap: 2px;
}

.ajm-videojs10-shell--youtube .ajm-v10-button,
.ajm-videojs10-shell--youtube .ajm-v10-big-play {
    appearance: none;
    border: 0;
    outline: 0;
    color: #fff;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

.ajm-videojs10-shell--youtube .ajm-v10-button {
    position: relative;
    display: inline-flex;
    width: var(--ajm-v10-control-size);
    height: var(--ajm-v10-control-size);
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--ajm-v10-control-size);
    border-radius: 50%;
    transition: background .14s ease, transform .14s ease, opacity .14s ease;
}

.ajm-videojs10-shell--youtube .ajm-v10-button:hover,
.ajm-videojs10-shell--youtube .ajm-v10-button:focus-visible {
    background: rgba(255,255,255,.12);
}

.ajm-videojs10-shell--youtube .ajm-v10-button:active {
    transform: scale(.92);
}

.ajm-videojs10-shell--youtube .ajm-v10-icon {
    display: none;
    width: var(--ajm-v10-icon-size);
    height: var(--ajm-v10-icon-size);
    pointer-events: none;
}

.ajm-videojs10-shell--youtube .ajm-v10-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.ajm-videojs10-shell--youtube .ajm-v10-seek .ajm-v10-icon,
.ajm-videojs10-shell--youtube .ajm-v10-captions .ajm-v10-icon,
.ajm-videojs10-shell--youtube .ajm-v10-pip .ajm-v10-icon {
    display: block;
}

.ajm-videojs10-shell--youtube .ajm-v10-seek svg text {
    fill: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6px;
    font-weight: 700;
    text-anchor: middle;
}

/* Play / Pause / Replay */
.ajm-videojs10-shell--youtube media-play-button[data-paused]:not([data-ended]) .ajm-v10-icon-play,
.ajm-videojs10-shell--youtube media-play-button:not([data-paused]) .ajm-v10-icon-pause,
.ajm-videojs10-shell--youtube media-play-button[data-ended] .ajm-v10-icon-replay {
    display: block;
}

.ajm-videojs10-shell--youtube media-play-button[data-ended] .ajm-v10-icon-play,
.ajm-videojs10-shell--youtube media-play-button[data-ended] .ajm-v10-icon-pause {
    display: none;
}

/* Big play central: aparece no primeiro carregamento e novamente ao terminar. */
.ajm-videojs10-shell--youtube .ajm-v10-big-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 7;
    display: none;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: rgb(255 255 255 / 30%);
    box-shadow: 0 8px 30px rgba(0,0,0,.34);
    transform: translate(-50%, -50%);
    transition: transform .16s ease, background .16s ease;
}

.ajm-videojs10-shell--youtube .ajm-v10-big-play[data-paused]:not([data-started]),
.ajm-videojs10-shell--youtube .ajm-v10-big-play[data-ended] {
    display: flex;
}

.ajm-videojs10-shell--youtube .ajm-v10-big-play:hover,
.ajm-videojs10-shell--youtube .ajm-v10-big-play:focus-visible {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.05);
}

.ajm-videojs10-shell--youtube .ajm-v10-big-play .ajm-v10-icon {
    width: 31px;
    height: 31px;
}

/* Timeline */
.ajm-videojs10-shell--youtube .ajm-v10-time-slider {
    position: relative;
    display: flex;
    width: 100%;
    height: 20px;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.ajm-videojs10-shell--youtube .ajm-v10-slider-track {
    position: absolute;
    right: 0;
    left: 0;
    height: 3px;
    overflow: visible;
    background: rgba(255,255,255,.30);
    transition: height .12s ease;
}

.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-interactive] .ajm-v10-slider-track,
.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-dragging] .ajm-v10-slider-track {
    height: 5px;
}

.ajm-videojs10-shell--youtube .ajm-v10-slider-buffer,
.ajm-videojs10-shell--youtube .ajm-v10-slider-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
}

.ajm-videojs10-shell--youtube .ajm-v10-slider-buffer {
    width: var(--media-slider-buffer);
    background: rgba(255,255,255,.48);
}

.ajm-videojs10-shell--youtube .ajm-v10-slider-fill {
    width: var(--media-slider-fill);
    background: var(--ajm-v10-accent);
}

.ajm-videojs10-shell--youtube .ajm-v10-slider-thumb {
    position: absolute;
    top: 50%;
    left: var(--media-slider-fill);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--ajm-v10-accent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65);
    transition: opacity .12s ease, transform .12s ease;
}

.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-interactive] .ajm-v10-slider-thumb,
.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-dragging] .ajm-v10-slider-thumb {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-dragging] .ajm-v10-slider-thumb {
    left: var(--media-slider-pointer);
}

.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-dragging] .ajm-v10-slider-fill {
    width: var(--media-slider-pointer);
}

.ajm-videojs10-shell--youtube .ajm-v10-slider-value {
    position: absolute;
    bottom: 19px;
    left: var(--media-slider-pointer);
    display: block;
    padding: 5px 7px;
    border-radius: 4px;
    color: #fff;
    background: rgba(20,20,20,.92);
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-pointing] .ajm-v10-slider-value,
.ajm-videojs10-shell--youtube .ajm-v10-time-slider[data-dragging] .ajm-v10-slider-value {
    opacity: 1;
}

/* Volume */
.ajm-videojs10-shell--youtube .ajm-v10-volume {
    width: 48px;
    overflow: hidden;
    transition: width .18s ease;
}

.ajm-videojs10-shell--youtube .ajm-v10-volume:hover,
.ajm-videojs10-shell--youtube .ajm-v10-volume:focus-within {
    width: 136px;
}

.ajm-videojs10-shell--youtube .ajm-v10-volume-slider {
    position: relative;
    display: flex;
    width: 78px;
    height: 30px;
    align-items: center;
    flex: 0 0 78px;
    cursor: pointer;
}

.ajm-videojs10-shell--youtube .ajm-v10-volume-track {
    position: absolute;
    right: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,.32);
}

.ajm-videojs10-shell--youtube .ajm-v10-volume-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--media-slider-fill);
    background: #fff;
}

.ajm-videojs10-shell--youtube .ajm-v10-volume-thumb {
    position: absolute;
    top: 50%;
    left: var(--media-slider-fill);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.ajm-videojs10-shell--youtube media-mute-button[data-volume-level="off"] .ajm-v10-volume-off,
.ajm-videojs10-shell--youtube media-mute-button[data-volume-level="low"] .ajm-v10-volume-low,
.ajm-videojs10-shell--youtube media-mute-button[data-volume-level="medium"] .ajm-v10-volume-high,
.ajm-videojs10-shell--youtube media-mute-button[data-volume-level="high"] .ajm-v10-volume-high {
    display: block;
}

/* Tempo e ações à direita */
.ajm-videojs10-shell--youtube .ajm-v10-time {
    min-width: max-content;
    padding: 0 6px;
    gap: 4px;
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

.ajm-videojs10-shell--youtube .ajm-v10-rate {
    width: 48px;
    flex-basis: 48px;
    border-radius: 5px;
    font-size: 0;
    font-weight: 600;
}

.ajm-videojs10-shell--youtube .ajm-v10-rate::after {
    content: attr(data-rate) "x";
    font-size: 12px;
    color: #fff;
}

.ajm-videojs10-shell--youtube .ajm-v10-captions[data-active] {
    color: #fff;
}

.ajm-videojs10-shell--youtube .ajm-v10-captions[data-active]::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 7px;
    left: 10px;
    height: 2px;
    background: var(--ajm-v10-accent);
}

.ajm-videojs10-shell--youtube .ajm-v10-fullscreen-enter,
.ajm-videojs10-shell--youtube .ajm-v10-pip .ajm-v10-icon {
    display: block;
}

.ajm-videojs10-shell--youtube .ajm-v10-fullscreen[data-fullscreen] .ajm-v10-fullscreen-enter {
    display: none;
}

.ajm-videojs10-shell--youtube .ajm-v10-fullscreen[data-fullscreen] .ajm-v10-fullscreen-exit {
    display: block;
}

.ajm-videojs10-shell--youtube media-pip-button[hidden],
.ajm-videojs10-shell--youtube media-captions-button[hidden],
.ajm-videojs10-shell--youtube media-fullscreen-button[hidden] {
    display: none !important;
}

/* Fallback JW -> Video.js 10 usa a skin oficial, sem manter um segundo <video> oculto. */
.ajm-jw-shell.is-videojs10-fallback .ajm-jw-target {
    display: none !important;
}

.ajm-jw-shell.is-videojs10-fallback video-player,
.ajm-jw-shell.is-videojs10-fallback video-skin,
.ajm-jw-shell.is-videojs10-fallback video,
.ajm-jw-shell.is-videojs10-fallback hlsjs-video {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px), (pointer: coarse) {
    .ajm-videojs10-shell--youtube {
        --ajm-v10-control-size: 42px;
        --ajm-v10-icon-size: 25px;
    }

    .ajm-videojs10-shell--youtube media-controls {
        padding-right: 7px;
        padding-left: 7px;
    }

    .ajm-videojs10-shell--youtube .ajm-v10-seek,
    .ajm-videojs10-shell--youtube .ajm-v10-volume-slider,
    .ajm-videojs10-shell--youtube .ajm-v10-pip,
    .ajm-videojs10-shell--youtube .ajm-v10-rate {
        display: none !important;
    }

    .ajm-videojs10-shell--youtube .ajm-v10-volume,
    .ajm-videojs10-shell--youtube .ajm-v10-volume:hover,
    .ajm-videojs10-shell--youtube .ajm-v10-volume:focus-within {
        width: 42px;
    }

    .ajm-videojs10-shell--youtube .ajm-v10-time {
        padding: 0 2px;
        font-size: 11px;
    }

    .ajm-videojs10-shell--youtube .ajm-v10-bottom {
        gap: 4px;
    }

    .ajm-videojs10-shell--youtube .ajm-v10-big-play {
        width: 68px;
        height: 48px;
    }
}

@media (max-width: 430px) {
    .ajm-videojs10-shell--youtube .ajm-v10-time media-time-separator,
    .ajm-videojs10-shell--youtube .ajm-v10-time media-time[type="duration"] {
        display: none;
    }

    .ajm-videojs10-shell--youtube .ajm-v10-captions {
        display: none !important;
    }
}

.ajm-videojs10-shell--youtube .ajm-v10-seek {
    display: none;
}