/* NZD Accessible Video — Elementor Widget */

/* ── Wrapper ── */
.nzd-av {
    position: relative;
    width: 100%;
}

.nzd-av__wrap {
    position: relative;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
}

/* ── Media slot ── */
.nzd-av__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.nzd-av__media video,
.nzd-av__media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.nzd-av__media video {
    object-fit: cover;
}

/* iframe cover technique (16:9) */
.nzd-av__media iframe {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.7777vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    border: 0;
}

/* ── Poster ── */
.nzd-av__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.nzd-av__wrap[data-nzd-av-playing="true"] .nzd-av__poster {
    opacity: 0;
    transition: opacity 300ms ease;
}

/* ── Controls ── */
.nzd-av__controls {
    position: absolute;
    display: flex;
    gap: 10px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.nzd-av:hover .nzd-av__controls,
.nzd-av__controls:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.nzd-av__controls--always-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Position variants */
.nzd-av__controls--bottom-left {
    left: 18px;
    bottom: 18px;
}

.nzd-av__controls--bottom-right {
    right: 18px;
    bottom: 18px;
}

.nzd-av__controls--bottom-center {
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
}

.nzd-av__controls--top-left {
    left: 18px;
    top: 18px;
}

.nzd-av__controls--top-right {
    right: 18px;
    top: 18px;
}

/* ── Buttons ── */
.nzd-av__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    font-size: 16px;
}

.nzd-av__btn:focus,
.nzd-av__btn:focus-visible {
    outline: dotted 2px #fff;
    border-color: #fff;
}

/* ── Icons ── */
.nzd-av__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nzd-av__icon svg {
    fill: currentColor;
}

/* Play / Pause toggle */
.nzd-av__toggle .nzd-av__icon--play {
    display: none;
}

.nzd-av__toggle[data-state="paused"] .nzd-av__icon--pause {
    display: none;
}

.nzd-av__toggle[data-state="paused"] .nzd-av__icon--play {
    display: inline-flex;
}

/* Mute toggle */
.nzd-av__mute-toggle .nzd-av__icon--muted {
    display: none;
}

.nzd-av__mute-toggle[data-muted="true"] .nzd-av__icon--unmuted {
    display: none;
}

.nzd-av__mute-toggle[data-muted="true"] .nzd-av__icon--muted {
    display: inline-flex;
}

/* AD toggle */
.nzd-av__ad-toggle .nzd-av__icon--ad-on {
    display: none;
}

.nzd-av__ad-toggle[data-ad="true"] .nzd-av__icon--ad-off {
    display: none;
}

.nzd-av__ad-toggle[data-ad="true"] .nzd-av__icon--ad-on {
    display: inline-flex;
}

/* ── Captions ── */
.nzd-av__captions {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    max-width: calc(100% - 200px);
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.70);
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    border-radius: 4px;
    pointer-events: none;
}

.nzd-av__captions[hidden] {
    display: none !important;
}

/* ── Text description (collapsible) ── */
.nzd-av__description {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.nzd-av__description summary {
    cursor: pointer;
    font-weight: 600;
}

/* ── Screen-reader only ── */
.nzd-av .nzd-av__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .nzd-av__media,
    .nzd-av__controls,
    .nzd-av__captions {
        display: none !important;
    }

    .nzd-av__poster {
        display: block !important;
        opacity: 1 !important;
    }
}