/* ── FEEDBACK PAGE ─────────────────────────────────────────────────────────
   Premium redesign: icon type-picker, form card, async submit states,
   character counter, and the JS success card. Theme tokens from tokens.css;
   per-type accent set via --fb-accent on each .fb-t-* class. */

.fb-card{
  max-width:720px;
  background:var(--surface,#0f151c);
  border:1px solid var(--border,#21262d);
  border-radius:16px;
  padding:clamp(20px,4vw,34px);
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.18);
}

/* Type picker */
.fb-fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
.fb-fieldset legend{padding:0;margin-bottom:10px}
.fb-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.fb-t-bug{--fb-accent:var(--danger)}       /* #f85149 */
.fb-t-feature{--fb-accent:var(--amber)}    /* #d29922 */
.fb-t-general{--fb-accent:var(--blue)}     /* #58a6ff */
.fb-t-compliment{--fb-accent:var(--green)} /* #3fb950 */

.fb-type-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  padding:16px 10px 14px;
  background:var(--bg2,#0d1117);
  border:1px solid var(--border2,#30363d);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .16s,background .16s,transform .12s,box-shadow .16s;
}
.fb-type-card:hover{border-color:color-mix(in srgb,var(--fb-accent) 55%,transparent);transform:translateY(-1px)}
.fb-type-card input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.fb-type-card:focus-within{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent) 30%,transparent)}
.fb-type-card:has(input:checked){
  border-color:var(--fb-accent);
  background:color-mix(in srgb,var(--fb-accent) 12%,transparent);
}

.fb-type-icon{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  color:var(--fb-accent);
  background:color-mix(in srgb,var(--fb-accent) 14%,transparent);
  transition:transform .16s;
}
.fb-type-icon svg{width:22px;height:22px}
.fb-type-card:has(input:checked) .fb-type-icon{transform:scale(1.06)}
.fb-type-name{font-size:.9rem;font-weight:600;color:var(--text,#e6edf3)}
.fb-type-desc{font-size:.75rem;color:var(--muted,#7d8590);line-height:1.3}

.fb-type-tick{
  position:absolute;top:8px;right:8px;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fb-accent);color:#0b0f14;
  opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s;
}
.fb-type-tick svg{width:11px;height:11px}
.fb-type-card:has(input:checked) .fb-type-tick{opacity:1;transform:scale(1)}

/* Character counter */
.fb-counter{font-size:.75rem;color:var(--muted,#7d8590);margin-top:6px;text-align:right;font-variant-numeric:tabular-nums}
.fb-counter.is-near{color:#d29922}
.fb-counter.is-max{color:var(--red,#f85149)}

/* Inline field validation */
.form-input.is-invalid{border-color:var(--red,#f85149)}
.form-input.is-invalid:focus{box-shadow:0 0 0 3px rgba(248,81,73,.14)}
.fb-field-err{font-size:.75rem;color:var(--red,#f85149);margin-top:5px;display:none}
.fb-field-err.show{display:block}

/* Privacy note */
.fb-privacy{margin:24px 0;display:flex;align-items:flex-start;gap:11px;line-height:1.55}
.fb-privacy-icon{flex-shrink:0;color:var(--muted,#7d8590);margin-top:1px}
.fb-privacy-icon svg{width:18px;height:18px;display:block}

/* Honeypot — visually removed, still in the DOM for bots */
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Status line (client-side errors) */
.fb-status{margin-bottom:16px;padding:12px 15px;border-radius:10px;font-size:.9rem;
  background:#2a0e0e;border:1px solid #6e2020;color:var(--red,#f85149)}

/* Submit button + loading */
.fb-submit{width:100%;max-width:300px;justify-content:center;gap:8px;position:relative}
.fb-submit-arrow{transition:transform .16s}
.fb-submit:hover .fb-submit-arrow{transform:translateX(3px)}
.fb-submit-spinner{display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fbspin .7s linear infinite}
.fb-submit.is-loading{pointer-events:none;opacity:.85}
.fb-submit.is-loading .fb-submit-arrow{display:none}
.fb-submit.is-loading .fb-submit-spinner{display:inline-block}
@keyframes fbspin{to{transform:rotate(360deg)}}

/* No-JS success block refinements */
.fb-success-lead{color:var(--green,#3fb950);font-size:.9375rem;font-weight:600;margin-bottom:6px}
.fb-success-body{color:var(--muted,#7d8590);font-size:.9375rem}

/* JS success card (replaces the form in place) */
.fb-done{
  max-width:720px;text-align:center;
  background:var(--surface,#0f151c);
  border:1px solid color-mix(in srgb,var(--green,#3fb950) 40%,var(--border,#21262d));
  border-radius:16px;
  padding:clamp(28px,5vw,44px) clamp(20px,4vw,34px);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  animation:fbDoneIn .4s cubic-bezier(.2,.7,.2,1) both;
}
.fb-done-badge{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#0b0f14;background:var(--green,#3fb950);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--green,#3fb950) 16%,transparent);
  animation:fbPop .45s cubic-bezier(.2,1.3,.5,1) .08s both;
}
.fb-done-badge svg{width:32px;height:32px}
.fb-done-title{font-size:1.35rem;font-weight:650;color:var(--text,#e6edf3);margin-bottom:8px}
.fb-done-body{font-size:.95rem;color:var(--muted,#7d8590);line-height:1.6;max-width:44ch;margin:0 auto 6px}
.fb-done-ref{display:inline-block;margin:14px 0 22px;padding:6px 14px;border-radius:999px;
  font-size:.82rem;font-variant-numeric:tabular-nums;
  background:var(--bg2,#0d1117);border:1px solid var(--border2,#30363d);color:var(--muted,#7d8590)}
.fb-done-ref strong{color:var(--text,#e6edf3);letter-spacing:.04em}
.fb-done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@keyframes fbDoneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fbPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

@media(max-width:640px){
  .fb-type-grid{grid-template-columns:repeat(2,1fr)}
  .fb-submit{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .fb-type-card,.fb-type-icon,.fb-submit-arrow{transition:none}
  .fb-submit-spinner{animation-duration:1.2s}
  .fb-done,.fb-done-badge{animation:none}
}