/* =====================================================================
   Брендируемые элементы (этап 2). Всё на бренд-токенах, всё за тумблером.
   - co-branding «Организатор»
   - прогресс к призу + milestone
   - scratch-подарок (стираемая брендовая плашка)
   - конфетти-бёрст
   ===================================================================== */

/* ---------- co-branding / организатор ---------- */
.rf-sponsor{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
}
/* Цвета плашки спонсора вынесены в переменные --sponsor-*. Не заданы —
   подставляются токены темы, то есть вид ровно как раньше. Значения ставит
   пресет (ось «Цвета спонсора»), поэтому перебивать правила !important не надо. */
.rf-sponsor-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--sponsor-bg, var(--brand-primary-soft));
  border: 1px solid var(--sponsor-border, var(--notice-border));
}
.rf-sponsor-mark{
  position: relative; overflow: hidden;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg,
    var(--sponsor-mark-from, var(--brand-primary)),
    var(--sponsor-mark-to, var(--feature-gradient-to)));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -1px var(--brand-shadow);
}
.rf-sponsor-mark img{ width: 62%; height: 62%; object-fit: contain; }
.rf-sponsor-logo{ position: absolute; inset: 0; border-radius: 50%;
  background: var(--logo) center / cover no-repeat; }
.rf-sponsor-mark span{ color: var(--sponsor-mark-text, #fff); font-weight: 800; font-size: 12px; }
.rf-sponsor-text{ font-size: 12px; color: var(--sponsor-text, var(--text-muted)); }
.rf-sponsor-text b{ color: var(--sponsor-text-strong, var(--text-body)); font-weight: 700; }

/* ---------- «Билеты от друзей» (1 реф = 1 билет, линейно, без потолка) ---------- */
.rf-reftrack{
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 16px); padding: 14px 16px; box-shadow: var(--card-shadow-sm);
}
.rf-reftrack-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rf-reftrack-title{ font-size: 14px; font-weight: 600; color: var(--text-strong); }
.rf-reftrack-count{
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand-primary);
  background: var(--brand-primary-soft); border-radius: 999px; padding: 2px 9px;
}
/* ряд иконок-билетов: заработанные (бренд) + следующий «призрачный» */
.rf-reftrack-row{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rf-ticket-ico{
  width: 26px; height: 26px; flex-shrink: 0;
  -webkit-mask: var(--ticket-icon, url(/uploads/brand/icon-ticket.svg)) center / contain no-repeat;
          mask: var(--ticket-icon, url(/uploads/brand/icon-ticket.svg)) center / contain no-repeat;
}
.rf-ticket-ico.is-earned{ background: var(--ticket-fill, var(--brand-primary)); }
/* следующий (ещё не полученный) билет — видимый «призрак», явно пустой (был --surface-border, почти невидим) */
.rf-ticket-ico.is-next{ background: var(--text-muted); opacity:.5; animation: rf-next-pulse 1.6s ease-in-out infinite; }
@keyframes rf-next-pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.78 } }
.rf-reftrack-more{ font-size: 12px; color: var(--text-muted); }
.rf-reftrack-hint{ font-size: 12px; color: var(--text-body); margin-top: 10px; line-height: 1.4; }
.rf-reftrack-hint b{ font-size: 1em; font-weight: 700; color: inherit; }

/* опц. бонус-вехи (НЕ базовая механика; включается брендом) — вот тут прогресс уместен */
.rf-ms-bar{ position: relative; margin-top: 14px; padding-top: 6px; }
.rf-ms-track{ position: relative; height: 6px; border-radius: 999px; background: var(--brand-primary-soft); }
.rf-ms-fill{ position:absolute; inset:0 auto 0 0; width: var(--p,0%); border-radius:999px;
  background: linear-gradient(90deg, var(--brand-primary), var(--feature-gradient-to)); transition: width .5s; }
.rf-ms-mark{ position: absolute; top: -7px; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:3px; }
.rf-ms-dot{ width: 20px; height: 20px; border-radius: 50%; background: var(--color-card);
  border: 2px solid var(--brand-primary-soft); display:flex; align-items:center; justify-content:center; }
.rf-ms-dot::before{ content:''; width:11px; height:11px;
  -webkit-mask: var(--milestone-icon, url(/uploads/brand/icon-gift.svg)) center/contain no-repeat;
          mask: var(--milestone-icon, url(/uploads/brand/icon-gift.svg)) center/contain no-repeat;
  background: var(--text-muted); }
.rf-ms-mark.is-reached .rf-ms-dot{ background: var(--brand-primary); border-color: var(--brand-primary); }
.rf-ms-mark.is-reached .rf-ms-dot::before{ background: var(--brand-primary-contrast); }
.rf-ms-cap{ font-size: 9px; font-weight:700; color: var(--text-muted); white-space:nowrap; }
.rf-ms-mark.is-reached .rf-ms-cap{ color: var(--brand-primary); }
.rf-ms-legend{ font-size: 12px; line-height: 1.5; color: var(--text-muted); margin-top: 26px; }
.rf-ms-legend b{ font-size: 1em; font-weight: 700; color: inherit; }

/* ---------- кастомный доп-блок (image | cta), фон: preset|gradient|image ---------- */
.rf-block{
  margin-top: 24px; border-radius: var(--radius-card, 16px); overflow: hidden;
  box-shadow: var(--card-shadow-sm);
}
.rf-block-imglink{ display: block; }
.rf-block-imglink:not([href]){ pointer-events: none; }
.rf-block--image .rf-block-img{ width: 100%; height: auto; display: block; }
.rf-block-body{ display: flex; align-items: center; gap: 14px; padding: 18px; }
.rf-block-text{ flex: 1; min-width: 0; }
.rf-block-title{ font-size: 16px; font-weight: 700; margin-bottom: 4px; line-height: 1.25; }
.rf-block-desc{ font-size: 13px; line-height: 1.42; margin-bottom: 13px; white-space: pre-line; }
.rf-block-btn{
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: var(--radius-button, 12px); text-decoration: none; cursor: pointer;
}
.rf-block-logo-wrap{ flex-shrink: 0; display: flex; align-items: center; }
.rf-block-logo{ width: 60px; height: 60px; object-fit: contain; border-radius: 14px;
  background: rgba(255,255,255,.9); padding: 8px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.25); }
/* фон: пресет (мягкий бренд) */
.rf-block--bg-preset{ background: var(--brand-primary-soft); border: 1px solid var(--notice-border); }
.rf-block--bg-preset .rf-block-title{ color: var(--text-strong); }
.rf-block--bg-preset .rf-block-desc{ color: var(--text-body); }
.rf-block--bg-preset .rf-block-btn{ background: var(--brand-primary); color: var(--brand-primary-contrast); }
/* фон: градиент бренда */
.rf-block--bg-gradient{ background: linear-gradient(120deg, var(--feature-gradient-from), var(--feature-gradient-to)); }
.rf-block--bg-gradient .rf-block-title{ color: var(--on-gradient); }
.rf-block--bg-gradient .rf-block-desc{ color: var(--on-gradient); opacity: .92; }
.rf-block--bg-gradient .rf-block-btn{ background: #fff; color: var(--brand-primary); }
/* фон: картинка (+скрим для читаемости) */
.rf-block--bg-image{ position: relative; background: var(--block-bg-image, var(--brand-primary-soft)) center / cover no-repeat; }
.rf-block--bg-image::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.18)); }
.rf-block--bg-image .rf-block-body{ position: relative; z-index: 1; }
.rf-block--bg-image .rf-block-title{ color: #fff; }
.rf-block--bg-image .rf-block-desc{ color: #fff; opacity: .95; }
.rf-block--bg-image .rf-block-btn{ background: #fff; color: #111; }

/* ---------- scratch-подарок ---------- */
/* Обёртка-ссылка вокруг блока — используется ТОЛЬКО для custom-варианта (без стирания).
   Для scratch мы <a> не оборачиваем — иначе canvas и <a> конфликтуют
   (click на canvas всплывает вверх и активирует <a> одновременно со стиранием).
   Вместо этого scratch получает data-scratch-link, а an_brand.js reveal() навешивает
   click-хендлер на card после того как стирание завершено. */
.rf-scratch-wrap{ display: block; text-decoration: none; color: inherit; }

.rf-scratch{
  position: relative; overflow: hidden;
  border-radius: var(--radius-card, 16px); border: 1px solid var(--color-border);
  background: var(--color-card); box-shadow: var(--card-shadow-sm);
  min-height: 96px; padding: 16px 18px;
}
.rf-scratch-prize{ display: flex; align-items: center; gap: 14px; }
.rf-scratch-img{ width: 54px; height: 54px; flex-shrink: 0; border-radius: 13px;
  background: var(--img) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--surface-border); }
.rf-scratch-img[hidden]{ display: none; }
.rf-scratch-content{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rf-scratch-kicker{ font-size: 12px; color: var(--text-muted); }
.rf-scratch-code{
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  letter-spacing: .06em; color: var(--brand-primary); line-height: 1.12;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-scratch-sub{ font-size: 12px; color: var(--text-body); }
.rf-scratch-btn{ margin-top: 11px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-primary); color: var(--brand-primary-contrast); text-decoration: none;
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.rf-scratch-btn[hidden]{ display: none; }
.rf-scratch-cover{
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: grab; z-index: 2;
}
.rf-scratch-hint{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: opacity .3s;
}
.rf-scratch-hint i{ font-size: 17px; animation: rf-scratch-tap 1.5s ease-in-out infinite; }
@keyframes rf-scratch-tap{ 0%,100%{ transform: translate(0,0) rotate(0); } 35%{ transform: translate(-2px,2px) rotate(-8deg); } 70%{ transform: translate(2px,-1px) rotate(6deg); } }
.rf-scratch.is-revealed .rf-scratch-cover{ opacity: 0; transition: opacity .4s; pointer-events: none; }
.rf-scratch.is-revealed .rf-scratch-hint{ opacity: 0; }
@media (prefers-reduced-motion: reduce){ .rf-scratch-hint i{ animation: none; } }

/* ---------- иконка успеха (режимы: check / logo / image / preset) ---------- */
.rf-hero-icon{
  position: relative; width: 92px; height: 92px; margin: 6px auto 16px;
  display: flex; align-items: center; justify-content: center;
  animation: rf-hicon-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rf-hicon-pop{ from{ transform: scale(.6); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.rf-hicon-circle{
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-primary), var(--feature-gradient-to));
  /* Белый блик по верхней кромке убран: на градиенте он давал объём, но поверх
     логотипа читался как белёсый ободок по краю круга. Осталась мягкая тень
     снизу и внешняя тень под кругом. */
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.18), 0 12px 26px -10px var(--brand-shadow);
}
/* тема-галочка */
.rf-hicon-check{ width: 46px; height: 46px; color: var(--brand-primary-contrast); }
.rf-hicon-check path{
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: rf-draw-check .45s ease .2s forwards;
}
@keyframes rf-draw-check{ to{ stroke-dashoffset: 0; } }
/* медиа (лого/картинка/пресет) */
.rf-hicon-media{ display: block; }
/* силуэт: маска лого, заливка контраст-цветом */
.rf-hicon-circle.is-silhouette .rf-hicon-media{
  width: 52%; height: 52%;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat;
  background-color: var(--brand-primary-contrast);
}
/* на белом: круг белый, лого истинными цветами */
.rf-hicon-circle.is-disc{ background: #fff; }
.rf-hicon-circle.is-disc .rf-hicon-media{ width: 62%; height: 62%; background: var(--img) center / contain no-repeat; }
/* заполнить: лого/картинка покрывает весь круг */
.rf-hicon-circle.is-cover .rf-hicon-media{ position: absolute; inset: 0; background: var(--img) center / cover no-repeat; }
/* Глянец — только под градиент. Внутренние тени из базового правила выше рисуют
   белый блик по верхней кромке и тёмный след по нижней: на однотонном круге это
   объём, а поверх картинки — белёсый ободок вокруг логотипа. Поэтому там, где
   внутри лежит изображение, оставляем одну внешнюю тень. */
.rf-hicon-circle.is-cover,
.rf-hicon-circle.is-disc{
  box-shadow: 0 12px 26px -10px var(--brand-shadow);
}
/* бейдж-галочка «участие подтверждено» */
.rf-hicon-badge{
  position: absolute; bottom: -1px; right: -1px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ok-accent, #16A34A); border: 3px solid var(--surface-card);
  display: flex; align-items: center; justify-content: center; color: #fff;
  animation: rf-hicon-pop .4s cubic-bezier(.34,1.56,.64,1) .35s both;
}
.rf-hicon-badge svg{ width: 15px; height: 15px; }
/* Вид значка задаёт его цвет: отказ — красный, победа — золотой.
   Базовый зелёный остаётся у галочки. */
.rf-hicon-badge.is-cross{ background: var(--er-accent, #DC2626); }
.rf-hicon-badge.is-crown{ background: var(--crown-accent, #F5B301); color: #3A2A00; }
.rf-hicon-badge.is-crown svg{ width: 16px; height: 16px; }
/* кольцо-подтверждение */
.rf-hicon-ring{
  position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--brand-primary);
  opacity: 0; animation: rf-ring-in .6s ease .15s forwards;
}
@keyframes rf-ring-in{ from{ transform: scale(.8); opacity: 0; } 60%{ opacity: .6; } to{ transform: scale(1); opacity: .35; } }
@media (prefers-reduced-motion: reduce){
  .rf-hero-icon, .rf-hicon-badge, .rf-hicon-ring{ animation: none; opacity: 1; }
  .rf-hicon-check path{ animation: none; stroke-dashoffset: 0; }
}

/* ---------- брендовый лоадер (A кольцо / B дыхание / C заливка / D прорисовка) ---------- */
.rf-loader{
  position: fixed; inset: 0; z-index: 200; background: var(--surface-page);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.rf-loader-stage{ position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; }
.rf-loader-label{ font-size: 13px; color: var(--text-muted); letter-spacing: .02em; }
.rf-loader-img{ width: 64px; height: 64px; display: block; }
.rf-loader-svg{ width: 76px; height: 76px; }

/* общий «коин» для A/B */
.rf-loader--A .rf-loader-img, .rf-loader--B .rf-loader-img{
  border-radius: 50%;
  background: var(--img) center / cover no-repeat, linear-gradient(150deg, var(--brand-primary), var(--feature-gradient-to));
  box-shadow: inset 0 2px 5px rgba(255,255,255,.42), inset 0 -8px 14px rgba(0,0,0,.18);
}
/* A — вращающаяся бренд-дуга вокруг лого */
.rf-loader-ring{
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--brand-primary) 0 18%, transparent 18% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: rf-spin .85s linear infinite;
}
@keyframes rf-spin{ to{ transform: rotate(360deg); } }
/* B — дыхание */
.rf-loader--B .rf-loader-img{ animation: rf-breathe 1.4s ease-in-out infinite; }
@keyframes rf-breathe{ 0%,100%{ transform: scale(.9); opacity: .7; } 50%{ transform: scale(1); opacity: 1; } }
/* C — силуэт лого + бегущий блик (лучше для прозрачных/моно) */
.rf-loader--C .rf-loader-img{
  width: 72px; height: 72px;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat;
  background: linear-gradient(110deg, var(--brand-primary) 35%, #ffffff 50%, var(--feature-gradient-to) 65%);
  background-size: 280% 100%; animation: rf-shimmer 1.15s linear infinite;
}
@keyframes rf-shimmer{ to{ background-position: -180% 0; } }
/* D — прорисовка контура (JS инлайнит SVG) */
.rf-loader--D .rf-loader-img{ display: none; }
.rf-loader--D .rf-loader-svg path, .rf-loader--D .rf-loader-svg line, .rf-loader--D .rf-loader-svg polyline,
.rf-loader--D .rf-loader-svg polygon, .rf-loader--D .rf-loader-svg circle, .rf-loader--D .rf-loader-svg rect, .rf-loader--D .rf-loader-svg ellipse{
  fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: rf-draw 1.8s ease-in-out infinite;
}
@keyframes rf-draw{ 0%{ stroke-dashoffset: 1; } 65%,100%{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  .rf-loader-ring, .rf-loader--B .rf-loader-img, .rf-loader--C .rf-loader-img,
  .rf-loader--D .rf-loader-svg path, .rf-loader--D .rf-loader-svg line, .rf-loader--D .rf-loader-svg polyline,
  .rf-loader--D .rf-loader-svg polygon, .rf-loader--D .rf-loader-svg circle, .rf-loader--D .rf-loader-svg rect{ animation: none; }
}

/* ---------- конфетти ---------- */
.rf-confetti{ position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.rf-confetti i{
  position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px;
  animation: rf-confetti-fall var(--cd, 1.6s) cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes rf-confetti-fall{
  to { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .rf-confetti{ display: none; }
  .rf-progress-fill{ transition: none; }
}

/* ── Витрина приза + призовые места (этап 2, тумблер prize) ───────────────── */
/* трек — full-bleed: выносим за 16px паддинг контейнера и возвращаем как scroll-padding,
   чтобы карточки начинались на 16px, а следующая чётко выглядывала у края экрана (читается как «листай») */
.rf-prize-track{
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1rem; padding: 10px 1rem 14px; /* верт. паддинг — место для тени/бордера карт (overflow-x:auto иначе режет) */
  scroll-padding-left: 1rem;
  scrollbar-width: none;
}
.rf-prize-track::-webkit-scrollbar{ display: none; }
.rf-prize-card{
  scroll-snap-align: start; flex: 0 0 auto; width: 158px;
  background: var(--color-card); border: 1px solid var(--surface-border);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
}
.rf-prize-card.is-noimg{ width: auto; min-width: 132px; max-width: 200px; }
/* contain — товар целиком, без обрезки; подложка под цвет карточки → аккуратный леттербокс */
.rf-prize-img{
  display: block; width: 100%; aspect-ratio: 1 / 1;
  background: var(--img) center / contain no-repeat;
}
.rf-prize-info{ display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.rf-prize-place{
  align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--prize-place-text, var(--brand-primary));
  background: var(--prize-place-bg, var(--brand-primary-soft));
  border-radius: 999px; padding: 2px 8px;
}
.rf-prize-name{ font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.rf-prize-sub{ font-size: 12px; color: var(--prize-sub, var(--text-muted)); }

/* ── «Особые предложения»: иконка + текст как у «Пригласить друзей» ───────── */
.so-invite-icon{
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.so-invite-icon img{ width: 18px; height: 18px; object-fit: contain; }
/* текст-на-градиенте через токен (= белый, тема-зависимый; перебивает тёмный --color-text у .card.gradient на participant-page) */
#special_offers_card p{ color: var(--on-gradient); }
.so-sub{ font-size: 0.875rem; opacity: .9; }

/* ── Особые предложения: строки (thumb + текст + кнопка) + футер «Открыть все» ── */
/* inline-блок: единая карта — ЧИСТАЯ градиент-шапка (сплошная, без мутного растворения) + строки на белом */
.rf-offers--inline{
  border: 1px solid var(--surface-border); border-radius: var(--radius-card, 16px);
  overflow: hidden; background: var(--color-card); box-shadow: var(--card-shadow-sm);
}
.rf-offers-head{
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: linear-gradient(135deg, var(--feature-gradient-from), var(--feature-gradient-to));
  color: var(--on-gradient);
}
/* размер НЕ хардкодим — наследуем системную базу (16px), как у заголовка share-карточки; sub = 0.875rem (= .text-secondary) → обе карточки секции «Получить больше шансов» унифицированы */
.rf-offers-title{ color: var(--on-gradient); font-weight: 600; line-height: 1.25; }
.rf-offers-sub{ font-size: 0.875rem; color: var(--on-gradient); opacity: .9; margin-top: 2px; line-height: 1.3; }
.rf-offers-head .so-invite-icon{ background: rgba(255,255,255,0.2); }
.rf-offers-list{ display: flex; flex-direction: column; }

/* список строк; в модалке — самостоятельная карта. align-items/gap перебивают старый center/0.75em */
.special_offers_popup_content_offers.rf-offers-list{
  background: var(--color-card); border: 1px solid var(--surface-border);
  border-radius: var(--radius-card, 16px); overflow: hidden;
  align-items: stretch; gap: 0; justify-content: flex-start;
}
/* лист модалки — тема (был хардкод #F0EFF5 + чёрная рамка) */
.special_offers_popup{ background: var(--surface-page); border-color: var(--surface-border); }
.special_offers_popup_content_title span{ color: var(--text-strong); }

/* строка предложения: thumb + заголовок/описание (по 1 строке) + компактная pill-кнопка */
.rf-offer-row{ display: flex; align-items: center; gap: 12px; padding: 14px; position: relative; }
.rf-offer-row + .rf-offer-row::before{ content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--surface-border); opacity: .6; }
.rf-offer-thumb{ width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
  background: var(--img) center / cover no-repeat; }
.rf-offer-main{ flex: 1; min-width: 0; }
.rf-offer-title{ font-size: 16px; font-weight: 600; color: var(--text-strong); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-offer-desc{ font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.3;
  white-space: pre-line; }
.rf-offer-btn{ flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
  background: var(--brand-primary); color: var(--brand-primary-contrast);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* футер «Открыть все» — ВНУТРИ блока (нижний док, как Member Directory): top-divider + лёгкий тинт */
.rf-offers-all{ display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; position: relative;
  background: color-mix(in srgb, var(--brand-primary-soft) 55%, transparent); }
.rf-offers-all::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--surface-border); }
.rf-offers-all-ico{ width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
  background: var(--color-card); border: 1px solid var(--surface-border); color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow-sm); }
.rf-offers-all-ico i{ font-size: 20px; }
.rf-offers-all-main{ flex: 1; min-width: 0; }
.rf-offers-all-title{ font-size: 16px; font-weight: 600; color: var(--text-strong); }
.rf-offers-all-sub{ font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.rf-offers-all-stack{ display: flex; flex-shrink: 0; }
.rf-offers-all-stack span{ width: 34px; height: 34px; border-radius: 50%; margin-left: -10px;
  background: var(--img) center / cover no-repeat; box-shadow: 0 0 0 2px var(--color-card); }
.rf-offers-all-stack span:first-child{ margin-left: 0; }
.rf-offers-all-more{ width: 34px; height: 34px; border-radius: 50%; margin-left: -10px;
  background: var(--brand-primary-soft); color: var(--brand-primary); box-shadow: 0 0 0 2px var(--color-card);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* ════════ Особые предложения · вариант «Карусель»: плоская шапка + лента карточек со snap-scroll ════════ */
/* внешний блок без поверхности (прозрачный) — карты сами по себе tile, чтобы не было glass-on-glass */
.rf-offers-head-plain{ display: flex; align-items: center; gap: 12px; padding: 2px 2px 12px; }
.rf-offers-head-plain .so-invite-icon{
  background: linear-gradient(135deg, var(--feature-gradient-from), var(--feature-gradient-to));
  color: var(--on-gradient); flex-shrink: 0; }
.rf-offers-head-plain .rf-offers-title{ color: var(--text-strong); font-weight: 600; line-height: 1.25; }
.rf-offers-head-plain .rf-offers-sub{ color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
/* горизонтальный скроллер клипает вертикальную тень (overflow-x:auto → overflow-y:auto) →
   даём padding-«воздух» по краям, чтобы тени карт не резались; без negative-margin (он съедал левый отступ) */
.rf-offers-track{
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-padding-left: 6px; padding: 10px 6px 14px; }
.rf-offers-track::-webkit-scrollbar{ display: none; }
.rf-offer-card{
  flex: 0 0 70%; max-width: 230px; scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--surface-border); border-radius: var(--radius-card, 16px);
  background: var(--color-card); box-shadow: var(--card-shadow-sm); }
.rf-offer-card-img{
  display: block; width: 100%; aspect-ratio: 1 / 1;
  background: var(--img) center / cover no-repeat; }
.rf-offer-card-body{ display: flex; flex-direction: column; gap: 6px; padding: 15px 16px 17px; flex: 1; }
.rf-offer-desc--2{ white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-offer-btn--wide{ margin-top: auto; align-self: stretch; }

/* ════════ Особые предложения · вариант «Витрина-плитки»: 2-колоночная сетка ════════ */
.rf-offers-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rf-offer-tile{
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 11px 12px;
  text-decoration: none; overflow: hidden;
  border: 1px solid var(--surface-border); border-radius: var(--radius-card, 16px);
  background: var(--color-card); box-shadow: var(--card-shadow-sm); }
.rf-offer-tile-img{
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 4px;
  background: var(--img) center / cover no-repeat; }
.rf-offer-tile-title{ font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-offer-tile-desc{ font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-offer-tile--more{ align-items: center; justify-content: center; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--brand-primary-soft) 55%, var(--color-card)); }
.rf-offer-tile-more-n{ font-size: 26px; font-weight: 800; color: var(--brand-primary); line-height: 1; }
.rf-offer-tile-more-label{ font-size: 13px; font-weight: 600; color: var(--text-strong); margin-top: 4px; }

/* ════════ Hero-вариант «Свечение» (по мотивам BLINK): пятно-блюр + объёмный логотип ════════ */
.rf-spot{ position: relative; text-align: center; padding: 90px 6px 0; }
/* большой ИНТЕНСИВНЫЙ ореол ПОЗАДИ логотипа (центрирован на нём), как у донора — яркое ядро + широкий ореол.
   ВАЖНО: position:absolute с !important — иначе правило `.rf-spot > *{position:relative}` ниже перебивало его
   (равная специфичность), свечение вставало В ПОТОК (h:480px) и толкало контент вниз. */
.rf-spot-glow{
  position: absolute !important; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 360px; border-radius: 50%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-primary) 100%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 70%, transparent) 22%, transparent 50%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--feature-gradient-to, var(--brand-primary)) 66%, transparent) 0%, transparent 70%);
  filter: blur(54px);
}
.rf-spot > *:not(.rf-spot-glow){ position: relative; z-index: 1; }
.rf-spot-logo{
  width: 110px; height: 110px; margin: 0 auto; position: relative; border-radius: 30px; overflow: hidden;
  background: linear-gradient(150deg, var(--feature-gradient-from, var(--brand-primary)), var(--feature-gradient-to, var(--brand-primary)));
  box-shadow: 0 18px 34px rgba(15,23,42,.24);
}
/* логотип ЗАЛИВАЕТ плитку целиком (cover), как «иконка успеха → логотип» */
.rf-spot-logo-img{ position: absolute; inset: 0; background: var(--logo) center / cover no-repeat; }
/* глянец + тень-текстура поверх изображения (как box-shadow у .rf-hicon-circle) */
.rf-spot-gloss{ position: absolute; inset: 0; border-radius: 30px; pointer-events: none; z-index: 1;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.20);
  background: linear-gradient(155deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 30%, transparent 52%); }
.rf-hero-title{ margin-top: 20px; font-size: 24px; line-height: 1.2; font-weight: 800; color: var(--text-strong); }
.rf-hero-desc{ margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-body); padding: 0 6px; white-space: pre-line; }
.rf-spot-caption{ margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--brand-primary); }
/* Подложка названия розыгрыша (ось titleBadge) — пилюля под названием вместо «серого» текста.
   База .rf-title-badge + модификатор стиля .rf-tb-*. Вешается на .text-indigo (классический hero)
   и .rf-spot-caption. Под Glass — переопределяем на стеклянные поверхности (тот же блюр, что у карточек). */
.rf-title-badge{ display:inline-block; padding:.38em .95em; border-radius:999px; line-height:1.4; font-weight:600; }
.rf-spot-caption.rf-title-badge{ margin-top:12px; }
/* --title-badge-bg: ось «Плашка названия — фон». Переменной нет — каждый вид
   держит свой прежний фон, то есть ровно как до появления оси. Цвет букв сюда
   НЕ выносим: его красит textColors.titleBadge, причём через !important. */
/* 1) Мягкая — чистый брендовый tint (плоская пилюля) */
.rf-tb-soft{ background:var(--title-badge-bg, var(--brand-primary-soft)); color:var(--brand-primary); }
/* 2) Контур — тонкая обводка без заливки */
.rf-tb-outline{ background:var(--title-badge-bg, transparent); color:var(--brand-primary);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brand-primary) 38%, transparent); }
/* 3) Свечение — мягкая «парящая» пилюля (дизайн 5): брендовый tint + мягкая брендовая тень-ореол вниз/вокруг
   + лёгкий верхний хайлайт (soft-UI объём). Всё от брендового цвета. */
/* --tb-glow: сила ореола, 0–100. Ставится из пресета (ось «Свечение пилюли»).
   Переменной нет — считаем за 100, то есть ровно как было до появления оси. */
.rf-tb-glow{ background:var(--title-badge-bg, color-mix(in srgb, var(--brand-primary) 13%, var(--surface-card))); color:var(--brand-primary);
  box-shadow:
    0 10px 22px -6px color-mix(in srgb, var(--brand-primary) calc(var(--tb-glow, 100) * 0.42%), transparent),
    0 2px 5px -2px color-mix(in srgb, var(--brand-primary) calc(var(--tb-glow, 100) * 0.28%), transparent),
    inset 0 1px 0 rgba(255,255,255,.55); }
/* 4) Заливка — сплошной бренд */
.rf-tb-solid{ background:var(--title-badge-bg, var(--brand-primary)); color:#fff; }

/* ── Glass: пилюли стеклянные (единый блюр с карточками — без glass-on-glass рассинхрона, hero-фон прозрачный) ── */
body.style-glass .rf-tb-soft{ background:var(--title-badge-bg, var(--glass-bg)); color:var(--brand-primary);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 0 0 0 1px var(--glass-edge), var(--glass-bevel); }
body.style-glass .rf-tb-outline{ box-shadow:inset 0 0 0 1px var(--glass-edge); }
body.style-glass .rf-tb-glow{ background:var(--title-badge-bg, var(--glass-bg));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 10px 22px -6px color-mix(in srgb, var(--brand-primary) 38%, transparent), inset 0 0 0 1px var(--glass-edge), var(--glass-bevel); }
body.style-glass .rf-tb-solid{ background:var(--title-badge-bg, color-mix(in srgb, var(--brand-primary) 90%, transparent));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.rf-spot-status{ margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.rf-spot .countdown{ margin-top: 14px; }

/* ════════ Hero-вариант «Обложка» (по мотивам Orb): фон-картинка с прогрессивным затуханием ════════ */
/* bleed до краёв контейнера (= краёв экрана; контейнер во всю ширину устройства) */
.rf-cover{ position: relative; margin: -1rem -1rem 0; }
.rf-cover-img{
  width: 100%; background: var(--img) center / cover no-repeat;
  /* плавное прогрессивное затухание в фон страницы */
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 32%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 32%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.35) 78%, transparent 100%);
}
/* варианты высоты картинки */
.rf-cover--wide    .rf-cover-img{ aspect-ratio: 16 / 9; }
.rf-cover--square  .rf-cover-img{ aspect-ratio: 1 / 1; }
.rf-cover--portrait .rf-cover-img{ aspect-ratio: 4 / 5; }
.rf-cover--tall    .rf-cover-img{ aspect-ratio: 3 / 4; }
.rf-cover-body{ position: relative; z-index: 1; margin-top: -84px; padding: 0 1rem; text-align: center; }
.rf-cover-logo{
  width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--feature-gradient-from, var(--brand-primary)), var(--feature-gradient-to, var(--brand-primary)));
  box-shadow: 0 10px 26px rgba(15,23,42,.28); border: 3px solid var(--surface-page);
}
.rf-cover-logo-img{ position: absolute; inset: 0; background: var(--logo) center / cover no-repeat; }
/* глянец + тень-текстура поверх изображения (как box-shadow у .rf-hicon-circle) */
.rf-cover-logo::after{ content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.20);
  background: linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 28%, transparent 50%); }
.rf-cover .rf-hero-title{ margin-top: 14px; font-size: 22px; font-weight: 800; color: var(--text-strong); }
.rf-cover .rf-hero-desc{ margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-body); padding: 0 4px; }
/* таймер и билеты — РАВНЫЕ карточки (flex:1 1 0), одинаковая компоновка: значение сверху, подпись снизу.
   data-surface=card → стекло как у всех блоков. */
.rf-cover-foot{ display: flex; gap: 10px; align-items: stretch; margin-top: 18px; text-align: left; }
.rf-cover-card{
  flex: 1 1 0; min-width: 0;
  background: var(--surface-card); border: 1px solid var(--surface-border);
  border-radius: var(--radius-card, 16px); box-shadow: 0 4px 14px rgba(102,112,133,.10);
  padding: 13px 14px;
}
.rf-cover-tickets{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-cover .rf-cover-card-v{ display: block; font-size: 20px; font-weight: 800; color: var(--text-strong); line-height: 1.15; letter-spacing: .01em; }
.rf-cover .rf-cover-card-l{ display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
/* экран входа: на «Обложке» карточка билетов убрана → одинокий таймер центрируем (а не растягиваем влево) */
.rf-cover-foot .rf-cover-timer:only-child{ flex: 0 1 300px; max-width: 340px; margin-left: auto; margin-right: auto; text-align: center; }
.rf-cover-plus{
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}
.rf-cover-plus svg{ width: 18px; height: 18px; }

/* ════════ Hero-вариант «Чат» (iMessage: фон + аватар + typing-точки + typewriter + tapback) ════════ */
/* «Призрак» (.rf-chat-ghost) резервирует финальную высоту → контент ниже НЕ сдвигается. */
.rf-chat{ position: relative; display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 56px 8px 6px; }
/* фон позади сообщений (опц.): full-bleed + прогрессивное затухание в фон, 1-в-1 как «Обложка». Без рамки/скрима. */
.rf-chat-bg{ position: absolute; top: -1.25rem; left: -1rem; right: -1rem; height: calc(100% + 3rem); z-index: 0; }
.rf-chat-bg.has-bg{
  background: var(--img) center top / cover no-repeat;
  /* плавное прогрессивное затухание в фон страницы (как у «Обложки», но больше стопов и выше зона перехода) */
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 18%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.6) 56%, rgba(0,0,0,.3) 74%, rgba(0,0,0,.1) 88%, transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 18%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.6) 56%, rgba(0,0,0,.3) 74%, rgba(0,0,0,.1) 88%, transparent 100%);
}
.rf-chat-row{ position: relative; z-index: 1; display: flex; gap: 8px; }
.rf-chat-row-in{ align-self: flex-start; align-items: flex-end; max-width: 90%; }
.rf-chat-row-out{ align-self: flex-end; max-width: 84%; }
/* аватар бренда у входящего (появляется вместе с бабблом) */
.rf-chat-avatar{ position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(150deg, var(--feature-gradient-from, var(--brand-primary)), var(--feature-gradient-to, var(--brand-primary)));
  box-shadow: 0 2px 6px rgba(15,23,42,.2); opacity: 0; transition: opacity .4s ease; }
.rf-chat-row-in:has(.rf-chat-bubble.is-shown) .rf-chat-avatar{ opacity: 1; }
.rf-chat-avatar-img{ position: absolute; inset: 0; background: var(--logo) center / cover no-repeat; }
.rf-chat-bubble{
  position: relative; max-width: 100%; padding: 11px 15px; border-radius: 20px;
  font-size: 15px; line-height: 1.35; font-weight: 500;
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
}
.rf-chat-bubble.is-shown{ opacity: 1; transform: translateY(0); }
.rf-chat-in{ background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--surface-border); border-bottom-left-radius: 6px; }
.rf-chat-out{ background: var(--brand-primary); color: var(--brand-primary-contrast, #fff); border-bottom-right-radius: 6px; }
.rf-chat-text{ position: relative; display: block; white-space: pre-wrap; }
.rf-chat-ghost{ visibility: hidden; }
.rf-chat-typed{ position: absolute; inset: 0; white-space: pre-wrap; }
/* мигающий курсор во время печати */
.rf-chat-bubble.is-typing .rf-chat-typed::after{
  content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px;
  background: currentColor; animation: rf-cursor .8s steps(1) infinite;
}
@keyframes rf-cursor{ 0%,50%{ opacity: 1; } 50.01%,100%{ opacity: 0; } }
/* typing-индикатор (3 точки) перед печатью — в зарезервированном баббле, без сдвига */
.rf-chat-dots{ position: absolute; top: 1px; left: 0; display: none; align-items: center; gap: 4px; height: 1.35em; }
.rf-chat-bubble.is-dots .rf-chat-dots{ display: inline-flex; }
.rf-chat-dots i{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; animation: rf-chat-dot 1s infinite ease-in-out; }
.rf-chat-dots i:nth-child(2){ animation-delay: .15s; } .rf-chat-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes rf-chat-dot{ 0%,60%,100%{ transform: translateY(0); opacity: .4; } 30%{ transform: translateY(-4px); opacity: .9; } }
/* tapback-реакция (всплывает плавно после сообщений) */
.rf-chat-tapback{ position: absolute; top: -15px; right: 12px; z-index: 2; font-size: 14px; line-height: 1;
  padding: 5px 7px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--surface-border);
  box-shadow: 0 4px 10px rgba(15,23,42,.14); opacity: 0; transform: scale(0); transform-origin: bottom right;
  transition: opacity .25s ease, transform .42s cubic-bezier(.2,.8,.3,1.6); }
.rf-chat-bubble.is-tapback .rf-chat-tapback{ opacity: 1; transform: scale(1); }

/* ════════ Всплывающий drawer (промо-анонс, авто-показ через delay) ════════ */
.rf-drawer-overlay{ position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0); transition: background-color .35s ease; pointer-events: none; }
.rf-drawer-overlay.open{ background: rgba(0,0,0,.5); pointer-events: auto; }
.rf-drawer-sheet{ width: 100%; max-width: 480px; background: var(--color-bg); border-radius: 20px 20px 0 0;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); opacity: 0; transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.rf-drawer-overlay.open .rf-drawer-sheet{ transform: translateY(0); opacity: 1; }
.rf-drawer-close{ position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.32); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rf-drawer-scroll{ flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.rf-drawer-scroll::-webkit-scrollbar{ display: none; }
/* картинка: общий фон-cover + варианты высоты (как у hero «Обложка») */
.rf-drawer-img{ display: block; width: 100%; background: var(--img) center / cover no-repeat; }
/* ratio-класс и .rf-drawer-img на ОДНОМ элементе → составной селектор (без пробела), не потомковый */
.rf-drawer-img.rf-drawer--wide    { aspect-ratio: 16 / 9; }
.rf-drawer-img.rf-drawer--square  { aspect-ratio: 1 / 1; }
.rf-drawer-img.rf-drawer--portrait{ aspect-ratio: 4 / 5; }
.rf-drawer-img.rf-drawer--tall    { aspect-ratio: 3 / 4; }
/* вариант 1: на всю ширину + плавное прогрессивное затухание в фон (1:1 как у hero «Обложка»);
   контент наезжает на затухающий хвост (заголовок ложится на почти-прозрачную зону → фон листа, читаемо) */
.rf-drawer-img--gradient{
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 32%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 32%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.35) 78%, transparent 100%); }
.rf-drawer-img--gradient ~ .rf-drawer-body{ margin-top: -60px; }
/* вариант 2: просто вставлено, отступы + скругление, без затухания */
.rf-drawer-img--plain{ width: calc(100% - 32px); margin: 16px 16px 0; border-radius: 16px; }
.rf-drawer-body{ position: relative; z-index: 1; padding: 18px 22px 22px; text-align: center; }
.rf-drawer-title{ font-size: 21px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
/* white-space:pre-line — переносы строк/абзацы из textarea (\n) рендерятся (textContent их сохраняет, HTML иначе схлопывает) */
.rf-drawer-desc{ font-size: 14px; color: var(--text-body); line-height: 1.5; margin-top: 8px; white-space: pre-line; }
.rf-drawer-foot{ flex-shrink: 0; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface-border); background: var(--color-bg); }
.rf-drawer-btn{ display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px;
  background: var(--brand-primary); color: var(--brand-primary-contrast); border-radius: 14px;
  font-size: 15px; font-weight: 600; text-decoration: none; }