/* Dearthwood – YouTube Latest */
.dw-yt{--gap:12px;--radius:8px;--shadow:0 2px 12px rgba(0,0,0,.25)}
.dw-yt-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.dw-yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;}
.dw-yt-grid{display:grid;grid-gap:var(--gap);}
.dw-yt-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.dw-yt-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.dw-yt-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.dw-yt-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.dw-yt-grid.cols-6{grid-template-columns:repeat(6,1fr)}
.dw-yt-card{background:rgba(0,0,0,.05);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.dw-yt-thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;}
.dw-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dw-yt-play{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;padding:6px 8px;border-radius:999px;font-weight:700;}
.dw-yt-title{font-size:14px;line-height:1.4;padding:8px 10px 10px;margin:0;color:#fff !important;}
.dw-yt-empty{opacity:.7;}

/* Neutralize link color inside YouTube Latest plugin */
.dw-yt-title a,
.dw-yt-thumb {
  color: var(--text-primary, #fff);
  text-decoration: none;
}

.dw-yt-title a:hover,
.dw-yt-title a:focus {
  color: var(--accent, #11d3c7); /* pick your site’s accent colour */
  text-decoration: underline;
}

/* Optional – if you want the blue link to be fully replaced everywhere */
.dw-yt a {
  color: var(--text-primary, #fff);
}

/* Accessibility: visible focus rings */
.dw-yt-thumb:focus,
.dw-yt-title a:focus,
.dw-yt-modal-close:focus {
  outline: 2px solid var(--accent, #11d3c7);
  outline-offset: 2px;
}

/* Modal */
html.dw-yt-lock{overflow:hidden}
#dw-yt-modal{position:fixed;inset:0;z-index:99999;display:none}
#dw-yt-modal.open{display:block}
#dw-yt-modal .dw-yt-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
#dw-yt-modal .dw-yt-modal-dialog{
  position:relative;max-width:960px;margin:5vh auto;padding:0 12px;background:transparent;outline:0;
  display:block; /* ensure stacking context separate from backdrop */
}
#dw-yt-modal .dw-yt-modal-close{
  position:absolute;top:-40px;right:0;border:0;background:#000;color:#fff;font-size:24px;line-height:1;
  width:40px;height:40px;border-radius:20px;cursor:pointer; display:none;
}
#dw-yt-modal .dw-yt-modal-body{position:relative}
#dw-yt-modal .dw-yt-modal-frame{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.25)}
#dw-yt-modal .dw-yt-embed{position:absolute;inset:0}
#dw-yt-modal .dw-yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Remove any visible border/frame around the YouTube modal player */
#dw-yt-modal .dw-yt-modal-frame,
#dw-yt-modal .dw-yt-embed iframe {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width:720px){
  #dw-yt-modal .dw-yt-modal-dialog{margin:4vh auto}
}


/* Load more — modern, themeable */
.dw-yt-more-wrap{
  display:flex;justify-content:center;margin:20px 0 0
}
.dw-yt-load-more{
  --btn-bg: var(--accent, #11d3c7);
  --btn-fg: #0a0a0a;
  --btn-bg-hover: #0fe1d4;
  --btn-bg-press: #0cc0b5;

  appearance:none;border:0;cursor:pointer;
  padding:12px 18px;border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.dw-yt-load-more:hover{ background:var(--btn-bg-hover); transform:translateY(-1px) }
.dw-yt-load-more:active{ background:var(--btn-bg-press); transform:translateY(0) }
.dw-yt-load-more:focus{ outline:2px solid #fff; outline-offset:2px }
/* Loading & disabled states */
.dw-yt-load-more.loading{ 
  opacity:.65; 
  cursor:wait; 
}
.dw-yt-load-more:disabled{
  opacity:.5;
  cursor:default;     /* ← no spinner cursor when done */
  pointer-events:none;
}


/* Spinner when .loading */
.dw-yt-load-more.loading{
  position:relative; padding-right:42px;
}
.dw-yt-load-more.loading::after{
  content:''; position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px;
  border:2px solid currentColor; border-left-color:transparent; border-radius:50%;
  animation:dwyt-spin .75s linear infinite;
}
@keyframes dwyt-spin{ to{ transform:rotate(360deg) } }