/* VBP YouTube Library — frontend styles */
.vbp-yt-library,
.vbp-yt-library *{box-sizing:border-box}

.vbp-yt-library{
  width:100%;
  position:relative;
  color:#2f211b;
  font-family:inherit;
}

/* Search / filter row */
.vbp-yt-toolbar{
  display:grid;
  grid-template-columns:minmax(300px, 380px) minmax(0, 1fr);
  gap:12px;
  align-items:center;
  margin:0 0 28px;
}

.vbp-yt-search{
  min-width:0;
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  background:#fff;
  border:1px solid #dedbd7;
  border-radius:10px;
  box-shadow:none;
}

.vbp-yt-search span{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:block;
  position:relative;
  font-size:0;
  transform:none;
}

.vbp-yt-search span:before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:1.7px solid #3c332e;
  border-radius:50%;
  left:1px;
  top:1px;
}

.vbp-yt-search span:after{
  content:"";
  position:absolute;
  width:7px;
  height:1.7px;
  background:#3c332e;
  transform:rotate(45deg);
  left:10px;
  top:12px;
  border-radius:2px;
}

.vbp-yt-search input{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  width:100%;
  min-width:0;
  height:44px;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#3b302b;
  font-family:inherit;
  font-size:14px;
  line-height:44px;
}

.vbp-yt-search input::placeholder{color:#8b8580;opacity:1}

.vbp-yt-playlist{
  width:100%;
  min-width:0;
  height:48px;
  margin:0 !important;
  padding:0 42px 0 16px !important;
  border:1px solid #dedbd7 !important;
  border-radius:10px !important;
  background-color:#fff !important;
  color:#514640 !important;
  font-family:inherit !important;
  font-size:14px !important;
  line-height:48px;
  box-shadow:none !important;
  outline:0;
}

/* Video grid */
.vbp-yt-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 20px;
  align-items:start;
}

.vbp-yt-card{
  min-width:0;
  border:1px solid #e3dfdc;
  border-radius:15px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  box-shadow:none;
  transform:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.vbp-yt-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(45,31,24,.08);
  border-color:#d9d2cd;
}

.vbp-yt-card:focus-visible{
  outline:2px solid #b96f4e;
  outline-offset:3px;
}

.vbp-yt-thumb{
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  background:#eee;
}

.vbp-yt-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.vbp-yt-play{
  position:absolute;
  left:50%;
  top:50%;
  width:56px;
  height:40px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:18px;
  line-height:1;
  padding-left:2px;
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}

.vbp-yt-card:hover .vbp-yt-play,
.vbp-yt-card:focus-visible .vbp-yt-play{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.02);
}

.vbp-yt-card-body{
  padding:15px 16px 17px;
  min-height:112px;
}

.vbp-yt-title{
  margin:0 0 8px !important;
  padding:0 !important;
  color:#2f211b !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.vbp-yt-date{
  margin:0;
  color:#8a817b;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  line-height:1.4;
}

/* Loading / empty state */
.vbp-yt-loading,
.vbp-yt-empty{
  padding:38px 10px;
  text-align:center;
  color:#817872;
  font-size:14px;
}

.vbp-yt-load-more{
  display:block;
  margin:30px auto 0 !important;
  padding:11px 24px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#3b2a22 !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  cursor:pointer;
  box-shadow:none !important;
}

.vbp-yt-load-more:hover{background:#4b362b !important}

/* Player modal */
.vbp-yt-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:20px;
}

.vbp-yt-modal[hidden],
.vbp-yt-empty[hidden],
.vbp-yt-loading[hidden],
.vbp-yt-load-more[hidden]{display:none}

.vbp-yt-backdrop{
  position:absolute;
  inset:0;
  background:rgba(25,18,14,.78);
}

.vbp-yt-dialog{
  position:relative;
  z-index:1;
  width:min(960px,100%);
  max-height:calc(100vh - 40px);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}

.vbp-yt-player{
  aspect-ratio:16/9;
  background:#000;
}

.vbp-yt-player iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.vbp-yt-close{
  position:absolute;
  z-index:3;
  right:-34px;
  top:-42px;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif;
  font-size:24px;
  font-weight:400;
  line-height:28px;
  text-align:center;
  cursor:pointer;
  box-shadow:none !important;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  opacity:.95;
  transition:opacity .15s ease,transform .15s ease;
}
.vbp-yt-close:hover{
  background:transparent !important;
  color:#fff !important;
  opacity:1;
  transform:scale(1.08);
}
.vbp-yt-close:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
  border-radius:3px;
}

@media (max-width:600px){
  .vbp-yt-close{
    right:0;
    top:-38px;
    width:28px;
    height:28px;
    font-size:24px;
    line-height:28px;
  }
}

/* Responsive */
@media (max-width:900px){
  .vbp-yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .vbp-yt-toolbar{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  .vbp-yt-toolbar{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:20px;
  }
  .vbp-yt-grid{grid-template-columns:1fr;gap:16px}
  .vbp-yt-title{font-size:16px !important}
  .vbp-yt-card-body{min-height:0;padding:13px 14px 15px}
  .vbp-yt-modal{padding:10px}
  .vbp-yt-dialog{border-radius:10px}
}

body.vbp-yt-no-scroll{overflow:hidden}


/* Final typography guard: keep plugin UI independent of Elementor/global heading styles */
html body .vbp-yt-library .vbp-yt-card .vbp-yt-card-body .vbp-yt-title,
html body .vbp-yt-library .vbp-yt-modal .vbp-yt-dialog .vbp-yt-modal-title{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  color:#2f211b !important;
  text-transform:none !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
}

html body .vbp-yt-library .vbp-yt-modal .vbp-yt-dialog .vbp-yt-modal-title{
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  margin:0 !important;
  padding:15px 18px 18px !important;
}

@media (max-width:600px){
  html body .vbp-yt-library .vbp-yt-modal .vbp-yt-dialog .vbp-yt-modal-title{
    font-size:17px !important;
    line-height:1.4 !important;
    padding:13px 16px 16px !important;
  }
}