/* Persik: окно покупки на FunPay (brand/funpay.js). Цвета, скругления и шрифт — из темы витрины: команда стоит в
   «таблетке», как поле «Кому отправить подарок», «Скопировать» — как «Применить» у промокода, номера шагов — в тон
   кнопкам. Без color-mix браузер берёт сплошной цвет строкой выше. */

/* Части окна «через менеджера», которых на FunPay нет: строка «перевод менеджеру», «Маркет», «Купить» и подпись
   про чат с менеджером. Витрина их не удаляет, а прячет: так она не путается при перерисовке. */
[data-persik-fp-hidden] {
  display: none !important;
}

/* Шаги покупки — в карточке подарка, под строкой с ценой, на месте строки оплаты менеджеру. */
.persik-fp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 16px 16px;
  list-style: none;
}
.persik-fp-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.persik-fp-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #10355f);
  background: color-mix(in oklab, var(--primary, #1689ff) 18%, var(--secondary, #1c1c1c));
  color: var(--primary, #1689ff);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.persik-fp-text {
  padding-top: 2px;
  color: var(--foreground, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}
/* Команда во всю ширину карточки: длинное имя коллекции с номером в узкую колонку шага не влезло бы. Команда не
   переносится — разорванную на «khabibspapakha-» и «10130» легко отправить не целиком. Не помещается рядом с кнопкой
   (самые длинные на узком телефоне) — кнопка уходит строкой ниже и встаёт во всю ширину. Свободное место в строке
   почти целиком берёт команда (flex-grow 1000 против 1), поэтому рядом с ней кнопка своей ширины. */
.persik-fp-command {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 42px;
  padding: 4px 4px 4px 14px;
  border-radius: 21px;
  background: var(--secondary, #1c1c1c);
  background: color-mix(in oklab, var(--secondary, #1c1c1c) 80%, transparent);
  box-shadow: var(--glass, none);
}
.persik-fp-code {
  flex: 1000 1 auto;
  padding: 8px 0;
  background: none;
  color: var(--foreground, #fff);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
}
.persik-fp-copy {
  flex: 1 0 auto;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #10355f);
  background: color-mix(in oklab, var(--primary, #1689ff) 18%, var(--secondary, #1c1c1c));
  color: var(--primary, #1689ff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.persik-fp-copy[data-state="done"] {
  background: var(--secondary, #1c1c1c);
  background: color-mix(in oklab, var(--success, #49df64) 14%, var(--secondary, #1c1c1c));
  color: var(--success, #49df64);
}
.persik-fp-copy:focus-visible,
.persik-fp-open:focus-visible {
  outline: 2px solid var(--ring, #fff);
  outline-offset: 2px;
}

/* «Открыть FunPay»: класс кнопки «Купить» витрины (там подпись и цена столбиком) — здесь подпись и значок в строку. */
.persik-fp-open-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.persik-fp-open-icon {
  display: grid;
  opacity: 0.8;
}
.persik-fp-hint {
  margin: 0;
  padding: 0 4px;
  color: var(--muted-foreground, #8e8e93);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

/* Бывшие ссылки на менеджера и бота («Написать @PERSIKSKIF» в «Как купить» и др.): значок самолётика — знак
   Telegram, на FunPay он ни к чему. Пока адреса FunPay нет, ссылка выглядит неактивной. */
a[data-persik-funpay] > svg {
  display: none;
}
a[data-persik-funpay][aria-disabled="true"] {
  opacity: 0.5;
}

.persik-fp-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 100;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--muted, #3a3a3a);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.5);
  color: var(--foreground, #fff);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.persik-fp-toast[hidden] {
  display: none;
}

/* Шапка, как на основном сайте (site/banners/persik-banners.css там): круглый логотип вместо персика и название
   PERSIK MARKET вместо «persik». Баннеры основного сайта ведут в бота — здесь их нет, остаются слайды сборки. */
a[href="#top"][aria-label^="Persik"] > svg {
  background: url("/brand/logo-256.png") center / contain no-repeat;
  border-radius: 50%;
}
a[href="#top"][aria-label^="Persik"] > svg > * {
  display: none;
}
a[href="#top"][aria-label^="Persik"] > span {
  font-size: 0 !important;
}
a[href="#top"][aria-label^="Persik"] > span::after {
  content: "PERSIK MARKET";
  font-size: 18px;
  line-height: 28px;
  text-transform: none;
}