/* ==========================================================
   Release Sprint R1 - Token Adoption Overrides
   Safe layer: can be appended after existing component CSS.
========================================================== */

/* Shared controls */
.dtv-video-card__play,
.dtv-continue-card__play,
.dtv-front-hero-cta,
.dtv-mini-bar__close,
.dtv-resume-sheet__actions button,
.dtv-autoplay__actions button {
    transition:
        background var(--dtv-motion-normal),
        color var(--dtv-motion-normal),
        transform var(--dtv-motion-normal),
        box-shadow var(--dtv-motion-normal);
}

/* Video Cards */
.dtv-video-card {
    color: var(--dtv-color-text);
}

.dtv-video-card__badge {
    border-radius: var(--dtv-radius-pill);
}

.dtv-video-card__duration {
    border-radius: var(--dtv-radius-pill);
    background: var(--dtv-overlay-soft);
    color: var(--dtv-color-text-inverse);
}

.dtv-video-card__play {
    background: rgba(255, 255, 255, .94);
    color: var(--dtv-color-primary);
    box-shadow: var(--dtv-shadow-control);
}

/* Continue Watching */
.dtv-continue-card {
    border-radius: var(--dtv-radius-xl);
    background: var(--dtv-color-surface-dark);
    box-shadow: var(--dtv-shadow-card);
    transition:
        transform var(--dtv-motion-normal),
        box-shadow var(--dtv-motion-normal);
}

.dtv-continue-card:hover,
.dtv-continue-card:focus-visible {
    box-shadow: var(--dtv-shadow-card-hover);
}

.dtv-continue-card__progress span {
    background: linear-gradient(
        90deg,
        var(--dtv-color-primary),
        var(--dtv-color-primary-hover)
    );
}

.dtv-continue-card__play {
    color: var(--dtv-color-primary);
}

.dtv-continue-card__body {
    background:
        linear-gradient(
            180deg,
            var(--dtv-color-surface-navy),
            var(--dtv-color-surface-dark)
        );
}

/* Modal / Mini Player */
.dtv-video-modal__dialog {
    box-shadow: var(--dtv-shadow-modal);
}

.dtv-video-modal.is-minimized .dtv-video-modal__dialog {
    border-radius: var(--dtv-radius-lg);
    box-shadow: var(--dtv-shadow-modal);
}

.dtv-mini-bar {
    background: var(--dtv-color-surface-navy);
    color: var(--dtv-color-text-inverse);
}

.dtv-mini-bar__close:hover,
.dtv-mini-bar__close:focus-visible {
    background: var(--dtv-color-primary);
}

/* Resume / Autoplay */
.dtv-resume-sheet__inner,
.dtv-autoplay__box {
    border-color: var(--dtv-color-border-inverse);
    border-radius: var(--dtv-radius-lg);
    background: rgba(26, 46, 74, .92);
    color: var(--dtv-color-text-inverse);
    box-shadow: var(--dtv-shadow-modal);
}

.dtv-resume-sheet__actions button:first-child,
.dtv-autoplay__actions button:first-child {
    background: var(--dtv-color-primary);
    border-color: var(--dtv-color-primary);
}

.dtv-resume-sheet__actions button:first-child:hover,
.dtv-autoplay__actions button:first-child:hover {
    background: var(--dtv-color-primary-hover);
    border-color: var(--dtv-color-primary-hover);
}

/* ==========================================================
   Hotfix - SVG icons + duration readability
========================================================== */

/* Continue Watching inline SVG alignment */
.dtv-continue-card__play svg,
.dtv-continue-card__fallback svg,
.dtv-continue-card__resume-icon svg,
.dtv-video-card__play svg {
    display: block;
}

.dtv-continue-card__body small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dtv-continue-card__resume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Make carousel/video-card duration readable on any thumbnail */
.dtv-video-card__duration {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 8;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;
    padding: 5px 9px;

    border-radius: 999px;

    background: rgba(15, 23, 42, .88);
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: .01em;

    box-shadow: 0 8px 22px rgba(0,0,0,.28);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Prevent WordPress emoji images from breaking play UI if any remain */
.dtv-video-card__play img.emoji,
.dtv-continue-card__play img.emoji,
.dtv-front-live-strip img.emoji,
.dtv-live-strip img.emoji {
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
    vertical-align: -0.12em !important;
}

/* Optional: better live CTA icon spacing if live strip still uses emoji image */
.dtv-front-live-strip a,
.dtv-front-live-strip button,
.dtv-live-strip a,
.dtv-live-strip button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================
   Hotfix - Carousel buttons + Continue Watching play visibility
========================================================== */

/* Carousel arrows must always be above cards and clickable */
.dtv-carousel-shell {
    position: relative;
}

.dtv-carousel-arrow,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
    z-index: 80 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.dtv-carousel-arrow:not(:disabled),
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:not(:disabled) {
    opacity: 1 !important;
}

.dtv-carousel-row.is-dragging {
    cursor: grabbing;
}

.dtv-carousel-row.is-dragging > * {
    pointer-events: none;
}

/* Continue Watching play button: stronger contrast and perfect SVG centering */
.dtv-continue-card__play {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    border: 2px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.96) !important;
    color: var(--dtv-color-primary, #CC0000) !important;

    box-shadow: 0 16px 44px rgba(0,0,0,.34) !important;
}

.dtv-continue-card__play svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 2px;
}

.dtv-continue-card__fallback span {
    color: #ffffff !important;
    background: rgba(204,0,0,.92) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.34) !important;
}

.dtv-continue-card__resume-icon svg {
    display: block;
}


/* ==========================================================
   Hotfix - Mobile Carousel + Mini Player Close
========================================================== */

/* Carousel arrows on tablet/mobile */
.dtv-carousel-shell {
    position: relative;
    overflow: visible;
}

.dtv-carousel-row {
    touch-action: pan-x pan-y;
}

.dtv-carousel-arrow,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
    z-index: 120 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

@media (max-width: 1024px) {
    .dtv-carousel-arrow,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        font-size: 28px !important;
    }

    .dtv-carousel-arrow--prev,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev {
        left: 6px !important;
    }

    .dtv-carousel-arrow--next,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next {
        right: 6px !important;
    }
}

@media (max-width: 768px) {
    .dtv-carousel-arrow,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 24px !important;
    }

    .dtv-carousel-arrow--prev,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev {
        left: 8px !important;
    }

    .dtv-carousel-arrow--next,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next {
        right: 8px !important;
    }
}

/* Mini player close/restore */
.dtv-video-modal.is-minimized .dtv-mini-bar {
    position: relative;
    z-index: 40;
}

.dtv-video-modal.is-minimized .dtv-mini-bar__restore {
    cursor: pointer;
}

.dtv-video-modal.is-minimized .dtv-mini-bar__close {
    position: relative;
    z-index: 45;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    pointer-events: auto !important;
    cursor: pointer !important;
}

.dtv-video-modal.is-minimized .dtv-video-modal__player {
    pointer-events: auto;
}


/* ==========================================================
   DS3.2 RC5 — Mobile Carousel Controls Fix
   Goal:
   - carousel arrows no longer cover the video card
   - one full card is visible on mobile
   - arrows sit outside the card area
========================================================== */

@media (max-width: 768px) {

    /*
     * Give the carousel shell side gutters for the arrows.
     * The card will live inside the available center area.
     */
    .dtv-carousel-shell {
        padding-inline: 58px !important;
        overflow: visible !important;
    }

    /*
     * Keep the row inside the safe area.
     */
    .dtv-carousel-row {
        gap: 18px !important;
        padding: 8px 0 22px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-padding-inline: 0 !important;
    }

    /*
     * Make the card width relative to the available carousel area,
     * not the full viewport. This prevents arrows from covering it.
     */
    .dtv-video-card--short {
        flex: 0 0 calc(100vw - 148px) !important;
        max-width: calc(100vw - 148px) !important;
    }

    .dtv-video-card--poster {
        flex: 0 0 calc(100vw - 132px) !important;
        max-width: calc(100vw - 132px) !important;
    }

    .dtv-video-card--landscape {
        flex: 0 0 calc(100vw - 126px) !important;
        max-width: calc(100vw - 126px) !important;
    }

    /*
     * Position arrows in the gutters, outside the card.
     */
    .dtv-carousel-arrow,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
        top: 50% !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;

        z-index: 90 !important;

        transform: translateY(-50%) !important;

        box-shadow: 0 12px 28px rgba(204,0,0,.28) !important;
    }

    .dtv-carousel-arrow--prev,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev {
        left: 6px !important;
    }

    .dtv-carousel-arrow--next,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next {
        right: 6px !important;
    }

    /*
     * Slightly reduce title size so it breathes better on mobile.
     */
    .dtv-video-card--short .dtv-video-card__copy h3 {
        font-size: 21px !important;
    }

    .dtv-video-card__copy {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
    }
}

@media (max-width: 420px) {

    .dtv-carousel-shell {
        padding-inline: 54px !important;
    }

    .dtv-video-card--short {
        flex-basis: calc(100vw - 138px) !important;
        max-width: calc(100vw - 138px) !important;
    }

    .dtv-video-card--poster {
        flex-basis: calc(100vw - 124px) !important;
        max-width: calc(100vw - 124px) !important;
    }

    .dtv-video-card--landscape {
        flex-basis: calc(100vw - 118px) !important;
        max-width: calc(100vw - 118px) !important;
    }

    .dtv-carousel-arrow,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .dtv-carousel-arrow--prev,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev {
        left: 4px !important;
    }

    .dtv-carousel-arrow--next,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next {
        right: 4px !important;
    }
}

/* ==========================================================
   dimosTV Design System
   DS5.1 — Modal Safe Motion Patch
   Purpose:
   - keep DS5 motion
   - remove modal transform conflicts
   - restore Video Modal positioning
========================================================== */

/*
 * IMPORTANT:
 * Do NOT animate .dtv-video-modal__dialog with transform here.
 * The modal already uses transform/positioning for desktop, mobile,
 * mini-player and queue layouts.
 */

/* Restore modal/dialog control to component CSS */
.dtv-video-modal__dialog {
    opacity: 1 !important;
}

/* Prevent DS5 from changing modal positioning */
.dtv-video-modal.is-open .dtv-video-modal__dialog,
.dtv-video-modal.is-minimized .dtv-video-modal__dialog {
    opacity: 1 !important;
}

/* Safe backdrop fade only */
.dtv-video-modal__backdrop {
    transition: opacity var(--dtv-motion-normal, .22s ease) !important;
}

/* Modal open state should remain interactive */
.dtv-video-modal.is-open {
    pointer-events: auto !important;
}

/* Mini player state remains unchanged */
.dtv-video-modal.is-minimized {
    pointer-events: none !important;
}

.dtv-video-modal.is-minimized .dtv-video-modal__dialog,
.dtv-video-modal.is-minimized .dtv-mini-bar,
.dtv-video-modal.is-minimized [data-dtv-mini-close],
.dtv-video-modal.is-minimized [data-dtv-mini-restore] {
    pointer-events: auto !important;
}

/* Remove accidental inherited reveal/motion from modal */
.dtv-video-modal,
.dtv-video-modal *,
.dtv-video-modal__dialog,
.dtv-video-modal__player,
.dtv-video-modal__sidebar {
    animation-name: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dtv-video-modal,
    .dtv-video-modal__backdrop,
    .dtv-video-modal__dialog {
        transition: none !important;
        animation: none !important;
    }
}