/* ==========================================================================
   components.css — دکمه‌ها، کارت پلن‌ها، تیک‌ها، جدول مقایسه
   ========================================================================== */

/* ---------- دکمه شیشه‌ای گرادیانی ---------- */
.btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 16px 42px;
  background: var(--grad-teal);
  border: none;
  border-radius: var(--radius-full);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-md);
  box-shadow: var(--glow-teal), var(--shadow-soft);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.btn-glass:hover::before { transform: translateX(120%); }

.btn-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 70px rgba(18,179,168,0.45), var(--shadow-deep);
}
.btn-glass:active { transform: translateY(-1px); }

.btn-glass.btn-large { padding: 20px 56px; font-size: var(--fs-lg); }
.btn-glass.btn-small { padding: 12px 30px; font-size: var(--fs-sm); width: 100%; }

.btn-glass.btn-gold {
  background: var(--grad-gold);
  color: var(--text-on-gold);
  box-shadow: var(--glow-gold), var(--shadow-soft);
}
.btn-glass.btn-gold:hover { box-shadow: 0 0 70px rgba(199,176,74,0.5), var(--shadow-deep); }

/* ---------- نشان برند (لوگو + نام) — بالای هر صفحه ---------- */
.page-brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto var(--space-sm);
}
.page-brand-mark img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: var(--glass-border-gold);
  box-shadow: var(--glow-gold);
  padding: 6px;
}
.page-brand-mark span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
}

/* ---------- سکشن عمومی ---------- */
.section { padding: var(--space-xl) 0; position: relative; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  background: rgba(199,176,74,0.12);
  border: 1px solid rgba(199,176,74,0.3);
  padding: 6px 20px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.section-title {
  text-align: center;
  font-size: var(--fs-xxl);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-lg);
  line-height: 1.3;
}

.section-sub {
  text-align: center;
  color: var(--text-secondary);
  max-width: 700px;
  margin: -8px auto var(--space-lg);
  font-size: var(--fs-md);
}

.divider-line {
  width: 100%;
  max-width: var(--container-max);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,176,74,0.5), transparent);
  margin: var(--space-lg) auto;
}

/* ---------- کارت شیشه‌ای عمومی ---------- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}
.glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(199,176,74,0.4);
  box-shadow: var(--shadow-deep), var(--glow-gold);
}

/* ---------- کارت‌های پلن ---------- */
/* این بخش را در components.css جایگزین بخش قبلی «کارت‌های پلن» کنید */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  padding-top: 24px; /* فضای خالی برای کارت طلایی که بزرگ‌تر می‌شود */
}

.plan-card {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.plan-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
}
.plan-card.plan-silver::before { background: linear-gradient(90deg, #C5BFA7, #8f8871); }
.plan-card.plan-gold::before   { background: var(--grad-gold); }
.plan-card.plan-diamond::before{ background: var(--grad-teal); }

/* پس‌زمینه‌ی هر کارت هم متناسب با رنگ همان پلن، هماهنگ با نوار بالای کارت */
.plan-card.plan-silver { background: linear-gradient(180deg, rgba(197,191,167,0.12), var(--glass-bg) 40%); }
.plan-card.plan-diamond { background: linear-gradient(180deg, rgba(18,179,168,0.1), var(--glass-bg) 40%); }

.plan-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-deep); }
.plan-card.plan-silver:hover { border-color: rgba(197,191,167,0.5); }
.plan-card.plan-gold:hover { border-color: rgba(199,176,74,0.6); box-shadow: var(--shadow-deep), var(--glow-gold); }
.plan-card.plan-diamond:hover { border-color: rgba(18,179,168,0.5); box-shadow: var(--shadow-deep), var(--glow-teal); }

/* ⬇️ اصلاح شد: به‌جای scale از margin منفی روی محور y استفاده شد
   تا کارت طلایی «بزرگ‌تر دیده شود» بدون این‌که با کارت‌های کناری تداخل پیدا کند */
.plan-card.plan-gold {
  z-index: 2;
  margin-top: -24px;
  padding-top: calc(var(--space-lg) + 24px);
  background: linear-gradient(180deg, rgba(199,176,74,0.1), var(--glass-bg) 40%);
  border: 1px solid rgba(199,176,74,0.35);
  box-shadow: var(--shadow-deep), var(--glow-gold);
}
.plan-card.plan-gold:hover { transform: translateY(-10px); }

.plan-badge {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-gold);
  color: var(--text-on-gold);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  padding: 6px 22px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(199,176,74,0.5);
  z-index: 3;
  animation: badge-float 3s ease-in-out infinite;
}
@keyframes badge-float { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-5px);} }
.plan-title {
  text-align: center;
  font-size: var(--fs-xl);
  margin: var(--space-sm) 0 var(--space-sm);
  color: var(--text-primary);
}

.plan-price { text-align: center; margin-bottom: var(--space-md); }
.plan-price .old-price {
  text-decoration: line-through;
  text-decoration-color: #e15c5c;
  text-decoration-thickness: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: block;
}
.plan-price .new-price {
  font-size: var(--fs-xl);
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-top: 6px;
}
.plan-price .price-from { font-size: var(--fs-lg); font-weight: 700; color: var(--teal-light); }

/* ---------- لیست تیک‌دار ---------- */
.check-list { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; margin-bottom: var(--space-md); }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-secondary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.check-list li:hover { color: var(--text-primary); transform: translateX(-3px); }

.check-list li .check-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--grad-teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(18,179,168,0.4);
  margin-top: 2px;
}
.check-list li .check-icon svg { width: 12px; height: 12px; }

.plan-prep-time {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: var(--space-sm);
  border-top: 1px dashed rgba(199,176,74,0.3);
  padding-top: var(--space-sm);
}

/* ---------- جدول مقایسه‌ای ---------- */
/* این بخش را در components.css جایگزین بخش قبلی «جدول مقایسه‌ای» کنید */

.compare-table-wrapper {
  overflow: auto;
  max-height: 70vh;               /* اسکرول عمودی داخل خود جدول، نه کل صفحه */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.compare-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; }

.compare-table thead th {
  background: var(--bg-deep-2);   /* دیگر گرادیان شفاف نیست تا زیرش قاطی نشود */
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  padding: var(--space-sm);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 4;                     /* بالاتر از سلول‌های چسبان کنار جدول */
}
.compare-table thead th:first-child { text-align: right; z-index: 5; }

.compare-table tbody td, .compare-table tbody th {
  padding: 14px var(--space-sm);
  text-align: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-secondary);
}
.compare-table tbody th {
  text-align: right;
  font-weight: 400;
  color: var(--text-primary);
  position: sticky;
  right: 0;
  background: var(--bg-deep-2);
  z-index: 2;
}
.compare-table tbody tr:nth-child(even) td { background: rgba(199,176,74,0.04); }
.compare-table tbody tr:hover td { background: rgba(18,179,168,0.1); }
.compare-table tbody tr:hover th { background: rgba(18,179,168,0.14); }

.icon-yes, .icon-no { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); }
.icon-yes { background: rgba(18,179,168,0.15); }
.icon-yes svg { width: 12px; height: 12px; }
.icon-no::before { content: "✕"; color: #e15c5c; font-weight: 700; }
.icon-no { background: rgba(225,92,92,0.1); }

/* ---------- انیمیشن ورود اسکرول ---------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

.fade-in-scale {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.fade-in-scale.visible { opacity: 1; transform: translateY(0) scale(1); }