@charset "UTF-8";
/**
 * MfMatch — подбор товаров свайпами. Блок mf-match / abbr mfm.
 * Опирается на компоненты библиотеки: окно — mf-modal-window (динамическое),
 * кнопки — mf-button, чипы — mf-checkbox-cloud, бюджет — mf-input-quantity.
 * Здесь только то, чего в библиотеке нет: свайп-дека, карты, штампы.
 * Метрики в rem при базе 1rem≈10px (как во фронте темы).
 * Плоский CSS (валиден и как SCSS-источник): компилятора в окружении нет.
 */
/* Размер окна подборщика (переопределение переменных mf-modal-window). */
.mf-modal-window.-mfmw-match .mfmw--box {
  --mw: 60rem;
  width: 100%;
  height: min(82vh, 72rem);
  overflow: hidden;
}

.mf-modal-window.-mfmw-match .mfmw--content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Корень содержимого стадий. */
.mfm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 1.6rem;
}

.mfm--full {
  width: 100%;
}

/* --- Seed --- */
.mfm--seed {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 0;
  overflow-y: auto;
}

.mfm--seed-label {
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.6rem;
}

.mfm--chips {
  display: flex;
  flex-wrap: wrap;
}

.mfm--actions {
  display: flex;
  gap: 1.2rem;
  margin-top: auto;
  padding-top: 1.2rem;
  position: sticky;
  bottom: 0;
  background: #fff;
}

.mfm--actions .mf-button {
  flex: 1;
}

/* --- Swipe --- */
.mfm--swipe {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 1.6rem;
}

.mfm--deck {
  position: relative;
  flex: 1;
  min-height: 30rem;
}

.mfm--card {
  position: absolute;
  inset: 0;
  border-radius: 1.2rem;
  overflow: hidden;
  background: var(--color-gray-light-70, #f2f2f2) center/cover no-repeat;
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.18);
  will-change: transform;
  touch-action: none;
  user-select: none;
  aspect-ratio: 3/4;
  height: 100%;
  margin: auto;
}

.mfm--card[data-mfm-depth="1"] {
  transform: scale(0.96) translateY(0.8rem);
}

.mfm--card[data-mfm-depth="2"] {
  transform: scale(0.92) translateY(1.6rem);
}

/* Подсказка: разовая встряска верхней карты влево-вправо (снимается при свайпе). */
.mfm--card.is-hint {
  animation: mfm-hint 1.1s ease 0.35s 1;
}

@keyframes mfm-hint {
  0%, 100% {
    transform: none;
  }
  20% {
    transform: translateX(-2.4rem) rotate(-6deg);
  }
  50% {
    transform: translateX(2.4rem) rotate(6deg);
  }
  78% {
    transform: translateX(-1rem) rotate(-2deg);
  }
}
/* Картинка карточки/лайка: <picture> (AVIF+fallback) на всю площадь. */
.mfm--card-media {
  position: absolute;
  inset: 0;
}

.mfm--card-media picture,
.mfm--card-media img,
.mfm--liked picture,
.mfm--liked img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.mfm--stamp {
  position: absolute;
  top: 2rem;
  padding: 0.4rem 1.2rem;
  border: 0.3rem solid;
  border-radius: 0.8rem;
  font-size: 2.4rem;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  background-color: #fff;
}

.mfm--stamp.-yes {
  left: 2rem;
  transform: rotate(-15deg);
  color: var(--color-green);
  border-color: var(--color-green);
}

.mfm--stamp.-no {
  right: 2rem;
  transform: rotate(15deg);
  color: var(--color-red);
  border-color: var(--color-red);
}

.mfm--controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  flex-shrink: 0;
}

/* Круглый вид свайп-контролов (радиус — единственное отступление от mf-button). */
.mfm--controls .mf-button {
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
}

/* Крупные глифы (у ♥/↩ нет иконочного шрифта). */
.mfm--controls .js_mf_match_like {
  font-size: 2.4rem;
}

.mfm--controls .js_mf_match_undo {
  margin-right: auto;
}

.mfm--controls .js_mf_match_like {
  margin-right: auto;
}

/* --- Результат --- */
.mfm--result {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 1.6rem;
}

.mfm--liked-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  grid-auto-rows: min-content;
}

.mfm--liked {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--color-gray-light-70, #f2f2f2) center/cover no-repeat;
}

.mfm--liked-x {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.mfm--budget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-shrink: 0;
}

.mfm--budget-sum {
  font-family: var(--font-family-second);
  font-size: 2.2rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Бюджет в рублях не влезает в дефолтную ширину поля степпера — расширяем. */
.mfm--budget-input {
  height: 3.6rem;
}

.mfm--budget-input input {
  width: 7rem;
  font-size: 1.5rem;
}

/* --- Служебное --- */
.mfm--empty {
  margin: auto;
  text-align: center;
  color: var(--color-gray-dark-40, #888);
  font-size: 1.6rem;
}

.mfm--loader {
  margin: auto;
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid var(--color-border);
  border-top-color: var(--color-base);
  border-radius: 50%;
  animation: mfm-spin 0.8s linear infinite;
}

@keyframes mfm-spin {
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=mf-match.css.map */