/* ==========================================================================
 * ИЗБРАННОЕ — сердечко на карточке, уведомления и раздел в личном кабинете
 * --------------------------------------------------------------------------
 * 1. Кнопка-сердечко (.sw-fav): правый верхний угол карточки, поверх скрина.
 *    Пустое сердце — «добавить», золотая плашка с красным сердцем — «в избранном».
 * 2. Уведомление (.sw-toast): всплывает снизу по центру, с кнопкой действия
 *    («Войти» для гостя, «Вернуть» при удалении из избранного).
 * 3. Личный кабинет: сетка избранного (карточки те же, что в каталоге),
 *    пустое состояние и анимация исчезновения карточки.
 *
 * Файл подключается на страницах с карточками (pages/game.php, страницы
 * каталога/главной) и в личном кабинете (pages/profile.php) через
 * sw_fav_assets() из includes/favorites.php.
 * ========================================================================== */

/* ==========================================================================
 * 1. СЕРДЕЧКО НА КАРТОЧКЕ
 * ========================================================================== */

/* Карточка — точка отсчёта для сердечка (в теме она не всегда позиционирована) */
.cases__item:has(> .sw-fav) {
  position: relative;
}

.sw-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  /* тёмное стекло — сердечко читается на любом скрине */
  background: linear-gradient(180deg, rgba(26, 26, 32, .8), rgba(12, 12, 16, .88));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.sw-fav svg {
  display: block;
  width: 21px;
  height: 21px;
}

.sw-fav svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill .18s ease;
}

.sw-fav:hover {
  transform: scale(1.07);
  border-color: rgba(255, 198, 7, .7);
  color: #ffd166;
}

.sw-fav:active {
  transform: scale(.95);
}

.sw-fav:focus-visible {
  outline: 2px solid #ffc607;
  outline-offset: 2px;
}

/* Активное состояние: золотая плашка и залитое сердце — видно, что добавлено */
.sw-fav.is-active {
  border-color: rgba(255, 236, 150, .95);
  background: linear-gradient(180deg, #ffd95e, #ffc607 55%, #efa900);
  color: #b3261e;
  box-shadow: 0 6px 18px rgba(255, 198, 7, .38), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.sw-fav.is-active svg path {
  fill: currentColor;
  stroke: currentColor;
}

.sw-fav[disabled] {
  cursor: default;
  opacity: .75;
}

@keyframes sw-fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.sw-fav.is-pop {
  animation: sw-fav-pop .42s ease;
}

@media (max-width: 1100px) {
  .sw-fav {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
  }
  .sw-fav svg { width: 22px; height: 22px; }
}

/* Счётчик избранного: плашка в шапке, в мобильном меню, в разделе кабинета.
   Когда избранное пустое, скрипт ставит атрибут hidden — он должен прятать
   счётчик (у самого элемента display: inline-flex, поэтому нужен !important). */
.sw-header-fav-count,
.sw-header-count,
.mobile-drawer__fav-count,
.sw-fav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 198, 7, .18);
  border: 1px solid rgba(255, 198, 7, .45);
  color: #ffd166;
  font: 700 11.5px/1 Arial, sans-serif;
}

[data-fav-count][hidden],
.sw-header-count[hidden] {
  display: none !important;
}

/* ==========================================================================
 * 2. УВЕДОМЛЕНИЕ
 * ========================================================================== */
.sw-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 470px);
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(34, 34, 40, .97), rgba(18, 18, 23, .97));
  color: #f2f2f6;
  font: 500 14px/1.4 Arial, sans-serif;
  text-align: left;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .58);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none;
}

.sw-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.sw-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 198, 7, .18);
  color: #ffc607;
  font: 800 15px/1 Arial, sans-serif;
}

.sw-toast__icon svg {
  width: 16px;
  height: 16px;
}

.sw-toast__icon svg path {
  fill: currentColor;
  stroke: none;
}

.sw-toast__text {
  min-width: 0;
}

.sw-toast__action {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 198, 7, .5);
  border-radius: 10px;
  background: rgba(255, 198, 7, .14);
  color: #ffd166;
  font: 700 12.5px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.sw-toast__action:hover {
  background: rgba(255, 198, 7, .26);
  border-color: rgba(255, 198, 7, .8);
}

.sw-toast--error .sw-toast__icon {
  background: rgba(220, 70, 70, .22);
  color: #ff8a80;
}

.sw-toast--auth .sw-toast__icon {
  background: rgba(120, 170, 255, .2);
  color: #9dc0ff;
}

@media (max-width: 1100px) {
  /* на телефоне снизу стоит меню — поднимаем уведомление над ним */
  .sw-toast {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    font-size: 13.5px;
  }
}

/* ==========================================================================
 * 3. ЛИЧНЫЙ КАБИНЕТ: РАЗДЕЛ «ИЗБРАННОЕ»
 * ========================================================================== */
.sw-fav-panel {
  margin: 0;
}

/* Сетка карточек — та же, что в каталоге: подключается catalog-filters.css.
   В кабинете колонка уже, поэтому карточек в ряду меньше, чем в каталоге:
   на ПК три, на планшете/телефоне две, на узком телефоне одна. */
.sw-fav-panel .cases__list {
  margin: 0;
}

/* Карточки не липнут к краям блока: по бокам и снизу отступы как у заголовка
   раздела (25px 26px на ПК, 20px на телефоне), сверху — небольшой зазор
   от разделителя под заголовком. */
.sw-fav-panel {
  padding: 22px 26px 26px;
}

@media (max-width: 1100px) {
  .sw-fav-panel {
    padding: 16px 20px 20px;
  }
}

/* Рамка скрина — по пропорциям кадров аккаунтов (≈2.47:1), как в рекомендациях
   на странице аккаунта. Фиксированные 190px из каталога на широких карточках
   кабинета оставляли пустые полосы сверху и снизу кадра. */
@media (min-width: 1101px) {
  .sw-fav-panel.swcf-catalog .cases__item .cases__image-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 32 / 13 !important;
  }
}

/* Плашки компактнее, чем в каталоге: в кабинете карточки уже, и крупная цена,
   «Оплата частями» и кнопка выглядели громоздко.
   Блок «гарантия + цена» стоит сразу под содержимым карточки (без auto-отступа):
   его положение во всех карточках ряда одинаковое, вниз опускается только
   кнопка «Посмотреть аккаунт» — см. правило про margin-top: auto ниже.
   Отступ сверху по умолчанию равен высоте блока монстров с подписью и
   разделителем под названием (~86px): у карточек без монстров он сохраняет
   ту же линию, а у карточек с монстрами обнуляется правилом ниже. */
.sw-fav-panel.swcf-catalog .cases__item .cases__summary {
  gap: 12px !important;
  padding: 12px 12px 10px !important;
  margin: 86px 0 10px !important;
}

.sw-fav-panel.swcf-catalog .cases__item .swcf-monsters + .cases__summary,
.sw-fav-panel.swcf-catalog .cases__item .cases__percent + .swcf-monsters + .cases__summary {
  margin-top: 0 !important;
}

/* Кнопка «Посмотреть аккаунт» — всегда у самого низа карточки: опускаем её
   auto-отступом (или подвал с плашкой «Оплата частями»). Это единственный
   элемент с auto, поэтому всё свободное место уходит сюда. */
.sw-fav-panel.swcf-catalog .cases__item .cases__link > .cases__buy {
  margin-top: auto !important;
}

/* Подвал карточки в кабинете: карточка узкая (три колонки на ПК), а плашка
   «Оплата частями» и кнопка «Посмотреть аккаунт» в теме стоят в одну строку.
   Кнопке остаётся ~130px, а её содержимое (иконка + текст + стрелка) шире —
   текст обрезался. Поэтому в кабинете подвал становится столбиком, каждая
   кнопка на всю ширину карточки и с центрированным содержимым.
   Никаких auto-отступов здесь нет: свободное место забирает блок с ценой
   (margin-top: auto выше), иначе два auto делили бы его пополам и кнопка
   вставала бы выше низа карточки. */
.sw-fav-panel.swcf-catalog .cases__item .cases__foot {
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  /* верхний auto опускает весь подвал (плашку и кнопку) к низу карточки */
  margin: auto auto 11px !important;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__foot .cases__installment,
.sw-fav-panel.swcf-catalog .cases__item .cases__foot .cases__buy {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__summary .cases__price {
  font-size: 19px !important;
  line-height: 1.25 !important;
  padding: 5px 12px !important;
  border-radius: 10px !important;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__installment {
  gap: 5px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
  border-radius: 9px;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__installment .sw-inst-ico {
  flex-basis: 15px;
  width: 15px;
  height: 15px;
  font-size: 11px;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__buy {
  gap: 6px !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__buy .sw-btn-ico {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__buy-text {
  white-space: nowrap;
}

/* Карточка в кабинете — вертикальная колонка (как и в витрине), ссылка
   занимает всю высоту карточки. Низ карточки прижимает блок «гарантия +
   цена» своим margin-top: auto (правило выше), а подвал с кнопками идёт
   сразу за ним — поэтому кнопки «Посмотреть аккаунт» во всех карточках
   ряда стоят на одной линии, даже если информации мало.
   ВАЖНО: у подвала не должно быть своего auto-отступа — иначе свободное
   место делится между ним и блоком цены, и кнопка встаёт выше низа. */
.sw-fav-panel.swcf-catalog #alllists > li.cases__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.sw-fav-panel.swcf-catalog .cases__item .cases__link {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

.sw-fav-panel.swcf-catalog #alllists > li.cases__item,
.sw-fav-panel.swcf-catalog #alllists > li.cases__item:hover {
  width: calc(33.333% - 6.7px) !important;
  max-width: calc(33.333% - 6.7px) !important;
}

@media (max-width: 1300px) {
  .sw-fav-panel.swcf-catalog #alllists > li.cases__item,
  .sw-fav-panel.swcf-catalog #alllists > li.cases__item:hover {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
}

@media (max-width: 700px) {
  .sw-fav-panel.swcf-catalog #alllists > li.cases__item,
  .sw-fav-panel.swcf-catalog #alllists > li.cases__item:hover {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.sw-fav-panel .cases__item.is-leaving {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .22s ease, transform .22s ease;
}

.sw-fav-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 22px;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(0, 0, 0, .22);
  color: #a9a9b6;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.sw-fav-empty[hidden] {
  display: none !important;
}

.sw-fav-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(255, 198, 7, .12);
  border: 1px solid rgba(255, 198, 7, .3);
  color: #ffc607;
}

.sw-fav-empty__icon svg {
  width: 26px;
  height: 26px;
}

.sw-fav-empty__icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.sw-fav-empty b {
  display: block;
  color: #f2f2f6;
  font-size: 16px;
  font-weight: 700;
}

.sw-fav-empty a {
  color: #ffd166;
  font-weight: 700;
  text-decoration: none;
}

.sw-fav-empty a:hover {
  text-decoration: underline;
}

.sw-account__panel[data-account-panel="favorites"] .sw-account__panel-heading h2 [data-fav-count] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 198, 7, .14);
  color: #ffd166;
  font-size: 14px;
  font-weight: 700;
}