/* Кнопка «Вопрос или отзыв» и окно формы (lms/templates/_feedback.html).
   Перенесено из прототипа (волт, prototype/lms-flows.html, .fb-*). Свои
   переменные и префикс fbk-: файл грузится и в кабинетах (styles.css), и в
   каталоге (catalog.css), чужие правила его не задевают. */
.fbk-btn,.fbk-ov{--fbk-ink:#1A1A1A;--fbk-magenta:#ED0086;--fbk-muted:#5c5c66;--fbk-faint:#8c8c96;--fbk-line:rgba(26,26,26,.12);font-family:Onest,'Helvetica Neue',Arial,sans-serif}
.fbk-btn{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:8px;border:0;border-radius:99px;background:var(--fbk-ink);color:#fff;font-size:14px;font-weight:600;line-height:1.2;padding:12px 18px;box-shadow:0 8px 24px rgba(22,22,29,.22);cursor:pointer}
.fbk-btn:focus-visible{outline:3px solid #f3b6d3;outline-offset:2px}
.fbk-btn svg{width:18px;height:18px;flex:none}
/* Пока открыт плеер или интервью каталога, кнопка не лезет поверх. */
body:has(#pl-ov:not([hidden])) .fbk-btn,body:has(.int-ov:not([hidden])) .fbk-btn,body:has(#fbk-ov:not([hidden])) .fbk-btn{display:none}
.fbk-ov{position:fixed;inset:0;z-index:110;background:rgba(20,20,26,.5);display:flex;align-items:flex-end;justify-content:flex-end;padding:22px;box-sizing:border-box}
.fbk-ov[hidden]{display:none}
.fbk-ov *{box-sizing:border-box}
.fbk-box{position:relative;width:min(400px,100%);max-height:100%;overflow:auto;background:#fff;color:var(--fbk-ink);border-radius:20px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.2);font-weight:400}
.fbk-box h2{font-size:21px;font-weight:800;line-height:1.25;margin:0 30px 8px 0}
.fbk-box p{font-size:14.5px;color:var(--fbk-muted);line-height:1.5;margin:0 0 14px}
.fbk-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--fbk-faint)}
.fbk-x:hover{color:var(--fbk-ink)}
.fbk-x:focus-visible,.fbk-send:focus-visible{outline:3px solid #f3b6d3;outline-offset:2px}
.fbk-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;border:0;min-width:0}
.fbk-kinds label{position:relative;font-size:13.5px;border:1px solid var(--fbk-line);border-radius:99px;padding:6px 11px;cursor:pointer;color:var(--fbk-ink)}
.fbk-kinds label:has(input:checked){border-color:var(--fbk-magenta);color:var(--fbk-magenta);background:#fdf0f6}
.fbk-kinds label:has(input:focus-visible){outline:2px solid #f3b6d3;outline-offset:1px}
/* Радиокнопка видна только как пилюля, но остаётся в порядке фокуса. */
.fbk-kinds input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fbk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fbk-box textarea{display:block;width:100%;font:inherit;font-size:15px;color:var(--fbk-ink);border:1px solid var(--fbk-line);border-radius:12px;padding:12px;resize:vertical;min-height:110px}
.fbk-box textarea:focus,.fbk-contact input:focus{outline:2px solid #f3b6d3;border-color:var(--fbk-magenta)}
.fbk-contact{margin-top:10px}
.fbk-contact[hidden]{display:none}
.fbk-contact label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.fbk-contact input{width:100%;font:inherit;font-size:15px;color:var(--fbk-ink);border:1px solid var(--fbk-line);border-radius:10px;padding:10px 12px}
.fbk-where{font-size:12.5px;color:var(--fbk-faint);margin:8px 0 14px;overflow-wrap:anywhere}
.fbk-err{font-size:13.5px;color:#b00050;margin:-4px 0 12px}
.fbk-err[hidden]{display:none}
.fbk-send{display:block;width:100%;border:0;border-radius:12px;background:var(--fbk-magenta);color:#fff;font:inherit;font-size:15px;font-weight:600;padding:13px 18px;cursor:pointer}
.fbk-send:disabled{opacity:.6;cursor:default}
.fbk-ok{margin-top:12px;font-size:14.5px;font-weight:600;color:#3f7a00;text-align:center}
.fbk-ok:empty{display:none}
@media (max-width:640px){
  .fbk-btn{right:14px;bottom:14px;padding:12px 14px}
  .fbk-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fbk-ov{padding:0}
  .fbk-box{width:100%;border-radius:20px 20px 0 0;padding:22px 20px 26px}
}
@media print{.fbk-btn,.fbk-ov{display:none!important}}
