/* ============================================================
   HYT Player — Stylesheet  v1.0.0
   Addis Solutions LLC  |  https://addissolutions.com
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
.hyt-player-container {
    --hyt-bg:           #0c0c0e;
    --hyt-surface:      #181820;
    --hyt-surface-2:    #21212d;
    --hyt-border:       rgba(255,255,255,.08);
    --hyt-text:         #f0f0f5;
    --hyt-text-muted:   #8888a0;
    --hyt-accent:       #e8374b;
    --hyt-accent-dim:   rgba(232,55,75,.18);
    --hyt-btn-hover:    rgba(255,255,255,.1);
    --hyt-radius:       10px;
    --hyt-radius-sm:    6px;
    --hyt-shadow:       0 20px 60px rgba(0,0,0,.6);
    --hyt-font:         'Segoe UI', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --hyt-transition:   .2s ease;
    --hyt-ctrl-h:       48px;
    --hyt-playlist-w:   300px;
}

/* Light theme overrides */
.hyt-player-container.hyt-theme-light {
    --hyt-bg:        #f5f5f7;
    --hyt-surface:   #ffffff;
    --hyt-surface-2: #f0f0f4;
    --hyt-border:    rgba(0,0,0,.1);
    --hyt-text:      #111118;
    --hyt-text-muted:#6666aa;
    --hyt-btn-hover: rgba(0,0,0,.07);
    --hyt-shadow:    0 12px 40px rgba(0,0,0,.18);
}

/* ── Base container ─────────────────────────────────────────── */
.hyt-player-container {
    font-family:    var(--hyt-font);
    background:     var(--hyt-bg);
    border-radius:  var(--hyt-radius);
    overflow:       hidden;
    box-shadow:     var(--hyt-shadow);
    position:       relative;
    display:        flex;
    flex-direction: column;
    color:          var(--hyt-text);
    font-size:      14px;
    line-height:    1.4;
    -webkit-font-smoothing: antialiased;
    user-select:    none;
    transition:     box-shadow var(--hyt-transition), transform var(--hyt-transition);
}

/* ── Top bar ────────────────────────────────────────────────── */
.hyt-top-bar {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    background:      var(--hyt-surface);
    border-bottom:   1px solid var(--hyt-border);
    min-height:      42px;
}

.hyt-now-playing-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--hyt-accent);
    white-space:    nowrap;
    flex-shrink:    0;
}

.hyt-title-text {
    flex:           1;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    font-size:      13px;
    font-weight:    500;
    color:          var(--hyt-text);
}

.hyt-top-actions {
    display:     flex;
    gap:         4px;
    flex-shrink: 0;
}

/* ── Body layout ────────────────────────────────────────────── */
.hyt-body {
    display: flex;
    flex:    1;
    overflow: hidden;
}

/* ── Video column ───────────────────────────────────────────── */
.hyt-video-col {
    flex:     1;
    display:  flex;
    flex-direction: column;
    min-width: 0;
    background: #000;
}

/* ── Responsive iframe wrapper ─────────────────────────────── */
.hyt-video-wrap {
    position:   relative;
    width:      100%;
    /* padding-bottom set inline from PHP for chosen aspect ratio */
    background: #000;
    flex-shrink: 0;
}

.hyt-video-wrap iframe,
.hyt-iframe-target {
    position: absolute;
    top:    0;
    left:   0;
    width:  100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Click-guard: blocks title / info links ─────────────────── */
.hyt-click-guard {
    position:       absolute;
    left:           0;
    right:          0;
    z-index:        9;
    pointer-events: all;
}

/* Covers the YT title (top-left) and Watch-on-YouTube (top-right) */
.hyt-guard-top {
    top:    0;
    height: 52px;       /* enough to cover both hover-revealed elements */
    cursor: default;
}

/* Covers the bottom YouTube logo / More Videos section while leaving controls usable */
.hyt-guard-bottom {
    bottom: 0;
    height: 64px;
    left: 72px;
    right: 72px;
    cursor: default;
}

/* ── Loading overlay ────────────────────────────────────────── */
.hyt-loading-overlay {
    position:       absolute;
    inset:          0;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     rgba(0,0,0,.65);
    z-index:        20;
    transition:     opacity var(--hyt-transition);
    pointer-events: none;
}

.hyt-loading-overlay.hyt-hidden {
    opacity:        0;
    pointer-events: none;
}

/* ── Spinners ───────────────────────────────────────────────── */
.hyt-spinner {
    width:  36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: var(--hyt-accent);
    border-radius: 50%;
    animation: hyt-spin .75s linear infinite;
}

.hyt-spinner-sm {
    width:  20px;
    height: 20px;
}

@keyframes hyt-spin {
    to { transform: rotate(360deg); }
}

/* ── Controls bar ───────────────────────────────────────────── */
.hyt-controls {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    padding:         0 10px;
    height:          var(--hyt-ctrl-h);
    background:      var(--hyt-surface);
    border-top:      1px solid var(--hyt-border);
    flex-shrink:     0;
}

.hyt-controls-left,
.hyt-controls-right {
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* ── Generic button ─────────────────────────────────────────── */
.hyt-btn {
    background:    transparent;
    border:        none;
    color:         var(--hyt-text-muted);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         36px;
    height:        36px;
    border-radius: var(--hyt-radius-sm);
    padding:       0;
    flex-shrink:   0;
    transition:    background var(--hyt-transition), color var(--hyt-transition);
}

.hyt-btn svg {
    width:  20px;
    height: 20px;
    display: block;
}

.hyt-btn:hover {
    background: var(--hyt-btn-hover);
    color:      var(--hyt-text);
}

.hyt-btn.hyt-active {
    color: var(--hyt-accent);
}

.hyt-btn-play { width: 40px; height: 40px; }
.hyt-btn-play svg { width: 24px; height: 24px; }

/* ── Volume slider ──────────────────────────────────────────── */
.hyt-volume-wrap {
    display:     flex;
    align-items: center;
    width:       80px;
}

.hyt-volume-slider {
    -webkit-appearance: none;
    appearance:    none;
    width:         100%;
    height:        3px;
    background:    linear-gradient(
        to right,
        var(--hyt-accent) 0%,
        var(--hyt-accent) var(--hyt-vol-pct, 100%),
        rgba(255,255,255,.2) var(--hyt-vol-pct, 100%),
        rgba(255,255,255,.2) 100%
    );
    border-radius: 4px;
    outline:       none;
    cursor:        pointer;
}

.hyt-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    background:    var(--hyt-text);
    cursor:        pointer;
    transition:    transform .15s;
}

.hyt-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.hyt-volume-slider::-moz-range-thumb {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    background:    var(--hyt-text);
    border:        none;
    cursor:        pointer;
}

/* ── Speed menu ─────────────────────────────────────────────── */
.hyt-speed-wrap {
    position: relative;
}

.hyt-btn-speed {
    width:         auto;
    padding:       0 10px;
    font-size:     12px;
    font-weight:   700;
    color:         var(--hyt-text);
    gap:           4px;
    letter-spacing: .03em;
}

.hyt-speed-menu {
    position:    absolute;
    bottom:      calc(100% + 8px);
    right:       0;
    background:  var(--hyt-surface-2);
    border:      1px solid var(--hyt-border);
    border-radius: var(--hyt-radius-sm);
    padding:     6px;
    display:     none;
    flex-direction: column;
    gap:         2px;
    z-index:     100;
    min-width:   80px;
    box-shadow:  0 8px 24px rgba(0,0,0,.4);
}

.hyt-speed-wrap:hover .hyt-speed-menu,
.hyt-speed-menu:hover {
    display: flex;
}

.hyt-speed-opt {
    background:     transparent;
    border:         none;
    color:          var(--hyt-text-muted);
    cursor:         pointer;
    padding:        6px 10px;
    border-radius:  4px;
    text-align:     left;
    font-size:      13px;
    font-family:    var(--hyt-font);
    transition:     background var(--hyt-transition), color var(--hyt-transition);
    white-space:    nowrap;
}

.hyt-speed-opt:hover {
    background: var(--hyt-btn-hover);
    color:      var(--hyt-text);
}

.hyt-speed-opt.hyt-active {
    color:       var(--hyt-accent);
    font-weight: 700;
}

/* ── Playlist column ────────────────────────────────────────── */
.hyt-playlist-col {
    width:           var(--hyt-playlist-w);
    flex-shrink:     0;
    display:         flex;
    flex-direction:  column;
    background:      var(--hyt-surface);
    border-left:     1px solid var(--hyt-border);
    overflow:        hidden;
}

.hyt-playlist-header {
    padding:         10px 14px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    border-bottom:   1px solid var(--hyt-border);
    flex-shrink:     0;
}

.hyt-playlist-label {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--hyt-text-muted);
}

.hyt-playlist-count {
    font-size:  12px;
    color:      var(--hyt-text-muted);
}

.hyt-playlist-scroll {
    overflow-y:   auto;
    overflow-x:   hidden;
    flex:         1;
}

/* Custom scrollbar */
.hyt-playlist-scroll::-webkit-scrollbar { width: 4px; }
.hyt-playlist-scroll::-webkit-scrollbar-track { background: transparent; }
.hyt-playlist-scroll::-webkit-scrollbar-thumb {
    background:    rgba(255,255,255,.15);
    border-radius: 4px;
}

.hyt-playlist-items {
    display:        flex;
    flex-direction: column;
    padding:        8px 0;
}

.hyt-playlist-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    padding:         24px;
    color:           var(--hyt-text-muted);
    font-size:       13px;
}

/* ── Playlist item ──────────────────────────────────────────── */
.hyt-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       8px 12px;
    cursor:        pointer;
    transition:    background var(--hyt-transition);
    position:      relative;
    border-left:   3px solid transparent;
}

.hyt-item:hover {
    background: var(--hyt-surface-2);
}

.hyt-item.hyt-item-active {
    background:   var(--hyt-accent-dim);
    border-left:  3px solid var(--hyt-accent);
}

.hyt-item-num {
    font-size:   11px;
    color:       var(--hyt-text-muted);
    min-width:   18px;
    text-align:  right;
    padding-top: 2px;
    flex-shrink: 0;
}

.hyt-item-active .hyt-item-num {
    color: var(--hyt-accent);
}

.hyt-item-thumb {
    width:          72px;
    height:         40px;
    object-fit:     cover;
    border-radius:  4px;
    flex-shrink:    0;
    background:     var(--hyt-surface-2);
}

.hyt-item-info {
    flex:       1;
    min-width:  0;
    padding-top: 1px;
}

.hyt-item-title {
    font-size:     12px;
    font-weight:   500;
    color:         var(--hyt-text);
    line-height:   1.4;
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.hyt-item-active .hyt-item-title {
    color: var(--hyt-text);
}

/* Playing indicator */
.hyt-item-active::after {
    content:      '▶';
    position:     absolute;
    right:        10px;
    bottom:       8px;
    font-size:    9px;
    color:        var(--hyt-accent);
    opacity:      .7;
}

/* ── Mini-player bar (inside element) ──────────────────────── */
.hyt-mini-bar {
    display:         none;
    align-items:     center;
    gap:             10px;
    padding:         6px 10px;
    background:      var(--hyt-surface);
    border-top:      1px solid var(--hyt-border);
}

.hyt-mini-title {
    flex:           1;
    font-size:      12px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    color:          var(--hyt-text);
}

/* ── Mini-player MODE (fixed bottom-right) ──────────────────── */
.hyt-player-container.hyt-is-mini {
    position:     fixed !important;
    bottom:       24px;
    right:        24px;
    width:        320px !important;
    max-width:    320px !important;
    z-index:      99999;
    border-radius: var(--hyt-radius);
    box-shadow:   0 24px 80px rgba(0,0,0,.8);
    animation:    hyt-slide-in .25s ease;
}

.hyt-player-container.hyt-is-mini .hyt-mini-bar {
    display: flex;
}

.hyt-player-container.hyt-is-mini .hyt-top-bar {
    display: none;
}

.hyt-player-container.hyt-is-mini .hyt-playlist-col {
    display: none;
}

.hyt-player-container.hyt-is-mini .hyt-controls {
    padding: 0 6px;
    height:  40px;
}

.hyt-player-container.hyt-is-mini .hyt-volume-wrap {
    display: none;
}

@keyframes hyt-slide-in {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ── Playlist toggle (when sidebar is hidden) ────────────────── */
.hyt-body:not(.hyt-has-playlist) .hyt-btn-playlist-toggle {
    opacity: .4;
    pointer-events: none;
}

/* ── Keyboard shortcut hint ──────────────────────────────────── */
.hyt-shortcut-hint {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%) scale(.8);
    background:  rgba(0,0,0,.75);
    color:       #fff;
    font-size:   13px;
    padding:     8px 14px;
    border-radius: 6px;
    pointer-events: none;
    opacity:     0;
    transition:  opacity .15s, transform .15s;
    white-space: nowrap;
    z-index:     30;
}

.hyt-shortcut-hint.hyt-hint-show {
    opacity:   1;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 700px) {
    .hyt-player-container {
        --hyt-playlist-w: 100%;
    }

    .hyt-body.hyt-has-playlist {
        flex-direction: column;
    }

    .hyt-playlist-col {
        width:      100%;
        max-height: 240px;
        border-left:  none;
        border-top:   1px solid var(--hyt-border);
    }

    .hyt-volume-wrap {
        display: none;
    }

    .hyt-player-container.hyt-is-mini {
        bottom: 0;
        right:  0;
        left:   0;
        width:  100% !important;
        max-width: 100% !important;
        border-radius: var(--hyt-radius) var(--hyt-radius) 0 0;
    }
}

@media (max-width: 400px) {
    .hyt-btn-prev, .hyt-btn-next { display: none; }
    .hyt-btn-loop                { display: none; }
}


/* Playlist scrollbar update */
.hyt-playlist,
.hyt-player-playlist,
.youtube-playlist,
.yt-playlist,
.playlist-container {
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
}

.hyt-playlist::-webkit-scrollbar,
.hyt-player-playlist::-webkit-scrollbar,
.youtube-playlist::-webkit-scrollbar,
.yt-playlist::-webkit-scrollbar,
.playlist-container::-webkit-scrollbar {
    width: 8px;
}