/* Popup styles */
.popup-container {
  display: none;
  position: absolute;
  top: calc(100% + 17px); /* Position 21px below the buttons (5px + 16px) */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center horizontally */
  z-index: 1000;
  width: 178px;
  height: 108px;
  background: #ffcf25; /* Changed from #FCEE21 to #FFCF25 */
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  outline: none; /* Remove green outline */
}

.popup-container:focus-within {
  outline: none; /* Remove focus outline */
}

.popup-input {
  width: 66%;
  padding: 4px;
  border: none; /* Remove default border */
  border-radius: 5px;
  margin-bottom: 8px;
  text-align: center; /* Center text input */
  color: #454554;
  position: relative;
  top: -5px;
  font-weight: bold;
  outline: none;
  background: rgba(
    245,
    222,
    36,
    0.9
  ); /* Default yellow background with opacity */
  font-size: 79%;
  transition: background-color 0.3s ease;
  pointer-events: auto; /* Always make input interactive */
}

.popup-input:focus {
  background: white; /* White background when active */
  outline: none;
}

.popup-input::placeholder {
  color: #454554;
  opacity: 0.7;
}

.popup-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 80%; /* Match input width */
  align-items: center;
  margin-top: 5px; /* Move buttons 6px down */
}

.popup-button {
  width: 104px; /* Match delete-popup-button width */
  height: 19px; /* Match delete-popup-button height */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  line-height: 19px; /* Match height for vertical centering */
  text-transform: uppercase;
  font-size: 11px; /* Match delete-popup-button font size */
  background-color: rgba(245, 221, 36, 0.896); /* Set background color */
  color: #90773c; /* Set font color */
  transition: all 0.3s ease; /* Smooth transition for all properties */
}

.popup-button:hover {
  color: white; /* Change font color to white on hover */
  transform: scale(1.05); /* Slightly increase button size */
}

.popup-create-button {
  background-color: white;
  color: #787578;
}

.popup-cancel-button {
  background-color: #b3b3b3;
  color: white;
}

.popup-create-button:hover,
.popup-cancel-button:hover {
  background-color: #c7a3a3; /* Set background color */
  color: #ffffff; /* Change to white text on hover */
}

#popupContainer {
  /* ...existing styles... */
  transform: translateX(
    calc(-50% - 71px)
  ); /* Move 89px to the left (44px + 45px) */
}