/*
 * Стили отзывов и формы публикации.
 * В оригинале — инлайновые <style> внутри feedbacks.php и add-feedback.php.
 */

/* --- из feedbacks.php --- */

/* --- из add-feedback.php --- */

    :root{
      --bg:#0B0F1A;
      --card:#171718;
      --card2:#141418;
      --border:rgba(255,255,255,.08);
      --text:#E4E8F0;
      --muted:#AFC1DA;
      --accent:#0085FF;   /* бренд */
      --accent-2:#0073E6;
    }
    .af-wrap{ padding: 10px 14px 40px; }
    .af-hero{
      margin: 10px 14px 14px;
      margin-top: 30px;
      padding: 16px;
      border-radius:14px;
      color:var(--text);
      font-size:18px; 
      text-align:center;
      font-family: Roboto-Medium;
    }
    .af-card{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:14px;
      padding:14px;
      color:var(--text);
      margin-bottom:12px;
    }
    .af-title{  margin-bottom:10px; text-align: center;}
    .af-muted{ color:var(--muted); }

    /* Рейтинг (звёзды) */
    .af-rate-row{ display:flex; gap:26px; align-items:center; padding:6px 2px 2px; justify-content: center;}
    .af-rate-item{ display:grid; gap:8px; justify-items:center; cursor:pointer; user-select:none; }
    .af-star{
      font-size:28px;
      color:var(--muted);
      transition: .16s ease;
      transition-property: transform, color, text-shadow;
    }
    .af-rate-item:hover .af-star{ transform:translateY(-1px); text-shadow:0 0 10px rgba(0,133,255,.18); }
    .af-rate-item.is-active .af-star{
      color: #EDC515;
      text-shadow: 0 0 20px #EDC51573;
    }
    .af-rate-num{ font-size:13px; color:var(--muted); }

    /* Текст */
    .af-textarea{
      width:100%; min-height:120px; resize:vertical;
      background: var(--card2);
      border:1px solid var(--border);
      border-radius:12px;
      color:var(--text);
      padding:12px;
      outline:none; font:inherit;
    }
    .af-textarea:focus{ border-color: rgba(0,133,255,.5); box-shadow:0 0 0 6px rgba(0,133,255,.09); }
    .af-help{ margin-top:8px; font-size:12px; color:var(--muted); }

    /* Кнопка под блоком */
    .af-actions{ margin-top:12px; }
    .af-btn{
      width:100%;
      display:flex; align-items:center; justify-content:center; gap:10px;
      background: var(--accent);
      font-family: Roboto-Medium;
      color:#fff; letter-spacing:.2px;
      padding: 20px; 
      border-radius:12px; 
      border:0; 
      cursor:pointer;
      font-size: 16px;
      box-shadow:0 10px 26px rgba(0,133,255,.25), 0 1px 0 rgba(255,255,255,.08) inset;
      transition:transform .12s ease, filter .12s ease;
    }
    .af-btn[disabled]{ opacity:.65; cursor:not-allowed; transform:none; }
    .af-spin{ width:16px;height:16px;border-radius:999px;border:2px solid rgba(0,0,0,.25); border-top-color:rgba(0,0,0,.65); animation:afspin 1s linear infinite; }
    @keyframes afspin{ to{ transform:rotate(360deg);} }

    /* Подсказка при низкой оценке — стиль в тон карточкам */
    .af-helpbox{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:14px;
      padding:14px;
      color:var(--text);
      display:none;
      margin-bottom:12px;
      position:relative;
    }
    /* тонкий акцент слева брендовым цветом */
    .af-helpbox::before{
      content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px;
      border-radius:14px 0 0 14px; background: var(--accent);
    }
    .af-helpbox .hb-head{
      display:flex; align-items:center; gap:10px; margin-bottom:8px; justify-content:center;
      font-family: Roboto-Medium;
    }
    .af-helpbox .hb-icon{
      width:26px; height:26px; display:grid; place-items:center; border-radius:999px;
      background: rgba(0,133,255,.12); color: var(--accent);
      border:1px solid rgba(0,133,255,.25);
    }
    .af-helpbox .hb-text{ color:var(--muted); font-size:14px; text-align:center; }
    .af-helpbox .hb-strong{ color:#fff; }

    /* Кнопки — каждая на новой строке, full width */
    .af-helpbox .hb-actions{
      margin-top:12px; display:grid; grid-template-columns: 1fr; gap:8px;
    }
    .af-helpbox .hb-btn{
      width:100%;
      display:flex; align-items:center; justify-content:center; gap:8px;
      border-radius:12px; padding:13px 14px; font-size:14px; text-decoration:none;
      transition:transform .12s ease, filter .12s ease;
    }
    .af-helpbox .hb-btn.primary{
      background: var(--accent); color:#fff; border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 26px rgba(0,133,255,.20), 0 1px 0 rgba(255,255,255,.08) inset;
    }
    .af-helpbox .hb-btn.outline{
      background: transparent; color:#fff; border:1px solid var(--border);
    }
    .af-helpbox .hb-btn .fa{ opacity:.95; }