/* Страница-гайд «Предзаказ при отсутствии товара» (/ru/kaspi-preorder).
   Секции, контейнер, заголовки, кнопки и бейдж — из guide.css. Хедер и футер —
   из style.css языковой папки. Здесь только блоки этой страницы. */

.preorder{
  --pre-accent: var(--g-violet);
  --pre-accent-soft: var(--g-violet-soft);
  --pre-box: var(--g-text);
  --pre-stripes: repeating-linear-gradient(135deg, #5e5ce614 0 5px, transparent 5px 10px);
  --pre-bar: var(--g-line-2);
  /* Цикл анимации первого экрана */
  --pre-loop: 9s;
}

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

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

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

.preorder__lead{
  margin: 12px 0 0;
  max-width: 44em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--g-muted);
  text-wrap: pretty;
}

.preorder__center{
  text-align: center;
}

.preorder__lead.preorder__center{
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------- */
/* 1. Первый экран: текст слева, склад справа */

.pre-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.pre-hero__text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.pre-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Склад: коробки уходят одна за другой, на нуле склад заливается предзаказом */
.pre-stock{
  margin: 0;
  padding: 24px;
  border-radius: var(--g-radius-block);
  background: var(--g-bg-soft);
}

.pre-stock__head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.pre-stock__title{
  font-size: 17px;
  font-weight: 600;
  color: var(--g-ink);
}

.pre-stock__caption{
  font-size: 14px;
  color: var(--g-muted);
}

.pre-stock__body{
  display: flex;
  gap: 26px;
  align-items: stretch;
}

.pre-shelf{
  position: relative;
  flex: none;
  width: 160px;
  height: 268px;
  overflow: hidden;
  border-radius: var(--g-radius-card);
  background: #ffffff;
}

.pre-shelf__boxes{
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.pre-shelf__box{
  flex: none;
  height: 43px;
  border-radius: 6px;
  background: var(--pre-box);
  animation: var(--pre-loop) cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Сверху уходит первой — как товар со склада */
.pre-shelf__box:nth-child(1){ animation-name: preBox1; }
.pre-shelf__box:nth-child(2){ animation-name: preBox2; }
.pre-shelf__box:nth-child(3){ animation-name: preBox3; }
.pre-shelf__box:nth-child(4){ animation-name: preBox4; }
.pre-shelf__box:nth-child(5){ animation-name: preBox5; }

@keyframes preBox1{ 0%, 15%{ height: 43px; opacity: 1; } 19%, 86%{ height: 0; opacity: 0; } 91%, 100%{ height: 43px; opacity: 1; } }
@keyframes preBox2{ 0%, 20%{ height: 43px; opacity: 1; } 24%, 86%{ height: 0; opacity: 0; } 92%, 100%{ height: 43px; opacity: 1; } }
@keyframes preBox3{ 0%, 25%{ height: 43px; opacity: 1; } 29%, 86%{ height: 0; opacity: 0; } 93%, 100%{ height: 43px; opacity: 1; } }
@keyframes preBox4{ 0%, 30%{ height: 43px; opacity: 1; } 34%, 86%{ height: 0; opacity: 0; } 94%, 100%{ height: 43px; opacity: 1; } }
@keyframes preBox5{ 0%, 35%{ height: 43px; opacity: 1; } 39%, 86%{ height: 0; opacity: 0; } 95%, 100%{ height: 43px; opacity: 1; } }

.pre-shelf__fill{
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: var(--pre-stripes), var(--pre-accent-soft);
  animation: preFill var(--pre-loop) cubic-bezier(.33, 1, .68, 1) infinite;
}

@keyframes preFill{
  0%, 40%{ height: 0; }
  54%, 74%{ height: 100%; }
  86%, 100%{ height: 0; }
}

.pre-shelf__label{
  position: absolute;
  inset: 50% 10px auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(-50%);
  color: var(--pre-accent);
  text-align: center;
  opacity: 0;
  animation: preFillText var(--pre-loop) ease-in-out infinite;
}

@keyframes preFillText{
  0%, 50%{ opacity: 0; }
  58%, 72%{ opacity: 1; }
  80%, 100%{ opacity: 0; }
}

.pre-shelf__days{
  font-family: var(--g-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pre-shelf__word{
  font-size: 14px;
  font-weight: 600;
}

.pre-stock__side{
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
}

.pre-count{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Цифры 5 → 0 лежат друг на друге и сменяются по очереди */
.pre-count__digits{
  position: relative;
  display: inline-block;
  width: 1.1ch;
  font-family: var(--g-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--g-title);
}

.pre-count__digit{
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  animation: var(--pre-loop) ease-in-out infinite;
}

.pre-count__digit--spacer{
  position: static;
  visibility: hidden;
  animation: none;
}

.pre-count__digit[data-d="5"]{ animation-name: preD5; }
.pre-count__digit[data-d="4"]{ animation-name: preD4; }
.pre-count__digit[data-d="3"]{ animation-name: preD3; }
.pre-count__digit[data-d="2"]{ animation-name: preD2; }
.pre-count__digit[data-d="1"]{ animation-name: preD1; }
.pre-count__digit[data-d="0"]{ animation-name: preD0; color: var(--g-red); }

@keyframes preD5{ 0%, 15%{ opacity: 1; } 17%, 81%{ opacity: 0; } 84%, 100%{ opacity: 1; } }
@keyframes preD4{ 0%, 15%{ opacity: 0; } 17%, 20%{ opacity: 1; } 22%, 100%{ opacity: 0; } }
@keyframes preD3{ 0%, 20%{ opacity: 0; } 22%, 25%{ opacity: 1; } 27%, 100%{ opacity: 0; } }
@keyframes preD2{ 0%, 25%{ opacity: 0; } 27%, 30%{ opacity: 1; } 32%, 100%{ opacity: 0; } }
@keyframes preD1{ 0%, 30%{ opacity: 0; } 32%, 35%{ opacity: 1; } 37%, 100%{ opacity: 0; } }
@keyframes preD0{ 0%, 35%{ opacity: 0; } 37%, 80%{ opacity: 1; } 83%, 100%{ opacity: 0; } }

.pre-count__unit{
  font-size: 15px;
  color: var(--g-muted);
}

.pre-status{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--g-line);
}

.pre-status__value{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--g-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--g-green-text);
}

.pre-status__value::before{
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--g-green);
  animation: prePulse 1.6s ease-in-out infinite;
}

@keyframes prePulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .45; transform: scale(.82); }
}

.pre-status__text{
  font-size: 15px;
  line-height: 1.5;
  color: var(--g-muted);
}

/* ---------------------------------------------------------------------------- */
/* 2. Одна и та же карточка при остатке 0 */

.pre-compare__head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}

.pre-compare__note{
  font-size: 14px;
  color: var(--g-muted);
}

.pre-compare{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.pre-case{
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.pre-case__tag{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--g-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-title);
}

.pre-case__tag::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-red);
}

.pre-case--on .pre-case__tag::before{
  background: var(--g-green);
}

.pre-case__status{
  min-height: 2.4em;
  margin: 0;
  font-family: var(--g-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g-red);
}

.pre-case--on .pre-case__status{
  color: var(--g-green-text);
}

.pre-case__list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.pre-case__row{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pre-case__row dt{
  font-size: 13px;
  color: var(--g-faint);
}

.pre-case__row dd{
  margin: 0;
  font-size: 17px;
  color: var(--g-ink);
}

.pre-case__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--g-text);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------- */
/* 3. Что происходит с остатком */

.pre-chart{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 32px 0 0;
  padding: 24px;
  border-radius: var(--g-radius-block);
  background: var(--g-bg-soft);
}

.pre-chart__bars,
.pre-chart__axis{
  display: flex;
  gap: 12px;
}

.pre-chart__bars{
  align-items: flex-end;
  height: 150px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pre-bar);
}

.pre-chart__col{
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 100%;
}

.pre-chart__col--zero{
  flex: 3;
}

.pre-chart__bar{
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--pre-bar);
}

/* Остаток по дням: 5, 3, (0 — предзаказ), 12 */
.pre-chart__col:nth-child(1) .pre-chart__bar{ height: 36.7%; }
.pre-chart__col:nth-child(2) .pre-chart__bar{ height: 22%; }
.pre-chart__col:nth-child(4) .pre-chart__bar{ height: 88%; }

/* Зона предзаказа: остаток 0, товар продаётся */
.pre-chart__zone{
  position: absolute;
  inset: auto 0 0;
  height: 26px;
  background: var(--pre-stripes), var(--pre-accent-soft);
}

.pre-chart__zone::after{
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--pre-accent);
}

.pre-chart__zone-label{
  position: absolute;
  inset: auto 0 34px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink);
  text-align: center;
}

.pre-chart__axis span{
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-faint);
  text-align: center;
}

.pre-chart__axis .pre-chart__axis-zero{
  flex: 3;
  font-weight: 700;
  color: var(--g-ink);
}

.pre-chart__note{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-faint);
}

.pre-steps-auto{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.pre-steps-auto__item{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--pre-bar);
}

.pre-steps-auto__title{
  margin: 0;
  font-family: var(--g-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-title);
}

.pre-steps-auto__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--g-text);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------- */
/* 4. Каждый склад отдельно */

.pre-stores{
  margin-top: 28px;
  padding: 8px 24px;
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.pre-stores__table{
  width: 100%;
  border-collapse: collapse;
}

.pre-stores__table th,
.pre-stores__table td{
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--pre-bar);
  font-size: 16px;
  text-align: left;
  vertical-align: baseline;
}

.pre-stores__table tr:last-child td,
.pre-stores__table tr:last-child th{
  border-bottom: 0;
}

.pre-stores__table thead th{
  padding-block: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--g-faint);
}

.pre-stores__table tbody th{
  width: 45%;
  font-weight: 400;
  color: var(--g-ink);
}

.pre-stores__amount{
  width: 15%;
  font-family: var(--g-display);
  font-weight: 700;
  color: var(--g-ink);
}

.pre-stores__status{
  color: var(--g-muted);
}

.pre-stores__status--pre{
  font-weight: 600;
  color: var(--pre-accent);
}

/* ---------------------------------------------------------------------------- */
/* 5. Где найти: шаги карточками + настройка в карточке товара */

.pre-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pre-step;
}

.pre-step{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--g-line-2);
  border-radius: var(--g-radius-block);
  background: #ffffff;
  counter-increment: pre-step;
}

.pre-step::before{
  content: '0' counter(pre-step);
  font-family: var(--g-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--g-blue);
}

.pre-step__title{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--g-ink);
}

/* Путь в кабинете — столбиком, с точками, без стрелок и плашек */
.pre-step__path{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.55;
  color: var(--g-text);
}

.pre-step__chip{
  position: relative;
  padding-left: 18px;
}

.pre-step__chip::before{
  content: '';
  position: absolute;
  left: 2px;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-faint);
}

.pre-step__chip--accent{
  font-weight: 600;
  color: var(--pre-accent);
}

.pre-step__chip--accent::before{
  background: var(--pre-accent);
}

.pre-step__chip--go{
  font-weight: 600;
  color: var(--g-green-text);
}

.pre-step__chip--go::before{
  background: var(--g-green);
}

.pre-step__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--g-text);
}

/* Настройка у одного товара — как в кабинете */

/* Нарисованный тумблер (не кнопка — только иллюстрация) */

/* Дни предзаказа: − 3 + */

/* ---------------------------------------------------------------------------- */
/* 6. Важно знать */

.pre-facts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.pre-fact{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--g-radius-block);
  background: #ffffff;
}

.pre-fact__icon{
  display: block;
  width: 36px;
  height: 36px;
}

.pre-fact__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--g-text);
  text-wrap: pretty;
}

.pre-fact__text b{
  color: var(--g-ink);
}

.pre-alert{
  margin: 20px 0 0;
  padding: 20px 24px;
  border-left: 4px solid var(--g-red);
  border-radius: 0 var(--g-radius-card) var(--g-radius-card) 0;
  background: var(--g-red-soft);
  font-size: 16px;
  line-height: 1.55;
  color: var(--g-red-text);
}

/* ---------------------------------------------------------------------------- */
/* 7. FAQ — стили общие, в guide.css (.guide-faq) */

/* ---------------------------------------------------------------------------- */
/* 8. Финальный блок */

.pre-final-section{
  border-top: 1px solid var(--g-line);
}

.pre-final{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.pre-final__title{
  flex: 1 1 420px;
  max-width: 22em;
  text-wrap: balance;
}

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

/* Без движения — сразу итог: склад пуст, стоит предзаказ, цифра 0 */
@media (prefers-reduced-motion: reduce){
  .preorder *,
  .preorder *::before,
  .preorder *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .preorder .pre-shelf__box,
  .preorder .pre-shelf__fill,
  .preorder .pre-shelf__label,
  .preorder .pre-count__digit{
    animation: none !important;
  }
  .pre-shelf__box{
    display: none;
  }
  .pre-shelf__fill{
    height: 100%;
  }
  .pre-shelf__label,
  .pre-count__digit[data-d="0"]{
    opacity: 1;
  }
}

@media screen and (max-width: 1024px){
  .pre-hero{
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .pre-steps,
  .pre-steps-auto,
  .pre-facts{
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
}

@media screen and (max-width: 768px){
  .pre-compare{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 600px){
  .pre-hero__actions .guide__cta{
    width: 100%;
  }
  .pre-stock{
    padding: 18px;
  }
  .pre-stock__body{
    gap: 16px;
  }
  .pre-shelf{
    width: 120px;
  }
  .pre-case__status{
    min-height: 0;
    font-size: 22px;
  }
  .pre-chart{
    padding: 18px;
  }
  .pre-chart__bars,
  .pre-chart__axis{
    gap: 6px;
  }
  .pre-stores{
    padding-inline: 16px;
  }
  .pre-stores__table th,
  .pre-stores__table td{
    font-size: 15px;
  }
  .pre-final .guide__cta{
    width: 100%;
  }
}