html.ht-feedback-open { overflow: hidden; }
.ht-feedback {
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 40px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #dce8ed;
  border-top: 5px solid var(--ht-cyan, #28afe2);
  border-radius: 24px;
  background: #fff;
  color: var(--ht-navy, #182333);
  box-shadow: 0 24px 90px #101b3040;
  font-family: Manrope, sans-serif;
  text-align: left;
}
.ht-feedback::backdrop { background: #122033b8; }
.ht-feedback .ht-feedback-brand { margin: 0 44px 24px 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.ht-feedback-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%; background: #e6f7fd; color: #116180; font-size: 26px; font-weight: 800; }
.ht-feedback[data-state="error"] .ht-feedback-mark,
.ht-feedback[data-state="partial"] .ht-feedback-mark,
.ht-feedback[data-state="uncertain"] .ht-feedback-mark { background: #f2f5f7; color: #445064; }
.ht-feedback #ht-feedback-title { margin: 0 0 14px; font-size: clamp(24px, 4vw, 30px); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.ht-feedback #ht-feedback-message { margin: 0 0 28px; color: #48556a; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.ht-feedback button { cursor: pointer; font: inherit; }
.ht-feedback .ht-feedback-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f2f5f7; color: #182333; font-size: 28px; line-height: 1; }
.ht-feedback .ht-feedback-continue { min-height: 48px; padding: 12px 28px; border: 0; border-radius: 999px; background: #182333; color: #fff; font-weight: 800; }
.ht-feedback button:hover { filter: brightness(.92); }
.ht-feedback button:focus-visible { outline: 3px solid #087ca7; outline-offset: 4px; }
.ht-contact-form[aria-busy="true"] { cursor: progress; }
.ht-contact-form button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 480px) {
  .ht-feedback { padding: 28px 24px; border-radius: 20px; }
  .ht-feedback .ht-feedback-brand { margin-bottom: 24px; font-size: 11px; }
  .ht-feedback .ht-feedback-continue { width: 100%; }
}
@media print { .ht-feedback { display: none !important; } }

/* A brief celebration after a successful response, with a quiet reduced-motion mode. */
.ht-feedback[open][data-state="success"] { animation: ht-feedback-arrive 320ms cubic-bezier(.2,.7,.2,1) both; }
.ht-feedback[open][data-state="success"] .ht-feedback-mark {
  position: relative;
  animation: ht-feedback-check 560ms cubic-bezier(.2,.8,.3,1) both;
}
.ht-feedback[open][data-state="success"] .ht-feedback-mark::before,
.ht-feedback[open][data-state="success"] .ht-feedback-mark::after { content: ""; position: absolute; pointer-events: none; }
.ht-feedback[open][data-state="success"] .ht-feedback-mark::before {
  inset: -6px; border: 2px solid #28afe2; border-radius: 50%;
  animation: ht-feedback-ring 700ms ease-out 100ms both;
}
.ht-feedback[open][data-state="success"] .ht-feedback-mark::after {
  top: calc(50% - 4px); left: calc(50% - 3px); width: 6px; height: 8px; border-radius: 2px;
  box-shadow: -32px -26px #28afe2, 10px -38px #efc863, 34px -17px #6ec6b2,
    39px 12px #28afe2, 19px 36px #efc863, -15px 35px #6ec6b2, -38px 12px #28afe2, -7px -37px #6ec6b2;
  animation: ht-feedback-confetti 800ms ease-out 120ms both;
}
@keyframes ht-feedback-arrive { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ht-feedback-check { 0% { transform: scale(.65) rotate(-10deg); } 65% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
@keyframes ht-feedback-ring { from { opacity: .7; transform: scale(.75); } to { opacity: 0; transform: scale(1.45); } }
@keyframes ht-feedback-confetti { 0% { opacity: 0; transform: scale(.3) rotate(-15deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35) rotate(12deg) translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .ht-feedback[open][data-state="success"], .ht-feedback[open][data-state="success"] .ht-feedback-mark { animation: none; }
  .ht-feedback[open][data-state="success"] .ht-feedback-mark::before, .ht-feedback[open][data-state="success"] .ht-feedback-mark::after { display: none; animation: none; }
}

.ht-contact-form + .ht-form-status { margin-top: 18px; }
.ht-form-status[tabindex="-1"]:focus { outline: 2px solid #bd3743; outline-offset: 3px; }