/* Промо-баннер «−10% за заявку». Layout через --promo-h; style.css не трогаем. */

:root { --promo-h: 0px; }

/* Резервируем место над фикс-шапкой ровно на высоту полосы.
   При --promo-h:0 (баннер скрыт/закрыт) поведение идентично исходному. */
body   { padding-top: var(--promo-h); transition: padding-top var(--motion-slow) var(--ease-out); }
/* top едет синхронно с body.padding-top; transform-переход (scroll-hide из style.css)
   обязательно рестейтим в том же объявлении, иначе shorthand его затрёт. */
.header { top: var(--promo-h); transition: transform var(--motion-base) var(--ease-out), top var(--motion-slow) var(--ease-out); }

.promo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101; /* выше шапки (z=100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 44px; /* симметрично: справа крестик, слева столько же — текст центрируется честно */
  background: var(--gp-cta-grad);
  color: var(--gp-cta-ink);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);

  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}

.promo-bar.is-visible { opacity: 1; transform: translateY(0); }

/* Обычный текстовый поток (не flex): длинная фраза переносится по словам
   и центрируется. inline-flex ломал перенос на узких экранах — анонимные
   текстовые куски не разбивались внутри себя и обрезались справа. */
.promo-bar__text {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}
.promo-bar__text b { font-weight: 800; white-space: nowrap; }
.promo-bar__emoji { font-size: 16px; margin-right: 5px; }

.promo-bar__close {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  opacity: .75;
  transition:
    opacity var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}
@media (hover: hover) {
  .promo-bar__close:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
}

.promo-bar:focus-visible { outline: 2px solid var(--gp-cta-ink); outline-offset: -3px; }
.promo-bar__close:focus-visible { outline: 2px solid var(--gp-cta-ink); outline-offset: 1px; }

@media (max-width: 480px) {
  /* симметричный отступ под крестик с обеих сторон; меньше шрифт и плотнее строки */
  .promo-bar { font-size: 12.5px; line-height: 1.25; padding: 7px 38px; }
  .promo-bar__close { width: 32px; height: 32px; right: 4px; font-size: 24px; }
}

@media (max-width: 360px) {
  .promo-bar { font-size: 11.5px; padding: 7px 36px; }
}