/*!
 * webco.discount — оформление виджета накопительной скидки
 * discount-timer.css v2.0.0
 * Всё, что настраивается из админки, приходит CSS-переменными в inline-стиле .dtw.
 */

.dtw {
  /* --- палитра состояний --- */
  --dtw-active-from: #1364a7;
  --dtw-active-to: #1b8fee;
  --dtw-idle-from: #97331b;
  --dtw-idle-to: #d84926;
  --dtw-complete-from: #fff469;
  --dtw-complete-to: #e6dc56;
  --dtw-complete-ink: #1f1f1f;
  --dtw-claimed-from: #2e7d32;
  --dtw-claimed-to: #4caf50;
  --dtw-ink: #fff;

  /* кнопка подтверждения — свой цвет, не зависящий от фона панели */
  --dtw-cta: #ffe94d;
  --dtw-cta-ink: #1f1f1f;

  /* --- геометрия ---
     Все размеры считаются от одного множителя: --dtw-user-scale приходит
     из настроек модуля, мобильный брейкпоинт домножает его ещё раз. */
  --dtw-user-scale: 1;
  --dtw-scale: var(--dtw-user-scale);

  --dtw-col: calc(88px * var(--dtw-scale));
  --dtw-btn: calc(84px * var(--dtw-scale));
  --dtw-pad: calc(9px * var(--dtw-scale));
  --dtw-gap: calc(8px * var(--dtw-scale));
  --dtw-radius: calc(14px * var(--dtw-scale));
  --dtw-offset: 10px;
  --dtw-z: 1000;
  --dtw-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  position: fixed;
  bottom: var(--dtw-offset);
  z-index: var(--dtw-z);

  display: flex;
  gap: var(--dtw-gap);
  padding: var(--dtw-pad);
  box-sizing: border-box;
  width: calc(var(--dtw-col) + var(--dtw-pad) * 2);
  overflow: hidden;

  color: var(--dtw-ink);
  font: 400 calc(13px * var(--dtw-scale)) / 1.25 var(--dtw-font);
  box-shadow: inset 0 0 0 2px currentColor;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: width .25s ease, color .3s ease;
}

/* Подложка отдельным слоем: градиент меняется, не трогая тень и текст. */
.dtw::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .85;
  background: linear-gradient(45deg, var(--dtw-active-from), var(--dtw-active-to));
  transition: background .3s ease, opacity .3s ease;
}

.dtw > * { position: relative; }

.dtw--left {
  left: 0;
  border-radius: 0 var(--dtw-radius) var(--dtw-radius) 0;
}

.dtw--right {
  right: 0;
  flex-direction: row-reverse;
  border-radius: var(--dtw-radius) 0 0 var(--dtw-radius);
}

/* --- раскрытие: наведение на десктопе, тап на тач-устройствах --- */
.dtw:hover,
.dtw:focus-within,
.dtw.is-open {
  width: calc(var(--dtw-col) + var(--dtw-btn) + var(--dtw-gap) + var(--dtw-pad) * 2);
}

/* --- колонка с цифрами --- */
.dtw__text {
  flex: 0 0 var(--dtw-col);
  /* Без этого длинная надпись раздвигает колонку шире панели и обрезается краем. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Высоту задаёт содержимое: в состоянии простоя время скрыто,
     и при фиксированной высоте внутри панели зияла пустота. */
  gap: calc(5px * var(--dtw-scale));
}

.dtw__perc-name,
.dtw__time-name,
.dtw__state {
  font-size: 1em;
  line-height: 1.15;
}

.dtw__perc-value {
  font: 700 calc(27px * var(--dtw-scale)) / 1.05 var(--dtw-font);
  letter-spacing: -.02em;
  /* Цифры не должны дёргать вёрстку при смене ширины символов. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Страховка для длинных значений — например крупных сумм баллов. */
.dtw__perc-value--long { font-size: calc(21px * var(--dtw-scale)); }
.dtw.is-complete .dtw__perc-value--long { font-size: calc(26px * var(--dtw-scale)); }

.dtw__time-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dtw__state { display: none; }

/* --- кнопка --- */
.dtw__button {
  flex: 0 0 var(--dtw-btn);
  width: var(--dtw-btn);
  /* Тянется по высоте колонки с цифрами, а не задаёт её. */
  align-self: stretch;
  padding: calc(7px * var(--dtw-scale));
  border: 0;
  border-radius: calc(var(--dtw-radius) - 4px);
  background: var(--dtw-cta);
  color: var(--dtw-cta-ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: filter .2s ease, opacity .2s ease;
}

.dtw__button:hover:not(:disabled),
.dtw__button:focus-visible { filter: brightness(.93); }

.dtw__button:disabled { opacity: .55; cursor: default; }

/* --- состояние: нет активности --- */
.dtw.is-idle::before {
  background: linear-gradient(45deg, var(--dtw-idle-from), var(--dtw-idle-to));
}
.dtw.is-idle .dtw__time { display: none; }
.dtw.is-idle .dtw__state { display: block; }

/* --- состояние: максимум набран --- */
.dtw.is-complete { color: var(--dtw-complete-ink); }
.dtw.is-complete::before {
  background: linear-gradient(45deg, var(--dtw-complete-from), var(--dtw-complete-to));
  opacity: 1;
}
.dtw.is-complete .dtw__perc-value { font-size: calc(34px * var(--dtw-scale)); }
.dtw.is-complete .dtw__time { display: none; }
.dtw.is-complete .dtw__state { display: block; }

/* --- состояние: скидка зафиксирована --- */
.dtw.is-claimed::before {
  background: linear-gradient(45deg, var(--dtw-claimed-from), var(--dtw-claimed-to));
  opacity: 1;
}
.dtw.is-claimed .dtw__time { display: none; }
.dtw.is-claimed .dtw__state { display: block; }
.dtw.is-claimed .dtw__button { cursor: default; }

/* --- строка для скринридера --- */
.dtw__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- мобильные --- */
@media (max-width: 767px) {
  /* На телефоне панель ещё компактнее — она отъедает заметную долю экрана. */
  .dtw { --dtw-scale: calc(var(--dtw-user-scale) * .88); }
  .dtw--desktop-only { display: none; }
}

/* ==================================================================
   Модальное окно заявки
   ================================================================== */

.dtm {
  --dtm-accent: #1b8fee;
  --dtm-cta: #ffe94d;
  --dtm-cta-ink: #1f1f1f;
  --dtm-ink: #1f1f1f;
  --dtm-muted: #8b8f96;
  --dtm-border: #e2e5ea;
  --dtm-radius: 14px;

  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 20, 28, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font: 400 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--dtm-ink);
  animation: dtm-fade .18s ease;
}

@keyframes dtm-fade { from { opacity: 0 } to { opacity: 1 } }

.dtm__box {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--dtm-radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.dtm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--dtm-accent);
  color: #fff;
  border-radius: var(--dtm-radius) var(--dtm-radius) 0 0;
}

.dtm__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.dtm__close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}

.dtm__close:hover,
.dtm__close:focus-visible { background: rgba(255, 255, 255, .2); }

.dtm__form,
.dtm__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.dtm__field { position: relative; }

.dtm__field-label {
  position: absolute;
  top: 6px; left: 14px;
  font-size: 12px;
  color: var(--dtm-muted);
  pointer-events: none;
}

.dtm__input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 14px;
  border: 1px solid var(--dtm-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dtm__input::placeholder { color: var(--dtm-muted); }

.dtm__input:focus {
  border-color: var(--dtm-accent);
  box-shadow: 0 0 0 3px rgba(27, 143, 238, .18);
}

.dtm__input:invalid:not(:placeholder-shown) { border-color: #d84926; }

.dtm__field--ro .dtm__input {
  padding-top: 24px;
  padding-bottom: 8px;
  background: #f7f8fa;
  cursor: default;
}

.dtm__field--ro .dtm__input:focus { box-shadow: none; border-color: var(--dtm-border); }

.dtm__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.dtm__checkbox {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--dtm-accent);
  cursor: pointer;
}

.dtm__link { color: var(--dtm-accent); }

.dtm__submit {
  margin-top: 4px;
  padding: 18px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--dtm-cta);
  color: var(--dtm-cta-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}

.dtm__submit:hover:not(:disabled) { filter: brightness(.94); }
.dtm__submit:disabled { opacity: .6; cursor: default; }

.dtm__msg { font-size: 14px; }
.dtm__msg--ok { color: #2e7d32; }
.dtm__msg--err { color: #d84926; }

.dtm__form--sent .dtm__field,
.dtm__form--sent .dtm__consent,
.dtm__form--sent .dtm__submit { display: none; }

/* --- веб-форма Битрикса внутри окна --------------------------------
   Форма выводится собственным шаблоном модуля: поля идут одной колонкой,
   без названия формы, служебного описания и кнопки сброса. */
.dtm__body form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dtm__label {
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--dtm-muted);
}

.dtm__req {
  margin-left: 3px;
  font-style: normal;
  color: #d84926;
}

/* Свой текст согласия со ссылкой берём из заголовка вопроса, а подпись
   самого чекбокса гасим — иначе строка задваивается. */
.dtm__consent-box { font-size: 0; }
.dtm__consent-box input { font-size: 1rem; }
.dtm__consent-text { font-size: 14px; line-height: 1.35; }
.dtm__consent-text a { color: var(--dtm-accent); }

.dtm__captcha { display: block; margin-bottom: 8px; border-radius: 8px; }

/* Остатки табличной вёрстки на случай нестандартного шаблона формы. */
.dtm__body table { width: 100%; border-collapse: collapse; }
.dtm__body td,
.dtm__body th { padding: 4px 0; text-align: left; vertical-align: middle; }

.dtm__body input[type=text],
.dtm__body input[type=tel],
.dtm__body input[type=email],
.dtm__body input[type=date],
.dtm__body select,
.dtm__body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--dtm-border);
  border-radius: 10px;
  font: inherit;
  outline: none;
}

.dtm__body input[readonly] { background: #f7f8fa; }

.dtm__body input[type=submit],
.dtm__body button[type=submit] {
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--dtm-cta);
  color: var(--dtm-cta-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}

.dtm__body input[type=submit]:hover,
.dtm__body button[type=submit]:hover { filter: brightness(.94); }

/* Кнопку сброса стандартный шаблон рисует рядом с отправкой — она лишняя. */
.dtm__body input[type=reset] { display: none; }

.dtm__body .errortext { color: #d84926; }
.dtm__body .notetext { color: #2e7d32; }

/* Страница под открытым окном не должна прокручиваться. */
body.dtm-open { overflow: hidden; }

@media (max-width: 480px) {
  .dtm__title { font-size: 20px; }
  .dtm__input { padding: 14px 12px; }
  .dtm__submit { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dtw, .dtw::before, .dtw__button,
  .dtm, .dtm__input, .dtm__submit { transition: none; animation: none; }
}