/* ==========================================================
   Yateer Video Plugin — front-end gallery
   All rules are scoped to .yvp so they don't touch the theme.
   ========================================================== */
.yvp{
  --yvp-accent:#c4161c;
  --yvp-cols:3;
  --yvp-scols:5;
  --yvp-bg:transparent;
  --yvp-card:#ffffff;
  --yvp-ink:#16181d;
  --yvp-muted:#6b7280;
  --yvp-line:#e7e7ea;
  --yvp-chip:#f2f2f4;
  --yvp-radius:12px;
  --yvp-gap:22px;
  color:var(--yvp-ink);
  background:var(--yvp-bg);
  font-family:inherit;
  line-height:1.5;
  width:100%;
}
.yvp-theme-dark{
  --yvp-bg:#0f0f12;
  --yvp-card:#18181c;
  --yvp-ink:#f3f3f5;
  --yvp-muted:#a1a1aa;
  --yvp-line:#2a2a31;
  --yvp-chip:#222228;
  padding:32px;
  border-radius:var(--yvp-radius);
}
.yvp,.yvp *,.yvp *::before,.yvp *::after{box-sizing:border-box}
.yvp [hidden]{display:none!important}
.yvp svg{display:block}

/* ---------- Header ---------- */
.yvp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.yvp .yvp-h{margin:0 0 6px;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.15;color:var(--yvp-ink)}
.yvp .yvp-sub{margin:0;color:var(--yvp-muted);max-width:620px}
.yvp-subscribe{display:inline-flex;align-items:center;gap:8px;background:var(--yvp-accent);color:#fff!important;text-decoration:none!important;padding:11px 20px;border-radius:40px;font-weight:600;font-size:.92rem;transition:filter .2s,transform .2s}
.yvp-subscribe:hover{filter:brightness(.92);transform:translateY(-1px)}
.yvp-subscribe svg{width:20px;height:20px;fill:#fff}

/* ---------- Tabs + search ---------- */
.yvp-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--yvp-line)}
.yvp-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.yvp-tabs::-webkit-scrollbar{display:none}
.yvp .yvp-tab{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:40px;background:var(--yvp-chip);color:var(--yvp-ink);font:600 .9rem/1 inherit;font-family:inherit;cursor:pointer;transition:background .2s,color .2s}
.yvp .yvp-tab:hover{filter:brightness(.96)}
.yvp .yvp-tab.is-active{background:var(--yvp-ink);color:var(--yvp-card)}
.yvp-count{font-size:.75rem;font-weight:600;opacity:.6}
.yvp-search{position:relative;display:block;min-width:240px}
.yvp-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--yvp-muted);stroke-width:2}
.yvp .yvp-search input{width:100%;margin:0;padding:10px 14px 10px 38px;border:1px solid var(--yvp-line);border-radius:40px;background:var(--yvp-card);color:var(--yvp-ink);font:inherit;font-size:.92rem;box-shadow:none}
.yvp .yvp-search input:focus{outline:none;border-color:var(--yvp-accent)}

/* ---------- Blocks ---------- */
.yvp-block + .yvp-block{margin-top:44px}
.yvp .yvp-block-title{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:1.15rem;color:var(--yvp-ink)}
.yvp-block-title svg{width:22px;height:22px;fill:var(--yvp-accent)}
.yvp-grid{display:grid;grid-template-columns:repeat(var(--yvp-cols),minmax(0,1fr));gap:30px var(--yvp-gap)}
.yvp-shorts{display:grid;grid-template-columns:repeat(var(--yvp-scols),minmax(0,1fr));gap:16px}

/* ---------- Card ---------- */
.yvp .yvp-card{display:flex;flex-direction:column;gap:11px;text-decoration:none!important;color:inherit!important;outline:none}
.yvp-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--yvp-radius);overflow:hidden;background:var(--yvp-chip)}
.yvp-card.is-short .yvp-thumb{aspect-ratio:9/16}
.yvp-thumb img{width:100%!important;height:100%!important;object-fit:cover;display:block;margin:0!important;transition:transform .6s ease;max-width:none!important}
.yvp-card:hover .yvp-thumb img,.yvp-card:focus-visible .yvp-thumb img{transform:scale(1.05)}
.yvp-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));opacity:.6;transition:opacity .3s}
.yvp-card:hover .yvp-thumb::after{opacity:1}
.yvp-card:focus-visible .yvp-thumb{box-shadow:0 0 0 3px var(--yvp-accent)}
.yvp-play{position:absolute;left:50%;top:50%;z-index:2;width:56px;height:40px;margin:-20px 0 0 -28px;border-radius:12px;background:rgba(15,15,15,.72);display:grid;place-items:center;transition:background .25s,transform .25s}
.yvp-card:hover .yvp-play{background:var(--yvp-accent);transform:scale(1.08)}
.yvp-play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
.yvp-card.is-short .yvp-play{width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%}
.yvp-tag{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;font-weight:700;padding:4px 9px 4px 6px;border-radius:30px;backdrop-filter:blur(4px)}
.yvp-tag svg{width:14px;height:14px;fill:#fff}
.yvp-dur{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.82);color:#fff;font-size:.74rem;font-weight:600;padding:2px 6px;border-radius:5px}
.yvp-info{display:flex;flex-direction:column;gap:4px}
.yvp-title{font-weight:600;font-size:.98rem;line-height:1.4;color:var(--yvp-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yvp-card.is-short .yvp-title{font-size:.9rem}
.yvp-meta{font-size:.82rem;color:var(--yvp-muted)}

.yvp-card.yvp-hide{display:none!important}

/* ---------- Load more / empty ---------- */
.yvp .yvp-more{display:block;margin:30px auto 0;padding:11px 26px;border:1px solid var(--yvp-line);border-radius:40px;background:var(--yvp-card);color:var(--yvp-ink);font:600 .9rem inherit;font-family:inherit;cursor:pointer;transition:border-color .2s,color .2s}
.yvp .yvp-more:hover{border-color:var(--yvp-accent);color:var(--yvp-accent)}
.yvp-empty,.yvp-noresults{text-align:center;color:var(--yvp-muted);padding:40px 0;margin:0}
.yvp-admin-note{margin:24px 0 0;padding:10px 14px;border:1px dashed #d97706;border-radius:8px;font-size:.82rem;color:#92400e;background:#fffbeb}

.yvp-panel.is-active{animation:yvpFade .35s ease}
@keyframes yvpFade{from{opacity:0;transform:translateY(6px)}}

/* ---------- Lightbox (appended to <body>) ---------- */
.yvp-lb{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,8,.93)}
.yvp-lb.is-open{display:flex}
.yvp-lb-inner{width:min(1120px,100%);display:flex;flex-direction:column;align-items:center;animation:yvpPop .3s ease}
@keyframes yvpPop{from{opacity:0;transform:scale(.97)}}
.yvp-lb-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;background:#000;border-radius:12px;overflow:hidden}
.yvp-lb.is-short .yvp-lb-frame{aspect-ratio:9/16;height:min(80vh,760px);width:auto;max-width:100%}
.yvp-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yvp-lb-bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;color:#fff}
.yvp-lb.is-short .yvp-lb-bar{max-width:460px}
.yvp-lb-title{font-weight:600;font-size:1rem;line-height:1.4;margin:0}
.yvp-lb-meta{font-size:.82rem;opacity:.6;margin:2px 0 0}
.yvp-lb-nav{display:flex;gap:8px;flex:none}
.yvp-lb button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s}
.yvp-lb button:hover{background:rgba(255,255,255,.14)}
.yvp-lb button:disabled{opacity:.3;cursor:default}
.yvp-lb button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.yvp-lb .yvp-lb-close{position:absolute;top:16px;right:16px}
.yvp-lb-yt{font-size:.8rem;color:#fff!important;opacity:.7;text-decoration:underline!important}
html.yvp-lock,html.yvp-lock body{overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .yvp-grid{grid-template-columns:repeat(min(var(--yvp-cols),3),minmax(0,1fr))}
  .yvp-shorts{grid-template-columns:repeat(min(var(--yvp-scols),4),minmax(0,1fr))}
}
@media (max-width:820px){
  .yvp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .yvp-theme-dark{padding:22px}
}
@media (max-width:600px){
  .yvp-grid{grid-template-columns:1fr;gap:26px}
  .yvp-bar{flex-direction:column;align-items:stretch}
  .yvp-search{min-width:0}
  /* Shorts become a swipeable row */
  .yvp-shorts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .yvp-shorts::-webkit-scrollbar{display:none}
  .yvp-shorts .yvp-card{flex:0 0 46%;scroll-snap-align:start}
  .yvp-theme-dark .yvp-shorts{margin:0 -22px;padding:0 22px 6px}
  .yvp-head{align-items:flex-start}
  .yvp-lb{padding:10px}
  .yvp-lb-bar{flex-direction:column;align-items:flex-start}
  .yvp-lb .yvp-lb-close{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){
  .yvp *,.yvp-lb *{animation:none!important;transition:none!important}
}