@layer cards {
/* variant-B.css: Вариант B «Виджет»
   Стиль: самостоятельная карточка-виджет с крупным главным числом/объектом.
   Рейс крупно «Белград → Лиссабон 07:40–10:15», тесты крупно «3 из 3»,
   превью картинок крупными карточками; одна главная кнопка.
   Палитра: p3 (Холодный светлый с индиго). Без 1px линий, без цветных полосок. */

:root {
  --canvas: #F5F6FA;
  --frame: #FFFFFF;
  --panel: #EEF0F6;
  --raised: #FFFFFF;
  --ink: #0F1222;
  --muted: #5E6478;
  --faint: #9AA0B4;
  --action: #4F46E5;
  --action-ink: #FFFFFF;
  --own: #E8E7FF;
  --own-ink: #1E1B4B;
  --other: #EEF0F6;
  --other-ink: #0F1222;
  --agent-glyph: #4F46E5;
  --data-ok: #047857;
  --data-bad: #BE123C;
  --data-ok-bg: #ECFDF5;
  --data-bad-bg: #FFF1F2;
  --attention: #B45309;
  --attention-bg: #FFFBEB;
  --shadow: 0 12px 32px rgba(15, 18, 34, 0.08);

  /* Маппинг базовых токенов */
  --z-frame: var(--canvas);
  --z-side: var(--panel);
  --z-paper: var(--raised);
  --z-card: var(--raised);
  --z-card-sub: var(--panel);
  --z-card-sub2: #E2E5EE;
  --z-ink: var(--ink);
  --z-sub: var(--muted);
  --z-faint: var(--faint);
  --z-pill: var(--action);
  --z-pill-ink: var(--action-ink);
  --z-ok: var(--data-ok);
  --z-ok-bg: var(--data-ok-bg);
  --z-bad: var(--data-bad);
  --z-bad-bg: var(--data-bad-bg);
  --z-coral: var(--action);
  --z-shadow: var(--shadow);
}

/* Контейнер карточки Варианта B */
.zc-card.zc-variant-b {
  border-radius: 20px;
  padding: 18px 20px 20px;
  background: var(--raised);
  box-shadow: 0 4px 20px rgba(15, 18, 34, 0.06), 0 1px 3px rgba(15, 18, 34, 0.04);
  font-size: 13.5px;
}

/* Шапка виджета */
.zc-variant-b .zc-head {
  margin-bottom: 10px;
}

.zc-variant-b .zc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* 1. Виджет перелёта (Flight Hero) */
.zc-wb-flight-hero {
  margin-top: 4px;
}

.zc-wb-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.zc-wb-tag {
  font-weight: 600;
  color: var(--muted);
}

.zc-wb-badge {
  background: var(--panel);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.zc-wb-route {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  letter-spacing: -0.01em;
}

.zc-wb-arrow {
  color: var(--action);
  font-weight: 600;
}

.zc-wb-times {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--panel);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.zc-wb-time-val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.zc-wb-dur {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.zc-wb-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.zc-wb-spec-item {
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zc-wb-spec-lbl {
  font-size: 11.5px;
  color: var(--muted);
}

.zc-wb-spec-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.zc-wb-spec-val.is-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--action);
  letter-spacing: -0.01em;
}

/* Действия в виджете полёта: одна главная кнопка */
.zc-variant-b .zc-wb-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.zc-variant-b .zc-wb-actions .zc-btn-primary {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: var(--action);
  color: var(--action-ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.zc-variant-b .zc-wb-actions .zc-btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  padding: 4px;
  height: 32px;
  min-height: 32px;
}

.zc-variant-b .zc-wb-actions .zc-btn-secondary:hover {
  color: var(--ink);
  background: var(--panel);
}

/* 2. Виджет тестов: крупно «3 из 3» */
.zc-wb-test-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  padding: 14px 18px;
  border-radius: 14px;
  margin: 10px 0 12px;
}

.zc-wb-test-num {
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--data-ok);
  letter-spacing: -0.02em;
}

.zc-wb-test-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.zc-wb-test-scope {
  font-size: 12px;
  color: var(--muted);
}

/* 3. Виджет плана: шкала прогресса */
.zc-wb-prog-wrap {
  background: var(--panel);
  padding: 12px 16px;
  border-radius: 14px;
  margin: 10px 0 14px;
}

.zc-wb-prog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.zc-wb-bar {
  height: 7px;
  border-radius: 999px;
  background: #E2E5EE;
  overflow: hidden;
}

.zc-wb-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--action);
  transition: width 0.4s var(--ease);
}

/* 4. Виджет расхода: крупные числа */
.zc-wb-usage-hero {
  background: var(--panel);
  padding: 14px 18px;
  border-radius: 14px;
  margin: 10px 0 12px;
}

.zc-wb-usage-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.zc-wb-usage-lbl {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* 5. Виджет вариантов картинок: крупные превью и одна главная кнопка */
.zc-variant-b .zc-media-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.zc-variant-b .zc-media-option {
  background: var(--panel);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s var(--ease);
}

.zc-variant-b .zc-media-option.is-recommended {
  box-shadow: 0 0 0 2px var(--action);
  background: #F8F9FE;
}

.zc-variant-b .zc-media-image {
  min-height: 125px;
  border-radius: 10px;
  background: linear-gradient(135deg, #EAEBF2, #DDE1F0);
  color: var(--ink);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  padding: 14px;
  text-align: center;
  box-sizing: border-box;
}

.zc-variant-b .zc-media-recommended {
  background: var(--action);
  color: var(--action-ink);
  font-weight: 600;
  font-size: 11px;
}

.zc-variant-b .zc-media-headline {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 18px;
}

/* Одна главная кнопка: только у рекомендованного варианта яркая заливка */
.zc-variant-b .zc-media-option:not(.is-recommended) .zc-btn-primary {
  height: 36px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 500;
  box-shadow: none;
}

.zc-variant-b .zc-media-option:not(.is-recommended) .zc-btn-primary:hover {
  background: #E2E5EE;
}

.zc-variant-b .zc-media-option.is-recommended .zc-btn-primary {
  height: 36px;
  border-radius: 10px;
  background: var(--action);
  color: var(--action-ink);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.25);
}

/* 6. Виджет диффа: крупный бейдж и одна главная кнопка */
.zc-variant-b .zc-badge-add,
.zc-variant-b .zc-badge-rm {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 6px;
}

.zc-variant-b .zc-badge-add { background: var(--data-ok-bg); }
.zc-variant-b .zc-badge-rm { background: var(--data-bad-bg); }

.zc-variant-b .zc-actions .zc-btn-primary {
  height: 40px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--action);
  color: var(--action-ink);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.25);
}

.zc-variant-b .zc-actions .zc-btn-danger {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 500;
}

.zc-variant-b .zc-actions .zc-btn-danger:hover {
  background: #E2E5EE;
  color: var(--ink);
}

/* Адаптив под мобильный экран */
@media (max-width: 600px) {
  .zc-variant-b .zc-media-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .zc-wb-route {
    font-size: 19px;
  }
  .zc-wb-time-val {
    font-size: 19px;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .zc-wb-fill {
    transition: none !important;
  }
}
}