.feedback-survey-open { overflow: hidden; }

.feedback-survey-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 35, 38, .62);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease;
}

.feedback-survey-overlay.is-visible { opacity: 1; }

.feedback-survey-card {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 38px;
  border: 1px solid rgba(11, 62, 67, .12);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(5, 35, 38, .28);
  color: #13242f;
  transform: translateY(18px) scale(.98);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.feedback-survey-overlay.is-visible .feedback-survey-card { transform: none; }

.feedback-survey-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #edf7f7;
  color: #0b3e43;
  font: 500 28px/1 sans-serif;
  cursor: pointer;
}

.feedback-survey-kicker {
  display: block;
  margin-bottom: 8px;
  color: #079ca3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.feedback-survey-card h2 {
  max-width: 500px;
  margin: 0;
  font-size: clamp(29px, 5vw, 42px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.feedback-survey-intro { margin: 12px 0 24px; color: #60717b; }
.feedback-survey-ratings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: 0; padding: 0; border: 0; }
.feedback-survey-rating { position: relative; cursor: pointer; }
.feedback-survey-rating input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-survey-rating > span,
.feedback-survey-rating > strong,
.feedback-survey-rating > small { pointer-events: none; }
.feedback-survey-rating {
  display: flex;
  min-height: 105px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid #d8e7e8;
  border-radius: 18px;
  background: #f7fbfb;
  text-align: center;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.feedback-survey-rating:hover { transform: translateY(-2px); border-color: #0aa4a8; }
.feedback-survey-rating:has(input:checked) { border-color: #04a998; background: #e5f8f5; box-shadow: 0 0 0 2px rgba(4, 169, 152, .12); }
.feedback-survey-rating:has(input:focus-visible) { outline: 3px solid rgba(4, 169, 152, .3); outline-offset: 2px; }
.feedback-survey-emoji { font-size: 27px; }
.feedback-survey-rating strong { font-size: 12px; color: #173840; }
.feedback-survey-rating small { color: #789096; font-weight: 700; }

.feedback-survey-comment { display: grid; gap: 8px; margin-top: 22px; color: #273e47; font-weight: 750; }
.feedback-survey-comment small { color: #819096; font-weight: 500; }
.feedback-survey-comment textarea {
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1.5px solid #d8e3e5;
  border-radius: 16px;
  background: #fbfdfd;
  color: #13242f;
  font: inherit;
}
.feedback-survey-comment textarea:focus { border-color: #079ca3; outline: 3px solid rgba(7, 156, 163, .12); }
.feedback-survey-message { min-height: 20px; margin: 10px 0 0; color: #ba2d3d; font-size: 13px; text-align: center; }
.feedback-survey-submit,
.feedback-survey-later { width: 100%; min-height: 52px; border-radius: 16px; font: inherit; font-weight: 800; cursor: pointer; }
.feedback-survey-submit { border: 0; background: #0b3e43; color: white; box-shadow: 0 7px 0 #062c30; }
.feedback-survey-submit:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.feedback-survey-later { margin-top: 10px; border: 0; background: transparent; color: #60717b; }
.feedback-survey-thanks { display: grid; min-height: 260px; place-content: center; text-align: center; }
.feedback-survey-thanks > span { display: grid; width: 70px; height: 70px; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: #ddf8f1; color: #078674; font-size: 34px; }
.feedback-survey-thanks p { color: #60717b; }

@media (max-width: 600px) {
  .feedback-survey-overlay { align-items: end; padding: 10px; }
  .feedback-survey-card { width: 100%; padding: 30px 20px 22px; border-radius: 28px; }
  .feedback-survey-card h2 { padding-right: 30px; font-size: 31px; }
  .feedback-survey-ratings { grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 5px; }
  .feedback-survey-rating { min-height: 92px; border-radius: 15px; }
  .feedback-survey-emoji { font-size: 23px; }
  .feedback-survey-rating strong { font-size: 10px; letter-spacing: -.02em; }
}

@media (max-width: 370px) {
  .feedback-survey-rating small { display: none; }
  .feedback-survey-rating { min-height: 82px; }
}