/* KOVAT Downloads CSS v2.3 */
/* Designed for the KOVAT Chat dark theme */

/* ---- Downloads toolbar ---- */
.downloads-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  align-items: center !important;
}
.downloads-toolbar .search-wrap {
  flex: 1 1 260px !important;
  min-width: min(260px, 100%) !important;
}

/* ---- Download cards ---- */
.download-card {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.dl-card-head {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.dl-card-icon {
  font-size: 36px !important;
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(255,34,74,.18), rgba(255,34,74,.05)) !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
}
.dl-card-head h3 {
  margin: 0 0 4px 0 !important;
  font-size: 17px !important;
}
.dl-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  margin: 0 !important;
}
.dl-badge {
  background: rgba(255,34,74,.15) !important;
  color: var(--red) !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.dl-price-badge {
  background: linear-gradient(135deg, rgba(255,191,71,.20), rgba(255,160,20,.10)) !important;
  color: #ffbf47 !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border: 1px solid rgba(255,191,71,.30) !important;
  white-space: nowrap !important;
}
.dl-price-badge.free {
  background: rgba(39,209,127,.15) !important;
  color: #27d17f !important;
  border-color: rgba(39,209,127,.25) !important;
}
.fang-btn {
  background: linear-gradient(135deg, #d4893a, #e8a850) !important;
  color: #0d0d12 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(255,160,20,.30) !important;
}
.fang-btn:hover {
  background: linear-gradient(135deg, #e8a850, #f0b860) !important;
  box-shadow: 0 4px 18px rgba(255,160,20,.45) !important;
}
.dl-desc {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dl-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.dl-tag {
  background: #1a1a26 !important;
  color: #b0b0c0 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  border: 1px solid #2a2a38 !important;
}
.dl-card-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}
.dl-card-actions button {
  flex: 0 0 auto !important;
}

/* ---- Download detail modal ---- */
.dl-detail {
  text-align: center !important;
}
.dl-detail-icon {
  font-size: 64px !important;
  margin-bottom: 8px !important;
}
.dl-detail h2 {
  margin: 0 0 12px 0 !important;
  font-size: 24px !important;
}
.dl-detail-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
}
.dl-detail-desc {
  background: #0a0a10 !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  text-align: left !important;
  margin-bottom: 12px !important;
}
.dl-detail-desc h3 {
  font-size: 15px !important;
  margin: 0 0 8px 0 !important;
}
.dl-detail-desc p {
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
}
.dl-detail-instructions {
  background: #0a0a10 !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  text-align: left !important;
}
.dl-detail-instructions h3 {
  font-size: 15px !important;
  margin: 0 0 8px 0 !important;
}
.code-block {
  background: #000 !important;
  border: 1px solid #2a2a38 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-top: 8px !important;
  overflow-x: auto !important;
}
.code-block code {
  color: #27d17f !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
  font-size: 13px !important;
}

/* ---- Responsive ---- */
@media (max-width: 520px) {
  .dl-card-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .dl-card-icon {
    font-size: 28px !important;
    width: 42px !important;
    height: 42px !important;
  }
  .dl-detail-icon {
    font-size: 48px !important;
  }
}