/* =============================================================================
   mediapage.css - MediaPage.aspx - extends dafyomiPage.css with styles specific to the media player page and its various modes (video/audio, page/full-page)
   Sections:
     1.  Base layout & player components
     2.  Text view
     3.  Page-mode overrides - shared (videoPage / fullVideoPage / fullAudioPage)
     4.  Page-mode overrides - videoPage
     5.  Page-mode overrides - fullVideoPage
     6.  Page-mode overrides - audioPage / fullAudioPage
     7.  Player overlay (draggable/resizable panel, fullVideoPage / fullAudioPage)
   =============================================================================


/* =============================================================================
   1. Base layout & player components
   ============================================================================= */

.divMediaDetailContent .mediaPlayerButtons {
    padding: 10px 0 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ancPlayer {
    display: inline-block;
    width: 300px;
    height: 240px;
    text-align: center;
}

.playerControls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.skipGroup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.skipSeconds {
    width: 40px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px;
    font-size: 13px;
}

.cc-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.cc-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    flex-shrink: 0;
    opacity: 0.45;
    transition: opacity 0.2s;
}

.cc-switch:has(#chkCcOn:checked) .cc-icon {
    opacity: 1;
}

.cc-toggle-wrap {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

    .cc-toggle-wrap input { display: none; }

    .cc-toggle-slider {
        position: absolute;
        inset: 0;
        background: #aaa;
        border-radius: 22px;
        transition: background 0.2s;
    }

        .cc-toggle-slider::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.2s;
        }

    .cc-toggle-wrap input:checked + .cc-toggle-slider { background: var(--btn-color, #771E23); }

    .cc-toggle-wrap input:checked + .cc-toggle-slider::before { transform: translateX(18px); }

.tip-wrap {
    position: relative;
    display: inline-block;
}

    .tip-wrap::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 11px);
        left: 50%;
        transform: translateX(-50%) translateY(7px);
        opacity: 0;
        pointer-events: none;
        z-index: 100;
        background: var(--tip-bg);
        color: var(--tip-color);
        font-size: var(--tip-font-size);
        font-weight: var(--tip-font-weight);
        font-family: Arial, sans-serif;
        padding: var(--tip-pad);
        border-radius: var(--tip-radius);
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        letter-spacing: 0.02em;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .tip-wrap::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 1px);
        left: 50%;
        transform: translateX(-50%) translateY(7px);
        opacity: 0;
        pointer-events: none;
        z-index: 101;
        border: 6px solid transparent;
        border-top-color: var(--tip-bg);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .tip-wrap:hover::after,
    .tip-wrap:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* =============================================================================
   2. Text view
   ============================================================================= */

.textView h2 {
    margin-right: 30px;
    position: absolute;
    top: 10px;
}

.divIframe {
    margin-right: 10px;
}

.divIframe iframe {
    border: 1px solid #b6a258;
}

.divPageMedia .divIframe {
    float: right;
}

#divOuterTextContainer {
    display: none;
}

#searchOnThisPage input {
    margin-right: 20px;
}

/* =============================================================================
   3. Page-mode overrides - shared (videoPage / fullVideoPage / fullAudioPage)
   ============================================================================= */

/* Hide right panel/menu in all media modes */
.videoPage .clsRightPanel,
.fullVideoPage .clsRightPanel,
.fullAudioPage .clsRightPanel {
    display: none;
}

.fullVideoPage .clsPageAlign,
.fullAudioPage .clsPageAlign {
    width: 100%;
}

/* =============================================================================
   4. Page-mode overrides - videoPage
   ============================================================================= */

.videoPage .divOuterMedia {
    position: absolute;
    width: 300px;
    margin-top: 110px;
}

.videoPage .divPage {
    margin-right: 320px;
}

.videoPage .mediaPlayer {
    padding: 0;
}

.videoPage .mediaPlayer video {
    border: solid 2px #781f23;
    box-sizing: border-box;
}

/* =============================================================================
   5. Page-mode overrides - fullVideoPage
   ============================================================================= */

.fullVideoPage .divOuterMedia,
.fullAudioPage .divOuterMedia {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 500px;
    background-color: white;
    z-index: 20;
    border: 1px solid #b6a258;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
}

    .fullVideoPage .divOuterMedia .mediaPlayer,
    .fullAudioPage .divOuterMedia .mediaPlayer {
        padding: 10px;
    }

.fullVideoPage .divIframe,
.fullAudioPage .divIframe {
    position: relative;
}

/* =============================================================================
   6. Page-mode overrides - audioPage / fullAudioPage
   ============================================================================= */

/* Merged from two previously separate rules (was split with fullVideoPage) */
.fullAudioPage .divPage,
.fullAudioPage .clsContent {
    width: 100%;
    margin-top: 10px;
}


.audioPage .divIframe iframe {
    height: 1200px;
}

.audioPage .playerTitleBar .toolBar,
.fullAudioPage .playerTitleBar .toolBar {
    margin-left: 15px;
}

.audioPage .mediaPlayer,
.fullAudioPage .mediaPlayer {
    margin-top: 15px;
}

    .audioPage .mediaPlayer audio,
    .fullAudioPage .mediaPlayer audio {
        width: 100%;
        height: revert;
    }

/* Controls footer: skip/speed/CC toolbar left, prev/next lesson right */
.playerFooter {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 15px 15px;
    container-type: inline-size;
}

    .playerFooter .playerControls,
    .playerFooter .mediaPlayerButtons {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }

/* When the panel is too narrow — stack both rows centered */
@container (max-width: 499px) {
    .playerFooter {
        justify-content: center;
    }

    .playerFooter .playerControls,
    .playerFooter .mediaPlayerButtons {
        flex-basis: 100%;
        justify-content: center;
    }
}



/* =============================================================================
   7. Player overlay - draggable/resizable panel (fullVideoPage / fullAudioPage)
   ============================================================================= */
/* Title bar — always-visible flex row; title text right, action icons left */
.playerTitleBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .playerTitleBar .toolBar {
        margin-left: 0;
    }

    .videoPage .playerTitleBar {
        user-select: none;
        margin-bottom: 10px;
    }

    .fullVideoPage .playerTitleBar,
    .fullAudioPage .playerTitleBar {
        background: #fff;
        height: 40px;
        box-sizing: border-box;
        padding: 0 8px;
        cursor: move;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-bottom: 1px solid #ddd;
    }

    .playerTitleBar .playerTitle {
        color: #761c21;
        font-weight: bold;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
    }

    /* jQuery UI resize handles — transparent hit areas on left/right edges */
    .fullVideoPage .divOuterMedia.ui-resizable .ui-resizable-e,
    .fullVideoPage .divOuterMedia.ui-resizable .ui-resizable-w,
    .fullAudioPage .divOuterMedia.ui-resizable .ui-resizable-e,
    .fullAudioPage .divOuterMedia.ui-resizable .ui-resizable-w {
        width: 12px;
        top: 0;
        height: 100%;
        background-color: transparent;
        cursor: ew-resize;
        z-index: 21;
    }

    .fullVideoPage .divOuterMedia.ui-resizable .ui-resizable-e,
    .fullAudioPage .divOuterMedia.ui-resizable .ui-resizable-e {
        right: 0;
    }

    .fullVideoPage .divOuterMedia.ui-resizable .ui-resizable-w,
    .fullAudioPage .divOuterMedia.ui-resizable .ui-resizable-w {
        left: 0;
    }
    /* Corner grip indicator — maroon triangle, bottom-right corner */
    .fullVideoPage .divOuterMedia::after,
    .fullAudioPage .divOuterMedia::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background: linear-gradient(135deg, transparent 50%, rgba(111, 33, 38, 0.55) 50%);
        pointer-events: none;
        z-index: 22;
    }