/* =====================================================
   IntraSkyTV — MediaElementPlayer Custom Skin
   YouTube-inspired, platform-independent design
   Accent: #0095ff (IntraSkyTV Blue)
   ===================================================== */

/* --- Fullscreen fix --- */
.mejs__fullscreen #mep_0 { max-height: 100%; }

/* --- Control bar: dark gradient, YouTube-style --- */
.mejs__controls:not([style*="display: none"]) {
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    transition: opacity 0.3s ease;
}

/* --- Progress rail --- */
.mejs__time-rail { width: 100%; }
.mejs__time-total {
    background: rgba(255,255,255,0.22);
    border-radius: 2px;
    margin: 8px 0 0;
    height: 3px;
    transition: height 0.15s ease;
}
.mejs__time-total:hover {
    height: 5px;
    margin-top: 6px;
}

/* --- Progress fill, buffer, hover --- */
.mejs__time-buffering,
.mejs__time-current,
.mejs__time-hovered,
.mejs__time-loaded,
.mejs__time-marker,
.mejs__time-total {
    border-radius: 2px;
    height: 3px;
}
.mejs__time-current  { background-color: #0095ff; }
.mejs__time-loaded   { background-color: rgba(255,255,255,0.38); }
.mejs__time-hovered  { background-color: rgba(255,255,255,0.18); }

/* --- Progress handle/thumb --- */
.mejs__time-handle,
.mejs__time-handle-content {
    border: 0 solid transparent;
}
.mejs__time-handle-content {
    border: 7px solid #0095ff;
    background: #0095ff;
    top: -5px;
    transform: scale(0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0,149,255,0.4);
}
.mejs__time-total:hover .mejs__time-handle-content {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(0,149,255,0.25);
}
.mejs__time-handle-content:focus,
.mejs__time-handle-content:active {
    box-shadow: 0 0 0 6px rgba(0,149,255,0.35);
}

/* --- Time tooltip --- */
.mejs__time-float {
    background: rgba(20,20,20,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: #fff;
    height: 24px;
    width: 48px;
}
.mejs__time-float-current {
    margin: 5px 0;
    width: 100%;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    text-align: center;
}
.mejs__time-float-corner {
    border: 5px solid rgba(20,20,20,0.95);
    border-color: rgba(20,20,20,0.95) transparent transparent;
}

/* --- Buttons: general --- */
.mejs__button > button {
    opacity: 0.85;
    transition: opacity 0.2s ease, filter 0.2s ease;
    filter: brightness(1.2);
}
.mejs__button > button:hover {
    opacity: 1;
    filter: brightness(1.6);
}

/* --- Play/Pause button (control bar) --- */
.mejs__play > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}
.mejs__pause > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M14,19H18V5H14M6,19H10V5H6V19Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}

/* --- Skip back / Jump forward --- */
.mejs__skipback > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M6,6H8V18H6M9.5,12L18,6V18L9.5,12Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}
.mejs__jumpforward > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M18,6H16V18H18M15.5,12L7,18V6L15.5,12Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}

/* --- Volume buttons --- */
.mejs__mute > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}
.mejs__unmute > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}

/* --- Fullscreen buttons --- */
.mejs__fullscreen-button > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}
.mejs__unfullscreen > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}

/* --- Captions button --- */
.mejs__captions-button > button,
.mejs__subtitles-button > button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center !important;
}

/* --- Volume slider --- */
.mejs__volume-button > .mejs__volume-slider {
    background: rgba(20,20,20,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    width: 32px;
}
.mejs__volume-total {
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    width: 3px;
}
.mejs__volume-current {
    background: #0095ff;
    border-radius: 2px;
    width: 3px;
}
.mejs__volume-handle {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0,149,255,0.5);
    left: -5px;
}

/* --- Speed & quality selector --- */
.mejs-speed-selector,
.mejs__speed-selector,
.mejs__qualities-selector {
    background: rgba(20,20,20,0.96) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
    padding: 4px 0 !important;
}
.mejs-speed-selector-list-item,
.mejs__speed-selector-list-item,
.mejs__qualities-selector-list-item {
    margin: 2px 0 !important;
    padding: 8px 20px !important;
    color: rgba(255,255,255,0.88) !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    transition: background 0.15s ease !important;
    border-radius: 3px !important;
}
.mejs-speed-selector-list-item:hover,
.mejs__speed-selector-list-item:hover,
.mejs__qualities-selector-list-item:hover {
    background: rgba(0,149,255,0.2) !important;
    color: #fff !important;
}
.mejs-qualities-selected,
.mejs__qualities-selected,
.mejs__speed-selector-list-item--selected {
    color: #0095ff !important;
    font-weight: 600 !important;
}

/* --- Big overlay play button --- */
.mejs__overlay-play .mejs__overlay-button {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M8,5.14V19.14L19,12.14L8,5.14Z'/%3e%3c/svg%3e");
    background-color: rgba(0,149,255,0.85);
    border-radius: 50%;
    box-shadow: 0 4px 24px rgba(0,149,255,0.45);
    height: 64px;
    width: 64px;
    background-repeat: no-repeat;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    background-position: center !important;
}
.mejs__overlay-play:hover .mejs__overlay-button {
    background-color: #0095ff;
    box-shadow: 0 6px 32px rgba(0,149,255,0.65);
    transform: scale(1.08);
}

/* --- Loading spinner --- */
.mejs__overlay-loading { height: 60px; width: 60px; }
.mejs__overlay-loading-bg-img {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3e%3cpath fill='%230095ff' d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.35);
    background-position: center !important;
    border-radius: 50%;
    height: 60px; width: 60px;
    min-height: 60px; min-width: 60px;
    max-height: 60px; max-width: 60px;
}

/* --- Captions / track text --- */
.mejs__captions-layer .mejs__captions-text,
.mejs__captions-layer .mejs__captions-text * {
    background-color: rgba(0,0,0,0.8) !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
}