/* ============================================================
   download.css — /download page ("دانلود اپلیکیشن")
   Inherits all tokens (--bg, --text, --accent, --radius*, --transition …)
   from home.css, which this page also links — same as login.css/register.css.
   Namespaced with a "dl-" prefix to avoid clashing with home.css classes.
   ============================================================ */

body {
  padding-top: var(--header-h);
  min-height: 100vh;
  background: var(--bg);
}

.dl-main {
  padding-bottom: 2rem;
}

/* ── Hero ──────────────────────────────────────────────────── */

.dl-hero {
  padding: 3.5rem 0 3rem;
  text-align: center;
}

.dl-hero__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.18);
  animation: dl-float 5s ease-in-out infinite;
}

.dl-hero__icon img {
  width: 52px;
  height: 52px;
}

@keyframes dl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.dl-hero__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.dl-hero__subtitle {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--text-2);
  font-size: 0.98rem;
  line-height: 1.8;
}

.dl-hero__chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-2);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.dl-chip:hover,
.dl-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.dl-chip i { font-size: 1rem; }

.dl-hero__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 0.78rem;
}

.dl-hero__badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dl-hero__badges i { color: var(--accent); }

/* ── Shared section shell ──────────────────────────────────── */

.dl-section {
  padding: 2.75rem 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.dl-section__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2rem;
}

.dl-section__head p {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.8;
  margin-top: 0.75rem;
}

/* ── Android build cards ───────────────────────────────────── */

.dl-builds {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

.dl-build-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.dl-build-card--recommended {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.14);
}

.dl-build-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.dl-build-card__info {
  flex: 1 1 auto;
  min-width: 0;
}

.dl-build-card__info h3 {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-build-card__badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-contrast, #212121);
  background: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
}

.dl-build-card__info p {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.6;
}

.dl-build-card__meta {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 4px;
}

.dl-build-card__action {
  flex: 0 0 auto;
}

.dl-build-card.is-loading .dl-build-card__action .ak-btn { pointer-events: none; opacity: 0.6; }
.dl-build-card.is-unavailable { opacity: 0.55; }
.dl-build-card.is-unavailable .dl-build-card__action .ak-btn { pointer-events: none; }

.dl-more-toggle {
  display: block;
  margin: 1.25rem auto 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dl-more-toggle i { transition: transform var(--transition); }
.dl-more-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.dl-other-builds {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.dl-other-builds.is-open { display: flex; }

.dl-error-state {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-2);
  font-size: 0.85rem;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
}

.dl-error-state button {
  margin-top: 0.75rem;
}

/* ── Steps ─────────────────────────────────────────────────── */

.dl-steps {
  max-width: 640px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.dl-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-2);
  border-radius: var(--radius-md);
}

.dl-step__num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast, #212121);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-step p {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.7;
}

.dl-step p b { color: var(--accent); }

/* ── PWA / iOS install ─────────────────────────────────────── */

.dl-pwa-cta {
  max-width: 640px;
  margin: 2rem auto 0;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-2);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dl-pwa-cta__text { flex: 1 1 240px; }
.dl-pwa-cta__text h3 { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dl-pwa-cta__text p { font-size: 0.8rem; color: var(--text-2); line-height: 1.6; }
.dl-pwa-cta[hidden] { display: none; }

/* ── QR section ────────────────────────────────────────────── */

.dl-qr-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  text-align: center;
}

.dl-qr-card img {
  width: 168px;
  height: 168px;
  padding: 10px;
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.dl-qr-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.dl-qr-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 0.75rem;
}

.dl-qr-link input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 0.78rem;
  direction: ltr;
  text-align: left;
}

.dl-qr-link input:focus { outline: none; }

/* ── Mini FAQ ──────────────────────────────────────────────── */

.dl-mini-faq {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.dl-mini-faq__item h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-mini-faq__item h4 i { color: var(--accent); font-size: 0.85rem; }

.dl-mini-faq__item p {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.75;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .dl-build-card {
    flex-wrap: wrap;
  }
  .dl-build-card__action {
    width: 100%;
  }
  .dl-build-card__action .ak-btn {
    width: 100%;
    justify-content: center;
  }
  .dl-pwa-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .dl-pwa-cta .ak-btn { width: 100%; justify-content: center; }
}