/*--------------------------------------------------------------
# Media Downloader page
# Reuses .calc-card / .calc-field / .input-unit-wrap / .search-button /
# .reset-button / .result-unit-toggle / .unit-tab / .calc-error /
# .presets-panel / .presets-header / .presets-title / .file-count
# from style.css and citation.css. Only adds the bits unique to this
# page: full-width URL field, the media preview row, and a few
# responsive tweaks on top of the citation patterns.
--------------------------------------------------------------*/
.downloader-section { padding: 60px 0; }

/* ── URL fetch form ──────────────────────────────────────────────────────── */
.dl-fetch-form .dl-url-field {
  width: 100%;
}

/* The action row already centers via .cite-actions. No overrides needed. */

/* Dynamic format picker (replaces the static MP4/MP3 + quality toggles) */
.dl-format-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dl-format-select {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  color: #0c2c5c;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dl-format-select:disabled {
  background: #f6f7f9;
  color: #6c757d;
  cursor: progress;
}
.dl-format-select:focus {
  outline: none;
  border-color: var(--accent-color, #0563bb);
  box-shadow: 0 0 0 3px rgba(5, 99, 187, 0.18);
}
.dl-format-hint {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #6c757d;
}

/* Live status under the Download button (extracting / downloading / saved) */
.dl-progress {
  margin-top: 10px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--accent-color, #0563bb);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.dl-progress.is-error  { color: #c93636; }
.dl-progress.is-done   { color: #2c9c4a; }

/* Spinner / button-state swap — keeps button width steady while loading */
.search-button .dl-btn-spinner,
.search-button .dl-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.search-button[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.85;
}
.search-button .bx-spin {
  animation: dl-spin 0.8s linear infinite;
}
@keyframes dl-spin {
  to { transform: rotate(360deg); }
}

/* ── Result card ─────────────────────────────────────────────────────────── */
.dl-result-card {
  margin-top: 24px;
}
.dl-result-body {
  padding: 22px 28px 26px;
}

/* Media preview row — thumbnail + title/source */
.dl-media-preview {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid #eef0f2;
}

.dl-thumb-wrap {
  flex: 0 0 240px;
  position: relative;
  background: #f8fafd;
  border: 1px solid #e4eaf1;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.dl-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dl-thumb-wrap img[hidden] { display: none; }

.dl-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 56px;
  background: #f1f4f8;
}
.dl-thumb-placeholder[hidden] { display: none; }

.dl-media-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dl-media-title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #45505b;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}
.dl-media-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6c757d;
  margin: 0;
}
.dl-media-source i {
  font-size: 14px;
  color: #0563bb;
}

/* ── Format / quality picker (reuses .cite-options + .cite-row) ──────────── */
.dl-format-options {
  /* citation already gives us the layout — kill the bottom border so we
     don't double-up with the .dl-download-row above it. */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 18px;
}

/* Stretch pill toggles to fill the row width on the downloader since each
   row has only one toggle (no inline source-grid like citation). */
.dl-format-options .cite-row .result-unit-toggle {
  flex: 1;
}
.dl-format-options .cite-row .result-unit-toggle .unit-tab {
  flex: 1;
  text-align: center;
}

#dl-quality-row[hidden] { display: none; }

/* ── Download row ────────────────────────────────────────────────────────── */
.dl-download-row {
  margin-top: 8px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dl-result-body {
    padding: 18px 18px 22px;
  }
  .dl-media-preview {
    flex-direction: column;
    gap: 14px;
  }
  .dl-thumb-wrap {
    flex: 0 0 auto;
    width: 100%;
  }
  .dl-media-title {
    font-size: 16px;
  }
  .cite-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .dl-format-options .cite-row-label { min-width: 0; }
  .dl-format-options .cite-row .result-unit-toggle {
    display: flex;
    width: 100%;
  }
  .dl-format-options .cite-row .result-unit-toggle .unit-tab {
    padding: 7px 6px;
  }
}

@media (max-width: 480px) {
  .dl-format-options .cite-row .result-unit-toggle .unit-tab {
    font-size: 12px;
  }
}