/* Feedback button, bottom right. Words and markup come from the page. */

.fw-fb-root {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: calc(18px + env(safe-area-inset-right));
  z-index: 80;
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
}

body:has(.fw-wall-add) .fw-fb-root { bottom: calc(86px + env(safe-area-inset-bottom)); }
body:has(.fw-demo-bar) .fw-fb-root { bottom: calc(96px + env(safe-area-inset-bottom)); }
body.fw-fb-open .fw-fb-root { z-index: 400; }

.fw-fb-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 18px 12px 14px;
  background: var(--purple, #361c49);
  color: #fff;
  font: 600 15px/1 inherit;
  box-shadow: 0 6px 20px rgba(42, 16, 59, 0.28), 0 1px 2px rgba(42, 16, 59, 0.12);
}
.fw-fb-launcher:hover { background: var(--purple-deep, #2a103b); }
.fw-fb-launcher:focus-visible { outline: 3px solid var(--gold, #f3c63d); outline-offset: 2px; }

.fw-fb-launcher-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.fw-fb-launcher-label { white-space: nowrap; }

@media (max-width: 540px) {
  .fw-fb-root { right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); }
  .fw-fb-launcher { padding: 12px; }
  .fw-fb-launcher-label { display: none; }
  body:has(.fw-fb-root) .site-footer .wrap { padding-bottom: 72px; }
}

.fw-fb-modal[hidden] { display: none; }
.fw-fb-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(42, 16, 59, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
@media (min-width: 540px) {
  .fw-fb-modal { align-items: center; }
}

body.fw-fb-open { overflow: hidden; }

.fw-fb-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 60px rgba(42, 16, 59, 0.35);
  color: var(--ink, #2a103b);
  animation: fw-fb-pop 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .fw-fb-card { animation: none; }
}
@keyframes fw-fb-pop {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.fw-fb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: #eceaee;
  color: var(--ink, #2a103b);
  font: 600 24px/1 inherit;
  cursor: pointer;
  border-radius: 50%;
}
.fw-fb-close:hover { background: #e0dde3; }
.fw-fb-close:focus-visible { outline: 3px solid var(--gold, #f3c63d); outline-offset: 2px; }

.fw-fb-title {
  margin: 0 28px 6px 0;
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink, #2a103b);
}
.fw-fb-lead {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted, #5c5363);
}

.fw-fb-form { display: flex; flex-direction: column; gap: 12px; }
.fw-fb-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink, #2a103b); }
.fw-fb-field > span { font-weight: 600; }
.fw-fb-field input,
.fw-fb-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(54, 28, 73, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  font: 400 16px/1.4 inherit;
  background: #fff;
  color: var(--ink, #2a103b);
}
.fw-fb-field input:focus,
.fw-fb-field textarea:focus {
  outline: 0;
  border-color: var(--purple, #361c49);
  box-shadow: 0 0 0 3px rgba(54, 28, 73, 0.16);
}
.fw-fb-field textarea { resize: vertical; min-height: 96px; }

.fw-fb-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.fw-fb-error {
  background: #fde8e8;
  color: #8a1f1f;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}
.fw-fb-success {
  background: #e7f6ef;
  color: #145c3a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.4;
}

.fw-fb-submit {
  align-self: flex-end;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 22px;
  font: 700 15px/1 inherit;
  background: var(--gold, #f3c63d);
  color: var(--purple-deep, #2a103b);
}
.fw-fb-submit:hover { background: #f6d15a; }
.fw-fb-submit:focus-visible { outline: 3px solid var(--purple, #361c49); outline-offset: 2px; }
.fw-fb-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@media print {
  .fw-fb-root { display: none !important; }
}
