/* ==========================================================================
   Video Gallery Pro — estilos do frontend
   Visual inspirado no YouTube. Cores controladas por variáveis --vgp-*
   definidas inline por galeria (ver VGP_Frontend::color_vars_css).
   ========================================================================== */

.vgp-gallery {
    --vgp-radius: 12px;
    color: var(--vgp-text, #0f0f0f);
    background: var(--vgp-bg, #fff);
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    margin: 0 auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    max-width: 98%;
}
.vgp-gallery *, .vgp-gallery *::before, .vgp-gallery *::after { box-sizing: border-box; }

.vgp-error {
    padding: 12px 16px;
    background: #fef3f2;
    border: 1px solid #fda29b;
    color: #b42318;
    border-radius: 8px;
}
.vgp-empty-front { color: var(--vgp-text-muted, #606060); padding: 24px; text-align: center; }

/* ----------------------------- Header ----------------------------------- */
.vgp-header {
    background: var(--vgp-header-bg, #fafafa);
    color: var(--vgp-header-text, #0f0f0f);
    border-radius: var(--vgp-radius);
    margin-bottom: 18px;
    overflow: hidden;
}
.vgp-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}
.vgp-header-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--vgp-accent, #f00);
    color: var(--vgp-accent-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}
.vgp-header-text { flex: 1; min-width: 0; }
.vgp-channel-name { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: inherit; }
.vgp-channel-counters { font-size: 13px; opacity: .8; }
.vgp-channel-desc { margin: 8px 0 0; font-size: 14px; opacity: .9; }
.vgp-subscribe {
    background: var(--vgp-accent, #f00);
    color: var(--vgp-accent-text, #fff);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity .15s;
}
.vgp-subscribe:hover { opacity: .85; }

/* Header "accent": fundo destacado e centralizado. */
.vgp-header-accent .vgp-header-inner { flex-direction: column; text-align: center; }
.vgp-header-accent .vgp-header-logo { width: 88px; height: 88px; }
/* Header "minimal": compacto, sem grande fundo. */
.vgp-header-minimal .vgp-header { background: transparent; }
.vgp-header-minimal .vgp-header-inner { padding: 8px 4px; }
.vgp-header-minimal .vgp-header-logo { width: 48px; height: 48px; font-size: 22px; }

/* ----------------------------- Toolbar ---------------------------------- */
.vgp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.vgp-tabs-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.vgp-tab-btn {
    border: none;
    background: color-mix(in srgb, var(--vgp-text, #0f0f0f) 8%, transparent);
    color: var(--vgp-text, #0f0f0f);
    padding: 8px 14px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.vgp-tab-btn:hover { background: color-mix(in srgb, var(--vgp-text, #0f0f0f) 16%, transparent); }
.vgp-tab-btn.active { background: var(--vgp-tab-active, #0f0f0f); color: var(--vgp-bg, #fff); }
.vgp-cat-select, .vgp-search-input {
    padding: 8px 12px;
    border: 1px solid var(--vgp-border, #e5e5e5);
    border-radius: 18px;
    background: var(--vgp-bg, #fff);
    color: var(--vgp-text, #0f0f0f);
    font-size: 14px;
}
.vgp-search-input { min-width: 220px; }

/* ------------------------------ Grade ----------------------------------- */
.vgp-grid {
    display: grid;
    grid-template-columns: repeat(var(--vgp-columns, 3), minmax(0, 1fr));
    gap: var(--vgp-gutter, 20px);
}
@media (max-width: 1024px) {
    .vgp-grid { grid-template-columns: repeat(var(--vgp-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .vgp-grid { grid-template-columns: repeat(var(--vgp-columns-mobile, 1), minmax(0, 1fr)); }
}

/* ------------------------------ Card ------------------------------------ */
.vgp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.vgp-card.vgp-hidden { display: none !important; }
.vgp-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--vgp-radius);
    overflow: hidden;
}
.vgp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.vgp-card:hover .vgp-card-img { transform: scale(1.04); }
.vgp-card-dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.vgp-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    width: 58px;
    height: 40px;
    background: var(--vgp-accent, #f00);
    border-radius: 10px;
    opacity: 0;
    transition: opacity .2s, transform .2s;
}
.vgp-card-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--vgp-accent-text, #fff);
}
.vgp-card:hover .vgp-card-play { opacity: .95; transform: translate(-50%, -50%) scale(1); }
.vgp-card-thumb.vgp-playing .vgp-card-play,
.vgp-card-thumb.vgp-playing .vgp-card-dur { display: none; }
.vgp-card-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vgp-card-info { padding: 10px 2px 0; }
.vgp-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vgp-text, #0f0f0f);
    text-decoration: none;
}
.vgp-card-title:hover { text-decoration: none; }
.vgp-card-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--vgp-text-muted, #606060); }
.vgp-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: 13px;
    color: var(--vgp-text-muted, #606060);
}

/* Layout horizontal: miniatura ao lado das informações. */
.vgp-vlayout-horizontal .vgp-card { flex-direction: row; gap: 14px; }
.vgp-vlayout-horizontal .vgp-card-thumb { width: 246px; flex-shrink: 0; }
.vgp-vlayout-horizontal .vgp-card-info { padding-top: 2px; }
@media (max-width: 600px) {
    .vgp-vlayout-horizontal .vgp-card { flex-direction: column; }
    .vgp-vlayout-horizontal .vgp-card-thumb { width: 100%; }
}


/* Layout cinema: informações sobre a miniatura. */
.vgp-vlayout-cinema .vgp-card-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    opacity: 0;
    transition: opacity .2s;
}
.vgp-vlayout-cinema .vgp-card { position: relative; }
.vgp-vlayout-cinema .vgp-card-info,
.vgp-vlayout-cinema .vgp-card-title,
.vgp-vlayout-cinema .vgp-card-meta,
.vgp-vlayout-cinema .vgp-card-desc { color: #fff; }
.vgp-vlayout-cinema .vgp-card:hover .vgp-card-info { opacity: 1; }

/* --------------------------- Carregar mais ------------------------------ */
.vgp-loadmore-wrap { text-align: center; margin-top: 22px; }
.vgp-loadmore {
    background: transparent;
    border: 1px solid var(--vgp-border, #e5e5e5);
    color: var(--vgp-text, #0f0f0f);
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.vgp-loadmore:hover { background: color-mix(in srgb, var(--vgp-text, #0f0f0f) 8%, transparent); }

/* ----------------------- Template player + lista ------------------------ */
.vgp-playlist { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 860px) { .vgp-playlist { grid-template-columns: 1fr; } }
.vgp-playlist-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000 center/cover no-repeat;
    border-radius: var(--vgp-radius);
    overflow: hidden;
    cursor: pointer;
}
.vgp-playlist-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
padding: 1px;
    border-radius: 15px;
}
.vgp-playlist-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    background: var(--vgp-accent, #f00);
    border: none;
    border-radius: 12px;
    cursor: pointer;
}
.vgp-playlist-play::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--vgp-accent-text, #fff);
}
.vgp-playlist-title { margin: 12px 2px; font-size: 18px; font-weight: 600; 
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding: 10px;
    border-radius: 5px;
    border-left: 3px solid #823e9f;
    border-right: 3px solid #823e9f;
    background: linear-gradient(to left, #b300ff, #823e9f, #823e9f, #8e00cb);
    color: white;
}
.vgp-playlist-side { min-width: 0; }
.vgp-playlist-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vgp-playlist-items .vgp-card { flex-direction: row; gap: 10px; 
    padding: 1px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    border-radius: 10px;

}
.vgp-playlist-items .vgp-card-thumb { width: 168px; flex-shrink: 0; }
.vgp-playlist-items .vgp-card-title { font-size: 14px; }

/* ------------------------------ Modal ----------------------------------- */
.vgp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vgp-modal.vgp-open { display: flex; }
.vgp-modal-overlay { position: absolute; inset: 0; background: var(--vgp-popup-overlay, rgba(0, 0, 0, .85)); }
.vgp-modal-box {
    position: relative;
    width: min(960px, 96vw);
    background: var(--vgp-popup-bg, #fff);
    border-radius: var(--vgp-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.vgp-modal-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vgp-modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgp-modal-meta { padding: 16px 20px; color: var(--vgp-text, #0f0f0f); }
.vgp-modal-meta:empty { display: none; }
.vgp-modal-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.vgp-modal-submeta { font-size: 13px; color: var(--vgp-text-muted, #606060); }
.vgp-modal-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.vgp-modal-close, .vgp-modal-fs {
    position: absolute;
    top: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.vgp-modal-close { right: 10px; }
.vgp-modal-fs { right: 56px; font-size: 16px; }
.vgp-modal-fs::before { content: "⛶"; }
.vgp-modal-close:hover, .vgp-modal-fs:hover { background: rgba(0, 0, 0, .8); }

body.vgp-modal-lock { overflow: hidden; }

/* --------------------------- Favoritos ---------------------------------- */
.vgp-fav-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, transform .15s, background .15s;
}
.vgp-card:hover .vgp-fav-btn,
.vgp-fav-btn.active,
.vgp-fav-btn:focus { opacity: 1; }
.vgp-fav-btn:hover { background: rgba(0, 0, 0, .78); transform: scale(1.08); }
.vgp-fav-btn svg { fill: none; stroke: #fff; stroke-width: 2; }
.vgp-fav-btn.active svg { fill: var(--vgp-accent, #f00); stroke: var(--vgp-accent, #f00); }

.vgp-tab-fav .vgp-fav-ic { color: var(--vgp-accent, #f00); }

/* ------------------- Botão "mais categorias" (mobile) ------------------- */
.vgp-cats-more {
    display: none;
    border: none;
    background: color-mix(in srgb, var(--vgp-text, #0f0f0f) 8%, transparent);
    color: var(--vgp-text, #0f0f0f);
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.vgp-cats-more:hover { background: color-mix(in srgb, var(--vgp-text, #0f0f0f) 16%, transparent); }

/* ----------------------- Bottom sheet de categorias --------------------- */
.vgp-cats-sheet { position: fixed; inset: 0; z-index: 100000; display: none; }
.vgp-cats-sheet.vgp-open { display: block; }
.vgp-cats-sheet-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); animation: vgp-fade .2s ease; }
.vgp-cats-sheet-box {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--vgp-bg, #fff);
    color: var(--vgp-text, #0f0f0f);
    border-radius: 18px 18px 0 0;
    padding-bottom: 16px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
    max-height: 75vh;
    overflow-y: auto;
    animation: vgp-slide-up .25s ease;
}
.vgp-cats-sheet-box::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--vgp-border, #ccc);
    margin: 10px auto 2px;
}
.vgp-cats-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 16px;
}
.vgp-cats-sheet-close { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--vgp-text-muted, #666); }
.vgp-cats-sheet-list { list-style: none; margin: 0; padding: 4px 12px 8px; }
.vgp-sheet-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--vgp-text, #0f0f0f);
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
}
.vgp-sheet-item:hover { background: color-mix(in srgb, var(--vgp-text, #0f0f0f) 8%, transparent); }
.vgp-sheet-item.active { background: var(--vgp-tab-active, #0f0f0f); color: var(--vgp-bg, #fff); }

@keyframes vgp-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vgp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------- Responsivo: abas compactas (mobile) ---------------- */
@media (max-width: 600px) {
    .vgp-tabs-nav { flex-wrap: nowrap; overflow: hidden; }
    .vgp-tabs-nav .vgp-tab-btn:nth-of-type(n+3) { display: none; }
    .vgp-cats-more { display: inline-flex; align-items: center; }
    .vgp-fav-btn { opacity: 1; } /* sem hover em telas touch */
}

/* ------ Leve destaque na janela principal do vídeo (esquemas escuros) --- */
.vgp-modal-box { border: 1px solid rgba(255, 255, 255, .08); }

.vgp-scheme-dark .vgp-modal-box,
.vgp-scheme-midnight .vgp-modal-box,
.vgp-scheme-graphite .vgp-modal-box,
.vgp-scheme-purple .vgp-modal-box { box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); }

/* Destaque da janela principal do vídeo (player do modo "Player + lista"). */
.vgp-playlist-stage { box-shadow: 0 0 0 1px var(--vgp-border, transparent);
}
.vgp-scheme-dark .vgp-playlist-stage,
.vgp-scheme-midnight .vgp-playlist-stage,
.vgp-scheme-graphite .vgp-playlist-stage,
.vgp-scheme-purple .vgp-playlist-stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 34px rgba(0, 0, 0, .55); }

.vgp-scheme-dark .vgp-card-thumb,
.vgp-scheme-midnight .vgp-card-thumb,
.vgp-scheme-graphite .vgp-card-thumb,
.vgp-scheme-purple .vgp-card-thumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07); }

@media (max-width: 550px) {
.vgp-toolbar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    flex-direction: column;
    align-content: stretch;
}

.vgp-playlist-title {
    margin: 12px 2px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding: 8px;
    border-radius: 5px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    background: linear-gradient(to left, #b300ff, #823e9f, #823e9f, #8e00cb);
    color: white;
}

}