/* YouTube-style ads (ads agent): the in-stream overlay in .yt-ad-slot (yt-ads.js), the companion banner,
   in-feed cards (Home, search, Watch next), Shorts ads, the masthead and the "Why this ad?" dialog.
   Colours come from the theme's variables (youtube.css), so light and dark both work. */

/* ---- In-stream overlay ---------------------------------------------------------------------------- */
.yt-player.is-ad .yt-ad-slot{pointer-events:auto}
.yta-overlay{position:absolute;inset:0;z-index:40;background:#000;color:#fff;font:400 13px/1.3 var(--yt-font,"Roboto","Arial",sans-serif);overflow:hidden;
  -webkit-user-select:none;user-select:none}
.yta-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;cursor:pointer;background:#000}
.yta-info,.yta-mute{position:absolute;top:12px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.yta-info{left:12px}.yta-mute{right:12px}
.yta-info svg,.yta-mute svg{width:22px;height:22px}
.yta-info:hover,.yta-mute:hover{background:rgba(0,0,0,.7)}
.yta-card{position:absolute;left:12px;bottom:44px;z-index:3;display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100% - 200px));
  padding:8px 8px 8px 8px;border-radius:12px;background:rgba(15,15,15,.82);backdrop-filter:blur(6px)}
.yta-card-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:#333}
.yta-card-text{min-width:0;display:flex;flex-direction:column}
.yta-card-text strong{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yta-card-url{color:#aaa;font-size:12px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.yta-card-url svg{width:12px;height:12px;flex:none}
.yta-card-url:hover{color:#fff}
.yta-cta,.yta-comp-cta,.yt-adcard-cta,.yt-mh-cta,.yt-short-ad-cta{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:18px;
  background:var(--yt-blue-btn,#065fd4);color:var(--yt-blue-btn-text,#fff);font:500 14px/36px var(--yt-font,"Roboto",sans-serif);text-decoration:none;white-space:nowrap;flex:none}
.yta-cta{background:#3ea6ff;color:#0f0f0f}
.yta-cta:hover,.yta-comp-cta:hover,.yt-adcard-cta:hover,.yt-mh-cta:hover,.yt-short-ad-cta:hover{filter:brightness(1.08)}
.yta-bar{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;font-size:13px;text-shadow:0 0 2px rgba(0,0,0,.8)}
.yta-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;background:#fc0;color:#0f0f0f;font-weight:500;font-size:12px;text-shadow:none}
.yta-time{font-variant-numeric:tabular-nums}
.yta-visit{color:#fff;text-decoration:none;opacity:.9}
.yta-visit:hover{text-decoration:underline;opacity:1}
.yta-skip{position:absolute;right:0;bottom:44px;z-index:3;min-width:120px;height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.35);border-right:0;
  background:rgba(0,0,0,.7);color:#fff;font:500 16px/42px var(--yt-font,"Roboto",sans-serif);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.yta-skip[disabled]{cursor:default;font-size:13px;color:#ddd}
.yta-skip-go{display:none;align-items:center;gap:6px}
.yta-skip-go svg{width:22px;height:22px}
.yta-skip.is-ready .yta-skip-go{display:inline-flex}
.yta-skip.is-ready .yta-skip-wait{display:none}
.yta-skip.is-ready:hover{background:rgba(0,0,0,.9);border-color:#fff}
.yta-noskip{position:absolute;right:0;bottom:44px;z-index:3;padding:8px 14px;background:rgba(0,0,0,.7);color:#fff;font-size:13px}
.yta-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25);z-index:3}
.yta-progress i{display:block;height:100%;width:0;background:#fc0;transition:width .25s linear}
@media (max-width:600px){
  .yta-card{bottom:40px;max-width:calc(100% - 24px);padding:6px}
  .yta-card-av{display:none}
  .yta-skip,.yta-noskip{bottom:96px;min-width:96px;height:38px;font-size:14px}
  .yta-cta{height:32px;line-height:32px;padding:0 12px;font-size:13px}
}

/* ---- "Why this ad?" ------------------------------------------------------------------------------- */
.yta-why{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.yta-overlay .yta-why{position:absolute;z-index:10}
.yta-why-card{width:min(440px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--yt-menu-bg,#fff);color:var(--yt-text,#0f0f0f);border-radius:12px;
  padding:16px 20px 20px;box-shadow:var(--yt-dialog-shadow,0 4px 24px rgba(0,0,0,.25));font:400 14px/20px var(--yt-font,"Roboto",sans-serif);text-align:left}
.yta-why-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.yta-why-head strong{font-size:16px;font-weight:500}
.yta-why-x{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:24px;line-height:36px;cursor:pointer}
.yta-why-x:hover{background:var(--yt-hover,rgba(0,0,0,.05))}
.yta-why-adv{font-weight:500;margin-bottom:6px}
.yta-why-list{margin:0 0 12px;padding-left:18px;color:var(--yt-text-2,#606060)}
.yta-why-list li{margin:4px 0}
.yta-btn{height:36px;padding:0 16px;border:0;border-radius:18px;background:var(--yt-tonal,rgba(0,0,0,.05));color:var(--yt-text,#0f0f0f);font:500 14px/36px var(--yt-font,"Roboto",sans-serif);cursor:pointer}
.yta-btn:hover{background:var(--yt-tonal-hover,rgba(0,0,0,.1))}

/* ---- Companion banner (watch page, right column) -------------------------------------------------- */
.yt-ad-companion{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px;border:1px solid var(--yt-border,rgba(0,0,0,.1));border-radius:12px;
  background:var(--yt-raised,#fff)}
.yt-ad-companion[hidden]{display:none}
.yta-comp{display:flex;align-items:center;gap:12px;min-width:0;flex:1;color:inherit;text-decoration:none}
.yta-comp-img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:none;background:var(--yt-thumb-bg,#e5e5e5)}
.yta-comp-text{display:flex;flex-direction:column;min-width:0;font-size:12px;color:var(--yt-text-2,#606060)}
.yta-comp-text strong{font:500 14px/20px var(--yt-font,"Roboto",sans-serif);color:var(--yt-text,#0f0f0f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- In-feed cards (Home grid, search rows, Up next) ------------------------------------------------ */
.yt-ad-badge{font-weight:700;color:var(--yt-text,#0f0f0f)}
.yt-adcard{position:relative}
.yt-adcard-by{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font:400 12px/18px var(--yt-font,"Roboto",sans-serif);color:var(--yt-text-2,#606060);margin-top:2px}
.yt-card .yt-adcard-by{font-size:14px;line-height:20px}
.yt-adcard-adv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-adcard-desc{font:400 14px/20px var(--yt-font,"Roboto",sans-serif);color:var(--yt-text-2,#606060);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-adcard-actions{margin-top:10px}
.yt-card .yt-adcard-actions .yt-adcard-cta{width:100%}
.yt-adcard-compact .yt-adcard-cta{height:32px;line-height:32px;padding:0 12px;font-size:13px}
.yt-ad-menu{position:absolute;top:8px;right:-12px}
.yt-adcard-row .yt-ad-menu{top:-6px;right:-40px}
.yt-adcard-compact .yt-ad-menu{top:-4px;right:-16px}
.yt-ad-menu-btn{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--yt-text,#0f0f0f);display:flex;align-items:center;justify-content:center;cursor:pointer}
.yt-ad-menu-btn:hover{background:var(--yt-hover,rgba(0,0,0,.05))}
.yt-ad-menu-btn svg{width:24px;height:24px}
.yt-ad-menu-panel{position:absolute;right:0;top:40px;z-index:50;min-width:220px;padding:8px 0;border-radius:12px;background:var(--yt-menu-bg,#fff);box-shadow:var(--yt-shadow,0 4px 32px rgba(0,0,0,.1))}
.yt-ad-menu-panel[hidden]{display:none}
.yt-ad-menu-panel button,.yt-ad-menu-panel a{display:flex;align-items:center;gap:14px;width:100%;height:36px;padding:0 16px;border:0;background:transparent;color:var(--yt-text,#0f0f0f);
  font:400 14px/20px var(--yt-font,"Roboto",sans-serif);text-align:left;cursor:pointer}
.yt-ad-menu-panel button:hover,.yt-ad-menu-panel a:hover{background:var(--yt-hover,rgba(0,0,0,.05))}
.yt-ad-menu-panel svg{width:22px;height:22px;flex:none}
.yta-gone{display:flex;align-items:center;justify-content:center;min-height:120px;border-radius:12px;background:var(--yt-chip,rgba(0,0,0,.05))}
.yta-gone-msg{padding:16px;font-size:14px;color:var(--yt-text-2,#606060);text-align:center}

/* ---- Masthead (top of Home) -------------------------------------------------------------------------- */
.yt-masthead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;margin:0 0 24px;padding:16px;border-radius:16px;
  background:var(--yt-bg-2,#f9f9f9);position:relative}
.yt-mh-media{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.yt-mh-video{width:100%;height:100%;object-fit:cover;display:block}
.yt-mh-mute{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.yt-mh-mute svg{width:20px;height:20px}
.yt-mh-body{min-width:0;position:relative;padding-right:40px}
.yt-mh-adv{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.yt-mh-adv strong{display:block;font:500 16px/22px var(--yt-font,"Roboto",sans-serif)}
.yt-mh-title{font:600 24px/32px var(--yt-font,"Roboto",sans-serif);margin:0 0 8px}
.yt-mh-title a{color:var(--yt-text,#0f0f0f);text-decoration:none}
.yt-mh-desc{margin:0 0 16px;color:var(--yt-text-2,#606060);font-size:14px;line-height:20px}
.yt-mh-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yt-mh-actions .yt-ad-menu{position:static}
.yt-mh-actions .yt-ad-menu-panel{right:auto;left:0}
@media (max-width:760px){.yt-masthead{grid-template-columns:1fr;gap:12px;padding:12px;border-radius:12px}.yt-mh-title{font-size:20px;line-height:28px}}

/* ---- Shorts ad (a slide of the Shorts pager) ------------------------------------------------------------ */
.yt-short-ad{position:relative;height:100%;max-height:calc(100vh - 120px);aspect-ratio:9/16;margin:0 auto;border-radius:12px;overflow:hidden;background:#000;color:#fff}
.yt-short-ad-video{width:100%;height:100%;object-fit:cover;display:block}
.yt-short-ad-info{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;flex-direction:column;gap:8px}
.yt-short-ad-adv{display:flex;align-items:center;gap:8px;font-size:14px}
.yt-short-ad-title{margin:0;font-size:14px;line-height:20px}
.yt-short-ad .yt-adcard-by,.yt-short-ad .yt-ad-badge{color:#fff}
.yt-short-ad-cta{width:100%}
.yt-short-ad .yt-ad-menu{top:12px;right:8px}
.yt-short-ad .yt-ad-menu-btn{color:#fff}

/* An in-feed ad on Home is one card of the grid, like YouTube's (the theme's wrapper spans the row by default). */
.yt-grid>.yt-grid-ad:has(>.yt-adcard){grid-column:auto}

/* ---- Mid-roll markers: yellow dots on the progress bar ------------------------------------------- */
.yt-progress .yta-marker{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fc0;z-index:3;pointer-events:none}
.yt-player.is-ad .yta-marker{display:none}

/* ---- Overlay details: the ⓘ next to "Sponsored", the skip countdown, My Ad Center menu ------------------ */
.yta-bar .yta-info{position:static;width:28px;height:28px;background:transparent}
.yta-bar .yta-info svg{width:18px;height:18px}
.yta-skip[disabled] .yta-skip-wait{display:inline-flex;align-items:center;justify-content:center;min-width:28px;font-size:16px}
.yta-menu{position:absolute;left:12px;bottom:44px;z-index:12;min-width:260px;max-width:calc(100% - 24px);padding:8px 0;border-radius:12px;background:var(--yt-menu-bg,#fff);
  color:var(--yt-text,#0f0f0f);box-shadow:var(--yt-dialog-shadow,0 4px 24px rgba(0,0,0,.25));font:400 14px/20px var(--yt-font,"Roboto",sans-serif)}
.yta-menu-h{display:flex;flex-direction:column;padding:6px 16px 8px;border-bottom:1px solid var(--yt-border,rgba(0,0,0,.1));margin-bottom:4px}
.yta-menu-h span{font-size:12px;color:var(--yt-text-2,#606060)}
.yta-menu button,.yta-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:36px;padding:0 16px;border:0;background:transparent;
  color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.yta-menu button:hover,.yta-menu a:hover{background:var(--yt-hover,rgba(0,0,0,.05))}
.yta-menu b{font-weight:500;color:var(--yt-text-2,#606060)}

/* ---- Pause ads: the sponsored panel beside a paused video ------------------------------------------------ */
.yta-pause{position:absolute;right:16px;top:16px;z-index:5;width:min(300px,42%);padding:10px;border-radius:12px;background:rgba(15,15,15,.92);color:#fff;
  display:flex;flex-direction:column;gap:8px;font:400 13px/18px var(--yt-font,"Roboto",sans-serif);box-shadow:0 4px 24px rgba(0,0,0,.4)}
.yta-pause-top{display:flex;align-items:center;gap:6px}
.yta-pause-top .yta-info{position:static;width:28px;height:28px;background:transparent;margin-right:auto}
.yta-pause-x{width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:28px;cursor:pointer}
.yta-pause-media{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.yta-pause-media img{width:100%;height:100%;object-fit:cover;display:block}
.yta-pause-text{display:flex;flex-direction:column}
.yta-pause-text strong{font-weight:500;font-size:14px;line-height:20px}
.yta-pause-text span{color:#aaa;font-size:12px}
.yta-pause .yta-cta{align-self:stretch}
.yta-pause .yta-menu{left:0;right:0;bottom:auto;top:44px}
.yta-pause .yta-gone-msg{color:#ddd}

/* ---- Small players (the miniplayer, phones): a compact overlay; fullscreen and theater just scale ------------ */
.yt-ad-slot{container-type:size}
@container (max-width:520px){
  .yta-card{left:8px;right:8px;bottom:36px;max-width:none;padding:4px 6px}
  .yta-card-av,.yta-card-url{display:none}
  .yta-card-text strong{font-size:12px}
  .yta-cta{height:28px;line-height:28px;padding:0 10px;font-size:12px}
  .yta-skip,.yta-noskip{bottom:72px;min-width:72px;height:32px;padding:0 10px;font-size:13px}
  .yta-bar{left:8px;bottom:8px;font-size:12px}
  .yta-mute{top:6px;right:6px;width:30px;height:30px}
  .yta-pause{width:min(220px,60%);right:8px;top:8px;padding:6px}
  .yta-pause-media{display:none}
}
@container (max-width:340px){ .yta-card{display:none} .yta-skip,.yta-noskip{bottom:36px} }
@media (max-width:1000px){ .yt-ad-companion{display:none} }   /* the companion banner is a desktop surface */

/* A small player (phone, miniplayer): the ad menu is a bottom sheet over the page. */
.yta-sheet-bg{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.4)}
.yta-menu.is-sheet{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:2147483001;min-width:0;max-width:none;border-radius:12px 12px 0 0;
  padding-bottom:max(8px,env(safe-area-inset-bottom))}
.yta-menu.is-sheet button,.yta-menu.is-sheet a{min-height:48px;font-size:15px}