:root {
  --color-light-gray: #f3f4f6;
}

.feedback-container {
  background: var(--color-light-gray);
  margin-top: 20px;
}

.feedback-content {
  padding: 16px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.feedback-question {
  color: #001370;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

.feedback-container .rating-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.prs-star-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.prs-star {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #00188c;
  padding: 5px;
  border: 1px solid #d9dcee;
  border-radius: 50%;
  background-color: #fff;
}

.prs-star.active,
.prs-star:hover,
.prs-star:hover ~ .prs-star {
  color: #fff;
  background-color: #00188c;
  border-color: #00188c;
}

.feedback-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-direction: column;
}

.feedback-container .submit-button {
  cursor: pointer;
  font-size: 14px;
  color: #001370;
  background-color: transparent;
  border: 2px solid #001370;
  border-radius: 40px;
  padding: 10px 20px;
  /* max-width: 78px; */
  transition: background 0.3s, color 0.3s;
}

.feedback-link {
  text-decoration: underline;
  font-size: 14px;
  color: #001370;
}

.feedback-link:hover {
  text-decoration: underline;
  color: #001370;
}

.thank-you-message {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Fira Sans;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0px;

}

.thank-you-message p {
  margin-bottom: 0;
}

/* === Inline spinner used while the rating AJAX request runs === */
.prs-inline-spinner {
  width: 24px;
  height: 24px;
  margin: auto; /* centers inside the form */
  border: 3px solid rgba(255, 255, 255, 0.4); /* track */
  border-top-color: #001370; /* spinner colour */
  border-radius: 50%;
  animation: prs-spin 0.8s linear infinite;
}

/* Responsive at ≧768px */
@media (min-width: 768px) {
  .feedback-content {
    grid-template-columns: auto 1fr auto;
  }

  .feedback-container .feedback-actions {
    flex-direction: row;
    justify-self: end;
  }
}
@keyframes prs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* start more feedback section */

.more-feedback {
    background-color: #f3f4f6;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.more-feedback p{
    font-size: 14px;
}

.more-feedback.open {
    max-height: 100%; 
}

.feedback-sep{
  border: 1px solid #D9DCEE !important;
  height: 1px;
  width: 100%;
  margin-bottom: 10px;
}

.more-feedback input[type="radio"] {
  accent-color: #00188c;
}


.feedback-form {
  width: 100%;
  background-color: #f3f4f6;
  border-radius: 6px;
  font-family: Fira Sans;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  padding-bottom: 20px;

}

.feedback-form button{
  border: 1.5px solid  #535353;
  color: #535353;
  font-family: Fira Sans;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
}

.feedback-form label{
  font-weight: 400;
}

.feedback-form textarea {
  width: 40%;
  height: 100px;
  margin-top: 10px;
  resize: vertical;
}
@media (max-width: 768px) {
  .feedback-form textarea {
    width: 100%;
    height: 100px;
  }
}


.feedback-form button {
  margin-top: 15px;
  padding: 8px 20px;
  border: 1px solid #888;
  background-color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
.feedback-form button:hover {
  background-color: #e0e0e0;
}


/* end more feedback section */