/* Modal turbo-frame styling */
turbo-frame#modal {
  display: contents !important;
}

/* Modal container */
#modal-container {
  position: relative !important;
  z-index: 50 !important;
}

/* Modal overlay - dark background */
#modal-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: rgba(17, 24, 39, 0.7) !important; /* bg-gray-900/70 */
  transition-property: opacity !important;
}

/* Modal outer wrapper */
#modal-outer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow-y: auto !important;
  margin: 1rem !important;
}

@media (min-width: 640px) {
  #modal-outer {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 768px) {
  #modal-outer {
    max-width: 48rem !important; /* max-w-3xl */
  }
}

/* Modal inner flex container */
#modal-inner {
  display: flex !important;
  min-height: 100% !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 10vh !important;
}

@media (min-width: 640px) {
  #modal-inner {
    padding: 1rem !important;
  }
}

/* Modal content box */
#modal-content {
  position: relative !important;
  transform: translateY(0) !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  border-radius: 0.5rem !important;
  background-color: rgb(17, 24, 39) !important; /* bg-gray-900 */
  color: white !important;
  text-align: left !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  transition: all !important;
}

/* Modal header */
#modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid rgb(75, 85, 99) !important; /* border-gray-600 */
}

#modal-title {
  padding-left: 1rem !important;
}

#modal-title h3 {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  font-weight: 700 !important;
  color: white !important;
}

#modal-close {
  margin-right: 1rem !important;
}

/* Close button styling */
#modal-close button svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Screen reader only text - Tailwind's sr-only class */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

@media (min-width: 640px) {
  #modal-content {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    max-width: 48rem !important;
  }
}