/* Platform landing pages: link box in the hero, result card and platform grid.
   Pairs with assets/js/vdp-platform-downloader.js and vdp-blog-theme.css. */

.vdp-how-hero.vdp-tool-hero { padding-bottom: 52px; }
.vdp-tool-hero .vdp-tool-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 12px; padding: 6px 14px; border: 1px solid rgba(27,213,197,.3); border-radius: 999px; background: rgba(27,213,197,.08); color: var(--vdp-cyan); font-size: 13px; font-weight: 600; line-height: 1.4; }
.vdp-tool-hero .vdp-tool-eyebrow i { font-size: 16px; }

.vdp-dl-wrap { max-width: 860px; margin: 30px auto 0; text-align: left; }
.vdp-dl-pill { display: flex; align-items: center; gap: 8px; padding: 8px; border: 2px solid rgba(27,213,197,.45); border-radius: 999px; background: #f4fbfb; box-shadow: 0 0 0 6px rgba(27,213,197,.08), 0 18px 40px rgba(0,0,0,.28); }
.vdp-dl-pill:focus-within { border-color: var(--vdp-cyan); }
.vdp-dl-icon { flex: 0 0 auto; margin-left: 12px; color: #6f878d; font-size: 22px; }
.vdp-dl-input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 4px; border: 0; outline: 0; background: transparent; color: #0a2a33; font-family: Poppins, sans-serif; font-size: 16px; }
.vdp-dl-input::placeholder { color: #7d9399; }
.vdp-dl-clear { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6f878d; }
.vdp-dl-clear:hover { background: rgba(10,55,67,.08); color: #0a3743; }
.vdp-dl-paste { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: #e3eced; color: #0a3743; font-weight: 600; }
.vdp-dl-paste:hover { background: #d5e3e5; }
.vdp-dl-submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 30px; border: 0; border-radius: 999px; background: linear-gradient(135deg,var(--vdp-cyan),var(--vdp-cyan-2)); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 10px 24px rgba(25,210,199,.28); }
.vdp-dl-submit:hover { filter: brightness(1.05); }
.vdp-dl-submit:disabled { opacity: .7; cursor: progress; }
.vdp-dl-pill button:focus-visible,
.vdp-dl-result button:focus-visible,
.vdp-dl-result select:focus-visible { outline: 2px solid var(--vdp-cyan); outline-offset: 2px; }

.vdp-dl-support { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px 0 0 !important; color: var(--vdp-muted); font-size: 14px !important; text-align: center; }
.vdp-dl-support i { color: var(--vdp-cyan); }
.vdp-dl-legal { margin: 8px 0 0 !important; color: #7f979d !important; font-size: 13px !important; text-align: center; }
.vdp-dl-legal a { color: #a9bdc3; }

.vdp-dl-status { margin-top: 14px; text-align: center; color: var(--vdp-muted); font-size: 15px; }
.vdp-dl-status:empty { display: none; }
.vdp-dl-status.is-error { padding: 12px 16px; border: 1px solid rgba(255,120,120,.35); border-radius: 12px; background: rgba(255,90,90,.08); color: #ffc9c9; }
.vdp-dl-status.is-error a { color: #fff; }
.vdp-dl-spinner { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; border: 2px solid rgba(27,213,197,.25); border-top-color: var(--vdp-cyan); border-radius: 50%; animation: vdp-dl-spin .8s linear infinite; }
@keyframes vdp-dl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vdp-dl-spinner { animation-duration: 2s; } }

.vdp-dl-result:empty { display: none; }
.vdp-dl-result { margin-top: 22px; }
.vdp-dl-card { position: relative; display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 22px; padding: 20px; border: 1px solid rgba(27,213,197,.25); border-radius: 18px; background: linear-gradient(180deg,#082630,#061f28); box-shadow: 0 18px 42px rgba(0,0,0,.25); }
.vdp-dl-card-playlist { grid-template-columns: minmax(0,1fr); }
.vdp-dl-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #a9bdc3; }
.vdp-dl-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.vdp-dl-thumb { position: relative; overflow: hidden; border-radius: 12px; background: #031218; aspect-ratio: 16 / 10; }
.vdp-dl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vdp-dl-duration { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 600; }
.vdp-dl-info { min-width: 0; padding-right: 28px; }
.vdp-dl-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px !important; color: var(--vdp-cyan) !important; font-size: 13px !important; font-weight: 700; }
.vdp-how-hero .vdp-dl-title { margin: 0 0 4px; overflow: hidden; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vdp-dl-meta { margin: 0 0 14px !important; color: #7f979d !important; font-size: 13px !important; }
.vdp-dl-label { display: block; margin-bottom: 6px; color: #c6d6da; font-size: 13px; font-weight: 600; }
.vdp-dl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vdp-dl-quality { flex: 1 1 180px; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #0b303a; color: #f1f7f8; font-family: Poppins, sans-serif; }
.vdp-dl-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg,var(--vdp-cyan),var(--vdp-cyan-2)); color: #fff; font-weight: 700; }
.vdp-dl-save:hover { filter: brightness(1.06); }
.vdp-dl-error-inline { margin: 0; color: #ffc9c9 !important; font-size: 13px !important; }

.vdp-dl-playlist { display: grid; gap: 8px; max-height: 460px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.vdp-dl-playlist-item { display: grid; grid-template-columns: 88px minmax(0,1fr) 150px 46px; align-items: center; gap: 12px; padding: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(2,15,20,.35); }
.vdp-dl-playlist-item img { width: 88px; height: 52px; border-radius: 8px; object-fit: cover; }
.vdp-dl-playlist-text { min-width: 0; }
.vdp-dl-playlist-text span { display: block; overflow: hidden; color: #e6f0f1; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.vdp-dl-playlist-text small { color: #7f979d; font-size: 12px; }
.vdp-dl-playlist-item .vdp-dl-quality { height: 40px; }
.vdp-dl-save-icon { width: 46px; height: 40px; padding: 0; }
.vdp-dl-playlist-item .vdp-dl-error-inline { grid-column: span 2; }

/* Platform grid ("All downloaders") inside the article card. */
.vdp-platform-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.vdp-platform-grid li { margin: 0 !important; padding: 0 !important; }
body.vdp-blog-post-page .blog-content-card .vdp-platform-grid a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px; border: 1px solid var(--vdp-border); border-radius: 14px; background: var(--vdp-panel-2); color: #e6f0f1 !important; font-weight: 600; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
body.vdp-blog-post-page .blog-content-card .vdp-platform-grid a:hover,
body.vdp-blog-post-page .blog-content-card .vdp-platform-grid a:focus-visible { border-color: rgba(27,213,197,.5); transform: translateY(-2px); }
body.vdp-blog-post-page .blog-content-card .vdp-platform-grid a[aria-current="page"] { border-color: var(--vdp-cyan); }
body.vdp-blog-post-page .blog-content-card .vdp-platform-grid i { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: rgba(27,213,197,.12); color: var(--vdp-cyan) !important; font-size: 18px; }

.vdp-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.vdp-feature { padding: 18px; border: 1px solid var(--vdp-border); border-radius: 14px; background: rgba(2,15,20,.3); }
body.vdp-blog-post-page .blog-content-card .vdp-feature h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px !important; font-size: 17px !important; }
body.vdp-blog-post-page .blog-content-card .vdp-feature h3 i { color: var(--vdp-cyan) !important; }
body.vdp-blog-post-page .blog-content-card .vdp-feature p { margin: 0; font-size: 14.5px; }

.footer .footer-downloader-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0 0; font-size: 13px; }

@media (max-width: 767.98px) {
  .vdp-dl-pill { flex-wrap: wrap; padding: 8px; border-radius: 22px; }
  .vdp-dl-icon { margin-left: 6px; }
  .vdp-dl-input { flex-basis: calc(100% - 80px); height: 46px; }
  .vdp-dl-paste { flex: 1 1 0; justify-content: center; height: 46px; }
  .vdp-dl-submit { flex: 2 1 0; justify-content: center; height: 46px; padding: 0 16px; font-size: 16px; }
  .vdp-dl-card { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .vdp-dl-playlist-item { grid-template-columns: 72px minmax(0,1fr); }
  .vdp-dl-playlist-item img { width: 72px; height: 44px; }
  .vdp-dl-playlist-item .vdp-dl-quality { grid-column: 1 / -1; width: 100%; }
  .vdp-dl-save-icon { grid-column: 1 / -1; width: 100%; }
  .vdp-feature-grid { grid-template-columns: minmax(0,1fr); }
  .vdp-dl-support { align-items: flex-start; text-align: left; }
}