/* Custom styles */

button, 
input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
  cursor: pointer !important;
}

/* Animation for feedback notifications */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

.animate-fade-in-out {
  animation: fadeInOut 3s ease-in-out;
  transition: opacity 0.3s ease-out;
}

/* Fix for unwanted parenthesis character in navigation */
nav a::before,
nav .group::before,
.nav-section a::before,
.nav-section .group::before {
  content: none !important;
  display: none !important;
}

/* Modal Dialog Styles */
.modal-dialog {
  padding: 0;
  margin: auto;
  border: none;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  pointer-events: none;
}

.modal-dialog > * {
  pointer-events: auto;
}

/* Modal backdrop (the dark overlay behind the modal) */
.modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

/* Show animation when modal opens */
.modal-dialog[open] {
  animation: modal-fade-in 0.2s ease-out;
}

.modal-dialog[open] > div {
  animation: modal-slide-in 0.2s ease-out;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-slide-in {
  from {
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Event row deletion animation */
.event-deleting {
  animation: fadeOutSlide 1.5s ease-out forwards;
  pointer-events: none;
}

@keyframes fadeOutSlide {
  0% {
    opacity: 1;
    transform: translateX(0);
    max-height: 200px;
  }
  50% {
    opacity: 0;
    transform: translateX(30px);
    max-height: 200px;
  }
  100% {
    opacity: 0;
    transform: translateX(30px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
  }
}