/* ============================================================
 * PRICING PAGE — Desktop-first
 * ============================================================ */

:root {
  --pr-bg:       #0d1117;
  --pr-surface:  #161b22;
  --pr-card:     #1a2332;
  --pr-border:   #273043;
  --pr-text:     #e6edf3;
  --pr-muted:    #8b949e;
  --pr-accent:   #3b82f6;
  --pr-accent-h: #2563eb;
  --pr-pop-bg:   #1e3a5f;
  --pr-pop-brd:  #3b82f6;
  --pr-check:    #22c55e;
}

body.site-theme-light {
  --pr-bg:       #f8fafc;
  --pr-surface:  #ffffff;
  --pr-card:     #ffffff;
  --pr-border:   #e2e8f0;
  --pr-text:     #1e293b;
  --pr-muted:    #64748b;
  --pr-accent:   #3b82f6;
  --pr-accent-h: #2563eb;
  --pr-pop-bg:   #eff6ff;
  --pr-pop-brd:  #3b82f6;
  --pr-check:    #16a34a;
}

/* ── Wrapper ── */
.pricing-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

/* ── Hero ── */
.pricing-hero {
  text-align: center;
  margin-bottom: 36px;
}
.pricing-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--pr-text);
  margin: 0 0 12px;
  line-height: 1.15;
}
.pricing-subtitle {
  font-size: 1.1rem;
  color: var(--pr-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Tabs ── */
.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
  background: var(--pr-card);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  padding: 6px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-tab {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--pr-muted);
  transition: all 0.15s ease;
}
.pricing-tab--active {
  background: var(--pr-accent);
  color: #fff;
}
.pricing-tab:hover:not(.pricing-tab--active) {
  color: var(--pr-text);
}

/* ── Section ── */
.pricing-section { display: block; }
.pricing-section--hidden { display: none; }

.pricing-section-header {
  text-align: center;
  margin-bottom: 28px;
}
.pricing-section-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pr-text);
  margin: 0 0 6px;
}
.pricing-section-header p {
  font-size: 0.95rem;
  color: var(--pr-muted);
  margin: 0;
}

/* ── Grid ── */
.pricing-grid {
  display: grid;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.pricing-grid--1 { grid-template-columns: minmax(0, 480px); justify-content: center; }
.pricing-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-left: auto; margin-right: auto; }
.pricing-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pricing-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card ── */
.pr-card {
  background: var(--pr-card);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pr-card:hover {
  border-color: var(--pr-accent);
  box-shadow: 0 6px 24px rgba(59,130,246,0.1);
  transform: translateY(-3px);
}
.pr-card--popular {
  background: var(--pr-pop-bg);
  border: 2px solid var(--pr-pop-brd);
}
.pr-card--popular:hover {
  transform: translateY(-3px);
}

/* ── Badges ── */
.pr-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 800;
  margin-bottom: 14px;
  width: fit-content;
}
.pr-badge--popular { background: var(--pr-accent); color: #fff; }
.pr-badge--pro     { background: #7c3aed; color: #fff; }

/* ── Card Head ── */
.pr-card-head { margin-bottom: 18px; }
.pr-plan-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--pr-text);
  margin: 0 0 6px;
}
.pr-plan-desc {
  font-size: 0.88rem;
  color: var(--pr-muted);
  line-height: 1.5;
  margin: 0 0 16px;
  min-height: 40px;
}
.pr-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pr-price-main {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--pr-text);
  line-height: 1;
}
.pr-price-sub {
  font-size: 0.88rem;
  color: var(--pr-muted);
  line-height: 1.3;
}
.pr-save-note {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--pr-check);
  font-weight: 600;
}

/* ── Limits ── */
.pr-limits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
  margin-bottom: 16px;
}
.pr-limit-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--pr-muted);
}
.pr-limit-item.pr-limit--on  { color: var(--pr-text); }
.pr-limit-item.pr-limit--off { color: var(--pr-muted); opacity: 0.6; }
.pr-limit-icon { font-size: 0.9rem; flex-shrink: 0; }

/* ── Feature List ── */
.pr-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.pr-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--pr-text);
  line-height: 1.4;
}
.pr-check {
  color: var(--pr-check);
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── CTA ── */
.pr-card-action { margin-top: auto; }
.pr-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
}
.pr-btn--primary {
  background: var(--pr-accent);
  color: #fff;
  border: 2px solid var(--pr-accent);
}
.pr-btn--primary:hover { background: var(--pr-accent-h); border-color: var(--pr-accent-h); }
.pr-btn--outline {
  background: transparent;
  color: var(--pr-accent);
  border: 2px solid var(--pr-border);
}
.pr-btn--outline:hover { border-color: var(--pr-accent); background: rgba(59,130,246,0.06); }
.pr-btn--coming {
  background: transparent;
  color: var(--pr-muted);
  border: 2px solid var(--pr-border);
  opacity: 0.6;
  cursor: default;
}

/* ── Featured Banner ── */
.pricing-featured-banner {
  margin: 32px 0;
  background: linear-gradient(135deg, #92400e, #78350f);
  border: 1px solid #f59e0b66;
  border-radius: 14px;
  padding: 20px 28px;
}
.pricing-featured-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pricing-featured-inner > div:first-child {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pricing-featured-icon { font-size: 2rem; flex-shrink: 0; }
.pricing-featured-inner strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #fef3c7;
  margin-bottom: 2px;
}
.pricing-featured-inner span {
  font-size: 0.88rem;
  color: #fcd34d;
}
/* Button inside featured banner — amber instead of blue */
.pricing-featured-banner .pr-btn--outline {
  color: #fef3c7;
  border-color: #f59e0b;
  background: transparent;
}
.pricing-featured-banner .pr-btn--outline:hover {
  background: rgba(245,158,11,0.18);
  border-color: #fbbf24;
  color: #fff;
}

/* Light theme: keep amber gradient, ensure text stays light */
body.site-theme-light .pricing-featured-banner {
  background: linear-gradient(135deg, #92400e, #b45309);
  border-color: #f59e0b;
}
body.site-theme-light .pricing-featured-inner strong { color: #fff; }
body.site-theme-light .pricing-featured-inner span  { color: #fef3c7; }

/* ── FAQ Section ── */
.pricing-faq {
  margin-top: 60px;
  text-align: center;
}
.pricing-faq-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pr-text);
  margin: 0 0 28px;
}
.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pricing-faq-card {
  background: var(--pr-card);
  border: 1px solid var(--pr-border);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
}
.pricing-faq-icon { font-size: 2rem; margin-bottom: 12px; }
.pricing-faq-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pr-text);
  margin: 0 0 8px;
}
.pricing-faq-card p {
  font-size: 0.88rem;
  color: var(--pr-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Tablet ── */
@media (max-width: 960px) {
  .pricing-grid--3,
  .pricing-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-faq-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-title { font-size: 2rem; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .pricing-wrap { padding: 28px 16px 48px; }
  .pricing-grid--2,
  .pricing-grid--3,
  .pricing-grid--4 { grid-template-columns: 1fr; }
  .pricing-faq-grid { grid-template-columns: 1fr; }
  .pricing-title { font-size: 1.7rem; }
  .pricing-tabs { max-width: 100%; }
  .pr-price-main { font-size: 2rem; }
  .pr-limits { grid-template-columns: 1fr; }
  .pricing-featured-inner { flex-direction: column; align-items: flex-start; }
  .pricing-featured-inner > div:first-child { flex-direction: column; align-items: flex-start; gap: 8px; }
}