/* ===========================================================================
   FEEDBACK - the button, the sheet, and nothing else.

   ONE FILE, LINKED BY EVERY PAGE THAT CARRIES THE WIDGET.

   It cannot live in site.css, because index, pricing, signin and signup do not
   link site.css at all - each is self-contained - and their design tokens do
   not even share names: index calls the brand face --display, signup calls it
   --brandfont, pricing and signin have --navy, --gold and --cream and none of
   the rest. A widget written against any one page's variables would silently
   fall back to browser defaults on the others.

   So every value here is literal. It looks identical on all nine pages and
   depends on nothing they define. The colours are the brand palette, written
   out rather than referenced.
   ========================================================================= */

/* ---- immunity ------------------------------------------------------------
   These pages style bare element selectors of their own: index has
   h2{text-align:center}, several set every <label> uppercase and letter-spaced.
   Anything the widget renders is therefore stated explicitly rather than left
   to inherit, or it changes shape from page to page. */
.fb-card h2,.fb-card h3,.fb-card p,.fb-card label{text-align:left;text-indent:0}
.fb-done h3,.fb-done p{text-align:center}
.fb-card *{box-sizing:border-box}
.fb-card ul,.fb-card ol{margin:0;padding:0;list-style:none}

/* The opener. Low, right, clear of the reading column. */
/* HIDDEN UNTIL PROVEN USABLE.

   The script behind this sheet returns early on any browser without
   <dialog> - Opera Mini, older Android WebViews, a real share of Kenyan
   mobile traffic - and never binds the click handler. Nothing used to hide
   the button, so a prominent Feedback pill sat over the content of every
   page and did nothing whatsoever when tapped. The script's own comment
   promises "no button, no broken sheet"; it delivered the opposite.

   .fb-ready is added by that script only once it knows the sheet opens. */
.fb-open{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:none;align-items:center;gap:9px;
  padding:11px 17px;border:0;border-radius:999px;cursor:pointer;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(180deg,#1261A0,#0B4373);
  box-shadow:0 8px 24px rgba(11,67,115,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.fb-open.fb-ready{display:inline-flex}
.fb-open:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(11,67,115,.36)}
.fb-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .fb-open{right:12px;bottom:12px;padding:10px 14px;font-size:13px}
  .fb-open .lbl{display:none}           /* the icon alone on a small screen */
}
@media print{ .fb-open{display:none} }

/* The sheet. <dialog> so Escape, focus trapping, the backdrop and returning
   focus afterwards are the browser's job rather than a pile of handlers that
   get it wrong. */
.fb-dlg{
  width:min(520px,calc(100vw - 32px));padding:0;border:0;border-radius:20px;
  background:transparent;overflow:visible;
}
.fb-dlg::backdrop{background:rgba(9,40,70,.5);backdrop-filter:blur(3px)}
.fb-card{
  position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(170deg,#FFFFFF,#F6FAFE);
  border:1px solid rgba(154,190,224,.5);
  box-shadow:0 30px 70px rgba(9,52,90,.30);
  font-family:Cambria,"Literata",Georgia,"Times New Roman",serif;
}
.fb-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,#019DCB,#6729B2 21%,#E61925 43%,#F4A601 63%,#1DA23A 81%,#0175E4);
}

.fb-head{display:flex;align-items:flex-start;gap:14px;padding:24px 22px 0}
.fb-head h2{
  margin:0;font-family:Cambria,"Literata",Georgia,serif;font-weight:600;
  font-size:22px;color:#122238;letter-spacing:-.012em;text-transform:none;
}
.fb-head p{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:#7286A3}
.fb-x{
  margin-left:auto;flex:none;width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(18,97,160,.07);color:#41536E;font-size:17px;line-height:1;
  transition:background .2s ease,color .2s ease;
}
.fb-x:hover{background:rgba(179,18,27,.10);color:#B3121B}

.fb-body{padding:18px 22px 22px}
/* The label styling is stated in full because several pages set their own
   uppercase, letter-spaced treatment on every <label> in the document. */
.fb-body label{
  display:block;margin:0 0 6px;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:800;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#7286A3;
}
.fb-body select,.fb-body input,.fb-body textarea{
  width:100%;box-sizing:border-box;
  font-family:Cambria,"Literata",Georgia,serif;font-size:15.5px;color:#122238;
  padding:11px 12px;border:1.5px solid #E3E9F1;border-radius:11px;background:#FBFDFF;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.fb-body textarea{min-height:118px;resize:vertical;line-height:1.55}
.fb-body select:focus,.fb-body input:focus,.fb-body textarea:focus{
  outline:0;border-color:#1261A0;box-shadow:0 0 0 3px rgba(18,97,160,.13);
}
.fb-row{margin:0 0 14px}
.fb-hint{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#7286A3}
.fb-opt{text-transform:none;letter-spacing:normal;font-weight:400}

/* Where they were. Shown rather than hidden: somebody should be able to see
   exactly what is being sent on their behalf. */
.fb-where{
  display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:9px 12px;
  border-radius:10px;background:#E8F2FB;border:1px solid #D2E5F7;
  font-size:12.5px;color:#2F5273;
}
.fb-where b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-where svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.fb-acts{display:flex;align-items:center;gap:10px}
.fb-send{
  flex:1;padding:13px 18px;border:0;border-radius:12px;cursor:pointer;
  font-family:"Nunito",system-ui,-apple-system,sans-serif;font-weight:800;font-size:15.5px;
  color:#fff;background:linear-gradient(180deg,#1261A0,#0B4373);
  box-shadow:0 5px 16px rgba(11,67,115,.28);
  transition:transform .14s ease,box-shadow .14s ease;
}
.fb-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px rgba(11,67,115,.34)}
.fb-send:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.fb-cancel{
  padding:13px 18px;border:1.5px solid #E3E9F1;border-radius:12px;cursor:pointer;
  background:#fff;font-family:"Nunito",system-ui,sans-serif;font-weight:700;
  font-size:15px;color:#41536E;
}
.fb-cancel:hover{border-color:#B9CFE5;color:#122238}

.fb-msg{margin:12px 0 0;font-size:14px;line-height:1.5;min-height:1.2em;color:#41536E}
.fb-msg.bad{color:#B3121B}
.fb-msg.good{color:#2E7D32}
.fb-msg a{color:#1261A0;font-weight:600}

/* The thank-you replaces the form rather than sitting under it, so nobody
   wonders whether it sent twice. */
.fb-done{display:none;padding:34px 24px 30px;text-align:center}
.fb-card.sent .fb-body{display:none}
.fb-card.sent .fb-done{display:block}
.fb-done .fb-tick{
  width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:#E9F7EC;border:1px solid #BFE5C6;
}
.fb-done .tick svg{width:26px;height:26px;fill:none;stroke:#2E7D32;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fb-done h3{
  margin:0 0 7px;font-family:Cambria,"Literata",Georgia,serif;font-weight:600;
  font-size:21px;color:#122238;text-transform:none;
}
.fb-done p{margin:0 auto 18px;max-width:30em;font-size:15px;line-height:1.6;color:#41536E}

@media(prefers-reduced-motion:reduce){ .fb-open,.fb-send{transition:none} }