.feedback-popup {
  display: none; /* Initially hidden */
  position: fixed; /* Fixed position to make it sticky */
  bottom: 20px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1000; /* Ensure it appears above other content */
  animation: fadeIn 0.5s; /* Fade-in animation */
  width: fit-content;
}

.popup-content {
  display: none; /* Initially hidden */
  position: fixed; /* Fixed position to make it sticky */
  bottom: 20px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
  background-color: var(--post-bg);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1000; /* Ensure it appears above other content */
  animation: fadeIn 0.5s; /* Fade-in animation */
  width: fit-content;
  text-align: center; /* Center the text */
}
#feedback-p {
  color: var(--p);
}
.feedback-popup h2 {
  margin: 0 0 10px; /* Margin for heading */
  font-size: 20px; /* Font size for heading */
  color: #333; /* Color for heading */
}

.feedback-popup p {
  margin: 0 0 15px; /* Margin for paragraph */
  color: #666; /* Color for paragraph */
}

.feedback-link {
  display: inline-block; /* Inline block for button */
  padding: 10px 15px; /* Padding for button */
  background-color: #007bff; /* Background color for button */
  color: white; /* Text color for button */
  text-decoration: none; /* Remove underline */
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s; /* Transition for hover effect */
  border: none;
}

.feedback-link:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

.close-feedback-popup {
  margin-top: 10px; /* Margin for close button */
  padding: 5px 10px; /* Padding for close button */
  background-color: #f44336; /* Red background for close button */
  color: white; /* Text color for close button */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Transition for hover effect */
}

.close-feedback-popup:hover {
  background-color: #c62828; /* Darker red on hover */
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Start transparent */
  }
  to {
    opacity: 1; /* End fully visible */
  }
}
.hidden {
  display: none !important; /* Ensure it overrides any other styles */
}
