/* Feedback box, "keepsake card" (2026-10-19). Built by assets/js/feedback.js.
   Always cream/light; gold (#C9A961) is decoration only, never text. */

.fb{
  box-sizing:border-box; max-width:760px; margin:40px auto 0; padding:28px 22px 24px; text-align:center;
  background:linear-gradient(180deg, #FFFCF7 0%, #FBF3E4 100%);
  border:1px solid rgba(201,169,97,.6); border-radius:20px;
  box-shadow:0 1px 2px rgba(60,40,10,.05), 0 6px 16px -6px rgba(60,40,10,.10), 0 18px 36px -18px rgba(60,40,10,.14);
  color:#1C1914; font-family:'Inter', system-ui, sans-serif;
}
.fb *, .fb *::before, .fb *::after{ box-sizing:border-box; }
.fb-orn{ display:block; width:120px; height:18px; margin:0 auto 12px; }
.fb-q{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; font-size:24px; line-height:1.3; color:#1C1914; margin:0 0 18px; }
.fb-vh{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.fb-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }

/* thumbs */
.fb-thumbs{ display:flex; justify-content:center; gap:12px; }
.fb-thumb{
  width:56px; height:56px; padding:0; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFFCF7; border:1.5px solid #8A7650; color:#1C1914;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.fb-thumb svg{ width:26px; height:26px; display:block; }
.fb-thumb[aria-pressed="true"]{ background:#7A1F2B; border-color:#7A1F2B; color:#FFFFFF; }
.fb-thumb[aria-pressed="true"] .fb-thumb-fill{ fill:rgba(255,255,255,.18); }

/* chips */
.fb-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.fb-panel .fb-chips{ margin-top:22px; }
.fb-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:11px 18px;
  border-radius:999px; cursor:pointer; font-family:'Inter', system-ui, sans-serif; font-weight:500; font-size:17px; line-height:1.3;
  background:#F7EEDD; border:1.5px solid #8A7650; color:#1C1914;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.fb-check{ display:none; width:16px; height:16px; flex:none; }
.fb-chip[aria-pressed="true"]{ background:#7A1F2B; border-color:#7A1F2B; color:#FFFFFF; font-weight:600; }
.fb-chip[aria-pressed="true"] .fb-check{ display:block; }

/* note */
.fb-note{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(201,169,97,.45); text-align:left; }
.fb-note-label{ display:block; font-weight:500; font-size:17px; line-height:1.4; color:#1C1914; margin:0 0 8px; }
.fb-optional{ font-weight:400; font-size:16px; color:#5C5346; }
/* ".fb .x" so the season theme's textarea and focus colors don't override these */
.fb .fb-textarea{
  display:block; margin:0; width:100%; min-height:104px; padding:14px; resize:vertical;
  background:#FFFFFF; border:1.5px solid #8A7650; border-radius:14px;
  font-family:'Inter', system-ui, sans-serif; font-size:17px; line-height:1.5; color:#1C1914;
}
.fb-msg{ margin:8px 0 0; font-size:16px; line-height:1.45; color:#7A1F2B; }
.fb-msg:empty{ display:none; }
.fb-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.fb-count{ font-size:15px; color:#5C5346; }
.fb-send{
  min-height:48px; padding:0 28px; border:0; border-radius:11px; cursor:pointer;
  font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:17px;
  color:#FFFFFF; background:#7A1F2B; box-shadow:0 2px 6px -2px rgba(122,31,43,.4);
  transition:background-color .2s ease;
}
.fb-send:hover{ background:#6A1A25; }

/* focus */
.fb .fb-thumb:focus, .fb .fb-chip:focus, .fb .fb-send:focus, .fb .fb-textarea:focus{ outline:none; }
.fb .fb-thumb:focus-visible, .fb .fb-chip:focus-visible, .fb .fb-send:focus-visible, .fb .fb-textarea:focus-visible{ outline:3px solid #7A1F2B; outline-offset:3px; }
.fb-thanks:focus{ outline:none; }

/* opening panel: 200ms fade + 4px slide */
.fb-panel.fb-in{ animation:fb-open .2s ease-out both; }
@keyframes fb-open{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* thank-you */
.fb-thanks-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.fb-heart{ width:44px; height:44px; display:block; }
.fb-thanks{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; font-size:26px; line-height:1.3; color:#7A1F2B; margin:0; }

/* compact: inside a card (Feelings and Faith) */
.fb--compact{ margin-top:20px; padding:22px 16px 20px; }
.fb--compact .fb-q{ font-size:18px; margin-bottom:14px; }

@media (max-width:380px){
  .fb{ padding-left:16px; padding-right:16px; }
  .fb-chip{ padding:11px 14px; }
}
@media (prefers-reduced-motion:reduce){
  .fb-panel.fb-in{ animation:none; }
  .fb-thumb, .fb-chip, .fb-send{ transition:none; }
}