/*
 * Назначение: интеграция новых иконок «Избранное»/«Сравнение» в боевые (старые) шаблоны.
 * Источник дизайна — new/css/modules/product-card.css (.product-card__actions),
 * new/css/pages/product/product-hero.css (.product-hero__gallery-actions, .product-hero__compare-badge),
 * new/css/modules/inputs.css (.checkbox). Перекрываем старое только через вложенность
 * (.goods-2_item …, .card-main_left …, .card-main_right …). Токены — из base/variables.css.
 */

/* =========================================================
   1. КАТАЛОГ — угловые иконки (сердце + весы) поверх картинки
   ========================================================= */
.goods-2_item {
  position: relative;
}

.goods-2_item .product-card__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  gap: 4px;
}

.goods-2_item .product-card__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-light);
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.goods-2_item .product-card__action-btn:hover {
  transform: scale(1.1);
}
.goods-2_item .product-card__action-btn:active {
  transform: scale(1.05);
}
.goods-2_item .product-card__action-btn img {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

/* =========================================================
   2. СТРАНИЦА ТОВАРА — строка «сердце + сравнение» над артикулом
   ========================================================= */
.card-main_right .product-hero__compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-main_right .product-hero__fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-light);
  border: 1px solid var(--border-color-base);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.card-main_right .product-hero__fav-btn:hover {
  transform: scale(1.1);
}
.card-main_right .product-hero__fav-btn:active {
  transform: scale(1.05);
}
.card-main_right .product-hero__fav-btn img {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

/* =========================================================
   3. СТРАНИЦА ТОВАРА — сравнение как чекбокс-бейдж
   (порт .product-hero__compare-badge + .checkbox, scoped)
   ========================================================= */
.card-main_right .product-hero__compare-badge {
  display: inline-block;
  background: #f4f4f4;
  padding: 6px 8px;
  border-radius: 6px;
  user-select: none;
  white-space: nowrap;
}

.card-main_right .product-hero__compare-badge .checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: all 0.2s ease;
}

.card-main_right .product-hero__compare-badge .checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.card-main_right .product-hero__compare-badge .checkbox__box {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 1px solid var(--border-color-base);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-light);
  position: relative;
  transition: all 0.2s ease;
  padding-left: 0;
  min-height: unset;
}
.card-main_right .product-hero__compare-badge .checkbox:hover .checkbox__box {
  border-color: var(--color-accent);
}
.card-main_right
  .product-hero__compare-badge
  .checkbox__input:checked
  + .checkbox__box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.card-main_right
  .product-hero__compare-badge
  .checkbox__input:checked
  + .checkbox__box::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  top: -1px;
}
.card-main_right .product-hero__compare-badge .checkbox__text {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-dark);
  min-height: unset;
  padding-left: 0;
}

/* =========================================================
   4. ШАПКА — иконка-сердце «Избранное»
   ========================================================= */
.header-wishlist-icon {
  display: block;
}

/* =========================================================
   5. LOADING — перелив иконки на время AJAX-запроса (избранное + сравнение).
   Класс .is-loading вешается/снимается в wishlistToggle()/compareToggle() (script2.js).
   Сердце — .fav-btn (.product-card__action-btn / .product-hero__fav-btn);
   весы сравнения на каталоге — .compare-ic. Оба — круглые иконки-кнопки 32px.
   ========================================================= */
.fav-btn.is-loading,
.compare-ic.is-loading {
  pointer-events: none;
  position: relative;
}
.fav-btn.is-loading img,
.compare-ic.is-loading img {
  animation: fav-btn-pulse 0.85s infinite ease-in-out;
}
@keyframes fav-btn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}
/* лёгкий перелив-ореол вокруг иконки */
.fav-btn.is-loading::after,
.compare-ic.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 46, 71, 0.18) 0%, rgba(255, 46, 71, 0) 70%);
  animation: fav-btn-glow 0.85s infinite ease-in-out;
}
@keyframes fav-btn-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Страница товара — бейдж «Сравнить» (.product-hero__compare-badge) во время запроса:
   shimmer-скелетон + блокировка (как у карточек/строк). Keyframe loading-shimmer — ниже. */
.card-main_right .product-hero__compare-badge.is-loading {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.card-main_right .product-hero__compare-badge.is-loading > * { opacity: 0.5; }
.card-main_right .product-hero__compare-badge.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: loading-shimmer 1.2s infinite ease-in-out;
}

/* =========================================================
   6. КОРЗИНА — shimmer-скелетон строки при удалении (как .wishlist-card.is-removing).
   Класс .is-removing вешается на .cart_item в cartDeleteSkeleton() (script2.js),
   пока идёт серверный запрос; строку удаляет cartControls() после ответа.
   ========================================================= */
.cart_item.is-removing {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.cart_item.is-removing > * { opacity: 0.55; }
.cart_item.is-removing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: loading-shimmer 1.4s infinite ease-in-out;
}
@keyframes loading-shimmer {
  100% { transform: translateX(100%); }
}