/* ============================================================
   MedComFlix Player theme
   Floating "glass dock" controls, brand red accents, cinematic
   gradients. Scoped to body.mcf-player so JW is unaffected.
   ============================================================ */
html, body.mcf-player { margin: 0; height: 100%; background: #000; overflow: hidden; }

body.mcf-player #jwplayer {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important; background: #000;
}
body.mcf-player #mcf-video {
    width: 100%; height: 100%; display: block; object-fit: fill; background: #000;
}

/* Brand watermark */
body.mcf-player #mcf-watermark {
    position: absolute; top: 18px; right: 22px; z-index: 5; height: 28px; opacity: .85;
    pointer-events: none; transition: opacity .3s ease;
}

/* Subtitles: large, readable, soft shadow instead of a black box */
body.mcf-player #mcf-video::cue {
    background: transparent; color: #fff; font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1.35em; text-shadow: 0 0 4px #000, 0 2px 6px rgba(0,0,0,.9);
}

/* --- Subtitles: drawn in our own layer so they sit ABOVE the control bar
       (the controls overlay covers the bottom of the video, where the
       browser would otherwise draw them). Moves up/down with the controls. --- */
#mcf-subs {
    position: absolute; left: 6%; right: 6%; bottom: 7%;
    z-index: 45; /* above the video, below the controls' menus (z 50) */
    display: none; text-align: center; pointer-events: none;
    transition: bottom .25s ease;
}
#mcf-subs .mcf-cue {
    display: inline;
    color: #fff;
    background: rgba(0,0,0,.55);
    font: 600 clamp(16px, 2.3vw, 34px)/1.4 "Helvetica Neue", Arial, sans-serif;
    padding: .06em .4em;
    border-radius: 4px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
body.mcf-ad-playing #mcf-subs { visibility: hidden; }

/* --- Cinematic gradients top & bottom --- */
body.mcf-player #swb-topbar {
    background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0)) !important;
    padding: 20px 26px 50px !important;
}
body.mcf-player #swb-title {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important; font-size: 18px !important; letter-spacing: .01em;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* --- Floating glass dock --- */
body.mcf-player #swb-controls {
    left: 20px !important; right: 20px !important; bottom: 18px !important;
    background: rgba(18,18,20,.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    padding: 10px 14px 8px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.45) !important;
}

/* --- Seek bar --- */
body.mcf-player #swb-progress-track {
    height: 4px !important; border-radius: 4px !important; background: rgba(255,255,255,.18) !important;
    transition: height .15s ease !important;
}
body.mcf-player #swb-progress-row:hover #swb-progress-track { height: 7px !important; }
body.mcf-player #swb-progress-buffered { background: rgba(255,255,255,.32) !important; border-radius: 4px !important; }
body.mcf-player #swb-progress-played {
    background: linear-gradient(90deg, #b20710, #e50914 60%, #ff3d47) !important; border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(229,9,20,.55);
}
body.mcf-player #swb-progress-handle {
    background: #fff !important; box-shadow: 0 0 0 4px rgba(229,9,20,.45) !important;
}
body.mcf-player #swb-time {
    font-variant-numeric: tabular-nums; font-weight: 600 !important; opacity: .9;
}

/* --- Buttons --- */
body.mcf-player .swb-btn {
    border-radius: 10px !important; transition: background .15s ease, transform .15s ease !important;
}
body.mcf-player .swb-btn:hover { background: rgba(255,255,255,.12) !important; transform: translateY(-1px); }
body.mcf-player .swb-btn-lg:hover { background: rgba(229,9,20,.22) !important; }
body.mcf-player .swb-btn svg { fill: #f5f5f5; }
body.mcf-player .swb-btn:hover svg { fill: #fff; }

/* Volume */
body.mcf-player #swb-volume-track { background: rgba(255,255,255,.22) !important; border-radius: 4px !important; }
body.mcf-player .swb-vol-active, body.mcf-player #swb-volume-slider { background: #e50914 !important; }

/* --- Menus --- */
body.mcf-player .swb-menu {
    background: rgba(20,20,22,.92) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.55) !important; overflow: hidden;
}
body.mcf-player .swb-menu-item { border-radius: 8px !important; margin: 2px 6px !important; }
body.mcf-player .swb-menu-item:hover { background: rgba(255,255,255,.08) !important; }
body.mcf-player .swb-menu-item.swb-active { background: rgba(229,9,20,.2) !important; color: #fff !important; }
body.mcf-player .swb-menu-item.swb-active::before { color: #e50914 !important; }

/* --- Skip Intro & Next Episode --- */
body.mcf-player #swb-skip-intro {
    border-radius: 999px !important; background: rgba(255,255,255,.94) !important; color: #111 !important;
    font-weight: 700 !important; padding: 12px 24px !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    bottom: 110px !important;
}
body.mcf-player #swb-skip-intro:hover { background: #fff !important; transform: scale(1.04); }
body.mcf-player #swb-next-card {
    border-radius: 14px !important; overflow: hidden; bottom: 110px !important;
    background: rgba(18,18,20,.8) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1) !important;
}
body.mcf-player .swb-next-label { color: #e50914 !important; font-weight: 700 !important; }

/* --- Episodes panel --- */
body.mcf-player #swb-episodes-panel {
    background: rgba(14,14,16,.95) !important;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
body.mcf-player .swb-ep-row { border-radius: 10px !important; }
body.mcf-player .swb-ep-current { box-shadow: inset 3px 0 0 #e50914 !important; background: rgba(229,9,20,.12) !important; }

/* --- Spinner: slim red ring --- */
body.mcf-player #swb-spinner {
    border: 3px solid rgba(255,255,255,.15) !important; border-top-color: #e50914 !important;
    width: 54px !important; height: 54px !important;
}

/* --- Mobile --- */
@media (max-width: 640px) {
    body.mcf-player #swb-controls { left: 8px !important; right: 8px !important; bottom: 8px !important; border-radius: 12px !important; padding: 8px 10px 6px !important; }
    body.mcf-player #mcf-watermark { height: 20px; top: 12px; right: 14px; }
    body.mcf-player #swb-skip-intro, body.mcf-player #swb-next-card { bottom: 86px !important; }
}

/* --- While an ad plays, the ad owns the screen: hide our controls --- */
body.mcf-ad-playing #swb-player-wrap,
body.mcf-ad-playing #swb-controls,
body.mcf-ad-playing #swb-topbar,
body.mcf-ad-playing #swb-skip-intro,
body.mcf-ad-playing #swb-next-card { visibility: hidden !important; }