/**
 * Стили реалистичного компонента карты Apple Wallet (views/partials/wallet-card.ejs).
 * Единый источник для страницы установки (/pass/:serial) и мини-макета «Активный дизайн» на
 * дашборде. Маркетинговый лендинг (views/landing.ejs) держит СВОЮ инлайн-копию этих правил
 * (лендинг — off-limits для рефакторинга), поэтому здесь — точный дубль тех же классов плюс
 * поддержка логотипа-картинки (.wallet-card__logo-img), которой на лендинге нет.
 */
.wallet-card {
  width: min(340px, calc(100vw - 48px)); max-width: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-product); font-family: var(--font-text); text-align: left;
}
.wallet-card--sm { width: min(300px, calc(100vw - 48px)); }
.wallet-card__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; }
.wallet-card__logo {
  width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 14px; flex-shrink: 0;
}
/* Логотип-картинка (реальный загруженный логотип клуба): слева вверху, натуральные пропорции —
   не втискиваем горизонтальный логотип 480×150 в 30px-квадрат плашки-инициала. */
.wallet-card__logo-img { height: 30px; width: auto; max-width: 132px; object-fit: contain; display: block; flex-shrink: 0; }
.wallet-card__head-text { min-width: 0; }
.wallet-card__org { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: -0.2px; display: block; }
.wallet-card__type { font-size: 11px; opacity: 0.6; display: block; }
.wallet-card__strip { width: 100%; height: 120px; object-fit: cover; display: block; }
/* G1 (визуальная сетка штампов): оверлей-превью «Активного дизайна» на дашборде (views/dashboard.ejs
   передаёт stampGridUrl → partials/wallet-card.ejs). .wallet-card__strip-wrap — позиционирующий
   контекст; div.wallet-card__strip (без img) — фирменный фон вместо фото, когда strip-ассета нет (см.
   коммент в партиале). Оверлей — прозрачный SVG (src/services/stampGrid.ts), object-fit как у фото. */
.wallet-card__strip-wrap { position: relative; display: block; }
.wallet-card__stamp-grid-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.wallet-card__fields { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 16px 18px 4px; }
/* Пропуск сотрудника (generic-pass): фото справа от полей, поля в столбик слева */
.wallet-card__fields--with-thumb { align-items: flex-start; }
.wallet-card__fields--with-thumb .wallet-card__fields-col { display: flex; flex-direction: column; gap: 12px; }
.wallet-card__fields:not(.wallet-card__fields--with-thumb) .wallet-card__fields-col { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex: 1; }
.wallet-card__thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.wallet-card__field-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.wallet-card__field-value { font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -0.3px; line-height: 1.1; margin-top: 3px; }
.wallet-card__qr-wrap { padding: 16px 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wallet-card__qr { background: #fff; border-radius: 8px; padding: 8px; line-height: 0; }
.wallet-card__qr-number { font-size: 10px; letter-spacing: 0.2em; opacity: 0.55; }

/* ============================================================
   ТОЧНАЯ раскладка Apple Wallet для страницы установки / Telegram-карты (partials/wallet-card.ejs,
   режим `kind`). Классы .wallet-pass__* — scoped-подмножество, ПОРТИРОВАНО из public/designer.css
   (конструктор): единый вид «конструктор == приглашение == установленная карта» (баг Е). Значения —
   пиксельный замер мокапа Apple (см. подробные комментарии в designer.css). Меняешь тут — сверяй с
   designer.css. Класс .wallet-pass не конфликтует с .wallet-card (простой режим, дашборд/лендинг).
   ============================================================ */
.wallet-pass {
  width: 100%; max-width: 340px; aspect-ratio: 343 / 503; border-radius: var(--radius-lg);
  padding: 22px 20px; box-shadow: var(--shadow-product); overflow: hidden; text-align: left;
  font-family: -apple-system, system-ui, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; gap: 18px; position: relative;
}
.wallet-pass--coupon, .wallet-pass--ticket { border-radius: var(--radius-lg); }
.wallet-pass__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wallet-pass__logo-group { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; }
.wallet-pass__logo {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 16px;
}
.wallet-pass__logo img { width: 100%; height: 100%; object-fit: contain; }
.wallet-pass__logo-text {
  font-weight: var(--fw-semibold); font-size: 18px; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.wallet-pass__header-fields { display: flex; align-items: flex-start; gap: 14px; justify-content: flex-end; min-width: 0; }
.wallet-pass__header-fields .wp-field { text-align: right; min-width: 0; max-width: 150px; }
.wallet-pass__header-fields .wallet-pass__label,
.wallet-pass__header-fields .wallet-pass__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-pass__header-fields .wallet-pass__value { font-size: 19px; }
.wallet-pass__label { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; margin-bottom: 3px; }
.wallet-pass__value { font-family: inherit; font-size: 21px; font-weight: var(--fw-regular); letter-spacing: -0.2px; line-height: 1.15; }
.wallet-pass__strip-wrap { position: relative; }
.wallet-pass__strip { width: 100%; aspect-ratio: 375 / 144; height: auto; object-fit: cover; display: block; border-radius: var(--radius-sm); }
.wallet-pass__strip-empty { width: 100%; aspect-ratio: 375 / 144; border-radius: var(--radius-sm); background: rgba(127, 127, 127, 0.16); }
/* Задача №21 (владелец, 11.07.2026, рекомендация исследования): общий градиент-скрим снизу поверх
   strip-фото — прозрачно сверху → ~0.45 в нижней трети, та же математика, что серверный
   buildStripScrimSvg (src/services/stampGrid.ts), запекаемый в assemblePass — превью=карта
   (install/Telegram/лендинг). Добавляется только для storeCard/coupon с реальным фото
   (см. wcStripHtml, views/partials/wallet-card.ejs). */
.wallet-pass__strip-scrim {
  position: absolute; inset: 0; border-radius: var(--radius-sm); pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 34%);
}
.wallet-pass__strip-primary-overlay { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #fff; }
.wallet-pass__strip-primary-overlay .wallet-pass__value { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.55); }
.wallet-pass__strip-primary-overlay .wallet-pass__label { color: #fff; opacity: 0.9; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
.wallet-pass__primary .wallet-pass__value { font-size: 30px; letter-spacing: -0.4px; line-height: 1.05; }
.wallet-pass__row { display: flex; gap: 14px; align-items: flex-start; }
.wallet-pass__row .wp-field { flex: 1 1 0; min-width: 0; }
.wallet-pass__row .wallet-pass__label,
.wallet-pass__row .wallet-pass__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-pass__row + .wallet-pass__row { margin-top: -10px; }
.wallet-pass__generic-row { display: flex; align-items: flex-end; gap: 16px; }
.wallet-pass__generic-row .wallet-pass__primary { flex: 1 1 auto; min-width: 0; }
.wallet-pass__thumbnail-placeholder { flex: 0 0 24%; width: 24%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; }
.wallet-pass__thumbnail-placeholder--filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wallet-pass__barcode {
  align-self: center; width: 82%; margin-top: auto; background: #fff; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.wallet-pass__barcode:has(.wallet-pass__barcode-qr) { width: 46%; }
.wallet-pass__barcode-bars { width: 100%; aspect-ratio: 4.8 / 1; height: auto; display: flex; gap: 2px; align-items: stretch; }
.wallet-pass__barcode-bar { flex: 1; background: #1d1d1f; }
.wallet-pass__barcode-bar--wide { flex: 2; }
.wallet-pass__barcode-bar--gap { background: transparent; }
.wallet-pass__barcode-number { font-size: 11px; color: #7a7a7a; letter-spacing: 0.12em; }
.wallet-pass__barcode-qr { width: 100%; }
.wallet-pass__barcode-qr svg { display: block; width: 100%; height: auto; }

/* ============================================================
   ПОСТЕРНЫЙ формат (posterGeneric/posterEventTicket) для страницы установки / Telegram-карты
   (partials/wallet-card.ejs, wcPosterHtml). Фото artwork на весь экран (inline background-image),
   поля снизу поверх затемнения. Классы ЕДИНЫ с конструктором (public/designer.css .wallet-pass--poster
   / .wp-poster__* / .wp-pticket__*) — держать синхронно. Тут нет JS-покраски (в отличие от renderCard),
   поэтому белый текст поверх фото форсится ИМЕННО CSS-ом. Достоверность (item 6): фон = фото, не цвет.
   ============================================================ */
.wallet-pass--poster { padding: 0; gap: 0; overflow: hidden; justify-content: flex-start; color: #fff; }
.wallet-pass--poster .wallet-pass__label,
.wallet-pass--poster .wallet-pass__value { color: #fff; }

.wp-poster__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px 20px; position: relative; z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.wallet-pass--poster .wp-poster__top .wallet-pass__logo { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.18); }
.wallet-pass--poster .wp-poster__top .wallet-pass__logo-text { font-size: 15px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.wallet-pass--poster .wp-poster__top .wallet-pass__header-fields .wallet-pass__value { font-size: 15px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.wallet-pass--poster .wp-poster__top .wallet-pass__header-fields .wallet-pass__label { opacity: 0.82; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

.wp-poster__center {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 12px 20px;
}
.wp-poster__qr { background: #fff; padding: 10px; border-radius: 12px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); }
.wp-poster__qr .wallet-pass__barcode-qr svg { display: block; width: 112px; height: 112px; }
.wp-poster__qr .wallet-pass__barcode-bars { width: 150px; height: 46px; }

.wp-poster__scrim {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0));
  padding: 46px 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.wp-poster__primaryrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.wallet-pass--poster .wp-poster__primaryrow .wallet-pass__primary { min-width: 0; flex: 1 1 auto; }
.wallet-pass--poster .wp-poster__primaryrow .wallet-pass__primary .wallet-pass__value { font-size: 24px; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.wp-poster__secondcol { display: flex; gap: 16px; flex: 0 1 auto; align-items: flex-end; }
.wp-poster__footer { display: flex; gap: 18px; flex-wrap: wrap; }
.wallet-pass--poster .wp-poster__secondcol .wallet-pass__value { font-size: 14px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.wallet-pass--poster .wp-poster__footer .wallet-pass__value { font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.wallet-pass--poster .wp-poster__secondcol .wallet-pass__label,
.wallet-pass--poster .wp-poster__footer .wallet-pass__label { font-size: 9px; letter-spacing: 0.06em; opacity: 0.82; margin-bottom: 1px; }

.wp-pticket__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px 18px; position: relative; z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.wp-pticket__topleft { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wallet-pass--poster .wp-pticket__logo { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 30px; background: rgba(255, 255, 255, 0.2); }
.wallet-pass--poster .wp-pticket__topleft .wallet-pass__value { font-size: 16px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.wp-pticket__topright { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 0 1 auto; gap: 2px; }
.wp-pticket__topright .wp-field { text-align: right; }
.wallet-pass--poster .wp-pticket__topright .wallet-pass__value { font-size: 12px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.wp-pticket__mid {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px 8px;
}
.wp-pticket__bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 16px 16px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}
.wp-pticket__bl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wallet-pass--poster .wp-pticket__bl .wallet-pass__primary .wallet-pass__value { font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.wallet-pass--poster .wp-pticket__bl > .wp-field .wallet-pass__value { font-size: 12px; font-weight: 600; opacity: 0.92; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.wallet-pass--poster .wp-pticket__bl > .wp-field .wallet-pass__label { font-size: 9px; letter-spacing: 0.06em; opacity: 0.8; }
.wp-pticket__br { display: flex; gap: 14px; flex: 0 1 auto; align-items: flex-end; }
.wallet-pass--poster .wp-pticket__br .wallet-pass__value { font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.wallet-pass--poster .wp-pticket__br .wallet-pass__label { font-size: 9px; letter-spacing: 0.06em; opacity: 0.82; }