/* =============================================================
   Automania — plans.css
   Subscription Plans: page head, 3 plan cards (featured
   variant), FAQ block and the login-prompt modal.
   ============================================================= */

.plans-head {
  text-align: center;
  padding-block: clamp(28px, 4vw, 52px) var(--space-md);
}
.plans-head .section-subtitle { margin-inline: auto; max-width: 540px; }

/* ---- Plan grid ---- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-block: var(--space-lg) var(--space-2xl);
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.plan-card--featured {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-primary);
  padding-block-start: var(--space-2xl);
}

.plan-card__tag {
  align-self: flex-start;
  margin-block-end: var(--space-2xs);
}
.plan-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.plan-card__amount {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
}
.plan-card__per {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.plan-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-border-soft);
}
.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.plan-card__features i {
  flex: 0 0 auto;
  color: var(--color-primary);
  margin-block-start: 3px;
}
.plan-card__features li.is-muted { color: var(--color-text-faint); }
.plan-card__features li.is-muted i { color: var(--color-text-faint); }
.plan-card__cta { margin-block-start: var(--space-sm); }

/* ---- FAQ block ---- */
.plan-faq {
  padding-block: clamp(32px, 5vw, 64px);
  border-block-start: 1px solid var(--color-border);
}
.plan-faq__inner { max-width: 760px; margin-inline: auto; }
.plan-faq .section-head { justify-content: center; }

/* =============================================================
   LOGIN-PROMPT MODAL
   ============================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--color-overlay);
}
.modal-overlay[hidden] { display: none; }

.plan-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}
.plan-modal__close {
  position: absolute;
  top: var(--space-sm);
  inset-inline-end: var(--space-sm);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.plan-modal__close:hover { background: var(--color-bg-soft); color: var(--color-text); }
.plan-modal__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-circle);
  background: var(--color-primary-mist);
  color: var(--color-primary);
  font-size: var(--fs-xl);
}
.plan-modal__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-block-end: var(--space-xs);
}
.plan-modal__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-lg);
}
.plan-modal__actions {
  display: flex;
  gap: var(--space-sm);
}
.plan-modal__actions .btn { flex: 1; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 991.98px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan-card--featured { padding-block-start: var(--space-2xl); }
}
@media (max-width: 479.98px) {
  .plan-modal__actions { flex-direction: column; }
}