/* Modal Contrast and Style Fixes */

/* Ensure modal backgrounds have proper contrast */
.modal-content,
.mp3-modal__content {
  background: #ffffff;
  color: #333333;
}

/* Dark theme modal contrast */
.theme-dark .modal-content,
.theme-dark .mp3-modal__content {
  background: #2a2a2a;
  color: #e0e0e0;
}

/* Ensure close buttons are visible */
.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

.theme-dark .close-modal {
  color: #ccc;
}

.theme-dark .close-modal:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Modal headings contrast */
.modal-content h2,
.modal-content h3,
.mp3-modal__content h2,
.mp3-modal__content h3 {
  color: #333;
  margin-bottom: 20px;
}

.theme-dark .modal-content h2,
.theme-dark .modal-content h3,
.theme-dark .mp3-modal__content h2,
.theme-dark .mp3-modal__content h3 {
  color: #e0e0e0;
}

/* Form inputs in modals */
.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="password"],
.modal-content textarea,
.modal-content select {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

.theme-dark .modal-content input[type="text"],
.theme-dark .modal-content input[type="email"],
.theme-dark .modal-content input[type="password"],
.theme-dark .modal-content textarea,
.theme-dark .modal-content select {
  background: #1a1a1a;
  border: 1px solid #444;
  color: #e0e0e0;
}

/* Labels in modals */
.modal-content label {
  color: #555;
}

.theme-dark .modal-content label {
  color: #bbb;
}

/* Links in modals */
.modal-content a {
  color: #667eea;
}

.theme-dark .modal-content a {
  color: #8b9cff;
}

/* Buttons in modals should have proper contrast */
.modal-content button,
.modal-content .mp3-btn {
  /* Ensure buttons are visible */
}

.modal-content .mp3-btn--primary {
  background: #667eea;
  color: white;
}

.modal-content .mp3-btn--secondary {
  border-color: #667eea;
  color: #667eea;
}

.theme-dark .modal-content .mp3-btn--secondary {
  border-color: #8b9cff;
  color: #8b9cff;
}

/* Fix specific modal issues */
.settings-modal .modal-content {
  max-width: 700px;
}

.social-modal .modal-content,
.party-modal .modal-content,
.discovery-modal .modal-content {
  max-width: 600px;
}

/* Ensure text is readable */
.modal-content p,
.modal-content .description,
.modal-content .help-text {
  color: #666;
  line-height: 1.6;
}

.theme-dark .modal-content p,
.theme-dark .modal-content .description,
.theme-dark .modal-content .help-text {
  color: #999;
}

/* Fix list items in modals */
.modal-content li {
  color: #555;
}

.theme-dark .modal-content li {
  color: #bbb;
}

/* Ensure proper spacing */
.modal-content > * {
  margin-bottom: 15px;
}

.modal-content > *:last-child {
  margin-bottom: 0;
}