/* Виджет комментариев/рейтинга loadfile.ru. Токены берём из дизайн-системы сайта
   (assets/site.css :root), с фолбэками, если виджет встроен на странице без site.css.
   Префикс lfc- — не пересекается с .lf-search (живой поиск). */
#lf-comments, .lf-comments {
  --lfc-brand: var(--brand, #3b6bff);
  --lfc-brand-2: var(--brand-2, #2350e6);
  --lfc-star: #f5a623;                 /* золото для звёзд рейтинга */
  --lfc-text: var(--text, #101935);
  --lfc-dim: var(--text-dim, #475183);
  --lfc-mute: var(--text-mute, #7b85ad);
  --lfc-border: var(--border, rgba(20,40,100,.12));
  --lfc-border-strong: var(--border-strong, rgba(20,40,100,.22));
  --lfc-surface: var(--surface, #fff);
  --lfc-surface-2: var(--surface-2, #f1f4ff);
  --lfc-shadow: var(--shadow, 0 24px 50px -24px rgba(40,60,120,.35));
  font-family: inherit;
  color: var(--lfc-text);
  display: block;
}
.lfc-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.25rem; }

.lfc-rating { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.lfc-rating__avg { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.lfc-rating__count { color: var(--lfc-mute); font-size: .9rem; }
.lfc-star { color: var(--lfc-border-strong); font-size: 1.3rem; line-height: 1; }
.lfc-star.is-on { color: var(--lfc-star); }
.lfc-pick { cursor: pointer; font-size: 1.8rem; transition: transform .12s ease; }
.lfc-pick:hover { transform: scale(1.15); }
.lfc-pick:focus-visible { outline: 2px solid var(--lfc-brand); outline-offset: 3px; border-radius: 6px; }

.lfc-form {
  display: flex; flex-direction: column; gap: .65rem;
  padding: 1.4rem; border: 1px solid var(--lfc-border);
  border-radius: 16px; background: var(--lfc-surface);
  box-shadow: var(--lfc-shadow); margin-bottom: 2rem;
}
.lfc-form__label { font-weight: 700; font-size: .95rem; }
.lfc-form__stars { display: flex; gap: .3rem; }
.lfc-input {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--lfc-border-strong);
  border-radius: 10px; font: inherit; color: var(--lfc-text);
  background: var(--lfc-surface-2); box-sizing: border-box;
}
.lfc-input::placeholder { color: var(--lfc-mute); }
.lfc-input:focus { outline: 2px solid var(--lfc-brand); outline-offset: 1px; border-color: var(--lfc-brand); background: var(--lfc-surface); }
.lfc-textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.lfc-btn {
  align-self: flex-start; padding: .68rem 1.6rem; border: 0; border-radius: 10px;
  background: var(--lfc-brand); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.lfc-btn:hover { background: var(--lfc-brand-2); transform: translateY(-1px); }
.lfc-btn:disabled { opacity: .6; cursor: default; transform: none; }
.lfc-form__msg { font-size: .9rem; min-height: 1.2em; }
.lfc-form__msg.is-ok { color: var(--ok, #16a34a); }
.lfc-form__msg.is-err { color: var(--danger, #dc2626); }

.lfc-list { display: flex; flex-direction: column; gap: 1rem; }
.lfc-comment { padding: 1.05rem 1.15rem; border: 1px solid var(--lfc-border); border-radius: 14px; background: var(--lfc-surface); }
.lfc-comment__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.lfc-comment__name { font-weight: 700; }
.lfc-comment__rating .lfc-star { font-size: .95rem; }
.lfc-comment__date { color: var(--lfc-mute); font-size: .8rem; margin-left: auto; }
.lfc-comment__body { line-height: 1.6; color: var(--lfc-dim); }
.lfc-empty { color: var(--lfc-mute); }