/* Подарок в шапке и плашка «ваш клуб и купоны».
   Досье решений: .planning/features/gift-header-club-plate.md
   Макет приёмки: mockups/gift-header-wallet.html

   Файл подключается на семи личных поверхностях (Мастерская, кабинет, галерея, альбомы,
   редактор альбома, витрина фотокниг, кабинет фотокниг) и НЕ подключается на главной и
   посадочных: значка там нет по решению оператора 04.09.

   Почему отдельный файл, а не блок в style.css: витрина фотокниг и кабинет фотокниг style.css
   не грузят вовсе, а держать две копии одних правил у нас уже трижды кончалось расхождением
   близнецов (последний рецидив 14.08).
*/

/* ══════════════ gift-pop.css ══════════════
   Подарок в шапке и плашка «ваши выгоды». Один файл на все поверхности: витрина книг и
   кабинет книг style.css не грузят, а близнецы стилей у нас дважды расходились.
   Кнопка самодостаточна: не наследует ни .ws-cart-btn Мастерской, ни .icon-btn витрины,
   иначе на одной из поверхностей круг оказался бы другого диаметра. */

/* Подарок стоит ЛЕВЕЕ трёх основных иконок (книги, корзина, профиль) и отделён от них
   разрывом: между основными gap 4px, здесь 4 + 14 = 18px. Решение оператора 04.09 — подарок
   не входит в набор управления, это отдельная секция, и одинаковый зазор со всеми делал бы
   его четвёртой кнопкой навигации. */
.gift-wrap { position: relative; display: inline-flex; margin-right: 14px; }

/* Диаметр повторяет соседей по ряду, а не берётся из мобильного канона: на витрине
   .icon-btn и .user-chip на десктопе 38px и только под 820px становятся 44px (fotokniga.html,
   строки 518 и 573). Жёсткие 44 на десктопе давали круг на 6px крупнее соседних — замер
   _gift-header-fit.mjs на ширинах 900-1440. Тач-цель это не роняет: 44 приходят там же, где
   их получают остальные иконки. */
.gift-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--fk-ink, #2e1c12);
}
@media (max-width: 820px) { .gift-btn { width: 44px; height: 44px; } }
.gift-btn:hover { background: var(--hover-layer, rgba(46,28,18,.06)); }
.gift-btn svg { width: 21px; height: 21px; }
@media (max-width: 820px) { .gift-btn svg { width: 22px; height: 22px; } }
.gift-btn { position: relative; }

.gift-pop {
  position: absolute; top: calc(100% + 10px); right: -8px;
  width: 340px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--fk-line, rgba(46,28,18,.13));
  border-radius: 16px; box-shadow: 0 12px 32px rgba(60,40,20,.14);
  padding: 16px; text-align: left; z-index: 300; cursor: default;
  font-family: 'Golos', system-ui, sans-serif; color: var(--fk-ink, #2e1c12);
}
.gift-pop[hidden] { display: none; }
.gift-pop::before {
  content: ''; position: absolute; top: -7px; right: 22px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--fk-line, rgba(46,28,18,.13));
  border-top: 1px solid var(--fk-line, rgba(46,28,18,.13)); transform: rotate(45deg);
}

/* Блок клуба в плашке: своя короткая форма, а не кабинетный вид.
   Решение оператора 04.09: в кошельке нужны только ДЕЙСТВУЮЩАЯ скидка и прогресс к следующей.
   Кабинетный loyaltyProgressHtmlBookShort несёт сверх этого надзаголовок капителью, строку
   «Накоплено», ссылку на правила — в 340px это три лишние строки над купонами.
   Из общего модуля переиспользуется только медальон badge(): рисовать второй нельзя, он
   расходится с кабинетом на первой правке палитры. Всё остальное здесь своё, поэтому
   gift-pop.css не тянет за собой LOYALTY_PROGRESS_BOOK_CSS на витрину. */
.gift-club { display: block; text-decoration: none; color: inherit; }
.gift-club:hover .gift-club-next { text-decoration: underline; }
.gift-club-row { display: flex; align-items: center; gap: 12px; }
/* Медальон несёт свои размеры инлайном (84px) и рассчитывает, что растр ляжет ПОВЕРХ вектора.
   Само наложение задано в LOYALTY_PROGRESS_BOOK_CSS правилом `.lb-widget .lc-badge`, а сюда
   этот CSS не приезжает: тогда картинка встаёт в поток и сдвигает полосу прогресса вниз.
   Поэтому позиционирование повторено здесь — иначе gift-pop.css тянул бы за собой весь
   кабинетный файл ради одной строки. */
.gift-club .lc-badge {
  position: relative; display: inline-flex; flex: 0 0 auto;
  width: 44px !important; height: 44px !important;
}
.gift-club .lc-badge svg { width: 100% !important; height: 100% !important; }
.gift-club .lc-badge img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* Скидка первой строкой и заголовочной гарнитурой: это единственная цифра, за которой сюда
   заходят. Название уровня под ней — подпись, а не заголовок. */
.gift-club-now { font-family: var(--display, 'Lora', Georgia, serif); font-weight: 550; font-size: 19px; line-height: 1.2; }
.gift-club-lvl { font-size: 14px; color: var(--fk-muted, #7d6f64); margin-top: 2px; }
.gift-bar { height: 8px; border-radius: 999px; background: rgba(46,28,18,.10); overflow: hidden; margin: 12px 0 6px; }
.gift-bar span { display: block; height: 100%; border-radius: 999px; background: var(--fk-accent, #ffc95c); }
.gift-club-next { font-size: 14px; line-height: 1.45; color: var(--fk-muted, #7d6f64); margin: 0; }

.gift-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fk-line, rgba(46,28,18,.13)); }
.gift-sec-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fk-muted, #7d6f64); margin: 0 0 10px; }

/* ── Купон-билет ─────────────────────────────────────────────────────────
   Купон это не строка списка, а вещь, которую держат в руках: у него есть силуэт.
   Силуэт режется маской (radial-gradient), не картинкой: масштабируется, красится темой,
   не даёт лишнего запроса. Рамки у билета нет намеренно — маска обрезает и border, и
   outline, поэтому граница формы это край заливки.
   Высота та же, что была у плашки: растёт только выразительность, не размер. */
.gift-tk {
  --stub: 84px;            /* ширина корешка с номиналом */
  position: relative; display: grid; grid-template-columns: var(--stub) 1fr;
  align-items: center;
  background: var(--band, #f1ede5); color: var(--fk-ink, #2e1c12);
}
/* Обводка. Маска обрезает и border, и outline, поэтому контур рисуется тенями НА ОБЁРТКЕ:
   фильтр применяется до маскирования, и повешенный на сам билет он обвёл бы прямоугольник,
   а не силуэт. Четыре тени по осям дают ровную линию в 1px по краю вырезанной формы. */
.gift-tk-frame {
  --tk-line: var(--fk-line-strong, rgba(46,28,18,.3));
  filter:
    drop-shadow(1px 0 0 var(--tk-line)) drop-shadow(-1px 0 0 var(--tk-line))
    drop-shadow(0 1px 0 var(--tk-line)) drop-shadow(0 -1px 0 var(--tk-line));
}
.gift-tk-frame + .gift-tk-frame { margin-top: 10px; }

/* Зубчатый край сверху и снизу: маска из двух повторяющихся radial-gradient, каждая
   покрывает свою половину высоты, их объединение и даёт силуэт. */
.gift-tk {
  border-radius: 4px;
  -webkit-mask:
    radial-gradient(circle 5px at 50% 0, #0000 98%, #000) 50% 0 / 15px 51% repeat-x,
    radial-gradient(circle 5px at 50% 100%, #0000 98%, #000) 50% 100% / 15px 51% repeat-x;
  mask:
    radial-gradient(circle 5px at 50% 0, #0000 98%, #000) 50% 0 / 15px 51% repeat-x,
    radial-gradient(circle 5px at 50% 100%, #0000 98%, #000) 50% 100% / 15px 51% repeat-x;
}

.gift-tk-stub { padding: 12px 6px; text-align: center; background: var(--fk-accent, #ffc95c); align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.gift-tk-sum { font-family: var(--display, 'Lora', Georgia, serif); font-weight: 550; font-size: 26px; line-height: 1; white-space: nowrap; }
/* Текст стоит по центру своей половины билета: корешок с номиналом центрирован, и
   прижатый влево текст рядом с ним читался как съехавший (приёмка 04.09). */
.gift-tk-body { padding: 12px 14px; min-width: 0; text-align: center; }
.gift-tk-what { font-size: 15px; font-weight: 600; }
.gift-tk-until { font-size: 14px; color: var(--fk-muted, #7d6f64); margin-top: 1px; }
.gift-tk-why { font-size: 13px; color: var(--fk-muted, #7d6f64); margin-top: 3px; }



.gift-cta {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  font-size: 15px; font-weight: 600; color: var(--logo-accent, #b8652a); text-decoration: none;
}
.gift-cta::after { content: ' →'; white-space: pre; }
.gift-cta:hover { text-decoration: underline; }


/* Телефон: плашка становится листом под шапкой во всю ширину с полем канона. */
@media (max-width: 560px) {
  /* 16px числом, а не var(--gutter): шкала поля 48/32/16 объявлена в style.css (строки 30-31),
     а витрина и кабинет книг его не грузят, и там переменная равна 48 на любой ширине. Пока
     шкала не переехала в tokens.css, единственный способ получить каноничные 16 на телефоне
     здесь — число. Замер мокапа 03.09: с var(--gutter) плашка отступала 48px. */
  .gift-pop {
    position: fixed; top: 72px; left: 16px; right: 16px;
    width: auto; max-height: calc(100vh - 88px); overflow: auto;
  }
  .gift-pop::before { display: none; }
  /* Мобильный канон: вспомогательный текст не ниже 14px, включая надзаголовки капителью. */
  .gift-tk-why, .gift-sec-title { font-size: 14px; }
  /* Корешок на телефоне шире: кегль подписи вырос до 14 и в 84px больше не помещается. */
  .gift-tk { --stub: 96px; }
}