/* YouTube Playlist Combiner */
.ypc-player-wrap {
    --ypc-accent:  #c0392b;
    --ypc-text:    #ffffff;
    --ypc-thumb-gap: 10px;
    --ypc-radius:  4px;           /* overridden inline from settings */
    background:    transparent;
    color:         var(--ypc-text);
    font-family:   inherit;
    padding:       0;
    box-sizing:    border-box;
}

/* ── DSGVO Consent Gate ──────────────────────────────────── */
.ypc-consent-gate {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      280px;
    padding:         32px 24px;
    background:      rgba(0, 0, 0, 0.35);
    border-radius:   var(--ypc-radius);
    text-align:      center;
}

.ypc-consent-gate[hidden] { display: none; }

.ypc-consent-gate__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
    max-width:      520px;
}

.ypc-consent-gate__icon {
    width:      56px;
    height:     56px;
    flex-shrink: 0;
}

.ypc-consent-text {
    margin:      0;
    font-size:   0.95rem;
    line-height: 1.6;
    color:       #ccc;
}

.ypc-consent-btn {
    background:    var(--ypc-accent);
    color:         #fff;
    border:        none;
    padding:       11px 32px;
    font-size:     0.95rem;
    font-weight:   600;
    cursor:        pointer;
    border-radius: var(--ypc-radius);
    transition:    background 0.2s;
    white-space:   nowrap;
}

.ypc-consent-btn:hover { background: #a93226; }

/* ── Player Content ──────────────────────────────────────── */
.ypc-player-content[hidden] { display: none; }

/* ── Main Player ─────────────────────────────────────────── */
.ypc-main-player {
    position:      relative;
    width:         100%;
    background:    #000;
    border-radius: var(--ypc-radius);
    overflow:      hidden;
    margin-bottom: 12px;
}

.ypc-iframe-wrap {
    position:    relative;
    width:       100%;
    padding-top: 56.25%; /* 16:9 */
}

.ypc-iframe-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* ── Thumbnail Row ───────────────────────────────────────── */
.ypc-thumbnails-outer {
    display:     flex;
    align-items: stretch;
    gap:         0;
}

.ypc-thumbnails-viewport {
    flex:     1;
    overflow: hidden;
    /* right peek: fade-out mask so the cut-off thumb looks intentional */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}

/* When arrows are hidden (cfg.arrows=false) remove the mask */
.ypc-thumbnails-outer--no-arrows .ypc-thumbnails-viewport {
    -webkit-mask-image: none;
            mask-image: none;
}

.ypc-thumbnails-track {
    display:    flex;
    gap:        var(--ypc-thumb-gap);
    transition: transform 0.35s ease;
    will-change: transform;
}

.ypc-thumb {
    flex:          0 0 auto;
    cursor:        pointer;
    position:      relative;
    border-radius: var(--ypc-radius);
    overflow:      hidden;
    /* no border — active state via brightness */
    transition:    opacity 0.2s, filter 0.2s;
    background:    #111;
}

.ypc-thumb:hover {
    opacity: 0.8;
}

.ypc-thumb.is-active {
    filter: brightness(1.15);
    outline: 2px solid var(--ypc-accent);
    outline-offset: -2px;
}

.ypc-thumb img {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 16/9;
    object-fit:   cover;
}

.ypc-thumb-title {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    4px 6px;
    font-size:  0.7rem;
    line-height: 1.3;
    background: linear-gradient(transparent, rgba(0,0,0,0.82));
    color:      #fff;
    display:    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:   hidden;
}

/* ── Navigation Arrows – vertical bars left/right of thumbnails */
.ypc-arrow {
    flex-shrink:                0;
    width:                      28px;
    background:                 rgba(0, 0, 0, 0.45) !important;
    border:                     none !important;
    outline:                    none;
    -webkit-appearance:         none;
            appearance:         none;
    -webkit-tap-highlight-color: transparent;
    color:                      #fff !important;
    font-size:                  1.4rem;
    line-height:                1;
    cursor:                     pointer;
    transition:                 background 0.2s, opacity 0.2s;
    display:                    flex;
    align-items:                center;
    justify-content:            center;
    padding:                    0;
    box-shadow:                 none !important;
}

/* Keyboard focus: subtle ring that doesn't look like a browser default */
.ypc-arrow:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: -2px;
}

.ypc-arrow--prev { border-radius: var(--ypc-radius) 0 0 var(--ypc-radius); }
.ypc-arrow--next { border-radius: 0 var(--ypc-radius) var(--ypc-radius) 0; }

.ypc-arrow:hover,
.ypc-arrow:hover:focus,
.ypc-arrow:hover:active  { background: rgba(0, 0, 0, 0.75) !important; color: #fff !important; }

.ypc-arrow:focus,
.ypc-arrow:active        { background: rgba(0, 0, 0, 0.45) !important; color: #fff !important; }

.ypc-arrow[hidden]   { display: none; }
.ypc-arrow:disabled  { opacity: 0.2; cursor: default; }

/* ── Status / Error ─────────────────────────────────────── */
.ypc-status {
    font-size:  0.85rem;
    color:      #aaa;
    text-align: center;
    display:    none;
}
.ypc-status:not(:empty) {
    display:    block;
    margin-top: 8px;
}

.ypc-status.is-error { color: #e74c3c; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .ypc-thumb-title { display: none; }
}