/* tradutora-consent.css — баннер согласия. Нейтральный вид, не конфликтует с версткой Тильды. */
/* z-index НИЖЕ поповеров Тильды (10000001): баннер согласия не имеет права
   перекрывать форму и её кнопку — перекрытие CTA стоит заявок. */
.trd-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999990;padding:16px;
  display:flex;justify-content:center;pointer-events:none;font-family:inherit}
/* Пока открыт поповер с формой, баннер полностью убран с экрана и вернётся
   после закрытия. Согласие при этом не сбрасывается. */
.trd-consent--suppressed{display:none!important}
.trd-consent__card{pointer-events:auto;max-width:720px;width:100%;background:#fff;color:#222;
  border:1px solid #e2e2e2;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:20px 22px}
.trd-consent__title{font-size:17px;font-weight:700;margin-bottom:8px}
.trd-consent__body{font-size:14px;line-height:1.5;margin-bottom:14px}
.trd-consent__link{color:#c8500f;text-decoration:underline}
.trd-consent__opts{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
/* display:flex перебивает браузерный [hidden]{display:none} — возвращаем приоритет */
.trd-consent__opts[hidden]{display:none}
.trd-consent__opt{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;cursor:pointer}
.trd-consent__opt input{margin-top:3px;flex:0 0 auto}
.trd-consent__row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.trd-consent__actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.trd-consent__settings{background:none;border:none;padding:0;font-size:13px;color:#666;
  text-decoration:underline;cursor:pointer}
.trd-consent__btn{appearance:none;border:1px solid #222;background:#fff;color:#222;
  border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer;white-space:nowrap}
.trd-consent__btn--accent{background:#222;color:#fff}
.trd-consent__btn:focus-visible,.trd-consent__settings:focus-visible{outline:2px solid #c8500f;outline-offset:2px}
@media (max-width:600px){
  .trd-consent{padding:10px}
  .trd-consent__card{padding:16px}
  .trd-consent__row{flex-direction:column;align-items:stretch}
  .trd-consent__actions{margin-left:0;flex-direction:column}
  .trd-consent__btn{width:100%}
}

/* статус отправки формы */
.trd-form__status{margin-top:12px;font-size:14px;line-height:1.45}
.trd-form__status[data-kind="error"]{color:#b3261e}
.trd-form__status[data-kind="ok"]{color:#1b7a3d}
.trd-form__status[data-kind="pending"]{color:#666}


/* ── Компактный первый слой (решение владельца 2026-09-02) ──────────────────
   Узкая карточка снизу: без затемнения, без заголовка, без списка категорий.
   На мобильном высота держится в пределах ~85px — баннер не должен закрывать
   контент, кнопки и формы. Подробности живут во втором слое, за «Настроить». */
.trd-consent--compact { padding: 8px; }
.trd-consent__card--compact {
  max-width: 640px; padding: 9px 12px; border-radius: 10px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
}
.trd-consent__short {
  font-size: 12.5px; line-height: 1.35; color: #333; flex: 1 1 auto; min-width: 0;
}
.trd-consent__card--compact .trd-consent__actions {
  display: flex; gap: 6px; flex: 0 0 auto; margin: 0;
}
.trd-consent__card--compact .trd-consent__btn {
  padding: 7px 12px; font-size: 12.5px; border-radius: 7px; white-space: nowrap;
}
.trd-consent__card--compact .trd-consent__settings {
  font-size: 12.5px; white-space: nowrap; padding: 7px 4px;
}

@media (max-width: 600px) {
  .trd-consent--compact { padding: 6px; }
  .trd-consent__card--compact {
    flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px;
  }
  .trd-consent__short { font-size: 11.5px; line-height: 1.3; }
  /* базовый стиль ставит действия колонкой — в компактном слое это давало
     три кнопки в три строки и 86px лишней высоты. Держим их в одну строку. */
  .trd-consent__card--compact .trd-consent__actions {
    flex-direction: row; gap: 5px; width: 100%;
  }
  .trd-consent__card--compact .trd-consent__btn {
    padding: 6px 4px; font-size: 11.5px; flex: 1 1 0; min-width: 0; white-space: nowrap;
  }
  .trd-consent__card--compact .trd-consent__settings {
    padding: 6px 2px; font-size: 11.5px; flex: 0 0 auto; white-space: nowrap;
  }
}

/* Второй слой (настройки) открывается сознательно — там место не экономим,
   но на невысоких экранах он обязан скроллиться внутри себя, а не растягивать
   страницу и не блокировать её прокрутку. */
.trd-consent__opts { max-height: 46vh; overflow-y: auto; }