/* Страница-гайд «Лимит товара в один заказ» (/<lang>/kaspi-order-limit).
   Базовые стили, хедер и футер — из style.css языковой папки,
   общий дизайн-код гайдов — из guide.css (токены --g-*). */

.order-limit{
  --ol-ink: var(--g-ink);
  --ol-title: var(--g-title);
  --ol-text: var(--g-text);
  --ol-muted: var(--g-muted);
  --ol-faint: var(--g-faint);
  --ol-blue: var(--g-blue);
  --ol-green: var(--g-green);
  --ol-green-text: var(--g-green-text);
  --ol-green-soft: var(--g-green-soft);
  --ol-red: var(--g-red);
  --ol-red-text: var(--g-red-text);
  --ol-red-soft: var(--g-red-soft);
  --ol-violet: var(--g-violet);
  --ol-violet-soft: var(--g-violet-soft);
  --ol-bg-soft: var(--g-bg-soft);
  --ol-pill: var(--g-pill);
  --ol-line: var(--g-line);
  --ol-line-2: var(--g-line-2);
  --ol-line-3: var(--g-line-3);
}

/* Появление блоков при скролле; где поддерживается — привязано к позиции в вьюпорте */
@keyframes olRise{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}

.order-limit [data-reveal]{
  animation: olRise .7s cubic-bezier(.2, .7, .2, 1) both;
}

@supports (animation-timeline: view()){
  .order-limit [data-reveal]{
    animation: olRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* ---------------------------------------------------------------------------- */
/* Общие мелочи страницы */

.order-limit__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.order-limit__head{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 36px;
}

.order-limit__head--center{
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 40px;
  text-align: center;
}

.order-limit__head-text{
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ol-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------- */
/* 1. Демо в герое */

.order-limit-demo{
  margin-top: 48px;
  padding: 12px;
  border: 1px solid var(--ol-line);
  border-radius: var(--g-radius-block);
  background: var(--ol-bg-soft);
  box-shadow: 0 24px 60px -30px #18181833;
}

.order-limit-demo__frame{
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--ol-line);
  border-radius: 10px;
  background: #ffffff;
}

.order-limit-demo__top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.order-limit-demo__hint{
  margin: 0;
  font-size: 14px;
  color: var(--ol-muted);
}

.order-limit-demo__cols{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.order-limit-demo__col{
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--g-radius-card);
}

.order-limit-demo__col--stock{
  background: var(--ol-bg-soft);
}

.order-limit-demo__col--limit{
  justify-content: center;
  align-items: center;
  border: 1px solid var(--ol-line);
  text-align: center;
}

.order-limit-demo__col--kaspi{
  border: 1px solid var(--ol-violet);
  transition: border-color .3s;
}

.order-limit-demo__col--kaspi.is-updating{
  border-color: var(--ol-line);
}

.order-limit-demo__col--kaspi.is-empty{
  border-color: var(--ol-red);
}

.order-limit-demo__caption{
  font-size: 14px;
  color: var(--ol-muted);
}

.order-limit-demo__caption--strong{
  font-weight: 600;
  color: var(--ol-ink);
}

.order-limit-demo__number{
  font-family: var(--g-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--ol-title);
  transition: color .3s;
}

.order-limit-demo__col--kaspi.is-empty .order-limit-demo__number{
  color: var(--ol-faint);
}

.order-limit-demo__unit{
  font-family: 'Noto Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ol-muted);
}

.order-limit-demo__cells{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  /* квадратики не растягиваем на всю колонку: иначе на широком экране
     они выглядят крупнее цифры остатка */
  max-width: 320px;
}

.order-limit-demo__cell{
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--ol-blue);
  transition: background .35s;
}

.order-limit-demo__cell--sold{
  background: var(--ol-line-2);
}

.order-limit-demo__note{
  font-size: 13px;
  color: var(--ol-faint);
}

.order-limit-demo__stepper{
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-limit-demo__step-button{
  width: 40px;
  height: 40px;
  border: 1px solid var(--ol-line);
  border-radius: 8px;
  background: #ffffff;
  font-size: 20px;
  color: var(--ol-ink);
}

.order-limit-demo__step-button:hover:enabled{
  border-color: var(--ol-violet);
  color: var(--ol-violet);
}

.order-limit-demo__step-button:disabled{
  opacity: .4;
  cursor: default;
}

.order-limit-demo__value{
  min-width: 84px;
  padding: 8px 12px;
  border-radius: var(--g-radius-pill);
  background: var(--ol-violet-soft);
  font-size: 16px;
  font-weight: 700;
  color: var(--ol-violet);
  text-align: center;
}

.order-limit-demo__arrow{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: var(--ol-violet);
}

.order-limit-demo__arrow::before{
  content: '';
  flex: 1;
  height: 2px;
  background: var(--ol-line);
}

.order-limit-demo__arrow::after{
  content: '\2192';
  font-size: 18px;
  line-height: 1;
}

.order-limit-demo__status{
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--g-radius-pill);
  background: var(--ol-green-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ol-green-text);
}

.order-limit-demo__col--kaspi.is-updating .order-limit-demo__status{
  background: var(--ol-pill);
  color: var(--ol-muted);
}

.order-limit-demo__col--kaspi.is-empty .order-limit-demo__status{
  background: var(--ol-red-soft);
  color: var(--ol-red-text);
}

.order-limit-demo__bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--ol-line-3);
}

.order-limit-demo__orders{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 32px;
  font-size: 14px;
  color: var(--ol-muted);
}

.order-limit-demo__order{
  padding: 4px 10px;
  border-radius: var(--g-radius-pill);
  background: var(--ol-green-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--ol-green-text);
  animation: olRise .3s ease both;
}

.order-limit-demo__buttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.order-limit-demo__reset{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.order-limit-demo__reset:hover{
  opacity: .85;
}

.order-limit-demo__reset img{
  display: block;
  width: 40px;
  height: 40px;
}

.order-limit .order-limit-demo__buy{
  background: var(--ol-blue);
  font-size: 15px;
}

.order-limit .order-limit-demo__buy:hover{
  background: var(--g-blue-dark);
}

.order-limit .order-limit-demo__buy:disabled{
  background: var(--ol-faint);
  cursor: default;
}

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

.order-limit-who{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.order-limit-who__card{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--ol-line);
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.order-limit-who__icon{
  width: 36px;
  height: 36px;
}

.order-limit-who__text{
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ol-ink);
}

/* ---------------------------------------------------------------------------- */
/* 3. Сравнение */

.order-limit-compare__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* Внутри шапки сравнения заголовок не добавляет нижний отступ: его даёт сама шапка */
.order-limit-compare__head .order-limit__head{
  margin-bottom: 0;
}

.order-limit-compare__switch{
  display: flex;
  padding: 4px;
  border-radius: var(--g-radius-pill);
  background: #f1f1f7;
}

.order-limit-compare__tab{
  padding: 9px 20px;
  border: 0;
  border-radius: var(--g-radius-pill);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ol-faint);
  transition: background .2s, color .2s;
}

.order-limit-compare__tab[aria-selected="true"]{
  background: #ffffff;
  box-shadow: 0 2px 6px #0000001a;
  color: var(--ol-ink);
}

.order-limit-compare__body{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 48px;
  align-items: stretch;
}

.order-limit-compare__rows{
  display: grid;
  gap: 10px;
  align-content: start;
}

.order-limit-compare__row{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ol-bg-soft);
}

.order-limit-compare__bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: transparent;
  transition: width .4s ease, background .4s ease;
}

.order-limit-compare__line{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

.order-limit-compare__who{
  font-size: 15px;
  font-weight: 600;
  color: var(--ol-ink);
}

.order-limit-compare__what{
  padding: 4px 10px;
  border-radius: var(--g-radius-pill);
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ol-green-text);
  white-space: nowrap;
}

/* Строка «нет в наличии»: серый текст, без заливки */
.order-limit-compare__row--off .order-limit-compare__who,
.order-limit-compare__row--off .order-limit-compare__what{
  color: var(--ol-faint);
}

.order-limit-compare__row--bad .order-limit-compare__bar{
  background: var(--ol-red-soft);
}

.order-limit-compare__row--bad .order-limit-compare__what{
  color: var(--ol-red-text);
}

.order-limit-compare__row--good .order-limit-compare__bar{
  background: var(--ol-green-soft);
}

.order-limit-compare__result{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--ol-line);
  border-radius: 14px;
  background: #ffffff;
}

.order-limit-compare__result-title{
  margin: 0;
  font-family: var(--g-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ol-red-text);
}

.order-limit-compare--fixed .order-limit-compare__result-title{
  color: var(--ol-green-text);
}

.order-limit-compare__result-text{
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ol-muted);
}

/* ---------------------------------------------------------------------------- */
/* 4. Как это работает */

.order-limit-how{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.order-limit-how__card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--ol-line);
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.order-limit-how__title{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ol-ink);
}

.order-limit-how__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ol-muted);
}

.order-limit-rules{
  margin-top: 20px;
  padding: 0 28px;
  border: 1px solid var(--ol-line);
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.order-limit-rules__item{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 8px 32px;
  padding: 22px 0;
  border-top: 1px solid var(--ol-line-3);
}

.order-limit-rules__item:first-child{
  border-top: 0;
}

.order-limit-rules__term{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ol-ink);
}

.order-limit-rules__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ol-muted);
}

/* ---------------------------------------------------------------------------- */
/* 5. Как подключить */

.order-limit-steps{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Шаги 4 / 2+2 / 1: пары не дают раскладки 3+1 на средних ширинах */
.order-limit-steps__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.order-limit-steps__pair{
  flex: 1 1 420px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.order-limit-steps__item{
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--ol-line);
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.order-limit-steps__num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ol-violet-soft);
  font-size: 15px;
  font-weight: 700;
  color: var(--ol-violet);
}

.order-limit-steps__title{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ol-ink);
}

.order-limit-steps__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ol-muted);
}

.order-limit-steps__done{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: var(--g-radius-block);
  background: var(--ol-green-soft);
}

.order-limit-steps__done-mark{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  font-size: 15px;
  font-weight: 700;
  color: var(--ol-green-text);
}

.order-limit-steps__done-title{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ol-green-text);
}

.order-limit-steps__done-text{
  margin: 0;
  flex: 1 1 320px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ol-ink);
}

/* ---------------------------------------------------------------------------- */
/* 6. FAQ */

.order-limit-faq__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 940px;
}

.order-limit-faq__inner .guide__h2{
  text-align: center;
}

.order-limit-faq__subtitle{
  margin: 12px 0 0;
  font-size: 17px;
  color: var(--ol-muted);
  text-align: center;
}

/* Знак «+/−» рисуем двумя линиями: не зависит от шрифта */

/* ---------------------------------------------------------------------------- */
/* 7. Финал */

.order-limit-final{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 48px;
  border-radius: var(--g-radius-block);
  background: var(--ol-bg-soft);
}

/* На мягком фоне секции карточка финала белая */
.guide__section--soft .order-limit-final{
  background: #ffffff;
}

.order-limit-final__text{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

.order-limit-final__title{
  margin: 0;
  font-family: var(--g-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ol-title);
  text-wrap: balance;
}

.order-limit-final__note{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ol-muted);
}

/* ---------------------------------------------------------------------------- */
/* Адаптив: шаги совпадают с guide.css */

@media screen and (max-width: 1280px){
  .order-limit-compare__body{
    gap: 32px;
  }
  .order-limit-compare__result-title{
    font-size: 22px;
  }
  .order-limit-final__title{
    font-size: 26px;
  }
}

@media screen and (max-width: 1024px){
  .order-limit-demo__frame{
    padding: 24px;
  }
  .order-limit-demo{
    margin-top: 36px;
  }
  .order-limit-final{
    padding: 32px;
  }
}

/* Три колонки демо перестают помещаться раньше общего брейкпоинта: ниже ~860px
   ставим их в столбик, иначе получается раскладка 2+1 и стрелка указывает в пустоту */
@media screen and (max-width: 860px){
  .order-limit-demo__cols{
    flex-direction: column;
  }
  .order-limit-demo__col{
    flex: 1 1 auto;
  }
  .order-limit-demo__arrow{
    justify-content: center;
  }
  .order-limit-demo__arrow::before{
    display: none;
  }
  .order-limit-demo__arrow::after{
    content: '\2193';
    font-size: 22px;
  }
}

@media screen and (max-width: 768px){
  .order-limit-demo__frame{
    padding: 20px;
  }
  .order-limit-demo__number{
    font-size: 34px;
  }
  .order-limit-compare__head{
    align-items: flex-start;
  }
  .order-limit-compare__switch{
    width: 100%;
  }
  .order-limit-compare__tab{
    flex: 1;
  }
  .order-limit-compare__body{
    gap: 24px;
  }
  .order-limit-compare__result{
    padding: 22px;
  }
  .order-limit-who__card,
  .order-limit-how__card{
    padding: 22px;
  }
  .order-limit-rules{
    padding: 0 22px;
  }

  .order-limit-final{
    padding: 28px 24px;
  }
  .order-limit-final__title{
    font-size: 22px;
  }
}

@media screen and (max-width: 480px){
  .order-limit-demo{
    padding: 8px;
  }
  .order-limit-demo__frame{
    padding: 16px;
    gap: 20px;
  }
  .order-limit-demo__col{
    padding: 18px;
  }
  .order-limit-demo__bottom{
    gap: 12px;
  }
  .order-limit-demo__buttons{
    width: 100%;
    justify-content: space-between;
  }
  .order-limit-compare__line{
    padding: 14px;
  }
  .order-limit-compare__what{
    white-space: normal;
  }

  .order-limit-steps__item{
    padding: 20px;
  }
}

/* Якорь «Как подключить» не уходит под липкий хедер */
.order-limit [id]{
  scroll-margin-top: 90px;
}