/* =========================
   ioFlowsmex Player (unified)
   ========================= */

/* Container (responsive for video/iframes) */
.ioflowsmex-player {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

    /* Default responsive behavior */
    .ioflowsmex-player video,
    .ioflowsmex-player iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* If your iframes need ratio control (YouTube/Vimeo/Voomly) */
    .ioflowsmex-player .iframe-wrap {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
    }

        .ioflowsmex-player .iframe-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

/* Size presets (optional width caps) */
.ioflowsmex-xs {
    max-width: 560px;
}

.ioflowsmex-sm {
    max-width: 720px;
}

.ioflowsmex-md {
    max-width: 960px;
}

.ioflowsmex-lg {
    max-width: 1200px;
}

/* Optional: cap self-hosted video height globally (uncomment to use) */
/*
.ioflowsmex-player video {
  max-height: 380px;      /* your earlier choice */
object-fit: contain; /* keeps aspect, letterboxes if needed */
}

*/
/* ---------- Overlays (optional) ---------- */
.ioflowsmex-player.has-overlay .iof-overlay {
    position: absolute;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.2));
    border-radius: 8px;
    padding: .4rem .7rem;
}

.ioflowsmex-player .iof-overlay.title {
    top: 12px;
    left: 12px;
    font-weight: 700;
    font-size: 1rem;
}

.ioflowsmex-player .iof-overlay.cta {
    bottom: 12px;
    right: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.5);
}

    .ioflowsmex-player .iof-overlay.cta:hover {
        background: rgba(0,0,0,.55);
    }

/* Watermark badge */
.ioflowsmex-player .iof-overlay.watermark {
    background: rgba(0,0,0,.35);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: rgba(255,255,255,.85);
}

    .ioflowsmex-player .iof-overlay.watermark img {
        height: 16px;
        width: auto;
        display: block;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
    }

    .ioflowsmex-player .iof-overlay.watermark.pos-br {
        right: 10px;
        bottom: 8px;
    }

    .ioflowsmex-player .iof-overlay.watermark.pos-bl {
        left: 10px;
        bottom: 8px;
    }

    .ioflowsmex-player .iof-overlay.watermark.pos-tr {
        right: 10px;
        top: 8px;
    }

    .ioflowsmex-player .iof-overlay.watermark.pos-tl {
        left: 10px;
        top: 8px;
    }

/* ---------- Transcript (optional) ---------- */
.ioflowsmex-transcript {
    max-width: 960px;
    margin: .75rem auto 0;
    font-size: .95rem;
}

    .ioflowsmex-transcript > summary {
        cursor: pointer;
        font-weight: 600;
        list-style: none; /* safety reset */
        outline: none;
    }

/* Hide default disclosure arrow (cross-browser) */
@supports selector(summary::-webkit-details-marker) {
    .ioflowsmex-transcript > summary::-webkit-details-marker {
        display: none;
    }
    /* Chrome/Safari */
}

.ioflowsmex-transcript > summary::marker {
    content: "";
}
/* Firefox/Edge */

.ioflowsmex-transcript[open] {
    padding-top: .25rem;
}

/* ---------- Optional tiny credit (footer-ish label) ---------- */
.ioflowsmex-credit {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 0.75rem;
    color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.35);
    padding: 2px 8px;
    border-radius: 6px;
}

    .ioflowsmex-credit a {
        color: inherit;
        text-decoration: none;
    }

        .ioflowsmex-credit a:hover {
            text-decoration: underline;
        }
/* Hide watermark when playing */
.ioflowsmex-player.playing .iof-overlay.watermark {
    opacity: 0;
    transition: opacity .3s ease;
}

/* Fade back in when paused/ended */
.ioflowsmex-player .iof-overlay.watermark {
    opacity: 1;
    transition: opacity .3s ease;
}

    .ioflowsmex-player .iof-overlay.watermark.light {
        background: transparent;
        color: rgba(255,255,255,.5);
    }

        .ioflowsmex-player .iof-overlay.watermark.light img {
            opacity: 0.5;
        }
/* Watermark modes */
.iof-overlay.watermark.watermark-always {
    opacity: 1;
}

.iof-overlay.watermark.watermark-light {
    background: transparent;
    color: rgba(255,255,255,.5);
}

    .iof-overlay.watermark.watermark-light img {
        opacity: .5;
    }

.ioflowsmex-player.playing .iof-overlay.watermark.watermark-hide-on-play {
    opacity: 0;
    transition: opacity .3s ease;
}

.iof-overlay.watermark.watermark-hide-on-play {
    opacity: 1;
    transition: opacity .3s ease;
}