/* =============================================
   SERVICES — services.css
   فروش سرویس‌های هوش مصنوعی: آرشیو، کارت‌ها، تک سرویس، خرید و پشتیبانی.
   ============================================= */

/* ---------------------------------------------
   1. نوار ابزار (فیلتر + لینک پشتیبانی)
   --------------------------------------------- */
.svc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.svc-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.svc-filter {
  padding: var(--sp-2) var(--sp-5);
  min-height: 40px;
  border: 1px solid var(--clr-border);
  border-radius: 100px;
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.svc-filter:hover { color: var(--clr-white); border-color: var(--clr-orange); }
.svc-filter.is-active { background: var(--clr-orange); border-color: var(--clr-orange); color: #fff; font-weight: 600; }
.svc-filter:focus-visible { outline: 2px solid var(--clr-orange); outline-offset: 2px; }

.svc-support-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-orange);
}
.svc-support-link:hover { color: var(--clr-white); }

.svc-notice {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed rgba(249, 115, 22, 0.45);
  border-radius: var(--radius-md);
  background: var(--clr-orange-glow);
  color: var(--clr-text);
  font-size: var(--text-sm);
  line-height: 1.9;
}

/* ---------------------------------------------
   2. شبکه و کارت
   --------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--sp-6);
}

.svc-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out), opacity 0.35s, translate 0.35s;
}
.svc-card:hover { border-color: var(--clr-orange); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(249, 115, 22, 0.13); }
.svc-card[hidden] { display: none; }
.svc-card.is-out { opacity: 0.7; }

/* ورود با اسکرول (فقط با JS) */
.svc-on .svc-card:not(.is-in) { opacity: 0; translate: 0 24px; }
.svc-on .svc-card { transition-delay: 0s, 0s, 0s, 0s, calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms); }

.svc-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--clr-surface-2); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }

.svc-card__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--clr-orange);
  background: radial-gradient(circle at 30% 30%, rgba(249, 115, 22, 0.2), transparent 60%), var(--clr-surface-2);
}

.svc-chip {
  position: absolute;
  top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 100px;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--text-xs);
  font-weight: 600;
}
.svc-chip--badge  { inset-inline-start: var(--sp-3); color: var(--clr-orange); border: 1px solid rgba(249, 115, 22, 0.5); }
.svc-chip--status { inset-inline-end: var(--sp-3); color: var(--clr-text); border: 1px solid var(--clr-border); }

.svc-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.svc-card__title { margin: 0 0 var(--sp-2); font-size: var(--text-lg); line-height: 1.6; }
.svc-card__title a { color: var(--clr-white); transition: color var(--dur-fast); }
.svc-card:hover .svc-card__title a { color: var(--clr-orange); }
.svc-card__excerpt {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--clr-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ویژگی‌ها با تیک */
.svc-feats { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.svc-feats li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--clr-text);
}
.svc-feats li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--clr-orange-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
  border: 1px solid rgba(249, 115, 22, 0.4);
}
.svc-feats--lg { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-6); }
.svc-feats--lg li { font-size: var(--text-base); }

/* ---------------------------------------------
   3. قیمت
   --------------------------------------------- */
.svc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--clr-border); }
.svc-price__old { font-size: var(--text-sm); color: var(--clr-text-muted); text-decoration: line-through; text-decoration-color: rgba(249, 115, 22, 0.7); }
.svc-price__now { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: var(--clr-orange); }
.svc-price__unit { font-size: var(--text-sm); color: var(--clr-text-muted); }
.svc-price__ask { font-size: var(--text-lg); font-weight: 700; color: var(--clr-text); }

.svc-card__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.svc-btn { flex: 1; justify-content: center; text-align: center; min-height: 44px; }
.svc-btn--ghost { flex: 0 0 auto; }
.btn.is-disabled { opacity: 0.55; pointer-events: none; }

.svc-empty { margin: var(--sp-8) 0 0; text-align: center; color: var(--clr-text-muted); }
.svc-empty[hidden] { display: none; }

/* ---------------------------------------------
   4. تک سرویس
   --------------------------------------------- */
.svc-hero-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-8);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 100px;
  background: var(--clr-orange-glow);
}
.svc-hero-price .svc-price__now { font-size: var(--text-3xl); }

.svc-lead { margin: 0 0 var(--sp-8); font-size: var(--text-lg); line-height: 2; color: var(--clr-text); }
.svc-block { margin-bottom: var(--sp-8); padding: var(--sp-6) var(--sp-8); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); }
.svc-block__title { margin: 0 0 var(--sp-5); font-size: var(--text-lg); color: var(--clr-orange); }

.svc-price--side { margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-5); border-top: 0; border-bottom: 1px solid var(--clr-border); }
.svc-single .sg-cta__share a { text-align: center; }

/* ---------------------------------------------
   5. نوار «خرید و پشتیبانی»
   --------------------------------------------- */
.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-12);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--clr-surface) 55%, rgba(249, 115, 22, 0.08));
}
.support-strip__text { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 240px; }
.support-strip__text strong { font-size: var(--text-lg); color: var(--clr-white); }
.support-strip__text span { font-size: var(--text-sm); line-height: 1.9; color: var(--clr-text-muted); }
.support-strip__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------------------------------------------
   6. صفحه‌ی خرید و پشتیبانی — مراحل
   --------------------------------------------- */
.bs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; counter-reset: none; }
.bs-step {
  position: relative;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
}
.bs-step__num {
  position: absolute;
  top: calc(var(--sp-5) * -1);
  inset-inline-start: var(--sp-6);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clr-orange);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.35);
}
.bs-step p { margin: 0; font-size: var(--text-base); line-height: 2; color: var(--clr-text); }
.bs-channels { max-width: 1000px; }
.bs-more { max-width: 800px; margin-inline: auto; }

/* ---------------------------------------------
   7. بنر صفحه‌ی اصلی / درباره / تماس
   --------------------------------------------- */
.svc-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  padding: var(--sp-8);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(249, 115, 22, 0.16), transparent 60%),
    var(--clr-surface);
}
.svc-teaser__text { flex: 1; min-width: 260px; }
.svc-teaser__text .label { display: block; margin-bottom: var(--sp-2); }
.svc-teaser__text h2 { margin: 0 0 var(--sp-2); font-size: var(--text-2xl); }
.svc-teaser__text p { margin: 0; color: var(--clr-text-muted); line-height: 1.9; }
.svc-teaser__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.svc-teaser-wrap { padding-block: var(--sp-12); }

/* ---------------------------------------------
   8. ریسپانسیو
   --------------------------------------------- */
@media (max-width: 768px) {
  .svc-toolbar { margin-bottom: var(--sp-6); }
  .svc-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); scrollbar-width: none; }
  .svc-filters::-webkit-scrollbar { display: none; }
  .svc-filter { flex: none; }

  .svc-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .svc-card__body { padding: var(--sp-5); }
  .svc-price__now { font-size: var(--text-xl); }

  .svc-hero-price { padding: var(--sp-3) var(--sp-5); }
  .svc-hero-price .svc-price__now { font-size: var(--text-2xl); }
  .svc-feats--lg { grid-template-columns: 1fr; }
  .svc-block { padding: var(--sp-5); }
  .svc-lead { font-size: var(--text-base); }

  .support-strip, .svc-teaser { flex-direction: column; align-items: stretch; text-align: center; padding: var(--sp-6) var(--sp-5); }
  .support-strip__actions, .svc-teaser__actions { flex-direction: column; }
  .support-strip__actions .btn, .svc-teaser__actions .btn { justify-content: center; min-height: 48px; }

  .bs-steps { grid-template-columns: 1fr; gap: var(--sp-8); }
  .bs-channels { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-on .svc-card:not(.is-in) { opacity: 1 !important; translate: none !important; }
  .svc-card, .svc-card__media img { transition: none; }
}