/* Блок «Успейте получить выгодное предложение» на главной.
   Компактная полоса: слева текст, по центру табло обратного отсчёта, справа кнопка.
   Форма живёт в отдельном окне (#promo-offer-modal), поэтому в самом блоке полей нет. */

/* ширину и внешние отступы задаёт обёртка .grid.grid--container (как у соседних
   секций), поэтому здесь только внутреннее оформление полосы */
.promo-countdown__container{
  margin-top: 30px;
}

.promo-countdown{
  /* Переменной --border-light в теме нет, поэтому прежняя строка
     border: 1px solid var(--border-light) была недействительной и рамка не
     рисовалась вовсе — убрал, чтобы не выглядела рабочей.
     По горизонтали отступов нет: их даёт контейнер сетки, и содержимое встаёт
     по одной линии с заголовками соседних секций. */
  padding: 20px 0;
}

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

.promo-countdown__text{
  flex: 1;
  min-width: 0;
}

.promo-countdown__title{
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--black);
  margin: 0;
}

.promo-countdown__subtitle{
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray);
}

/* --- Табло --- */

.promo-countdown__timer{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

.promo-countdown__unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.promo-countdown__digits{
  display: flex;
  gap: 4px;
}

/* цифра-«карточка» с горизонтальной линией по центру — как у перекидного табло */
.promo-countdown__digit{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 52px;
  border-radius: 7px;
  background: linear-gradient(180deg, #40403f 0%, #2c2c2b 49%, #262625 51%, #121211 100%);
  color: var(--white);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.promo-countdown__digit::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.55);
}

.promo-countdown__sep{
  align-self: flex-start;
  margin-top: 10px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #2c2c2b;
}

.promo-countdown__caption{
  font-size: 13px;
  line-height: 1;
  color: var(--black);
}

/* --- Кнопка --- */

.promo-countdown__cta{
  flex: 1;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 6px;
  background: #ffb81c;
  color: #0b1220;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(255, 184, 28, 0.3);
  cursor: pointer;
  transition: opacity 0.2s;
}

.promo-countdown__cta:hover{
  opacity: 0.88;
}

/* --- Форма во всплывающем окне --- */

.promo-offer-modal__text{
  margin: -12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #555;
}

#promo-offer-modal .promo-countdown__form{
  width: 100%;
}

.promo-countdown__fields{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-countdown__field-wrap{
  position: relative;
}

.promo-countdown__input{
  width: 100%;
}

.promo-countdown__submit{
  width: 100%;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 6px;
  background: #ffb81c;
  color: #0b1220;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(255, 184, 28, 0.3);
  cursor: pointer;
  transition: opacity 0.2s;
}

.promo-countdown__submit:hover{
  opacity: 0.88;
}

.promo-countdown__submit:disabled{
  cursor: not-allowed;
  opacity: 0.6;
}

.promo-countdown__agree{
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray);
}

.promo-countdown__agree a{
  color: #946000;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.promo-countdown__agree a:hover{
  opacity: 0.6;
}

/* --- Адаптив --- */

@media screen and (max-width: 1199px){
  .promo-countdown__inner{
    justify-content: center;
    text-align: center;
  }
  .promo-countdown__text{
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 767px){
  .promo-countdown{
    padding: 20px 0;
  }
  .promo-countdown__title{
    font-size: 19px;
  }
  .promo-countdown__inner{
    gap: 18px;
  }
  .promo-countdown__cta{
    width: 100%;
  }
}

@media screen and (max-width: 400px){
  .promo-countdown__digit{
    width: 32px;
    height: 44px;
    font-size: 28px;
    border-radius: 6px;
  }
  .promo-countdown__sep{
    margin-top: 8px;
    font-size: 22px;
  }
  .promo-countdown__caption{
    font-size: 12px;
  }
  .promo-countdown__timer{
    gap: 5px;
  }
}

@media screen and (max-width: 767px){
  /* На телефоне подпись убрана по просьбе пользователя: место в компактной
     полосе дороже, а срок и так виден на самом табло. */
  .promo-countdown__subtitle{
    display: none;
  }
}