/* Hero Pricing */
.hero--pricing {
  background: var(--color-gray-50);
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}
.hero--pricing .eyebrow { margin-bottom: var(--space-4); }
.hero--pricing h1 { max-width: 800px; margin: 0 auto var(--space-4); }
.hero--pricing .hero-sub { max-width: 600px; margin: 0 auto var(--space-8); color: var(--color-gray-600); font-size: var(--fs-lg); }

/* Pricing Toggle */
.pricing-toggle {
  display: inline-flex;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  padding: 4px;
  margin: 0 auto var(--space-12);
}
.pricing-toggle__btn {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pricing-toggle__btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Pricing Cards Wrapper */
.pricing-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Pricing Card */
.pricing-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  position: relative;
  background: var(--color-white);
  transition: box-shadow var(--transition-base);
}
.pricing-card:hover { box-shadow: var(--shadow-lg); }

.pricing-card--free {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, rgba(0,200,150,0.03) 0%, var(--color-white) 100%);
}
.pricing-card--popular {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15), var(--shadow-lg);
}
.pricing-card--exclusive .pricing-card__top {
  background: var(--color-gray-900);
  color: var(--color-white);
  margin: calc(-1 * var(--space-6));
  margin-bottom: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.pricing-card--exclusive .pricing-card__top .pricing-card__name,
.pricing-card--exclusive .pricing-card__top .pricing-card__tagline,
.pricing-card--exclusive .pricing-card__top .price-currency,
.pricing-card--exclusive .pricing-card__top .price-amount,
.pricing-card--exclusive .pricing-card__top .price-period { color: var(--color-white); }

.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary-light);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-card--exclusive .pricing-card__badge { background: var(--color-gray-900); }

.pricing-card__top { margin-bottom: var(--space-4); }
.pricing-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}
.pricing-card__tagline {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}

.pricing-card__price { margin-bottom: var(--space-4); }
.price-currency {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  vertical-align: top;
}
.price-amount {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-gray-900);
  line-height: 1;
}
.price-period {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.pricing-card__saving {
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-1);
}
.pricing-card__saving.is-hidden { display: none; }

/* Features */
.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  flex: 1;
}
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.pricing-card__features li:last-child { border-bottom: none; }
.pricing-card__features li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

.feature-item--check svg { fill: var(--color-accent); }
.feature-item--minus svg { fill: var(--color-gray-400); }
.feature-item--highlight { font-weight: var(--fw-bold); color: var(--color-gray-900); }

/* Card Footer */
.pricing-card__footer { margin-top: auto; }
.pricing-card__footer .btn { width: 100%; text-align: center; }

/* Extra Note */
.pricing-extra-note {
  text-align: center;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  max-width: 700px;
  margin: 0 auto var(--space-16);
}

/* Comparison Table */
.comparison-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-16);
}
.comparison-table {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--color-gray-100);
}
.comparison-table th:first-child,
.comparison-table td:first-child { text-align: left; }

.comparison-thead th {
  position: sticky;
  top: 0;
  background: var(--color-white);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  border-bottom: 2px solid var(--color-gray-200);
  z-index: 2;
}
.comparison-group-row td {
  background: var(--color-gray-50);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  padding: var(--space-2) var(--space-4);
}
.col--popular { background: rgba(37,99,235,0.04); }
.comparison-table svg { width: 20px; height: 20px; }

.comparison-cta-row td {
  border-top: 2px solid var(--color-gray-200);
  padding: var(--space-5) var(--space-4);
}

/* Final CTA Split */
.final-cta-inner--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-12) 0;
}
.final-cta-block { text-align: center; }
.final-cta-block h3 { margin-bottom: var(--space-3); }
.final-cta-block p { margin-bottom: var(--space-5); color: var(--color-gray-600); font-size: var(--fs-sm); }

.final-cta-divider {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-left: 1px solid var(--color-gray-300);
  padding: var(--space-4) var(--space-4);
  color: var(--color-gray-400);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* Breadcrumb */
  padding: var(--space-4) 0;
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

/* Responsive */
@media (max-width: 1100px) {
  .pricing-cards-wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pricing-cards-wrapper { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .final-cta-inner--split { grid-template-columns: 1fr; }
  .final-cta-divider { writing-mode: horizontal-tb; border-left: none; border-top: 1px solid var(--color-gray-300); padding: var(--space-2) 0; }
}
/* ============================================================
   FIX-URI PAGINA /preturi/ — hosted-pbx.ro
   Adaugă în css/pages/preturi.css
   ============================================================ */


/* ── FIX 1: Aliniere text + icon în feature items ──────────── */
/* Problema: SVG și text nu sunt aliniate orizontal */

.pricing-card__features li {
  display: flex;
  align-items: flex-start;  /* flex-start pt text mai lung pe 2 rânduri */
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-gray-700);
  padding: var(--space-1) 0;
}

.pricing-card__features li svg {
  flex-shrink: 0;       /* iconița nu se strânge niciodată */
  margin-top: 2px;      /* aliniere optică cu prima linie de text */
  display: block;
}

.pricing-card__features li span,
.pricing-card__features li strong {
  flex: 1;              /* textul ocupă restul spațiului */
  min-width: 0;         /* previne overflow pe text lung */
}

/* Feature items fără span explicit (text direct în li) */
.feature-item--check,
.feature-item--minus {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-gray-700);
  padding: var(--space-1) 0;
}

.feature-item--check svg,
.feature-item--minus svg {
  flex-shrink: 0;
  margin-top: 2px;
  display: block;
}

.feature-item--minus {
  color: var(--color-gray-400);
}

/* Highlight feature (CRM, Transcriere) */
.feature-item--highlight {
  color: var(--color-gray-900);
  font-weight: var(--fw-semibold);
}


/* ── FIX 2: "sau" orizontal, nu vertical ───────────────────── */
/* Problema: writing-mode vertical nu era în CSS, div-ul cădea */

.final-cta-inner--split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) 0;
}

.final-cta-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.final-cta-divider {
  /* ORIZONTAL pe desktop — nu vertical */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
  /* Eliminăm writing-mode dacă era setat */
  writing-mode: horizontal-tb;
}

@media (max-width: 768px) {
  .final-cta-inner--split {
    flex-direction: column;
    text-align: center;
  }

  .final-cta-block {
    align-items: center;
  }

  .final-cta-divider {
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
  }