/*
 * SCloud YouTube Video Downloader — front-end styles.
 * Red-accent theme (#d62828) matching the audio downloader, with a live wave
 * progress bar, an inline YouTube stream player, and a polished result card.
 */
.scloud-yvd {
  --yt-red: #d62828;
  --yt-red-dark: #b81f1f;
  --yt-dark: #121212;
  --yt-ink: #23262b;
  --yt-muted: #5b616b;
  --yt-faint: #8a9099;
  --yt-line: #e6e8ec;
  --yt-bg: #f6f7f9;
  --yt-card: #ffffff;
  --yt-chip: #f0f1f3;
  --yt-track: #eceef1;
  --yt-err-bg: #fff4f4;
  --yt-err-line: #f3caca;
  --yt-err-ink: #a11c1c;
  --yt-shadow: rgba(18,18,18,.07);
  width: min(1000px, calc(100vw - 32px));
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px 18px 56px;
  border-radius: 22px;
  transition: background .2s ease;
  box-sizing: border-box;
  color: var(--yt-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.scloud-yvd *, .scloud-yvd *::before, .scloud-yvd *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* WordPress constrained content layouts can override a shortcode's max-width.
   Break out around the parent centre on desktop, with viewport gutters. */
section.scloud-yvd[data-scloud-youtube-video-downloader] {
  width: min(1000px, calc(100vw - 32px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: calc(50% - min(500px, calc(50vw - 16px))) !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  section.scloud-yvd[data-scloud-youtube-video-downloader] {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}
.scloud-yvd [hidden] { display: none !important; }

/* Hero */
.scloud-yvd__hero { text-align: center; margin: 0 auto 26px; }
.scloud-yvd__eyebrow { color: var(--yt-red); font: 800 11px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.scloud-yvd__title { margin: 10px 0; color: var(--yt-ink); font-family: Inter, Arial, sans-serif; font-size: clamp(30px, 5.5vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.scloud-yvd__subtitle { max-width: 44em; margin: 0 auto; color: var(--yt-muted); font-size: 17px; line-height: 1.5; }

/* Search card */
.scloud-yvd__card { border: 1px solid var(--yt-line); border-radius: 18px; background: var(--yt-card); padding: clamp(18px, 3vw, 28px); box-shadow: 0 18px 48px rgba(18,18,18,.07); }
.scloud-yvd__search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--yt-line); border-radius: 14px; background: var(--yt-bg); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.scloud-yvd__search:focus-within { border-color: var(--yt-red); background: #fff; box-shadow: 0 0 0 4px rgba(214,40,40,.10); }
.scloud-yvd__search-ico { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--yt-red); color: #fff; font-size: 11px; }
.scloud-yvd__url { flex: 1 1 auto; min-width: 0; height: 50px; border: 0; background: transparent; color: var(--yt-ink); font: 500 15px Inter, Arial, sans-serif; outline: none; }
.scloud-yvd__go { flex: 0 0 auto; height: 50px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--yt-red); color: #fff; font: 800 15px Inter, sans-serif; cursor: pointer; transition: background .16s ease, transform .06s ease; }
.scloud-yvd__go:hover { background: var(--yt-red-dark); }
.scloud-yvd__go:active { transform: translateY(1px); }
.scloud-yvd__go[disabled] { opacity: .6; cursor: default; }

.scloud-yvd__usage { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--yt-muted); font-size: 13px; }
.scloud-yvd__usage-plan { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--yt-chip); color: var(--yt-ink); font-style: normal; font-weight: 700; font-size: 12px; }
.scloud-yvd__feedback { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--yt-err-bg); border: 1px solid var(--yt-err-line); color: var(--yt-err-ink); font-size: 14px; white-space: pre-line; }

/* Locked state */
.scloud-yvd__locked { text-align: center; }
.scloud-yvd__locked-title { font: 800 20px Inter, sans-serif; margin: 0 0 8px; }
.scloud-yvd__locked-text { color: var(--yt-muted); margin: 0 0 18px; }
.scloud-yvd__locked .scloud-yvd__go { display: inline-block; height: auto; padding: 13px 26px; text-decoration: none; line-height: 1.2; }

/* Result card */
.scloud-yvd__result { margin-top: 22px; }
.scloud-yvd__vid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; border: 1px solid var(--yt-line); border-radius: 16px; background: var(--yt-card); padding: 16px; box-shadow: 0 12px 32px rgba(18,18,18,.06); }
.scloud-yvd__thumb { position: relative; flex: 0 0 auto; width: 230px; max-width: 42%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #eee; }
.scloud-yvd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scloud-yvd__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(0,0,0,.28); color: #fff; cursor: pointer; transition: background .16s ease; }
.scloud-yvd__play span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(214,40,40,.92); font-size: 18px; padding-left: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.scloud-yvd__play:hover { background: rgba(0,0,0,.14); }
.scloud-yvd__meta { flex: 1 1 0; min-width: 0; }
.scloud-yvd__quality-panel { flex: 0 0 100%; min-width: 0; width: 100%; }
.scloud-yvd__vid-title { margin: 0 0 4px; font: 800 18px/1.3 Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__vid-sub { margin: 0 0 12px; color: var(--yt-muted); font-size: 13px; }
.scloud-yvd__toolbar { margin: 0 0 14px; }
.scloud-yvd__listen { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid var(--yt-line); border-radius: 10px; background: var(--yt-bg); color: var(--yt-ink); font: 800 13px Inter, sans-serif; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.scloud-yvd__listen:hover { border-color: var(--yt-red); }
.scloud-yvd__listen.is-playing { background: var(--yt-red); color: #fff; border-color: var(--yt-red); }

.scloud-yvd__q-label { font: 800 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--yt-faint); margin-bottom: 8px; }
.scloud-yvd .scloud-yvd__qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.scloud-yvd .scloud-yvd__q { display: grid; grid-template-columns: auto 1fr 26px; grid-template-rows: auto auto; align-items: center; column-gap: 7px; row-gap: 7px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 76px; margin: 0; padding: 13px 14px; border: 1px solid var(--yt-line); border-radius: 12px; background: var(--yt-card); color: var(--yt-ink); font: 800 14px/1.2 Inter, sans-serif; text-align: start; text-transform: none; letter-spacing: normal; box-shadow: 0 2px 5px rgba(18,18,18,.025); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.scloud-yvd .scloud-yvd__q:hover:not(:disabled) { border-color: var(--yt-red); background: var(--yt-card); box-shadow: 0 4px 12px rgba(214,40,40,.10); transform: translateY(-1px); }
.scloud-yvd .scloud-yvd__q:focus-visible { outline: 2px solid var(--yt-red); outline-offset: 3px; }
.scloud-yvd__q:active { transform: translateY(1px); }
.scloud-yvd__q[disabled] { opacity: .5; cursor: default; }
.scloud-yvd .scloud-yvd__q-res { grid-column: 1; grid-row: 1; line-height: 1; white-space: nowrap; }
.scloud-yvd__q .tag { font-size: 9px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--yt-dark); padding: 2px 5px; border-radius: 5px; }
.scloud-yvd .scloud-yvd__q .tag { grid-column: 2; grid-row: 1; justify-self: start; line-height: 1.2; }
.scloud-yvd__q .tag--hd { background: var(--yt-red); }
.scloud-yvd .scloud-yvd__q-size { grid-column: 1 / 3; grid-row: 2; color: var(--yt-muted); font: 400 12px/1.2 Inter, Arial, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scloud-yvd .scloud-yvd__q-dl { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 30px; border-radius: 8px; background: var(--yt-bg); color: var(--yt-red); font-size: 16px; }
.scloud-yvd__q:hover .scloud-yvd__q-dl { color: var(--yt-red); }

/* Inline player */
.scloud-yvd__embed { margin-top: 14px; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.scloud-yvd__iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Progress panel with wave bar */
.scloud-yvd__progress { margin-top: 16px; }
.scloud-yvd__pg { border: 1px solid var(--yt-line); border-radius: 14px; background: var(--yt-card); padding: 14px 16px; box-shadow: 0 10px 26px rgba(18,18,18,.05); }
.scloud-yvd__pg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.scloud-yvd__pg-head strong { font: 800 14px Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__pg-q { padding: 2px 8px; border-radius: 999px; background: var(--yt-chip); font: 800 11px Inter, sans-serif; color: var(--yt-muted); }
.scloud-yvd__pg-x { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--yt-chip); color: var(--yt-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.scloud-yvd__pg-x:hover { background: var(--yt-line); color: var(--yt-ink); }
.scloud-yvd__pg-sub { margin-top: 8px; color: var(--yt-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Water-wave progress bar: the red fill grows to the % and its surface ripples
   with two scrolling wave crests. */
.scloud-yvd__wave { position: relative; height: 20px; border-radius: 999px; background: var(--yt-track); overflow: hidden; }
.scloud-yvd__wave > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #ff5a5a, var(--yt-red));
  transition: width .3s ease;
}
/* Two moving wave crests layered over the fill for a liquid look. */
.scloud-yvd__wave > i::before,
.scloud-yvd__wave > i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 300%;
  background-repeat: repeat-x; background-position: 0 center; background-size: 40px 100%;
}
.scloud-yvd__wave > i::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M0%208%20Q10%202%2020%208%20T40%208%20V20%20H0%20Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.35%22%2F%3E%3C%2Fsvg%3E"); animation: scloud-yvd-wave 1.1s linear infinite; }
.scloud-yvd__wave > i::after  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M0%208%20Q10%202%2020%208%20T40%208%20V20%20H0%20Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E"); background-position: -20px center; animation: scloud-yvd-wave 1.9s linear infinite reverse; }
.scloud-yvd__wave:not(.is-active) > i::before,
.scloud-yvd__wave:not(.is-active) > i::after { animation-play-state: paused; }
@keyframes scloud-yvd-wave { to { transform: translateX(-40px); } }
/* Indeterminate: unknown total → a filled band with waves sweeps across. */
.scloud-yvd__wave.is-indeterminate > i { width: 42% !important; animation: scloud-yvd-indet 1.5s ease-in-out infinite; }
@keyframes scloud-yvd-indet { 0% { left: -42%; } 100% { left: 100%; } }

.scloud-yvd__spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: scloud-yvd-spin .7s linear infinite; vertical-align: -2px; }
@keyframes scloud-yvd-spin { to { transform: rotate(360deg); } }

/* Steps */
.scloud-yvd__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.scloud-yvd__how { text-align: center; padding: 18px 12px; border: 1px solid var(--yt-line); border-radius: 14px; background: var(--yt-card); }
.scloud-yvd__how-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yt-red); color: #fff; font: 800 14px Inter, sans-serif; margin-bottom: 8px; }
.scloud-yvd__how p { margin: 0; color: var(--yt-muted); font-size: 14px; }

@media (max-width: 640px) {
  .scloud-yvd .scloud-yvd__qs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scloud-yvd__search { flex-wrap: wrap; }
  .scloud-yvd__url { width: 100%; }
  .scloud-yvd__go { width: 100%; }
  .scloud-yvd__vid { flex-direction: column; }
  .scloud-yvd__meta { flex: 0 0 auto; width: 100%; }
  .scloud-yvd__quality-panel { flex: 0 0 auto; }
  .scloud-yvd__thumb { width: 100%; max-width: 100%; }
  .scloud-yvd__steps { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .scloud-yvd .scloud-yvd__qs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .scloud-yvd .scloud-yvd__q { transition: none; }
}

/* ── Theme toggle (top-right) ─────────────────────────────────────────── */
.scloud-yvd__topbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.scloud-yvd__theme { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1.5px solid var(--yt-line); border-radius: 999px; background: var(--yt-card); color: var(--yt-ink); font: 800 12px Inter, sans-serif; cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.scloud-yvd__theme:hover { border-color: var(--yt-red); }
.scloud-yvd__theme-ico { font-size: 14px; line-height: 1; }

/* ── Dark mode: EXPLICIT toggle only ──────────────────────────────────────
   (No "follow system theme" fallback — that used to darken the card while a
   light theme kept the page white, which looked broken. The card now stays
   light until the user presses the dark-mode button.) */
.scloud-yvd.is-dark,
/* Pre-paint theme: the boot script adds html.scloud-yvd-dark before first paint
   so the tool is dark immediately (no light→dark flash on refresh). */
html.scloud-yvd-dark .scloud-yvd[data-scloud-youtube-video-downloader] {
  --yt-ink: #eef0f3; --yt-muted: #a7adb7; --yt-faint: #7f8794;
  --yt-line: #2a2f37; --yt-bg: #171a1f; --yt-card: #1e2228;
  --yt-chip: #2a2f37; --yt-track: #2a2f37;
  --yt-err-bg: #3a1e1e; --yt-err-line: #5a2a2a; --yt-err-ink: #ffb4b4;
  --yt-shadow: rgba(0,0,0,.4);
  background: #0e1116;
}

/* Pre-paint direction: the boot script adds html.scloud-yvd-rtl before first
   paint so an RTL language (Urdu/Arabic) renders right-to-left from the start;
   the footer engine then sets dir="rtl" on the same roots to match (no flip). */
html.scloud-yvd-rtl .scloud-yvd[data-scloud-youtube-video-downloader] { direction: rtl; }

/* ── Limit / upgrade popup ────────────────────────────────────────────── */
.scloud-yvd__modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(10,12,16,.55); opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(2px); }
.scloud-yvd__modal.is-open { opacity: 1; }
.scloud-yvd__modal-card { position: relative; width: min(420px, 100%); border-radius: 18px; background: var(--yt-card); color: var(--yt-ink); border: 1px solid var(--yt-line); box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 30px 26px 24px; text-align: center; transform: translateY(10px) scale(.98); transition: transform .2s ease; }
.scloud-yvd__modal.is-open .scloud-yvd__modal-card { transform: none; }
.scloud-yvd__modal-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--yt-chip); color: var(--yt-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.scloud-yvd__modal-x:hover { background: var(--yt-line); color: var(--yt-ink); }
.scloud-yvd__modal-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(214,40,40,.12); color: var(--yt-red); font-size: 26px; }
.scloud-yvd__modal-title { margin: 0 0 8px; font: 800 20px/1.25 Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__modal-text { margin: 0 0 16px; color: var(--yt-muted); font-size: 14.5px; line-height: 1.5; }
.scloud-yvd__modal-plan { display: inline-block; margin: 0 0 16px; padding: 4px 12px; border-radius: 999px; background: var(--yt-chip); color: var(--yt-muted); font: 700 12px Inter, sans-serif; }
.scloud-yvd__modal-cta { display: block; width: 100%; height: auto; padding: 14px 20px; text-decoration: none; line-height: 1.2; text-align: center; }
.scloud-yvd__modal-sec { display: block; width: 100%; margin-top: 10px; padding: 11px; border: 0; background: transparent; color: var(--yt-muted); font: 700 13px Inter, sans-serif; cursor: pointer; border-radius: 10px; }
.scloud-yvd__modal-sec:hover { background: var(--yt-bg); color: var(--yt-ink); }

/* ════════════════════════════════════════════════════════════════════════
   Y2Mate-style layout  (header nav + overlapping search card)
   Added for the redesigned front end. Header stays dark in both page themes;
   the theme toggle switches the WHOLE page via <html class="scloud-yvd-dark">.
   ════════════════════════════════════════════════════════════════════════ */

/* Let the redesigned section span the full container width (override the
   constrained-layout rule above). */
section.scloud-yvd.scloud-yvd--y2[data-scloud-youtube-video-downloader] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  padding: 0 0 56px !important;
  border-radius: 0 !important;
  background: transparent;
}
.scloud-yvd--y2 .scloud-yvd__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Dark header bar (full-bleed) ─────────────────────────────────────── */
.scloud-yvd--y2 .scloud-yvd__nav {
  width: 100vw;
  /* Full-bleed to the viewport. Both margins are set so the trick is
     direction-agnostic: LTR honours margin-left and RTL honours margin-right
     (the over-constrained side is ignored), so the dark band spans the whole
     width in Urdu / Arabic too — not shifted left with a white gap. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #121212;
  color: #fff;
  padding: 0 0 96px;
}
.scloud-yvd--y2 .scloud-yvd__nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #333;
  display: grid;
  align-items: center;
  column-gap: 16px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "brand .    pill"
    "menu  menu menu"
    "mm    mm   mm";
}

/* Brand / logo (swap for an <img> in the PHP) */
.scloud-yvd--y2 .scloud-yvd__brand {
  grid-area: brand;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff;
}
.scloud-yvd--y2 .scloud-yvd__brand-ico {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 0; background: transparent; color: var(--yt-red);
}
.scloud-yvd--y2 .scloud-yvd__brand-text {
  font: 800 24px/1 Inter, sans-serif; letter-spacing: -.03em; color: #fff;
}

/* Primary menu — centered second row */
.scloud-yvd--y2 .scloud-yvd__menu {
  grid-area: menu; justify-self: center;
  display: flex; align-items: center; gap: 30px;
  margin-top: 14px;
}
.scloud-yvd--y2 .scloud-yvd__menu-link {
  color: #c7cad1; text-decoration: none;
  font: 600 15px/1 Inter, sans-serif;
  padding: 10px 6px; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.scloud-yvd--y2 .scloud-yvd__menu-link:hover,
.scloud-yvd--y2 .scloud-yvd__menu-link.is-active { color: #fff; }

/* ── Tool-switcher pill (desktop): tool tabs + language + theme in one bar ── */
.scloud-yvd--y2 .scloud-yvd__pill {
  grid-area: pill; justify-self: end;
  display: flex; align-items: center; gap: 6px;
  background: #1a1a1a; border: 1px solid #2b2b2b; border-radius: 16px; padding: 6px;
}
.scloud-yvd--y2 .scloud-yvd__tabs { display: flex; align-items: center; gap: 2px; }
.scloud-yvd--y2 .scloud-yvd__tab {
  border: 0; background: transparent; color: #b9bdc5; cursor: pointer;
  font: 700 14px Inter, sans-serif; padding: 10px 14px; border-radius: 10px;
  white-space: nowrap; transition: color .15s ease, background .15s ease;
}
.scloud-yvd--y2 .scloud-yvd__tab:hover { color: #fff; }
.scloud-yvd--y2 .scloud-yvd__tab.is-active { color: #fff; background: #2a2a2a; }
.scloud-yvd--y2 .scloud-yvd__pill-sep { flex: 0 0 auto; width: 1px; height: 24px; background: #333; margin: 0 4px; }
.scloud-yvd--y2 .scloud-yvd__pill-menu {
  display: none; align-items: center; gap: 9px; border: 0; background: transparent;
  color: #fff; cursor: pointer; font: 700 14px Inter, sans-serif; padding: 10px 12px; border-radius: 10px;
}
.scloud-yvd--y2 .scloud-yvd__pill-burger { display: inline-flex; flex-direction: column; gap: 3px; }
.scloud-yvd--y2 .scloud-yvd__pill-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }

/* Mobile "all pages" dropdown (opened by the pill Menu button) */
.scloud-yvd--y2 .scloud-yvd__mobilemenu {
  grid-area: mm; margin-top: 12px; display: flex; flex-direction: column; gap: 2px;
  background: #1a1a1a; border: 1px solid #2b2b2b; border-radius: 14px; padding: 8px;
}
.scloud-yvd--y2 .scloud-yvd__mm-head { margin: 10px 10px 4px; color: #7f8794; font: 700 11px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.scloud-yvd--y2 .scloud-yvd__mm-item,
.scloud-yvd--y2 .scloud-yvd__mm-link {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: #c7cad1; cursor: pointer; font: 600 15px Inter, sans-serif; padding: 11px 12px; border-radius: 9px; text-decoration: none;
}
.scloud-yvd--y2 .scloud-yvd__mm-item:hover,
.scloud-yvd--y2 .scloud-yvd__mm-link:hover { background: #242424; color: #fff; }
.scloud-yvd--y2 .scloud-yvd__mm-item.is-active { color: #fff; background: #2a2a2a; }
@media (min-width: 861px) { .scloud-yvd--y2 .scloud-yvd__mobilemenu { display: none !important; } }
.scloud-yvd--y2 .scloud-yvd__nav .scloud-yvd__lang .scloud-yvd__lang-btn {
  background: #202020 !important; border: 1px solid #2e2e2e !important; color: #e9e9e9 !important;
  height: 40px; padding: 0 12px !important; gap: 7px; border-radius: 10px !important;
  font: 700 14px Inter, sans-serif !important;
}
.scloud-yvd--y2 .scloud-yvd__nav .scloud-yvd__lang .scloud-yvd__lang-btn:hover {
  border-color: var(--yt-red) !important; color: #fff !important;
}
.scloud-yvd--y2 .scloud-yvd__nav .scloud-yvd__lang-ico { display: none !important; }
.scloud-yvd--y2 .scloud-yvd__nav .scloud-yvd__lang-caret {
  display: inline-flex; align-items: center; color: #cfcfcf;
}
.scloud-yvd--y2 .scloud-yvd__theme {
  width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center;
  border-radius: 10px; border: 1px solid #343434; background: #242424; color: #dcdcdc;
}
.scloud-yvd--y2 .scloud-yvd__theme:hover { border-color: var(--yt-red); color: #fff; }
.scloud-yvd--y2 .scloud-yvd__theme-ico { display: inline-flex; align-items: center; justify-content: center; }

/* Hamburger (mobile only) */
.scloud-yvd--y2 .scloud-yvd__burger {
  grid-area: burger; justify-self: center;
  display: none; width: 44px; height: 44px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid #2e2e2e; border-radius: 11px; background: #202020; cursor: pointer;
}
.scloud-yvd--y2 .scloud-yvd__burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: #eceef1;
  transition: transform .2s ease, opacity .2s ease;
}
.scloud-yvd--y2 .scloud-yvd__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.scloud-yvd--y2 .scloud-yvd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.scloud-yvd--y2 .scloud-yvd__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Stage: pulls the card up so it overlaps the dark header ───────────── */
.scloud-yvd--y2 .scloud-yvd__stage {
  position: relative; z-index: 2;
  max-width: 1040px; margin: -72px auto 0; padding: 0 20px;
}

/* ── Search card ──────────────────────────────────────────────────────── */
.scloud-yvd--y2 .scloud-yvd__card--y2 {
  max-width: none; margin: 0 auto;
  border: 1px solid #ececec; border-radius: 20px;
  background: var(--yt-card);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 20px 50px rgba(2, 6, 23, .12);
}
.scloud-yvd--y2 .scloud-yvd__card-title {
  margin: 0 0 6px; color: var(--yt-ink);
  font: 700 18px/1.35 Inter, sans-serif;
}
.scloud-yvd--y2 .scloud-yvd__card-sub {
  margin: 0 0 18px; color: var(--yt-muted); font: 400 14px/1.5 Inter, sans-serif;
}
.scloud-yvd--y2 .scloud-yvd__search-wrap { display: block; }
.scloud-yvd--y2 .scloud-yvd__search {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 18px;
  border: 1.5px solid transparent; border-radius: 14px;
  background: #f5f5f5;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.scloud-yvd--y2 .scloud-yvd__search:focus-within {
  border-color: var(--yt-red); background: var(--yt-card);
  box-shadow: 0 0 0 4px rgba(214, 40, 40, .10);
}
.scloud-yvd--y2 .scloud-yvd__search-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 0; background: transparent; color: #9aa0a8;
}
.scloud-yvd--y2 .scloud-yvd__search-ico svg { display: block; }
.scloud-yvd--y2 .scloud-yvd__url {
  flex: 1 1 auto; min-width: 0; height: 56px; border: 0; background: transparent;
  color: var(--yt-ink); font: 500 16px Inter, sans-serif; outline: none;
}
.scloud-yvd--y2 .scloud-yvd__url::placeholder { color: #9aa0a8; opacity: 1; }
.scloud-yvd--y2 .scloud-yvd__paste {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0; line-height: 0;
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 10px; background: transparent; color: #9aa0a8;
  cursor: pointer; transition: color .15s ease, background .15s ease;
}
.scloud-yvd--y2 .scloud-yvd__paste svg { display: block; }
.scloud-yvd--y2 .scloud-yvd__paste:hover { color: var(--yt-red); background: rgba(214, 40, 40, .08); }
.scloud-yvd--y2 .scloud-yvd__paste.is-ok { color: #1a9c54; }

/* Voice search (mic) — matches the paste button; shown only when the browser
   supports speech recognition (the JS un-hides it). */
.scloud-yvd--y2 .scloud-yvd__mic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0; line-height: 0;
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 10px; background: transparent; color: #9aa0a8;
  cursor: pointer; transition: color .15s ease, background .15s ease;
}
.scloud-yvd--y2 .scloud-yvd__mic[hidden] { display: none; }
.scloud-yvd--y2 .scloud-yvd__mic svg { display: block; }
.scloud-yvd--y2 .scloud-yvd__mic:hover { color: var(--yt-red); background: rgba(214, 40, 40, .08); }
.scloud-yvd--y2 .scloud-yvd__mic.is-listening {
  color: #fff; background: var(--yt-red);
  animation: scloud-yvd-mic-pulse 1.3s ease-out infinite;
}
@keyframes scloud-yvd-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 40, 40, .45); }
  70%  { box-shadow: 0 0 0 8px rgba(214, 40, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .scloud-yvd--y2 .scloud-yvd__mic.is-listening { animation: none; }
}

/* Footer row: MP3/MP4 indicator (left) + Search button (right) */
.scloud-yvd--y2 .scloud-yvd__search-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 18px;
}
.scloud-yvd--y2 .scloud-yvd__fmt {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--yt-muted); font: 700 14px Inter, sans-serif;
}
.scloud-yvd--y2 .scloud-yvd__fmt-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--yt-red);
}
.scloud-yvd--y2 .scloud-yvd__search-foot .scloud-yvd__go {
  height: 54px; padding: 0 42px; border-radius: 10px; font-size: 15px;
}

/* Usage / feedback sit under the card body */
.scloud-yvd--y2 .scloud-yvd__card--y2 .scloud-yvd__usage { margin-top: 16px; }
.scloud-yvd--y2 .scloud-yvd__card--y2 .scloud-yvd__feedback { margin-top: 14px; }

/* Result + steps centered under the card */
.scloud-yvd--y2 .scloud-yvd__result,
.scloud-yvd--y2 .scloud-yvd__steps { max-width: none; margin-left: auto; margin-right: auto; }

/* Steps now live INSIDE the search card — divide them from the usage row and
   tint the boxes so they read as part of the card instead of floating below. */
.scloud-yvd--y2 .scloud-yvd__card--y2 .scloud-yvd__steps {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid #eef0f2;
}
.scloud-yvd--y2 .scloud-yvd__card--y2 .scloud-yvd__how {
  background: #f7f8fa; border-color: #eef0f2;
}

/* ── TEMP: hide the 3-step "how it works" block, and move the divider line so
   it sits ABOVE the usage row (0 videos downloaded / Unlimited) instead of
   above the now-hidden steps. To bring the steps back later, delete this block.
   Uses var(--yt-line) so the divider also looks right in dark mode. */
.scloud-yvd__steps { display: none !important; }
.scloud-yvd--y2 .scloud-yvd__card--y2 .scloud-yvd__usage {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--yt-line);
}

/* Locked card uses the same y2 card shell */
.scloud-yvd--y2 .scloud-yvd__card--y2.scloud-yvd__locked { text-align: center; }

/* ── Whole-page dark mode (driven by the theme button) ─────────────────────
   Covers the page + the common theme content wrappers (Kadence, blocks,
   generic #page/#content/main) so there is no white showing behind the card
   when dark mode is on. If a stubborn white strip remains on your theme,
   tell me its selector and I'll add it. */
html.scloud-yvd-dark,
html.scloud-yvd-dark body,
html.scloud-yvd-dark #page,
html.scloud-yvd-dark #wrapper,
html.scloud-yvd-dark #inner-wrap,
html.scloud-yvd-dark .site,
html.scloud-yvd-dark .site-container,
html.scloud-yvd-dark .site-content,
html.scloud-yvd-dark .content-bg,
html.scloud-yvd-dark .wp-site-blocks,
html.scloud-yvd-dark #content,
html.scloud-yvd-dark .content-area,
html.scloud-yvd-dark main,
html.scloud-yvd-dark .entry-content,
html.scloud-yvd-dark .entry-content-wrap { background: #0b0d11 !important; }
html.scloud-yvd-dark body { color: #e7e9ee; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .scloud-yvd--y2 .scloud-yvd__tabs { display: none; }
  .scloud-yvd--y2 .scloud-yvd__pill-menu { display: inline-flex; }
  .scloud-yvd--y2 .scloud-yvd__pill { gap: 2px; padding: 5px; }
  .scloud-yvd--y2 .scloud-yvd__menu { display: none; }
}
@media (max-width: 560px) {
  .scloud-yvd--y2 .scloud-yvd__nav-inner { padding: 14px 16px 14px; column-gap: 10px; }
  .scloud-yvd--y2 .scloud-yvd__brand-text { font-size: 20px; }
  .scloud-yvd--y2 .scloud-yvd__stage { padding: 0 16px; }
  .scloud-yvd--y2 .scloud-yvd__search-foot { flex-direction: column; align-items: stretch; }
  .scloud-yvd--y2 .scloud-yvd__search-foot .scloud-yvd__go { width: 100%; }
  .scloud-yvd--y2 .scloud-yvd__fmt { justify-content: center; }
}

/* Keep the search field as a SINGLE row on phones. The base theme wraps the
   field (magnifier / input / paste each onto their own line), which turned it
   into a tall, empty box on mobile — override that here. */
@media (max-width: 640px) {
  .scloud-yvd--y2 .scloud-yvd__search { flex-wrap: nowrap; padding: 5px 8px 5px 14px; gap: 8px; }
  .scloud-yvd--y2 .scloud-yvd__url { width: auto; height: 52px; font-size: 15px; }
  .scloud-yvd--y2 .scloud-yvd__search-ico { width: 20px; height: 20px; }
  .scloud-yvd--y2 .scloud-yvd__paste { width: 36px; height: 36px; }
  .scloud-yvd--y2 .scloud-yvd__mic { width: 36px; height: 36px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Site-wide header mode
   - .scloud-yvd--header : the Y2Mate bar rendered on every page (sticky top)
   - .scloud-yvd--tool   : the shortcode (search card only; nav comes from the
                           global header, so the card sits in normal flow)
   - body.scloud-yvd-hidehead : hides the theme's own header
   ════════════════════════════════════════════════════════════════════════ */

/* The global header wrapper is a plain full-width band. */
.scloud-yvd.scloud-yvd--header {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent;
}
/* Sticky dark bar — no overlap padding (that was only for the hero card). */
.scloud-yvd--header .scloud-yvd__nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 0 0 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

/* Shortcode card sits below the global header in normal flow. */
.scloud-yvd--tool { padding-top: 0 !important; }
.scloud-yvd--tool .scloud-yvd__stage { margin-top: 30px; }

/* Image logo support (when you set $logo_img in nav_html). */
.scloud-yvd__brand-img { display: block; height: 38px; width: auto; }

/* ── Tool page: pull the hero flush to the very top ───────────────────────
   The shortcode's full-bleed dark header is the first thing on the page, so
   remove the theme's content-area top padding/margin that would otherwise
   show as a white strip above the bar. Scoped to the tool page only. */
body.scloud-yvd-tool-page .entry-content-wrap,
body.scloud-yvd-tool-page .entry-content,
body.scloud-yvd-tool-page .single-content,
body.scloud-yvd-tool-page #main.site-main,
body.scloud-yvd-tool-page main#inner-wrap,
body.scloud-yvd-tool-page .content-area,
body.scloud-yvd-tool-page .content-container { padding-top: 0 !important; margin-top: 0 !important; }
body.scloud-yvd-tool-page .scloud-yvd--y2 .scloud-yvd__nav { margin-top: 0 !important; }

/* ── Hide the active theme's own header when the global bar is on ──────────
   Covers the most common theme header containers. If your theme's header
   still shows, tell me its CSS selector and I'll add it here. Our own bar is
   a nested <header class="scloud-yvd__nav"> (never a direct body child), so
   it is never affected by these rules. */
body.scloud-yvd-hidehead > header,
body.scloud-yvd-hidehead #masthead,
body.scloud-yvd-hidehead #site-header,
body.scloud-yvd-hidehead #header,
body.scloud-yvd-hidehead .site-header,
body.scloud-yvd-hidehead .site-header-wrapper,
body.scloud-yvd-hidehead .main-header,
body.scloud-yvd-hidehead header.site-header,
body.scloud-yvd-hidehead .l-header,
body.scloud-yvd-hidehead #top,
body.scloud-yvd-hidehead .top-bar,
body.scloud-yvd-hidehead .header-wrap,
body.scloud-yvd-hidehead .ast-main-header-bar-wrap,
body.scloud-yvd-hidehead .elementor-location-header { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   Result layout — video header + MP4 download table + side panel
   (shown after a link is fetched). Uses the same --yt-* tokens, so it follows
   the dark / light toggle automatically.
   ════════════════════════════════════════════════════════════════════════ */
.scloud-yvd { --yt-blue: #2563eb; --yt-blue-bg: #e9f0fe; --yt-safe-bg: #fdecec; }
.scloud-yvd.is-dark { --yt-blue: #8ab0ff; --yt-blue-bg: #1b2740; --yt-safe-bg: #3a1e1e; }

.scloud-yvd__rc {
  border: 1px solid var(--yt-line); border-radius: 18px; background: var(--yt-card);
  padding: clamp(14px, 2.4vw, 22px); box-shadow: 0 16px 40px var(--yt-shadow);
}
.scloud-yvd__rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.scloud-yvd__rc-col-main { min-width: 0; }
.scloud-yvd__rc-col-side { display: flex; flex-direction: column; gap: 14px; }

/* ── video header: player + info ──────────────────────────────────────── */
.scloud-yvd__rc-head {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start;
  padding-bottom: 20px; border-bottom: 1px solid var(--yt-line);
}
.scloud-yvd__rc-player { position: relative; min-width: 0; }
.scloud-yvd__rc-thumb, .scloud-yvd__rc-embed { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; }
.scloud-yvd__rc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scloud-yvd__rc-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.8); color: #fff; font: 700 12px/1 Inter, sans-serif; }
.scloud-yvd__rc-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(0,0,0,.18); cursor: pointer; transition: background .16s ease; }
.scloud-yvd__rc-play:hover { background: rgba(0,0,0,.30); }
.scloud-yvd__rc-play span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--yt-red); color: #fff; font-size: 22px; padding-left: 4px; box-shadow: 0 8px 22px rgba(0,0,0,.35); }

.scloud-yvd__rc-info { min-width: 0; }
.scloud-yvd__rc-title { margin: 2px 0 12px; font: 800 24px/1.25 Inter, sans-serif; color: var(--yt-ink); word-break: break-word; }
.scloud-yvd__rc-chan { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.scloud-yvd__rc-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #111; flex: 0 0 auto; }
.scloud-yvd__rc-chan-name { font: 700 15px Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__rc-stats { color: var(--yt-muted); font: 400 14px Inter, sans-serif; margin-bottom: 12px; }
.scloud-yvd__rc-desc { color: var(--yt-muted); font: 400 14px/1.6 Inter, sans-serif; }
.scloud-yvd__rc-desc-text { margin: 0; white-space: pre-line; }
.scloud-yvd__rc-desc.is-clamped .scloud-yvd__rc-desc-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scloud-yvd__rc-more { margin-top: 4px; border: 0; background: transparent; color: var(--yt-red); font: 700 14px Inter, sans-serif; cursor: pointer; padding: 2px 0; }

/* ── MP4 download options ─────────────────────────────────────────────── */
.scloud-yvd__rc-dl { padding-top: 18px; }
.scloud-yvd__rc-dl-head { display: flex; align-items: center; gap: 10px; }
.scloud-yvd__rc-yt { color: var(--yt-red); display: inline-flex; }
.scloud-yvd__rc-dl-title { margin: 0; font: 800 20px Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__rc-dl-sub { margin: 6px 0 14px; color: var(--yt-muted); font: 400 14px/1.5 Inter, sans-serif; }

.scloud-yvd__rc-table { width: 100%; }
.scloud-yvd__rc-tr { display: grid; grid-template-columns: 1.7fr 1fr .8fr 1.2fr; align-items: center; gap: 12px; padding: 14px 6px; border-bottom: 1px solid var(--yt-line); }
.scloud-yvd__rc-tr:last-child { border-bottom: 0; }
.scloud-yvd__rc-thead { padding: 0 6px 12px; }
.scloud-yvd__rc-thead .scloud-yvd__rc-cell { color: var(--yt-faint); font: 700 12px Inter, sans-serif; }
.scloud-yvd__rc-cell { min-width: 0; }
.scloud-yvd__rc-hd { display: none; }
.scloud-yvd__rc-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scloud-yvd__rc-q-pill { padding: 6px 15px; border-radius: 999px; background: var(--yt-chip); color: var(--yt-ink); font: 800 14px Inter, sans-serif; }
.scloud-yvd__rc-tag { padding: 3px 9px; border-radius: 6px; background: var(--yt-blue-bg); color: var(--yt-blue); font: 700 11px Inter, sans-serif; white-space: nowrap; }
.scloud-yvd__rc-size, .scloud-yvd__rc-fmt { color: var(--yt-muted); font: 500 14px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.scloud-yvd__rc-act { justify-self: start; width: 100%; }
.scloud-yvd__rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 172px; height: 44px; padding: 0 18px;
  border: 0; border-radius: 10px; background: var(--yt-red); color: #fff;
  font: 800 14px Inter, sans-serif; cursor: pointer;
  transition: background .16s ease, transform .06s ease, opacity .16s ease;
}
.scloud-yvd__rc-btn:hover:not(:disabled) { background: var(--yt-red-dark); }
.scloud-yvd__rc-btn:active { transform: translateY(1px); }
.scloud-yvd__rc-btn.is-busy { opacity: .7; cursor: default; }
.scloud-yvd__rc-btn.is-done { background: #1a9c54; }
.scloud-yvd__rc-note { margin: 16px 2px 0; padding: 11px 14px; border-radius: 10px; background: var(--yt-bg); border: 1px solid var(--yt-line); color: var(--yt-muted); font: 500 13px/1.5 Inter, sans-serif; }

/* ── side panel ───────────────────────────────────────────────────────── */
.scloud-yvd__rc-side-thumb { border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.scloud-yvd__rc-side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scloud-yvd__rc-thumb-dl {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 46px; border: 1.5px solid var(--yt-line); border-radius: 12px;
  background: var(--yt-card); color: var(--yt-ink); font: 700 14px Inter, sans-serif;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.scloud-yvd__rc-thumb-dl:hover:not(:disabled) { background: var(--yt-red) !important; border-color: var(--yt-red); color: #fff !important; }
.scloud-yvd__rc-thumb-dl:hover:not(:disabled) .scloud-yvd__rc-thumb-dl-img { color: #fff !important; }
.scloud-yvd__rc-thumb-dl[disabled] { opacity: .5; cursor: default; }
.scloud-yvd__rc-thumb-dl-img { margin-left: auto; color: var(--yt-faint); display: inline-flex; }

.scloud-yvd__rc-box { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; padding: 16px; border: 1px solid var(--yt-line); border-radius: 14px; background: var(--yt-card); }
.scloud-yvd__rc-box-ico { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.scloud-yvd__rc-box-body { min-width: 0; }
.scloud-yvd__rc-box-title { margin: 0 0 4px; font: 800 15px Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__rc-box-text { margin: 0; color: var(--yt-muted); font: 400 13px/1.5 Inter, sans-serif; }
.scloud-yvd__rc-box--safe { background: var(--yt-safe-bg); border-color: transparent; }
.scloud-yvd__rc-box--safe .scloud-yvd__rc-box-ico, .scloud-yvd__rc-box--safe .scloud-yvd__rc-box-title { color: var(--yt-red); }
.scloud-yvd__rc-box--convert { cursor: pointer; align-items: center; transition: border-color .15s ease, box-shadow .15s ease; }
.scloud-yvd__rc-box--convert:hover { border-color: var(--yt-red); box-shadow: 0 6px 16px rgba(214,40,40,.08); }
.scloud-yvd__rc-box--convert .scloud-yvd__rc-box-ico { color: var(--yt-ink); }
.scloud-yvd__rc-chev { margin-left: auto; color: var(--yt-faint); font-size: 24px; line-height: 1; }
.scloud-yvd__rc-box--help .scloud-yvd__rc-box-ico { color: #1d1f24; }
.scloud-yvd.is-dark .scloud-yvd__rc-box--help .scloud-yvd__rc-box-ico { color: #4a5160; }
.scloud-yvd__rc-faq { display: inline-block; margin-top: 8px; color: var(--yt-red); font: 700 13px Inter, sans-serif; text-decoration: none; }
.scloud-yvd__rc-faq:hover { text-decoration: underline; }

/* ── Result cards: readable under ANY page theme + mobile friendly ─────────
   The convert/help cards are <button>s, so a page theme can paint them with
   its own background/colour — that turned the "Convert another video" card
   solid blue with unreadable dark text. Force the plugin's own surface and
   text in BOTH light and dark, then tighten the cards on small screens. */
.scloud-yvd .scloud-yvd__rc-box { background: var(--yt-card) !important; }
.scloud-yvd .scloud-yvd__rc-box--safe { background: var(--yt-safe-bg) !important; }
.scloud-yvd .scloud-yvd__rc-box-title { color: var(--yt-ink) !important; }
.scloud-yvd .scloud-yvd__rc-box-text  { color: var(--yt-muted) !important; }
.scloud-yvd .scloud-yvd__rc-box--safe .scloud-yvd__rc-box-title { color: var(--yt-red) !important; }
@media (max-width: 640px) {
  .scloud-yvd__rc-box { padding: 14px; gap: 10px; border-radius: 12px; align-items: center; }
  .scloud-yvd__rc-box-title { font-size: 14px; }
  .scloud-yvd__rc-box-text  { font-size: 12.5px; line-height: 1.45; }
  .scloud-yvd__rc-chev { font-size: 20px; }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .scloud-yvd__rc-grid { grid-template-columns: minmax(0, 1fr); }
  /* Below the main column the side panel becomes a wrapping row: the big
     thumbnail and its download button span full width, and the three info
     cards share the row 2-up so nothing stretches awkwardly. */
  .scloud-yvd__rc-col-side { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .scloud-yvd__rc-col-side > * { flex: 1 1 260px; }
  .scloud-yvd__rc-side-thumb,
  .scloud-yvd__rc-thumb-dl { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 640px) {
  .scloud-yvd__rc-head { grid-template-columns: minmax(0, 1fr); }
  .scloud-yvd__rc-title { font-size: 20px; }
  .scloud-yvd__rc-col-side { flex-direction: column; }
  .scloud-yvd__rc-thead { display: none; }
  .scloud-yvd__rc-tr { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 16px 4px; }
  .scloud-yvd__rc-q, .scloud-yvd__rc-act { grid-column: 1 / -1; }
  .scloud-yvd__rc-fmt { justify-self: end; }
  .scloud-yvd__rc-btn { max-width: none; }
  .scloud-yvd__rc-hd { display: inline-block; margin-right: 6px; color: var(--yt-faint); font-weight: 700; }
}

/* ════════════════════════════════════════════════════════════════════════
   Keyword search — autocomplete suggestions + results grid
   ════════════════════════════════════════════════════════════════════════ */
.scloud-yvd__suggest-anchor { position: relative; }
.scloud-yvd__suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--yt-card); border: 1px solid var(--yt-line); border-radius: 12px;
  box-shadow: 0 16px 40px var(--yt-shadow); padding: 6px; max-height: 340px; overflow: auto;
}
.scloud-yvd__suggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--yt-ink); cursor: pointer;
  padding: 10px 12px; border-radius: 9px; font: 500 15px Inter, sans-serif;
}
.scloud-yvd__suggest-item:hover, .scloud-yvd__suggest-item.is-active { background: var(--yt-bg); }
.scloud-yvd__suggest-ico { color: var(--yt-faint); display: inline-flex; flex: 0 0 auto; }
.scloud-yvd__suggest-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Text-contrast fixes ───────────────────────────────────────────────────
   1) Suggestion text must stay readable on hover / keyboard-active in BOTH
      themes. The items are <button>s, so a page theme's `button:hover { color }`
      can otherwise win and wash the text out. Force the plugin's ink colour.
   2) Dark mode: the y2 search pill background is hardcoded light (#f5f5f5) and
      did not flip, so the (now light) input text vanished on it. Make the pill
      dark in dark mode so the text shows. */
.scloud-yvd .scloud-yvd__suggest-item,
.scloud-yvd .scloud-yvd__suggest-item:hover,
.scloud-yvd .scloud-yvd__suggest-item:focus,
.scloud-yvd .scloud-yvd__suggest-item.is-active { color: var(--yt-ink) !important; }
.scloud-yvd .scloud-yvd__suggest-item:hover .scloud-yvd__suggest-txt,
.scloud-yvd .scloud-yvd__suggest-item.is-active .scloud-yvd__suggest-txt { color: var(--yt-ink) !important; }

html.scloud-yvd-dark .scloud-yvd--y2 .scloud-yvd__search,
.scloud-yvd.is-dark .scloud-yvd--y2 .scloud-yvd__search { background: var(--yt-chip); }
html.scloud-yvd-dark .scloud-yvd--y2 .scloud-yvd__url,
.scloud-yvd.is-dark .scloud-yvd--y2 .scloud-yvd__url { color: var(--yt-ink); }

/* 3) The red Search button's label must stay white in EVERY page theme. A
      theme's dark-mode `button { color }` can otherwise win and make the
      "Search" text vanish on the red button. The button is always red, so
      white is always correct. */
.scloud-yvd .scloud-yvd__go { color: #fff !important; }

.scloud-yvd__fr-head { margin-bottom: 14px; }
.scloud-yvd__fr-h { margin: 0 0 2px; font: 800 18px Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__fr-note { margin: 0; color: var(--yt-muted); font: 400 14px Inter, sans-serif; }
.scloud-yvd__fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.scloud-yvd__fr-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%;
  border: 1px solid var(--yt-line); border-radius: 14px; background: var(--yt-card);
  padding: 10px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.scloud-yvd__fr-card:hover { background: var(--yt-red) !important; border-color: var(--yt-red); box-shadow: 0 10px 24px rgba(214,40,40,.28); transform: translateY(-2px); }
/* On hover the whole card turns red, so its text flips to white for contrast. */
.scloud-yvd__fr-card:hover .scloud-yvd__fr-title,
.scloud-yvd__fr-card:hover .scloud-yvd__fr-sub { color: #fff !important; }
.scloud-yvd__fr-thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; }
.scloud-yvd__fr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scloud-yvd__fr-dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.8); color: #fff; font: 700 11px Inter, sans-serif; }
.scloud-yvd__fr-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(214,40,40,.92); color: #fff; opacity: 0; transition: opacity .15s ease; }
.scloud-yvd__fr-card:hover .scloud-yvd__fr-play { opacity: 1; }
.scloud-yvd__fr-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scloud-yvd__fr-title { font: 700 14px/1.35 Inter, sans-serif; color: var(--yt-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scloud-yvd__fr-sub { color: var(--yt-muted); font: 400 12.5px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scloud-yvd__fr-empty { margin: 0; padding: 22px; text-align: center; color: var(--yt-muted); font: 500 15px Inter, sans-serif; }
@media (max-width: 480px) {
  .scloud-yvd__fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scloud-yvd__fr-title { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Download loader toast
   Appears the moment a Download button is pressed and stays up while the
   server signs the link — so the visitor knows the process has started.
   It auto-dismisses once the browser takes over the transfer. The card can
   be minimised to a small spinning puck or closed outright. Uses the --yt-*
   tokens so it follows the light / dark toggle.
   ════════════════════════════════════════════════════════════════════════ */
.scloud-yvd__dl-loader {
  position: fixed; right: 20px; bottom: 20px; z-index: 100001;
  opacity: 0; transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.scloud-yvd__dl-loader.is-open { opacity: 1; transform: none; }
.scloud-yvd__dl-loader-card {
  display: flex; align-items: center; gap: 12px;
  width: min(340px, calc(100vw - 32px));
  padding: 14px 14px 14px 16px; border-radius: 16px;
  background: var(--yt-card); color: var(--yt-ink);
  border: 1px solid var(--yt-line); box-shadow: 0 18px 44px rgba(0,0,0,.28);
  transition: width .18s ease, padding .18s ease, border-radius .18s ease;
}
.scloud-yvd__dl-loader-body { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.scloud-yvd__dl-loader-spin {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--yt-track); border-top-color: var(--yt-red);
  animation: scloud-yvd-spin .7s linear infinite;
}
.scloud-yvd__dl-loader-spin.is-done {
  border: 0; background: #1a9c54; color: #fff; animation: none;
  display: grid; place-items: center; font: 800 15px/1 Inter, sans-serif;
}
.scloud-yvd__dl-loader-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scloud-yvd__dl-loader-title { font: 800 14px Inter, sans-serif; color: var(--yt-ink); }
.scloud-yvd__dl-loader-sub { font: 500 12.5px Inter, sans-serif; color: var(--yt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scloud-yvd__dl-loader-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: 6px; align-self: flex-start; }
.scloud-yvd__dl-loader-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
  border: 0; border-radius: 9px; background: var(--yt-chip); color: var(--yt-muted);
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.scloud-yvd__dl-loader-btn svg { display: block; }
.scloud-yvd__dl-loader-btn:hover { background: var(--yt-red); color: #fff; }
/* Restore puck (only shown while minimised) */
.scloud-yvd__dl-loader-restore { display: none; }
.scloud-yvd__dl-loader.is-min .scloud-yvd__dl-loader-card { width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.scloud-yvd__dl-loader.is-min .scloud-yvd__dl-loader-body,
.scloud-yvd__dl-loader.is-min .scloud-yvd__dl-loader-actions { display: none; }
.scloud-yvd__dl-loader.is-min .scloud-yvd__dl-loader-restore {
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0;
  border: 1px solid var(--yt-line); border-radius: 50%; background: var(--yt-card);
  cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.26);
}
@media (max-width: 560px) {
  .scloud-yvd__dl-loader { right: 12px; left: 12px; bottom: 12px; }
  .scloud-yvd__dl-loader-card { width: 100%; }
  .scloud-yvd__dl-loader.is-min { left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .scloud-yvd__dl-loader-spin { animation-duration: 1.4s; }
}

/* ════════════════════════════════════════════════════════════════════════
   Loading skeleton — instant thumbnail + shimmer while the backend fetches
   the real video details, so the result area never flashes empty.
   ════════════════════════════════════════════════════════════════════════ */
.scloud-yvd__skel-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.scloud-yvd__skel-thumb { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; }
.scloud-yvd__skel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.scloud-yvd__skel-spin {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: scloud-yvd-spin .7s linear infinite;
}
.scloud-yvd__skel-info { min-width: 0; padding-top: 6px; }
.scloud-yvd__skel-line {
  height: 16px; border-radius: 7px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--yt-track) 25%, var(--yt-chip) 37%, var(--yt-track) 63%);
  background-size: 400% 100%; animation: scloud-yvd-shim 1.3s ease infinite;
}
.scloud-yvd__skel-line--title { height: 26px; width: 85%; margin-bottom: 16px; }
.scloud-yvd__skel-fetching { margin-top: 18px; color: var(--yt-muted); font: 700 14px Inter, sans-serif; }
@keyframes scloud-yvd-shim { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (max-width: 640px) {
  .scloud-yvd__skel-head { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .scloud-yvd__skel-line { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Go button "scroll to result" mode — after a video is fetched the Search
   button becomes a down-arrow that glides to the result. Lighter than the solid
   red Search button (card surface + red outline) and bounces gently to hint
   "your video is below".
   ════════════════════════════════════════════════════════════════════════ */
.scloud-yvd--y2 .scloud-yvd__search-foot .scloud-yvd__go.scloud-yvd__go--scroll {
  background: var(--yt-card) !important;
  color: var(--yt-red) !important;
  border: 1.5px solid var(--yt-red);
  width: 54px; min-width: 54px; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  animation: scloud-yvd-go-bounce 1.5s ease-in-out infinite;
}
.scloud-yvd--y2 .scloud-yvd__search-foot .scloud-yvd__go.scloud-yvd__go--scroll:hover {
  background: var(--yt-red) !important; color: #fff !important;
}
.scloud-yvd__go--scroll svg { display: block; }
@keyframes scloud-yvd-go-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .scloud-yvd--y2 .scloud-yvd__go--scroll { animation: none; }
}