/* TIM PLAY — КАРТА НОМИНАЛА: один вид на сайте и в Telegram-магазине (§0cc).
   Карта рисуется стилями, а не картинкой: номиналы владелец ведёт в Google-таблице, и под
   новый номинал взяться картинке неоткуда (у Индии готовых нет вовсе). Разметку даёт
   TimCodes.art на сайте и TimTopups.artHtml в магазине — классы одни и те же.
   Раньше правила жили только в site/styles.css, и магазин рисовал СВОЮ карту: она
   выглядела заметно хуже сайта (замечание владельца 24.08). Теперь файл общий: сайт
   подключает его как /tg/topup-card.css (site_content.HEAD_COMMON), магазин — как
   /topup-card.css. Менять вид карты — ЗДЕСЬ, и он меняется сразу на обоих фронтах. */

/* Цвет направления — ОДНА таблица на весь сайт: её берут и карта номинала, и плитка
   раздела (свечение, надпись). Второй список цветов не заводим (§0cc).
   --c1/--c2 — сама карта, --glow — отблеск плитки, --acc — цвет надписи над названием
   (у тёмных брендов вроде Roblox сам --c1 на тёмном фоне не читается). */
[data-brand] { --c1: #2a5cf0; --c2: #0b1a52; --glow: rgba(42,92,240,0.20); --acc: #8aa8ff; }
[data-brand="in"] { --c1: #f0871f; --c2: #5a2a06; --glow: rgba(240,135,31,0.18); --acc: #ffb066; }
[data-brand="rbx"] { --c1: #3b4250; --c2: #11151d; --glow: rgba(214,72,72,0.16); --acc: #ff8080; }
[data-brand="apple"] { --c1: #7e8794; --c2: #20242c; --glow: rgba(160,172,190,0.14); --acc: #cfd6e0; }
[data-brand="steam"] { --c1: #2f5a86; --c2: #0b1420; --glow: rgba(80,150,220,0.18); --acc: #7fc2ff; }
/* Направления без карты (игры, подписки) — те же переменные, свои оттенки. */
[data-brand="games"] { --glow: rgba(63,107,255,0.18); --acc: #8aa8ff; }
[data-brand="sharing"] { --glow: rgba(150,110,255,0.18); --acc: #b79bff; }
[data-brand="psplus"] { --glow: rgba(255,196,60,0.14); --acc: #ffd166; }
[data-brand="ea"] { --glow: rgba(120,90,230,0.18); --acc: #a48cff; }
/* ВАЖНО: собственные --c1/--c2 здесь НЕ объявляем — они перебили бы значения из общей
   таблицы выше (собственное свойство элемента сильнее унаследованного), и карты всех
   брендов стали бы синими. Запасной цвет — только для карты без data-brand. */
.tcard:not([data-brand]) { --c1: #2a5cf0; --c2: #0b1a52; }
.tcard {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1.58 / 1; padding: 9px 11px; border-radius: 13px; overflow: hidden;
  color: #fff; isolation: isolate;
  background: linear-gradient(135deg, var(--c1), var(--c2) 78%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Блик и диагональная «голограмма» — тоже стилями: карта выглядит как пластик, а не плашка */
.tcard::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,0.28), transparent 60%); }
.tcard::after { content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: -30%; left: -22%; width: 50%; height: 170%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); }
.tcard-logo { position: absolute; right: -6px; bottom: -8px; width: 50%; opacity: 0.16; z-index: 0;
  filter: brightness(0) invert(1); }
.tcard-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.tcard-top img { width: 14px; height: 14px; border-radius: 3px; }
/* Номинал не должен вылезать из карты: размер считается от ШИРИНЫ САМОЙ КАРТЫ (cqw),
   а не от ширины окна — после сужения полосы контента плитки стали уже, а шрифт остался
   прежним, и «2000 ₺» обрезался. Потолок держит крупный номинал на больших картах. */
.tcard { container-type: inline-size; }
.tcard-nom { position: relative; z-index: 2; font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(17px, 21cqw, 27px); white-space: nowrap; }
.tcard-cur { font-size: 0.44em; font-weight: 800; opacity: 0.85; margin-left: 0.16em; }

/* Крупная карта на странице товара (магазин: страница карт пополнения). Тот же .tcard,
   только больше — как герой-карта на сайте. Держим размер здесь, рядом с самой картой,
   чтобы «как выглядит карта» не расползалось по файлам страниц. */
.topup-hero-art {
  width: 100%;      /* во всю ширину страницы: своей рамки у блока нет, карта и есть герой */
  margin: 0;
}
.topup-hero-art .tcard {
  border-radius: 20px;
  padding: 16px 20px;
}
.topup-hero-art .tcard-top {
  font-size: 12px;
  gap: 7px;
}
.topup-hero-art .tcard-top img {
  width: 18px;
  height: 18px;
}
.topup-hero-art .tcard-nom {
  font-size: clamp(34px, 22cqw, 58px);
}