/* buttons.css */
  .btn button {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    border-radius: 80px;
  }

  .login {
    background: #000;
    color: #fff;
  }
  .login:hover {
    /* color: #4E4D4D; */
    background: #222;
  }
  
  .logout {
    background: #000;
    color: #fff;
  }
  .logout:hover {
    background: #222;
  }
  
  /* .signup {
    background: transparent;
    color: #fff;
  } */

  .attachments-panel {
    display: flex;
    gap: 20px;
    margin-top: 0.5rem;
}

.attachment-icon {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-light);  /* lightgray; */
    cursor: not-allowed;
    transition: color 0.3s ease;
}

.attachment-icon img {
  width: 44px;
  height: 44px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.attachment-icon.active img {
  opacity: 1;
  filter: drop-shadow(0 0 2px #377DFF); /* #4caf50);*/
  cursor: pointer;
}

@keyframes sparkle {
  0%   { transform: scale(1);   filter: brightness(1); }
  30%  { transform: scale(1.3); filter: brightness(1.8); }
  60%  { transform: scale(0.95); filter: brightness(1.2); }
  100% { transform: scale(1);   filter: brightness(1); }
}

.attachment-icon.sparkle {
  animation: sparkle 0.9s ease-in-out 4;
}

/* .attachment-icon.sparkle-loop {
  animation: sparkle 0.6s ease-in-out infinite;
} */

/* Close button on the image panel of the application page. */
.image-panel-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s ease;
}

.close-button:hover {
  color: #333;
}