/* =========================================================
   asatoma-par.ru · promo.css
   ─────────────────────────────────────────────────────────
   Промокод-система, Этап 1: sticky-баннер сверху сайта +
   поле ввода промокода в booking-confirm popup и в callback-
   форме.
   ========================================================= */

/* ─────────── STICKY-БАННЕР ───────────
   .topnav на сайте — position:fixed. Баннер тоже fixed
   поверх верха страницы; класс body.has-promo-banner
   сдвигает шапку и контент вниз на высоту баннера. */
:root { --promo-banner-h: 40px; }

.promo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--promo-banner-h);
  z-index: 1200;                /* выше .topnav, ниже lightbox/попапов */
  background: var(--color-cream, #EFE7DA);
  border-bottom: 1px solid var(--color-ink-100, rgba(43,38,32,0.1));
  box-sizing: border-box;
}
.promo-banner__inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 13px;
}
.promo-banner__eyebrow {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-600, #6E675C);
  flex-shrink: 0;
}
.promo-banner__code {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-sapphire-500, #1E4A8C);
  flex-shrink: 0;
}
.promo-banner__title {
  color: var(--color-ink-800, #2B2620);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-banner__close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--color-ink-600, #6E675C);
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.promo-banner__close:hover { color: var(--color-ink-900, #1D1D1B); }

/* Сдвиг шапки/контента под баннер */
.has-promo-banner .topnav { top: var(--promo-banner-h); }

@media (max-width: 767px) {
  /* На мобайле .topnav — position:relative (в потоке),
     поэтому сдвигаем весь контент паддингом body. */
  .has-promo-banner { padding-top: var(--promo-banner-h); }
  .has-promo-banner .topnav { top: 0; }
  .promo-banner__inner { padding: 0 16px; gap: 8px; font-size: 12px; }
  .promo-banner__title { font-size: 11px; }
}

/* ─────────── ПРОМОКОД В BOOKING-CONFIRM ───────────
   Секция «Есть промокод?» внутри .aa-pop__body. */
.aa-pop__promo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--aa-hairline, rgba(43,38,32,0.1));
}
.aa-pop__promo-toggle {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-size: 12.5px;
  color: var(--aa-ink-mute, #4A4A47);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.aa-pop__promo-toggle:hover { color: var(--aa-anthracite, #1D1D1B); }

.aa-pop__promo-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.aa-pop__promo-input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aa-anthracite, #1D1D1B);
  background: var(--aa-pearl, #EFE7DA);
  border: 1px solid var(--aa-hairline-strong, rgba(43,38,32,0.18));
  border-radius: 2px;
  box-sizing: border-box;
}
.aa-pop__promo-input:focus {
  outline: none;
  border-color: var(--aa-sapphire, #1E4A8C);
}
.aa-pop__promo-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: var(--aa-ink-soft, #6E675C);
}
.aa-pop__promo-apply {
  flex-shrink: 0;
  padding: 11px 18px;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aa-pearl, #EFE7DA);
  background: var(--aa-sapphire, #1E4A8C);
  border: 1px solid var(--aa-sapphire, #1E4A8C);
  border-radius: 2px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(.22,.61,.36,1);
}
.aa-pop__promo-apply:hover { background: var(--aa-sapphire-deep, #163866); }

.aa-pop__promo-status {
  margin-top: 9px;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-size: 12px;
  line-height: 1.45;
}
.aa-pop__promo-status--ok    { color: var(--aa-sapphire, #1E4A8C); }
.aa-pop__promo-status--error { color: #B0413E; }

/* ─────────── ПРОМОКОД В CALLBACK-ФОРМЕ ─────────── */
.callback-form__promo {
  margin-top: 4px;
}
.callback-form__promo-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-size: 13px;
  color: var(--aa-ink-mute, #4A4A47);
  cursor: pointer;
}
.callback-form__promo-label input { cursor: pointer; }
.callback-form__promo-manual {
  margin-top: 8px;
  width: 100%;
  padding: 11px 13px;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aa-anthracite, #1D1D1B);
  background: var(--aa-pearl, #EFE7DA);
  border: 1px solid var(--aa-hairline-strong, rgba(43,38,32,0.18));
  border-radius: 2px;
  box-sizing: border-box;
}
.callback-form__promo-manual:focus {
  outline: none;
  border-color: var(--aa-sapphire, #1E4A8C);
}
.callback-form__promo-manual::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: var(--aa-ink-soft, #6E675C);
}