/* раздел «Скидки»: карточки промокодов. Токены — в tokens/*.css,
   чипы категорий и кнопки берём из site.css / money-chat.css. */

.promo-intro { padding: 16px var(--screen-padding) 0; }
.promo-intro__title {
  margin: 0; font-family: var(--font-heading); font-weight: 800;
  font-size: var(--font-size-h1); line-height: var(--line-heading);
}
.promo-intro__lead { margin: 6px 0 0; font-size: var(--font-size-small); color: var(--text-muted); line-height: var(--line-body); }

/* Сколько промокодов в категории. Цифра понятна без чтения — а наша аудитория
   читает плохо и по-русски не всегда. */
.chip__count {
  margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--surface-section); color: var(--text-muted);
  font-size: var(--font-size-legal); font-weight: 700;
}
.chip--selected .chip__count { background: var(--color-primary); color: #FFFFFF; }

.promo-list { display: flex; flex-direction: column; gap: 12px; padding: 4px var(--screen-padding) 0; }

.promo-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
}
.promo-card__head { display: flex; align-items: center; gap: 12px; }
.promo-card__logo {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary-50); color: var(--color-primary-600);
}
.promo-card__logo .icon { width: 22px; height: 22px; }
/* Загруженный логотип сервиса вместо иконки категории: держим круг того же
   размера, картинку вписываем целиком (contain), фон белый — под тёмные и
   прозрачные логотипы. */
.promo-card__logo--img { background: #FFFFFF; border: 1px solid var(--color-border); overflow: hidden; padding: 3px; }
.promo-card__logo--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.promo-card__who { display: flex; flex-direction: column; min-width: 0; }
.promo-card__merchant {
  font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-card__cat { font-size: var(--font-size-legal); color: var(--text-muted); }

/* Главное в карточке — что человек получит, поэтому это самый крупный текст */
.promo-card__title {
  margin: 0; font-family: var(--font-heading); font-weight: 800;
  font-size: var(--font-size-h3); line-height: 1.25; color: var(--text-body);
}
.promo-card__terms { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.promo-card__until {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--font-size-legal); color: var(--text-muted);
}

/* Код — то, что человек будет вставлять в чужое приложение: моноширинный,
   крупный, с большой кнопкой копирования (пальцем на 375px) */
.promo-code {
  display: flex; align-items: stretch; gap: 8px; margin-top: 4px;
}
/* Код показываем целиком и переносим по буквам: обрезка многоточием отнимала
   у человека ровно тот путь, ради которого написан запасной вариант в promo.js —
   переписать код руками, когда копирование не сработало. Две строки лучше,
   чем половина кода. */
.promo-code__value {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  min-height: var(--control-height-sm); padding: 6px 10px;
  border: 2px dashed var(--color-border); border-radius: var(--radius-field);
  background: var(--surface-section);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1.25;
  color: var(--text-body); text-align: center;
  white-space: normal; word-break: break-all; overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}
.promo-code__copy {
  flex: none; min-height: var(--control-height-sm); padding: 0 14px;
  border: 0; border-radius: var(--radius-button);
  background: var(--color-cta); color: #FFFFFF; cursor: pointer;
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  transition: background var(--duration-fast);
}
.promo-code__copy:active { background: var(--color-cta-600); transform: translateY(1px); }
.promo-code__copy:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.promo-code__copy.is-copied { background: var(--color-cta-50); color: var(--color-cta-700); }
.promo-code__value.is-selected { border-color: var(--color-trust); border-style: solid; }

.promo-card__go {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  min-height: var(--touch-target); margin-top: -4px;
  color: var(--link); font-size: var(--font-size-small); font-weight: 600; text-decoration: none;
}
.promo-card__go:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.promo-card__nocode { margin: 0; font-size: var(--font-size-legal); color: var(--text-muted); text-align: center; }

/* Пометка «Реклама» у партнёрских размещений. Слово видно всегда — так требует
   38-ФЗ; рекламодатель и erid раскрываются по тапу, чтобы не забивать карточку
   служебной строкой. Такая же плашка есть у карточек МФО (money-chat.css). */
.promo-card__legal { margin-top: 2px; }
.promo-card__ad {
  display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer;
  padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-section);
  font-size: var(--font-size-legal); color: var(--text-muted); width: fit-content;
}
.promo-card__ad::-webkit-details-marker { display: none; }
.promo-card__ad:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }
.promo-card__legal[open] .promo-card__ad { color: var(--text-body); }
.promo-card__legal[open] .promo-card__ad .icon { transform: rotate(180deg); }
.promo-card__legal-body {
  margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-field);
  background: var(--surface-section);
  font-size: var(--font-size-legal); line-height: 1.4; color: var(--text-muted);
}

/* Честная подпись: мы не устанавливаем эти условия и не отвечаем за них */
.promo-note {
  margin: 20px var(--screen-padding) 0; padding: 12px 14px;
  border-radius: var(--radius-field); background: var(--surface-section);
  font-size: var(--font-size-legal); line-height: 1.5; color: var(--text-muted);
}