/**
 * EmbedPress Pro — Custom Player engagement & delivery features.
 *
 * Styles for the overlays built by assets/js/custom-player-pro.js: Auto
 * Resume prompt, End Screen, Privacy Mode overlay, Timed CTA, Chapters,
 * Email Capture, Action Lock, and the Country Restriction fallback rendered
 * by AdvancedPlayerHandlers. Class names are unchanged from when these
 * rules lived in free's embedpress.css.
 */

.ep-resume-prompt {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #fff;
    font-family: inherit;
}

.ep-resume-prompt__inner {
    background: rgba(20, 20, 20, 0.95);
    padding: 24px 28px;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ep-resume-prompt__msg {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.4;
}

.ep-resume-prompt__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ep-resume-prompt__btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ep-resume-prompt__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ep-resume-prompt__btn--primary {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-resume-prompt__btn--primary:hover {
    filter: brightness(1.15);
}

/* Custom End Screen */
.ep-end-screen {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #fff;
    font-family: inherit;
    text-align: center;
}

.ep-end-screen__inner {
    padding: 24px 28px;
    max-width: 90%;
}

.ep-end-screen__msg {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.4;
}

.ep-end-screen__countdown {
    margin: 12px 0 0;
    font-size: 13px;
    opacity: 0.8;
}

.ep-end-screen__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.ep-end-screen__btn,
a.ep-end-screen__btn,
a.ep-end-screen__btn:hover,
a.ep-end-screen__btn:focus,
a.ep-end-screen__btn:visited {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: background 0.15s ease;
}

.ep-end-screen__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Primary CTA — match the `a.ep-end-screen__btn` specificity from above so
 * the modifier actually wins on background / border-color when rendered as
 * an <a>. Without these `a.` selectors, theme-link rules + the base `a.`
 * selector list above out-specifies the modifier and the primary button
 * looks identical to the secondary Replay/Cancel buttons. */
.ep-end-screen__btn--primary,
a.ep-end-screen__btn--primary,
a.ep-end-screen__btn--primary:hover,
a.ep-end-screen__btn--primary:focus,
a.ep-end-screen__btn--primary:visited {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
    color: #fff;
    margin-bottom: 4px;
}

.ep-end-screen__btn--primary:hover,
a.ep-end-screen__btn--primary:hover {
    filter: brightness(1.15);
    background: var(--plyr-color-main, #5b4e96);
}

/* Advanced Privacy Mode click-to-load overlay */
.ep-embed-content-wraper.ep-privacy-pending iframe {
    visibility: hidden;
}

.ep-privacy-overlay {
    position: absolute;
    inset: 0;
    z-index: 11;
    background: #000 center/cover no-repeat;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

.ep-privacy-overlay--has-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.ep-privacy-overlay__play,
.ep-privacy-overlay__play:hover,
.ep-privacy-overlay__play:focus,
.ep-privacy-overlay__play:active {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.15s ease;
}

.ep-privacy-overlay__play:hover {
    transform: scale(1.06);
    background: transparent;
}

.ep-privacy-overlay__msg {
    position: relative;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.4;
    max-width: 480px;
    opacity: 0.95;
}

/* Timed CTA */
.ep-timed-cta-stack {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    max-width: calc(100% - 32px);
    pointer-events: none;
}

.ep-timed-cta {
    position: relative;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    border-radius: 6px;
    padding: 12px 40px 12px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    max-width: 100%;
    font-family: inherit;
    pointer-events: auto;
    animation: ep-timed-cta-in 0.25s ease-out;
}

@keyframes ep-timed-cta-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ep-timed-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.ep-timed-cta__headline {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.ep-timed-cta__btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    background: var(--plyr-color-main, #5b4e96);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.ep-timed-cta__btn:hover {
    color: #fff;
    filter: brightness(1.15);
}

.ep-timed-cta__close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.ep-timed-cta__close:hover {
    color: #fff;
}

/* Pro feature overlays (email capture, end screen, resume prompt, action lock,
   privacy mode, timed CTA, chapters) all use position:absolute;inset:0 and so
   need the wrapper to be a positioning context. Scope to wrappers that have
   the custom player attached so other embeds (PDF, audio, etc.) are unaffected. */
.ep-embed-content-wraper[data-playerid] {
    position: relative;
}

.ep-embed-content-wraper.ep-has-chapters {
    position: relative;
}

.ep-chapter-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 8;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    transition: opacity 0.2s ease;
}

.ep-chapter-label--hidden {
    opacity: 0;
    pointer-events: none;
}

.ep-chapter-label__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.ep-chapter-label__caret {
    font-size: 10px;
    opacity: 0.8;
}

.ep-chapter-list {
    position: absolute;
    top: 50px;
    left: 12px;
    z-index: 9;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    border-radius: 6px;
    width: 280px;
    max-width: calc(100% - 24px);
    max-height: 60%;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: none;
}

.ep-chapter-list--open {
    display: block;
}

.ep-chapter-list__item {
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ep-chapter-list__item:last-child {
    border-bottom: 0;
}

.ep-chapter-list__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ep-chapter-list__item--active {
    background: rgba(255, 255, 255, 0.12);
}

.ep-chapter-list__time {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 48px;
}

.ep-chapter-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

/* YouTube-style segmented progress bar (drawn by initplyr.js when chapters are configured). */
.plyr__progress.ep-chapters-split input[type="range"] {
    /* Make Plyr's native track invisible so our segments are the only visible bar.
       The input itself stays interactive (seek + thumb). */
    color: transparent;
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-webkit-slider-runnable-track {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-moz-range-track {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-moz-range-progress {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-ms-fill-lower {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-ms-fill-upper {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split .plyr__progress__buffer {
    display: none;
}

.ep-chapter-bar {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ep-chapter-seg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 5px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    overflow: hidden;
    transition: height 0.12s ease-out, background 0.12s ease-out;
}

.ep-chapter-seg__fill {
    height: 100%;
    width: 0%;
    /* Prefer --plyr-range-fill-background (we override it to white at the
       wrapper level so the fill stays visible on every preset/color combo).
       Fall through to --plyr-color-main and a sane default. Without this
       order, sites that set a playerColor get a fill that exactly matches
       the purple controls-bar background — fill becomes invisible. */
    background: var(--plyr-range-fill-background, var(--plyr-color-main, #5b4e96));
    border-radius: 2px;
}

/* Grow all segments slightly when the user is interacting with the bar
   (YouTube does this — bar feels chunkier on hover). */
.plyr__progress:hover .ep-chapter-seg,
.plyr__progress:focus-within .ep-chapter-seg {
    height: 8px;
}

/* The currently-hovered chapter brightens (no extra height — keeps the
   bar from looking taller than the volume slider). */
.ep-chapter-seg--hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Chapter title appended inside Plyr's own seek tooltip on mousemove.
   Override Plyr's max-width:120px / nowrap so the title isn't clipped. */
.ep-embed-content-wraper.ep-has-chapters .plyr__progress .plyr__tooltip {
    max-width: 240px;
    white-space: normal;
    text-align: center;
}

.ep-chapter-tooltip-title {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Email Capture */
.ep-lead-form {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #fff;
    font-family: inherit;
}

.ep-lead-form__inner {
    background: rgba(20, 20, 20, 0.97);
    border-radius: 8px;
    padding: 24px 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ep-lead-form__headline {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.ep-lead-form__field {
    margin-bottom: 12px;
    text-align: left;
}

.ep-lead-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.ep-lead-form .ep-lead-form__input,
.ep-lead-form input.ep-lead-form__input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.ep-lead-form .ep-lead-form__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

/* Gutenberg + Chrome autofill both repaint the input with their own light
   background (and dark text), which crushes the white placeholder we set
   above. Lock the colors so the placeholder stays visible in both. */
.ep-lead-form .ep-lead-form__input:-webkit-autofill,
.ep-lead-form .ep-lead-form__input:-webkit-autofill:hover,
.ep-lead-form .ep-lead-form__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}

.ep-lead-form__input:focus {
    outline: none;
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-lead-form__error {
    margin: 4px 0 12px;
    color: #ff6b6b;
    font-size: 13px;
}

.ep-lead-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ep-lead-form__btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}

.ep-lead-form__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ep-lead-form__btn--primary {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-lead-form__btn--primary:hover {
    filter: brightness(1.15);
}

.ep-lead-form__btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* Action Lock */
.ep-action-lock {
    position: absolute;
    inset: 0;
    z-index: 13;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: inherit;
    text-align: center;
}

.ep-action-lock__inner {
    max-width: 460px;
    width: 100%;
}

.ep-action-lock__headline {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.ep-action-lock__message {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.85;
}

.ep-action-lock__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ep-action-lock__btn {
    padding: 9px 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s ease, background 0.15s ease;
}

.ep-action-lock__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.ep-action-lock__btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.ep-action-lock__btn--primary {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-action-lock__btn--primary:hover {
    filter: brightness(1.15);
}

.ep-action-lock__btn--facebook {
    background: #1877f2;
    border-color: #1877f2;
}

.ep-action-lock__btn--twitter {
    background: #000;
    border-color: #000;
}

.ep-action-lock__btn--linkedin {
    background: #0a66c2;
    border-color: #0a66c2;
}

/* Country Restriction fallback */
.ep-country-restricted {
    background: #f5f5f7;
    border: 1px solid #e0e0e4;
    border-radius: 6px;
    padding: 32px 20px;
    text-align: center;
    color: #444;
    font-family: inherit;
}

.ep-country-restricted__inner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}