/* Pricing page polish to match clean, modern cards */
.pricing-wrap { background: transparent; border: none; box-shadow: none; }
.pricing-card { background: transparent; box-shadow: none; }
.pricing-head { justify-content: center; text-align: center; }
.pricing-title { font-size: 1.75rem; font-weight: 900; color: #0f172a; margin-bottom: 4px; }
.pricing-sub { color: #6b7280; font-size: 0.95rem; }

/* Toggle buttons (Job Seeker / Employer) */
.pricing-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 12px 0 18px;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px; /* pill */
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #0f172a;
  text-decoration: none;
  font-weight: 600;
  min-height: 40px;
  flex: 1 1 180px;          /* equal width items */
  transition: background-color .3s ease, color .3s ease, border-color .2s ease, box-shadow .2s ease;
}
.tab-btn:hover { background: #eef2ff; }
.tab-btn--active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}

.pricing-grid {
  display: grid;
  gap: 20px;
  margin-top: 10px;
  align-items: stretch;             /* ensure equal height rows */
  justify-items: stretch;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop default: 3-up */
}

.price-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  text-align: center;
  position: relative;
  display: flex;                    /* equal height with content push-down */
  flex-direction: column;
}
.card-popular { border: 2px solid #2563eb; }
.popular-tag { position: absolute; top: 12px; right: 12px; }

.plan-name { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0f172a; }
.plan-underline { width: 36px; height: 3px; background: #22c1dc; border-radius: 999px; margin: 8px auto 10px; }
.plan-badge { margin: 6px auto; display: inline-block; }

.price { font-size: 2.25rem; font-weight: 900; color: #0f172a; }
.price-sub { color: #6b7280; font-size: 0.9rem; margin-bottom: 8px; }
.plan-divider { border: 0; height: 1px; background: #e5e7eb; margin: 12px 0; }

.plan-features { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; flex: 1 1 auto; }
.plan-features li { position: relative; padding-left: 26px; margin: 8px 0; color: #374151; }
.plan-features li::before {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #e0f2fe; /* light blue */
  box-shadow: inset 0 0 0 2px #22c1dc;
}

/* When using explicit SVG icons, hide the default bullet */
.plan-features li.with-icon { padding-left: 0; display: flex; align-items: flex-start; gap: 10px; }
.plan-features li.with-icon::before { display: none; }
.feat-icon { display: inline-flex; width: 18px; height: 18px; margin-top: 2px; }
.feat-icon.ok svg { stroke: #16a34a; fill: none; stroke-width: 2; }
.feat-icon.no svg { stroke: #dc2626; fill: none; stroke-width: 2; }
.feat-text { display: inline-block; }

/* Pill buttons */
.btn-pill { border-radius: 999px !important; padding-left: 18px; padding-right: 18px; }
.pricing-grid .btn-primary { background: #22c1dc; }
.pricing-grid .btn-primary:hover { background: #1aaec6; }
.pricing-grid .btn-secondary { background: #0ea5e9; color: #fff; }
.pricing-grid .btn-secondary:hover { background: #0284c7; }

/* Push CTA zone to bottom for equal visual height */
.price-card .settings-card__actions { margin-top: auto; }

/* Responsive column counts */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pricing-title { font-size: 1.5rem; }
}
.pricing-container {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: 1200px;   /* allow full-width pricing grid */
  padding: 0 1rem;     /* light gutter only */
  margin-left: auto;
  margin-right: auto;
  display: block;
}
