/* Страница-гайд «Не конкурировать с магазинами» (/ru|kz|en/kaspi-ignore-sellers).
   Базовые стили, хедер и футер — из style.css языковой папки. */

.kaspi-ignore{
  /* Цвета и геометрия — из guide.css */
  --ki-ink: var(--g-ink);
  --ki-title: var(--g-title);
  --ki-text: var(--g-text);
  --ki-muted: var(--g-muted);
  --ki-caption: var(--g-faint);
  --ki-faint: #a6a6b3;
  --ki-blue: var(--g-blue);
  --ki-blue-dark: var(--g-blue-dark);
  --ki-green: var(--g-green);
  --ki-green-text: var(--g-green-text);
  --ki-green-soft: var(--g-green-soft);
  --ki-red-text: var(--g-red-text);
  --ki-red-soft: var(--g-red-soft);
  --ki-bg-soft: var(--g-bg-soft);
  --ki-pill: var(--g-pill);
  --ki-line: var(--g-line);
  --ki-line-2: var(--g-line-2);
  --ki-line-3: var(--g-line-3);
}

/* Раскладка секции: отступы и ширина — из guide.css */
/* Ширина подзаголовка задаётся по секциям, как в макете */
.kaspi-ignore__lead{
  margin: 10px 0 0;
  font-size: 17px;
  color: var(--ki-muted);
}

.kaspi-ignore__lead--40{ max-width: 40em; }
.kaspi-ignore__lead--44{ max-width: 44em; }
.kaspi-ignore__lead--46{ max-width: 46em; }

/* ---------------------------------------------------------------------------- */
/* 1. Первый экран с демо карточки товара */

.kaspi-ignore-hero{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.kaspi-ignore-hero__col{
  min-width: 0;
}

.kaspi-ignore-hero__text{
  max-width: 34em;
  text-wrap: pretty;
}

.kaspi-ignore-hero__actions{
  flex-wrap: wrap;
}

/* Демо: список продавцов в карточке товара, клик исключает продавца из сравнения */

.kaspi-ignore-demo{
  justify-self: center;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--ki-line-2);
  border-radius: 12px;
  background: #ffffff;
}

.kaspi-ignore-demo__label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ki-caption);
}

.kaspi-ignore-demo__hint{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ki-muted);
}

.kaspi-ignore-demo__list{
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

/* Строка продавца. Позиция в списке меняется при исключении конкурентов,
   поэтому переезд анимируется через transform (FLIP). */
.kaspi-ignore-demo__row{
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ki-bg-soft);
  transition: background .2s, opacity .2s, border-color .2s;
}

.kaspi-ignore-demo__row--you{
  border-color: #007aff33;
  background: #007aff0d;
}

.kaspi-ignore-demo__row--off{
  opacity: .5;
}

.kaspi-ignore-demo__rank{
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ki-muted);
}

.kaspi-ignore-demo__row--you .kaspi-ignore-demo__rank{
  background: var(--ki-blue);
  color: #ffffff;
}

.kaspi-ignore-demo__row--off .kaspi-ignore-demo__rank{
  color: var(--ki-faint);
}

.kaspi-ignore-demo__body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kaspi-ignore-demo__id{
  font-size: 15px;
  font-weight: 600;
  color: var(--ki-ink);
}

.kaspi-ignore-demo__row--off .kaspi-ignore-demo__id{
  text-decoration: line-through;
}

.kaspi-ignore-demo__tag{
  font-size: 13px;
  color: var(--ki-muted);
}

.kaspi-ignore-demo__row--you .kaspi-ignore-demo__tag{
  color: var(--ki-blue);
}

.kaspi-ignore-demo__row--off .kaspi-ignore-demo__tag{
  color: var(--ki-faint);
}

.kaspi-ignore-demo__price{
  font-size: 15px;
  font-weight: 600;
  color: var(--ki-ink);
  white-space: nowrap;
}

.kaspi-ignore-demo__row--off .kaspi-ignore-demo__price{
  text-decoration: line-through;
}

.kaspi-ignore-demo__toggle{
  padding: 6px 12px;
  border: 1px solid var(--ki-line-2);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  color: var(--ki-muted);
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

/* «Исключить» — красный, «Вернуть» — зелёный */
.kaspi-ignore-demo__toggle:hover{
  border-color: var(--ki-red-text);
  color: var(--ki-red-text);
}

.kaspi-ignore-demo__row--off .kaspi-ignore-demo__toggle{
  border-color: var(--ki-green-text);
  color: var(--ki-green-text);
}

.kaspi-ignore-demo__total{
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--ki-line-3);
}

.kaspi-ignore-demo__total-label{
  font-size: 15px;
  color: var(--ki-muted);
}

.kaspi-ignore-demo__total-value{
  font-family: var(--g-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ki-ink);
  animation: kiIn .25s ease;
}

.kaspi-ignore-demo__note{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ki-muted);
}

@media screen and (max-width: 560px){
  .kaspi-ignore-demo__row{
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 6px 10px;
  }
  .kaspi-ignore-demo__toggle{
    grid-column: 2 / -1;
    justify-self: start;
  }
}

/* ---------------------------------------------------------------------------- */
/* 2. Кому это нужно */

.kaspi-ignore-fit{
  margin-top: 24px;
  padding: 26px 32px;
  border-left: 3px solid var(--ki-green);
  background: #ffffff;
}

.kaspi-ignore-fit__title{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ki-green-text);
}

.kaspi-ignore-fit__list{
  margin-top: 8px;
}

.kaspi-ignore-fit__item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ki-ink);
}

.kaspi-ignore-fit__item::before{
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--ki-green);
}

/* ---------------------------------------------------------------------------- */
/* 3. Зачем это нужно — сценарии */

.kaspi-ignore-cases{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.kaspi-ignore-cases__list{
  display: grid;
  align-content: start;
}

.kaspi-ignore-cases__item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 4px;
  border: 0;
  border-top: 1px solid #e2e2ec;
  background: transparent;
  text-align: left;
  transition: border-color .25s;
}

.kaspi-ignore-cases__item[aria-selected="true"]{
  border-top-color: var(--ki-blue);
}

.kaspi-ignore-cases__num{
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e9e9f2;
  font-size: 14px;
  font-weight: 700;
  color: var(--ki-muted);
}

.kaspi-ignore-cases__item[aria-selected="true"] .kaspi-ignore-cases__num{
  background: var(--ki-blue);
  color: #ffffff;
}

.kaspi-ignore-cases__body{
  min-width: 0;
}

.kaspi-ignore-cases__title{
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.kaspi-ignore-cases__text{
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ki-muted);
}

/* min-height, чтобы страница не дёргалась при переключении сценариев */
.kaspi-ignore-cases__detail{
  min-height: 420px;
}

.kaspi-ignore-cases__detail-text{
  max-width: 68ch;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.kaspi-ignore-cases__bullets{
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--ki-line-3);
}

.kaspi-ignore-cases__bullet{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ki-muted);
}

.kaspi-ignore-cases__bullet::before{
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ki-green);
}

/* ---------------------------------------------------------------------------- */
/* 4. Спираль демпинга */

.kaspi-ignore-spiral__head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.kaspi-ignore-switch{
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: #f1f1f7;
}

.kaspi-ignore-switch__button{
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ki-caption);
}

.kaspi-ignore-switch__button[aria-selected="true"]{
  background: #ffffff;
  color: var(--ki-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.kaspi-ignore-spiral{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.kaspi-ignore-spiral__rows{
  display: grid;
  gap: 10px;
}

.kaspi-ignore-spiral__row{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ki-bg-soft);
  animation: kiIn .3s ease;
}

.kaspi-ignore-spiral__row[data-kind="off"]{
  opacity: .6;
}

/* Полоса-заливка: ширина зависит от цены строки, цвет — от режима и состояния */
.kaspi-ignore-spiral__bar{
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ki-red-soft);
}

.kaspi-ignore-spiral--fixed .kaspi-ignore-spiral__bar{
  background: #eaf2ff;
}

.kaspi-ignore-spiral__row[data-kind="off"] .kaspi-ignore-spiral__bar{
  background: var(--ki-line);
}

.kaspi-ignore-spiral__row[data-kind="hold"] .kaspi-ignore-spiral__bar{
  background: var(--ki-green-soft);
}

.kaspi-ignore-spiral__content{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

.kaspi-ignore-spiral__shop{
  font-size: 15px;
  font-weight: 600;
  color: var(--ki-ink);
}

.kaspi-ignore-spiral__values{
  display: flex;
  align-items: center;
  gap: 10px;
}

.kaspi-ignore-spiral__delta{
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-red);
}

.kaspi-ignore-spiral--fixed .kaspi-ignore-spiral__delta{
  color: var(--ki-blue);
}

.kaspi-ignore-spiral__row[data-kind="off"] .kaspi-ignore-spiral__delta{
  color: #c7c7d1;
}

.kaspi-ignore-spiral__row[data-kind="hold"] .kaspi-ignore-spiral__delta{
  color: var(--ki-green);
}

.kaspi-ignore-spiral__price{
  font-family: var(--g-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ki-ink);
}

.kaspi-ignore-spiral__card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--ki-line);
  border-radius: 14px;
  background: #ffffff;
}

/* Обёртка режима повторяет вертикальные отступы карточки из макета */
.kaspi-ignore-spiral__card > [data-spiral-card]{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kaspi-ignore-spiral__result{
  margin: 0;
  font-family: var(--g-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ki-red-text);
}

.kaspi-ignore-spiral__result--good{
  color: var(--ki-green-text);
}

.kaspi-ignore-spiral__note{
  max-width: 62ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ki-muted);
}

.kaspi-ignore-spiral__loss{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ki-line-3);
}

.kaspi-ignore-spiral__loss-label{
  font-size: 15px;
  color: var(--ki-muted);
}

.kaspi-ignore-spiral__loss-value{
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ki-red-soft);
  font-size: 15px;
  font-weight: 700;
  color: var(--ki-red-text);
}

.kaspi-ignore-spiral__loss-value--good{
  background: var(--ki-green-soft);
  color: var(--ki-green-text);
}

/* ---------------------------------------------------------------------------- */
/* 5. Плашка-заметка */

.kaspi-ignore-note{
  padding: 22px 26px;
  border-left: 3px solid var(--ki-blue);
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(34, 60, 80, .10);
}

.kaspi-ignore-note__title{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.kaspi-ignore-note__text{
  max-width: 68ch;
  margin: 6px 0 0;
  line-height: 1.6;
  color: var(--ki-muted);
}

/* ---------------------------------------------------------------------------- */
/* 6. Как найти ID конкурента */

/* Шаги в этой секции стоят по центру колонки, поэтому и шапка секции центрируется.
   Имя отличается от .kaspi-ignore-find__title — так называются заголовки самих шагов. */
.kaspi-ignore-find__heading,
.kaspi-ignore-find__subtitle{
  text-align: center;
}

.kaspi-ignore-find__subtitle{
  margin-inline: auto;
}

.kaspi-ignore-find{
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.kaspi-ignore-find__steps{
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 680px;
}

.kaspi-ignore-find__step{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kaspi-ignore-find__num{
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ki-blue);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.kaspi-ignore-find__num--done{
  background: var(--ki-green);
}

.kaspi-ignore-find__title{
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.kaspi-ignore-find__text{
  display: block;
  margin: 6px 0 0;
  line-height: 1.6;
  color: var(--ki-muted);
}

/* Мок окна браузера с адресной строкой */

.kaspi-ignore-browser{
  display: block;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--ki-line-2);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(34, 60, 80, .08);
}

.kaspi-ignore-browser__dots{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 10px;
}

.kaspi-ignore-browser__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.kaspi-ignore-browser__dot--red{ background: #ff5f57; }
.kaspi-ignore-browser__dot--yellow{ background: #febc2e; }
.kaspi-ignore-browser__dot--green{ background: #28c840; }

.kaspi-ignore-browser__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f1f1f7;
}

.kaspi-ignore-browser__lock{
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ki-caption);
}

.kaspi-ignore-browser__url{
  min-width: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ki-muted);
  overflow-wrap: anywhere;
}

.kaspi-ignore-browser__id{
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--ki-blue);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

/* Стрелка должна стоять ровно под подсвеченным ID — сдвиг считает JS */
/* Стрелка стоит под подсвеченным ID: сдвиг проставляет JS инлайном */
.kaspi-ignore-browser__caption{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 6px 2px;
}

.kaspi-ignore-browser__arrow{
  flex: none;
  margin-top: 1px;
  color: var(--ki-blue);
}

.kaspi-ignore-browser__caption-text{
  font-size: 14px;
  font-weight: 600;
  color: var(--ki-blue);
}

/* ---------------------------------------------------------------------------- */
/* 7. Что стоит знать заранее */

.kaspi-ignore-facts{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}

.kaspi-ignore-facts__item{
  padding: 18px 0;
  border-top: 1px solid var(--ki-line);
}

.kaspi-ignore-facts__title{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.kaspi-ignore-facts__text{
  margin: 6px 0 0;
  line-height: 1.55;
  color: var(--ki-muted);
}

/* ---------------------------------------------------------------------------- */
/* 8. Финальный CTA */

.kaspi-ignore-final{
  text-align: center;
}

.kaspi-ignore-final__title{
  line-height: 1.3;
  text-wrap: balance;
}

.kaspi-ignore-final__text{
  margin: 12px auto 0;
  font-size: 17px;
  color: var(--ki-muted);
}

.kaspi-ignore-final__actions{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.kaspi-ignore .kaspi-ignore-final__cta{
  padding: 14px 32px;
}

/* ---------------------------------------------------------------------------- */

@keyframes kiIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .kaspi-ignore *,
  .kaspi-ignore *::before,
  .kaspi-ignore *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media screen and (max-width: 768px){
  /* Колонки сложились в одну — первый экран по центру */
  .kaspi-ignore-hero__col{
    align-items: center;
    text-align: center;
  }
  .kaspi-ignore-hero__col > .guide__badge{
    align-self: center;
  }
  .kaspi-ignore-hero__actions{
    justify-content: center;
  }
  .kaspi-ignore__section{
    padding-block: 48px;
  }
  .kaspi-ignore__section--spiral{
    padding-top: 8px;
  }
  .kaspi-ignore-spiral__head{
    align-items: flex-start;
  }
  .kaspi-ignore-switch{
    width: 100%;
  }
  .kaspi-ignore-switch__button{
    flex: 1;
    padding-inline: 12px;
  }
  .kaspi-ignore-fit{
    padding: 20px;
  }
  .kaspi-ignore-cases__detail{
    min-height: 0;
  }
}