/*
 * ya-pricing.css
 * Стилове за shortcode [ya_pricing]
 *
 * Следва конвенцията от ya-schedule.css (CSS variables, --ya- namespace,
 * .active клас за табове) и ya-praktika-info.css (badge/note стил).
 *
 * Зависи от root CSS variables дефинирани в темата:
 *   --primary-color, --primary-color-hover
 *   --light-bg, --heading-color, --body-color, --secondary-color
 *   --primary-font-family
 *
 * Път: child-theme/assets/css/ya-pricing.css
 */

.ya-pricing-wrap {
  --ya-accent: var(--primary-color, #94a7ae);
  --ya-accent-hover: var(--primary-color-hover, #b8ced7);
  --ya-accent-light: #eef3f5;
  --ya-accent-ll: #f6f9fa;
  --ya-head: #1a2e35;
  --ya-body: var(--body-color, #303030);
  --ya-border: #e0dad2;
  --ya-muted: #8a857b;
  --ya-tab-inactive-bg: #f0eae4;
  --ya-highlight-bg: rgba(201, 169, 154, 0.14);
  --ya-highlight-border: var(--secondary-color, #c9a99a);
  --ya-font: var(--primary-font-family, 'Manrope', sans-serif);
  font-family: var(--ya-font);
}

/* ── Tabs — визуален език, идентичен с .ya-tab от ya-schedule.css ────────── */

.ya-pricing-wrap .ya-pricing-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.ya-pricing-wrap .ya-pricing-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 100px;
  border: 1px solid var(--ya-border);
  background: #fff;
  color: var(--ya-body);
  font-family: var(--ya-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.ya-pricing-wrap .ya-pricing-tab:hover {
  border-color: var(--ya-accent);
  background: var(--ya-accent-ll);
}

.ya-pricing-wrap .ya-pricing-tab:focus-visible {
  outline: var(--btn-outline-focus, 3px solid #b8ced7);
  outline-offset: 2px;
}

.ya-pricing-wrap .ya-pricing-tab.active {
  background: var(--ya-head);
  border-color: var(--ya-head);
  color: #fff;
}

.ya-pricing-wrap .ya-pricing-tab.active:hover {
  background: var(--ya-head);
}

/* ── Panels ────────────────────────────────────────────────────────────────*/

.ya-pricing-wrap .ya-pricing-panel[hidden] {
  display: none;
}

.ya-pricing-wrap .ya-pricing-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ya-accent);
}

.ya-pricing-wrap .ya-pricing-panel > .ya-pricing-section-label:first-child {
  margin-top: 0;
}

.ya-pricing-wrap .ya-pricing-section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(148, 167, 174, 0.35);
}

/* ── Card grid ─────────────────────────────────────────────────────────────*/

.ya-pricing-wrap .ya-pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
  align-items: stretch;
}

/* ── Card ──────────────────────────────────────────────────────────────────*/

.ya-pricing-wrap .ya-pricing-card {
  position: relative;
  background: #fff;
  border: 0.5px solid var(--ya-border);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
}

/* Самостоятелна карта (има описание, или highlighted) — рендира се извън
   .ya-pricing-cards grid-а, затова носи собствен margin-bottom за spacing. */
.ya-pricing-wrap .ya-pricing-card--wide {
  margin-bottom: 14px;
}

.ya-pricing-wrap .ya-pricing-card--wide:last-child {
  margin-bottom: 26px;
}

.ya-pricing-wrap .ya-pricing-card--stack .ya-pricing-amount,
.ya-pricing-wrap .ya-pricing-card--stack .ya-pricing-amount-bgn {
  text-align: left;
}

.ya-pricing-wrap .ya-pricing-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ya-pricing-wrap .ya-pricing-card-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ya-head);
  line-height: 1.4em;
  margin-bottom: 15px;
}

.ya-pricing-wrap .ya-pricing-card-desc {
  font-size: 16px;
  color: var(--ya-muted);
  line-height: 1.5;
  font-weight: 500;
}

.ya-pricing-wrap .ya-pricing-card-price {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

.ya-pricing-wrap .ya-pricing-amount {
  font-size: 18px;
  font-style: italic;
  color: var(--ya-head);
  line-height: 1.3;
  font-family: 'Nova Script', sans-serif;
  font-weight: 500;
}

.ya-pricing-wrap .ya-pricing-amount-bgn {
  font-size: 15px;
  color: var(--ya-muted);
}

.ya-pricing-wrap .ya-pricing-note {
  margin-top: 15px;
  font-size: 15px;
  color: var(--ya-muted);
  padding-top: 15px;
  font-weight: 500;
  border-top: 0.5px solid var(--ya-border);
}
.ya-pricing-wrap .ya-pricing-price-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ya-pricing-wrap .ya-pricing-card--stack:last-child:nth-child(odd) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.ya-pricing-wrap .ya-pricing-card--highlight .ya-pricing-card-title {
  margin-bottom: 10px;
}
/* ── Highlighted card (напр. Стартов пакет) ──────────────────────────────── */

.ya-pricing-wrap .ya-pricing-card--highlight {
  background: var(--ya-highlight-bg);
  border: 1.5px solid var(--ya-highlight-border);
  margin-bottom: 14px;
}

.ya-pricing-wrap .ya-pricing-card--highlight:last-child {
  margin-bottom: 26px;
}

.ya-pricing-wrap .ya-pricing-card--highlight .ya-pricing-card-desc {
  margin-bottom: 15px;
}

.ya-pricing-wrap .ya-pricing-amount-combined {
  font-size: 20px;
  font-style: italic;
  color: var(--ya-head);
}

.ya-pricing-wrap .ya-pricing-amount-combined-bgn {
  font-size: 15px;
  font-style: normal;
  color: var(--ya-muted);
  margin-left: 5px;
}

.ya-pricing-wrap .ya-pricing-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #99664f;
  background: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
  width: max-content;
}

/* ── Empty state ───────────────────────────────────────────────────────────*/

.ya-pricing-wrap .ya-pricing-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--ya-muted);
  font-size: 14px;
}

/* ── Мобилна адаптация ─────────────────────────────────────────────────────*/

@media (max-width: 640px) {
  .ya-pricing-wrap .ya-pricing-card-title {
    margin-bottom: 10px;
  }
  .ya-pricing-wrap .ya-pricing-tab {
    text-align: center;
  }

  .ya-pricing-wrap .ya-pricing-cards {
    grid-template-columns: 1fr;
  }

  .ya-pricing-wrap .ya-pricing-card-row {
    flex-direction: column;
    gap: 12px;
  }

  .ya-pricing-wrap .ya-pricing-card-price {
    text-align: left;
  }
}