/* ============================================================== */
/*                           Általános                            */
/* ============================================================== */
*{box-sizing:border-box}

/* ===== Spinner (AJAX-töltés) ================================== */
@keyframes pp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
button.loading{
  position:relative;
  color:transparent!important;            /* szöveg eltüntetése */
}
button.loading::after{
  content:"";
  width:20px;height:20px;
  border:3px solid #000;                  /* fekete körvonal   */
  border-top-color:transparent;           /* “kivágott szelet” */
  border-radius:50%;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:pp-spin .75s linear infinite;
}

/* ======= CÍM A VIEWERBEN ======= */
.pl-view-title{
  text-align:center;display:block;width:100%;
  margin:1rem auto 1.25rem auto;
  font-family:"Poppins",Helvetica,Arial,sans-serif;
  font-size:1.5rem;font-weight:600;color:#333
}

/* ------------- Galéria (5 oszlop desktopon) ------------- */
#playlist-gallery{
  width:100%;display:grid;grid-template-columns:repeat(5,1fr);
  gap:1.25rem;margin:1.5rem 0
}

/* ---------- RESPONSIVE BREAK-POINTOK ---------- */
@media (max-width:1280px){#playlist-gallery{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1024px){#playlist-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px) {#playlist-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px) {#playlist-gallery{grid-template-columns:1fr}}

/* --------- Kártya --------- */
.pl-card{display:flex;flex-direction:column;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pl-card:hover{transform:translateY(-4px)}
.pl-card.active{outline:2px solid #d3bba3;outline-offset:3px}

/* Címsor (név + törlés) */
.pl-title{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem;
  font-family:"Poppins",Helvetica,Arial,sans-serif;font-size:1.5rem;font-weight:600;line-height:1.25em;color:#333
}
.pl-delete{
  color:#222222;background:#d3bba3;box-shadow:4px 4px 0 0 #000;border:none;
  padding:5px;font-weight:600;font-size:.75rem;cursor:pointer;margin-left:.5rem;transition:background .2s
}
.pl-delete:hover{background:#D5D5D5}

/* Kép + overlay */
.pl-thumb-wrap{position:relative;border-radius:4px;overflow:hidden}
.pl-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .2s}
.pl-card:hover .pl-thumb{filter:brightness(.85)}
.pl-count{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;
  font-family:"Poppins",Helvetica,Arial,sans-serif;font-size:.75rem;padding:2px 8px;border-radius:3px
}

/* ------------- Vissza gomb ------------- */
#playlist-back-btn{
  font-family:"Poppins",Helvetica,Arial,sans-serif;font-size:.9rem;font-weight:600;text-transform:uppercase;
  padding:12px 24px;background:#d3bba3;color:#222222;border:none;box-shadow:4px 4px 0 0 #000;cursor:pointer;transition:background .2s
}
#playlist-back-btn:hover{background:#D5D5D5}

/* ======= Néző (player + oldalsáv) ======= */
#playlist-player-container{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;max-width:100%}
.playlist-sidebar{list-style:none;margin:0;padding:0;border-right:1px solid #e2e2e2;max-height:600px;overflow-y:auto}
.playlist-item{
  display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;cursor:pointer;
  transition:background .2s;
  position:relative;                     /* ⇦ ÚJ: pozicionálási alap          */
}
.playlist-item:hover,.playlist-item.active{background:#f1f1f1}
.playlist-thumb{width:58px;height:38px;object-fit:cover;border-radius:1px}
.playlist-meta{flex:1;display:flex;flex-direction:column;font-size:.85rem}
.playlist-title{font-weight:500;line-height:1.2em;margin:0}

/* ---- Gomb + select ---- */
.playlist-button-wrap{display:flex;align-items:center;gap:.5rem;margin:.75rem 0;flex-wrap:wrap}
.playlist-target,
.playlist-toggle-button{
  font-family:"Poppins",Helvetica,Arial,sans-serif!important;
  font-size:clamp(.938rem,.9006rem + .187vw,1.125rem)!important;
  font-weight:600!important;text-transform:uppercase!important;line-height:1.3em!important;
  color:#222222!important;background:#d3bba3!important;
  box-shadow:4px 4px 0 0 #000!important;border:none!important;border-radius:0!important;
  padding:12px 24px!important;cursor:pointer!important;
  transition:background .2s,color .2s!important;width:330px;
}
button.playlist-toggle-button{width:300px}
button.playlist-toggle-button:hover{background:#D5D5D5}

/* ======= Videó törlés gomb (oldalsáv) ==================== */
button.video-remove-btn{
  position:absolute;top:-5px;right:6px;              /* ⇦ ÚJ: jobb-felső sarok */
  width:24px;height:24px;line-height:24px;           /* kör alakú kis gomb    */
  padding:0;                                        /* ⇦ háttér nélküli       */
  background:transparent!important;                 /* ⇦ átlátszó háttér      */
  color:#222222!important;                           /* fekete (ikon/szöveg)   */
  border:none!important;box-shadow:none!important;   /* nincs keret/árnyék     */
  font-size:1.25rem;font-weight:600;
  cursor:pointer;transition:transform .1s;
}
button.video-remove-btn:hover{transform:scale(1.1)}  /* kicsi hover effekt     */

/* ---------- select pseudo ▼ ---------- */
.playlist-target{appearance:none;-webkit-appearance:none;position:relative;padding-right:60px}
.playlist-target::after{content:"▼";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:.55rem;color:#222222;pointer-events:none}
.playlist-target:focus{outline:none;box-shadow:inset 0 0 0 2px #000}
.playlist-toggle-button:hover,.playlist-target:hover{background:#D5D5D5}
.playlist-toggle-button[disabled]{opacity:.55;cursor:not-allowed}

/* ---- Plyr keret ---- */
#video-player,#video-player .plyr__video-embed{width:100%!important;max-width:none!important}
#video-player .plyr__video-embed{aspect-ratio:16/9;height:auto;position:relative;background:#000}
@supports not (aspect-ratio:16/9){
  #video-player .plyr__video-embed{height:0!important;padding-top:56.25%!important}
  #video-player .plyr__video-embed iframe{position:absolute;inset:0;width:100%!important;height:100%!important}
}

/* ====== Player + lista egymás alatt (≤1024 px) ====== */
@media (max-width:1024px){
  #playlist-player-container{display:flex;flex-direction:column}
  #playlist-player-container #video-player{order:1}
  #playlist-player-container .playlist-sidebar{order:2;border-right:none;max-width:100%;margin-top:1rem}
}

/* ====== Homokóra ikon (fi) ====== */
.fi-rr-hourglass-start{color:#222222!important;stroke:#222222!important;fill:transparent!important}