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

.min-calc{
  /* Цвета расходов: одинаковые в раскладке и в полосе */
  --mc-purchase: var(--g-violet);
  --mc-margin: var(--g-green);
  --mc-delivery: #ff9f0a;
  --mc-packaging: #ffc76b;
  --mc-withdraw: #32ade6;
  --mc-tax: #bf5af2;
  --mc-commission: var(--g-red);
  --mc-idle: #c4c4d0;
  --mc-track: #f4f4f8;
}

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

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

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

/* Подзаголовок под h2 секции */
.min-calc__lead{
  margin: 12px 0 0;
  max-width: 44em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--g-muted);
  text-wrap: pretty;
}

.min-calc__center{
  text-align: center;
}

.min-calc__lead.min-calc__center{
  margin-inline: auto;
}

/* Цена — всегда в одну строку */
.min-calc__price{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------- */
/* 1. Первый экран: текст слева, чек «Что съедает прибыль» справа */

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

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

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

/* Чек с зубчатым нижним краем */
/* Чек лежит на столе. Наклон — на бумаге, а не на figure: у figure анимация
   появления [data-reveal], и её transform перебил бы наклон. Тень — на figure,
   поэтому она ложится по уже наклонённой бумаге. */
.min-calc-receipt{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 14px 40px #1818180d);
}

.min-calc-receipt__paper{
  transform: perspective(1400px) rotateX(16deg) rotateZ(5deg);
  transform-origin: 50% 60%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  /* Наведение ловит только figure: её рамка не двигается. Иначе углы листа
     при выпрямлении уходят из-под курсора и чек дёргается туда-обратно. */
  pointer-events: none;
  padding: 30px 30px 40px;
  background: #ffffff;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}

@media (hover: hover){
  .min-calc-receipt:hover .min-calc-receipt__paper{
    transform: perspective(1400px) rotateX(8deg) rotateZ(2deg);
  }
}

.min-calc-receipt__title{
  margin: 0;
  font-family: var(--g-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--g-ink);
  text-align: center;
  text-wrap: balance;
}

.min-calc-receipt__list{
  margin: 22px 0 0;
  padding: 8px 0 0;
  border-top: 1.5px dashed #d9d9e3;
  list-style: none;
}

.min-calc-receipt__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--g-ink);
}

.min-calc-receipt__row--total{
  padding-block: 12px;
  font-size: 16px;
  font-weight: 600;
}

.min-calc-receipt__row--total .min-calc-receipt__note{
  font-weight: 700;
  color: var(--g-ink);
}

.min-calc-receipt__minus{
  margin-right: 8px;
  font-weight: 700;
  color: var(--g-red);
}

.min-calc-receipt__note{
  font-size: 14px;
  color: var(--g-red);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------- */
/* 2. Цифра не остаётся на экране: четыре шага */

.min-calc-steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 4px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mc-step;
}

.min-calc-step{
  counter-increment: mc-step;
  padding-right: 20px;
}

.min-calc-step__rail{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.min-calc-step__rail::before{
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--g-violet);
}

.min-calc-step__rail::after{
  content: '';
  flex: 1;
  height: 2px;
  background: var(--g-line-2);
}

.min-calc-step:last-child .min-calc-step__rail::after{
  background: transparent;
}

.min-calc-step__label{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--g-faint);
  text-transform: uppercase;
}

.min-calc-step__label::after{
  content: ' ' counter(mc-step);
}

.min-calc-step__title{
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--g-ink);
  text-wrap: pretty;
}

.min-calc-step__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--g-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------- */
/* 3. Из чего складывается минимум: раскладка + итог */

.min-calc-formula{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 56px;
  align-items: stretch;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid var(--g-ink);
}

.min-calc-lines{
  display: flex;
  flex-direction: column;
}

.min-calc-lines__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--g-line-2);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--g-muted);
  text-transform: uppercase;
}

.min-calc-lines__list{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mc-line;
}

.min-calc-line{
  --c: var(--mc-idle);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--g-line-3);
  counter-increment: mc-line;
  transition: opacity .5s;
}

.min-calc-line:nth-child(1){ --c: var(--mc-purchase); }
.min-calc-line:nth-child(2){ --c: var(--mc-margin); }
.min-calc-line:nth-child(3){ --c: var(--mc-delivery); }
.min-calc-line:nth-child(4){ --c: var(--mc-packaging); }
.min-calc-line:nth-child(5){ --c: var(--mc-withdraw); }
.min-calc-line:nth-child(6){ --c: var(--mc-tax); }
.min-calc-line:nth-child(7){ --c: var(--mc-commission); }

.min-calc-line::before{
  content: '0' counter(mc-line);
  font-family: var(--g-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--c);
  transition: color .5s;
}

.min-calc-line__title{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--g-ink);
}

.min-calc-line__note{
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--g-muted);
}

.min-calc-line__amount{
  font-size: 16px;
  font-weight: 600;
  color: var(--g-ink);
  transition: opacity .5s, transform .5s;
}

/* Состояния анимации (ставит JS). Без JS видна полная раскладка. */
.min-calc-formula[data-step] .min-calc-line{
  opacity: .28;
}

.min-calc-formula[data-step] .min-calc-line::before{
  color: var(--mc-idle);
}

.min-calc-formula[data-step] .min-calc-line__amount{
  opacity: 0;
  transform: translateY(6px);
}

.min-calc-formula[data-step] .min-calc-line.is-passed{
  opacity: .62;
}

.min-calc-formula[data-step] .min-calc-line.is-passed::before{
  color: var(--c);
}

.min-calc-formula[data-step] .min-calc-line.is-passed .min-calc-line__amount{
  opacity: 1;
  transform: none;
}

.min-calc-formula[data-step] .min-calc-line.is-active,
.min-calc-formula[data-done] .min-calc-line{
  opacity: 1;
}

/* Итог */
.min-calc-result{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
}

.min-calc-result__label{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--g-muted);
  text-transform: uppercase;
  transition: color .5s;
}

.min-calc-result__total{
  margin: 0;
  font-family: var(--g-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--g-ink);
  transition: color .5s;
}

.min-calc-result__caption{
  min-height: 48px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--g-muted);
}

.min-calc-formula:not([data-step]) .min-calc-result__label,
.min-calc-formula[data-done] .min-calc-result__label,
.min-calc-formula:not([data-step]) .min-calc-result__total,
.min-calc-formula[data-done] .min-calc-result__total{
  color: var(--g-green-text);
}

/* Полоса: сегмент на каждый расход и отметка «на глаз» */
.min-calc-bar{
  position: relative;
  padding-top: 34px;
}

.min-calc-bar__eye{
  position: absolute;
  top: 0;
  left: var(--eye, 72.67%);
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--g-muted);
  white-space: nowrap;
}

.min-calc-bar__eye::after{
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 2;
  height: 86px;
  border-left: 1.5px dashed var(--g-ink);
}

.min-calc-bar__track{
  display: flex;
  height: 72px;
  padding: 4px;
  overflow: hidden;
  border-radius: var(--g-radius-card);
  background: var(--mc-track);
}

.min-calc-bar__segment{
  flex: none;
  height: 100%;
  overflow: hidden;
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

.min-calc-bar__segment::before{
  content: '';
  display: block;
  height: 100%;
  margin-right: 3px;
  border-radius: 8px;
  background: var(--c);
}

.min-calc-bar__segment:nth-child(1){ --c: var(--mc-purchase); }
.min-calc-bar__segment:nth-child(2){ --c: var(--mc-margin); }
.min-calc-bar__segment:nth-child(3){ --c: var(--mc-delivery); }
.min-calc-bar__segment:nth-child(4){ --c: var(--mc-packaging); }
.min-calc-bar__segment:nth-child(5){ --c: var(--mc-withdraw); }
.min-calc-bar__segment:nth-child(6){ --c: var(--mc-tax); }
.min-calc-bar__segment:nth-child(7){ --c: var(--mc-commission); }

.min-calc-bar__scale{
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12px;
  color: var(--g-muted);
}

.min-calc-gap{
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid #cdeed5;
  border-radius: var(--g-radius-card);
  background: var(--g-green-soft);
  font-size: 15px;
  line-height: 1.5;
  color: var(--g-ink);
  transition: opacity .6s, transform .6s;
}

.min-calc-formula[data-step]:not([data-done]) .min-calc-gap{
  opacity: 0;
  transform: translateY(8px);
}

.min-calc-formula__example{
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-muted);
}

/* ---------------------------------------------------------------------------- */
/* 4. Что вводите вы, а что подставляется само */

.min-calc-group{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.min-calc-group::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--g-line);
}

.min-calc-group--manual{
  color: var(--g-violet);
}

.min-calc-group--auto{
  margin-bottom: 4px;
  color: var(--g-green-text);
}

.min-calc-fields{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.min-calc-field{
  padding: 12px 14px;
  border: 1.5px solid var(--g-violet);
  border-radius: 10px;
  background: #ffffff;
}

.min-calc-field__label{
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--g-muted);
}

.min-calc-field__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.min-calc-field__value{
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--g-ink);
}

/* Мигающий курсор — поле «в работе» */
.min-calc-field__value::after{
  content: '';
  width: 1.5px;
  height: 18px;
  margin-left: 2px;
  background: var(--g-violet);
  animation: mcCaret 1.1s steps(1) infinite;
}

@keyframes mcCaret{
  50%{ opacity: 0; }
}

.min-calc-field__unit{
  font-size: 13px;
  color: var(--g-muted);
}

.min-calc-fields__note{
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--g-muted);
}

.min-calc-auto{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.min-calc-auto__item{
  padding: 24px 28px 8px 0;
}

.min-calc-auto__source{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--g-green-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--g-green-text);
}

.min-calc-auto__source::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-green);
}

.min-calc-auto__title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--g-ink);
}

.min-calc-auto__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--g-muted);
  text-wrap: pretty;
}

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

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

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

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

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

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

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

@media screen and (max-width: 1280px){
  .min-calc-result__total{
    font-size: 48px;
  }
}

@media screen and (max-width: 1024px){
  .min-calc-hero,
  .min-calc-formula{
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .min-calc-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 4px;
  }
  .min-calc-step:nth-child(2) .min-calc-step__rail::after{
    background: transparent;
  }
  .min-calc-fields{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .min-calc-auto{
    grid-template-columns: minmax(0, 1fr);
  }
  .min-calc-auto__item{
    padding-right: 0;
  }
}

@media screen and (max-width: 600px){
  .min-calc-hero__actions .guide__cta{
    width: 100%;
  }
  .min-calc-receipt{
    max-width: 340px;
  }
  .min-calc-receipt__paper{
    padding: 24px 20px 34px;
    transform: perspective(1000px) rotateX(12deg) rotateZ(3deg);
  }
  .min-calc-receipt__title{
    font-size: 19px;
  }
  .min-calc-steps{
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .min-calc-step{
    padding-right: 0;
  }
  .min-calc-step__rail::after{
    background: transparent;
  }
  .min-calc-line{
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .min-calc-line__title{
    font-size: 16px;
  }
  .min-calc-result__total{
    font-size: 40px;
  }
  .min-calc-bar__track{
    height: 56px;
  }
  .min-calc-bar__eye::after{
    height: 70px;
  }
  .min-calc-fields{
    grid-template-columns: minmax(0, 1fr);
  }

  .min-calc-final .guide__cta{
    width: 100%;
  }
}