/**
 * Bartenders — оцінка в один клік.
 *
 * 1a: зірки WPRM у шапці картки лишаються рідними — ні розмірів, ні кольорів,
 *     ні бордерів з макета не чіпаємо. Свій тут тільки рядок-підпис під
 *     .wprm-recipe-rating-details.
 * 1b: плаваюча панель — повністю наша, розмітка й розміри з хендоффа.
 */

:root {
  --brtrn-accent: #bf7a2b;
  --brtrn-ok: #1f6e54;
  /* На темній панелі #1f6e54 майже не читається — потрібен світліший тон. */
  --brtrn-ok-dark-bg: #5fd0a0;
  --brtrn-muted: #9a8d77;
  --brtrn-error: #a33a2a;
}

/* --- 1a: підпис під зірками --------------------------------------------- */

/*
 * Підпис — це підрядок до «Рейтинг: X (N оцінок)», тому він має бути тихішим
 * за нього, а не голоснішим: без жирного, на розмір менший, без підкреслення.
 * Раніше жирний зелений + жирний помаранчевий підкреслений перетягували увагу
 * на себе і рядок читався як окремий елемент, приліплений збоку.
 */
.brtrn-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--brtrn-muted);
  margin-top: 2px;
}

.brtrn-hint--done {
  color: var(--brtrn-ok);
}

.brtrn-hint--error {
  color: var(--brtrn-error);
}

.brtrn-hint--busy {
  opacity: 0.7;
}

.brtrn-sep {
  margin: 0 6px;
  opacity: 0.5;
}

.brtrn-link {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--brtrn-accent);
  text-decoration: none;
}

.brtrn-link:hover {
  color: var(--brtrn-ok);
}

.brtrn-link:focus-visible {
  outline: 2px solid var(--brtrn-accent);
  outline-offset: 2px;
}

/* Поки летить запит — зірки не приймають повторних кліків. */
.brtrn-busy .wprm-rating-star {
  pointer-events: none;
  opacity: 0.6;
}

/* --- 1b: плаваюча панель ------------------------------------------------- */

.brtrn-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 100; /* вище кнопки «вгору» Astra (99); модалки WPRM усе одно на 2147483647 */
  background: #16313f;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px -12px rgba(22, 49, 63, 0.6);
  padding: 12px 34px 12px 14px; /* правий відступ під ✕ */
  font-family: 'Manrope', system-ui, sans-serif;
  /*
   * visibility разом із transform: схована панель має бути не лише за екраном,
   * а й поза таб-порядком та деревом доступності. Затримка дорівнює тривалості
   * анімації, щоб панель не зникала різко посеред виїзду вниз. JS дублює це
   * через inert — visibility страхує браузери, де inert немає.
   */
  visibility: hidden;
  transform: translateY(calc(100% + 24px));
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.brtrn-bar.is-shown {
  visibility: visible;
  transform: none;
  transition: transform 0.28s ease, visibility 0s;
}

/*
 * Поки панель відкрита — ховаємо плаваючу кнопку «вгору» теми Astra: вона
 * fixed у тому ж куті й налазить на хрестик закриття. Astra показує її
 * інлайновим style через fadeIn, тому тут потрібен !important.
 */
html.brtrn-bar-open #ast-scroll-top {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .brtrn-bar,
  .brtrn-bar.is-shown {
    transition: none;
  }
}

@media (min-width: 922px) {
  .brtrn-bar {
    left: auto;
    right: 24px;
    width: 400px;
  }
}

.brtrn-bar-idle,
.brtrn-bar-done {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Клас із display:flex перебиває UA-правило [hidden]{display:none} — повертаємо
   ховання назад, інакше «дякуємо» рендериться поверх зірок. */
.brtrn-bar-idle[hidden],
.brtrn-bar-done[hidden] {
  display: none;
}

.brtrn-bar-text {
  flex: 1;
  min-width: 0;
}

.brtrn-bar-text b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
}

.brtrn-bar-text span {
  display: block;
  font-size: 11.5px;
  color: #cdd9df;
  margin-top: 2px;
}

.brtrn-bar-error b {
  color: #ffb4a2;
}

.brtrn-stars {
  display: inline-flex;
  flex: none;
}

.brtrn-star {
  background: none;
  border: 0;
  padding: 7px 2px; /* тач-ціль ≥ 38px по висоті разом зі svg */
  line-height: 0;
  cursor: pointer;
  color: #5f7683;
}

.brtrn-star svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  pointer-events: none;
}

/* Той самий бурштин, що й у зірок WPRM в шапці картки — щоб на обох
   поверхнях зірка читалась як та сама зірка. */
.brtrn-star.is-on {
  color: #ffa900;
}

/* Успіх підтверджує текст, а не колір зірок: зірки лишаються бурштиновими. */
.brtrn-bar .brtrn-ok {
  color: var(--brtrn-ok-dark-bg);
}

.brtrn-star.is-on svg {
  fill: currentColor;
}

.brtrn-star:focus-visible {
  outline: 2px solid #ffa900;
  outline-offset: 1px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .brtrn-star {
    transition: transform 0.12s ease;
  }

  .brtrn-star:active {
    transform: scale(1.15);
  }
}

/*
 * Поки летить запит, зірки лише перестають приймати кліки. Прозорості тут
 * свідомо немає: #ffa900 на 60% поверх темного тла панелі читається як тьмяно
 * помаранчевий, і після відповіді колір «спалахував» у жовтий — на мобільному
 * це виглядало як глюк. Від подвійного сабміту й так тримає прапорець inFlight.
 */
.brtrn-bar[data-state='busy'] .brtrn-star {
  pointer-events: none;
}

.brtrn-bar-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  color: #8fa3ad;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.brtrn-bar-close:focus-visible {
  outline: 2px solid #ffa900;
  outline-offset: -2px;
}

.brtrn-bar-comment {
  flex: none;
  background: #fff;
  color: #16313f;
  border: 0;
  border-radius: 10px;
  padding: 9px 13px;
  font: 800 12.5px 'Manrope', system-ui, sans-serif;
  cursor: pointer;
}

.brtrn-bar-comment:focus-visible {
  outline: 2px solid #ffa900;
  outline-offset: 2px;
}

.brtrn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}