/* ============================================================================
   feedback.css — вкладка "Отзыв": форма (звёзды/тема/текст) и экран "спасибо".
   .feedback-card/.feedback-thanks — .frosted (класс проставлен в index.html).
   Сверено с liquid_glass_demo_v3.html (см. /areas/slyrix-redesign.md).
   ============================================================================ */

.feedback-card{
  border-radius:var(--radius-md);
  padding:28px 30px;
  max-width:520px;
}
.feedback-field{
  margin-bottom:22px;
}
.feedback-field:last-of-type{
  margin-bottom:18px;
}
.feedback-label{
  display:block;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:10px;
}
.feedback-stars{
  display:flex;
  gap:6px;
}
.feedback-star{
  background:transparent;
  border:none;
  font-size:26px;
  line-height:1;
  color:var(--muted-2);
  cursor:pointer;
  padding:2px;
  transition:color 0.15s ease, transform 0.15s ease;
}
.feedback-star:hover{
  transform:scale(1.1);
}
.feedback-star.active{
  color:var(--mute-c);
  transform:scale(1.1);
}
.feedback-topics{
  margin:0;
}
.feedback-topic-chip{
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  color:var(--text);
  font-family:var(--font-body);
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s cubic-bezier(0.4,0,0.2,1);
}
.feedback-topic-chip:active{
  transform:scale(0.95);
}
.feedback-topic-chip.selected{
  border-color:var(--accent);
  color:var(--text);
  background:var(--accent-dim);
}
#feedback-text{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  /* нижний правый угол урезан отдельно — иначе треугольник ресайза (нативный
     ::-webkit-resizer) некрасиво налезает на скруглённый угол textarea */
  border-bottom-right-radius:4px;
  padding:14px 16px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  resize:vertical;
  outline:none;
  transition:border-color 0.2s ease;
}
#feedback-text:focus{
  border-color:var(--accent);
}
/* На мобильных устройствах убираем resize (не работает на touch) и фиксируем высоту */
@media (max-width: 768px){
  #feedback-text{
    resize:none;
    border-bottom-right-radius:var(--radius-sm);
    min-height:120px;
  }
}
.feedback-status{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--muted);
  min-height:14px;
  margin-bottom:14px;
}
.feedback-status.feedback-status-error{
  color:var(--ban-c);
}
.feedback-submit{
  width:100%;
  padding:13px;
  border-radius:var(--radius-sm);
  border:none;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  background:linear-gradient(135deg, var(--accent), #d9a0cf);
  color:#1c1226;
  cursor:pointer;
  transition:filter 0.2s ease, transform 0.15s cubic-bezier(0.4,0,0.2,1);
}
.feedback-submit:hover{
  filter:brightness(1.08);
}
.feedback-submit:active{
  transform:scale(0.98);
}
.feedback-thanks{
  max-width:420px;
  text-align:center;
  padding:48px 24px;
  border-radius:var(--radius-md);
}
.feedback-thanks-icon{
  width:52px;
  height:52px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--accent-dim);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-family:var(--font-display);
}
.feedback-thanks h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:19px;
  margin-bottom:8px;
}
.feedback-thanks p{
  color:var(--muted);
  font-size:14px;
}
@media (max-width: 820px){
  .feedback-card{
    max-width:100%;
  }
}