/**
 * Modal Style Overrides
 *
 * This file contains styles that override the mini-default.css framework
 * specifically for the modal windows and forms.
 */

/* Override CSS variables for forms in modal context */
.signup-modal {
  --form-back-color: #ffffff !important;
  --form-fore-color: #333 !important;
  --form-border-color: #e0e0e0 !important;
  --input-back-color: #ffffff !important;
  --input-fore-color: #333 !important;
  --input-border-color: #e0e0e0 !important;
}

/* Override form background colors */
.signup-modal form,
.modal-content form,
form {
  background-color: #ffffff !important;
  border: none !important;
}

/* Override all container elements that might have grey backgrounds */
.signup-modal *:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *),
.modal-content *:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *),
.modal-body *:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *),
.signup-modal div:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *),
.modal-content div:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *),
.modal-body div:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override input and form field backgrounds */
.signup-modal input:not([type]), 
.signup-modal [type="text"],
.signup-modal [type="date"], 
.signup-modal [type="email"], 
.signup-modal [type="number"], 
.signup-modal [type="search"],
.signup-modal [type="password"], 
.signup-modal [type="url"], 
.signup-modal [type="tel"], 
.signup-modal [type="time"],
.signup-modal textarea, 
.signup-modal select,
.modal-content input:not([type]), 
.modal-content [type="text"],
.modal-content [type="date"], 
.modal-content [type="email"], 
.modal-content [type="number"], 
.modal-content [type="search"],
.modal-content [type="password"], 
.modal-content [type="url"], 
.modal-content [type="tel"], 
.modal-content [type="time"],
.modal-content textarea, 
.modal-content select,
input:not([type]), 
[type="text"],
[type="date"], 
[type="email"], 
[type="number"], 
[type="search"],
[type="password"], 
[type="url"], 
[type="tel"], 
[type="time"],
textarea, 
select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
}

/* Override form container */
.signup-modal .form-container:not(.event-info):not(.event-info *),
.modal-content .form-container:not(.event-info):not(.event-info *),
.form-container:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override form groups */
.signup-modal .form-group:not(.event-info):not(.event-info *),
.modal-content .form-group:not(.event-info):not(.event-info *),
.form-group:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override form rows */
.signup-modal .form-row:not(.event-info):not(.event-info *),
.modal-content .form-row:not(.event-info):not(.event-info *),
.form-row:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override modal content */
.modal-content {
  background-color: #ffffff !important;
}

/* Override modal body */
.modal-body {
  background-color: #ffffff !important;
}

/* Override error messages */
.signup-modal .error-message:not(.event-info):not(.event-info *),
.modal-content .error-message:not(.event-info):not(.event-info *),
.error-message:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override modal loading spinner */
.signup-modal .loading-spinner:not(.event-info):not(.event-info *),
.modal-content .loading-spinner:not(.event-info):not(.event-info *),
.loading-spinner:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override alerts */
.signup-modal .alert:not(.event-info):not(.event-info *),
.modal-content .alert:not(.event-info):not(.event-info *),
.alert:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override alert success specifically */
.signup-modal .alert-success:not(.event-info):not(.event-info *),
.modal-content .alert-success:not(.event-info):not(.event-info *),
.alert-success:not(.event-info):not(.event-info *) {
  background-color: #f8fff9 !important;
  color: #27ae60 !important;
  border-left-color: #27ae60 !important;
}

/* Override alert danger specifically */
.signup-modal .alert-danger:not(.event-info):not(.event-info *),
.modal-content .alert-danger:not(.event-info):not(.event-info *),
.alert-danger:not(.event-info):not(.event-info *) {
  background-color: #fff9f9 !important;
  color: #e74c3c !important;
  border-left-color: #e74c3c !important;
}

/* Keep event info with its proper light blue background */
.signup-modal .event-info,
.modal-content .event-info,
.event-info {
  background-color: #f1f8ff !important;
  padding: 20px !important;
  border-radius: 5px !important;
  margin-bottom: 25px !important;
  border-left: 5px solid var(--mainColor) !important;
}

.signup-modal .event-info h3,
.modal-content .event-info h3,
.event-info h3 {
  margin-top: 0 !important;
  color: var(--mainColor) !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  background-color: transparent !important;
}

.signup-modal .event-info p,
.modal-content .event-info p,
.event-info p {
  margin-bottom: 10px !important;
  background-color: transparent !important;
}

.signup-modal .event-info div,
.modal-content .event-info div,
.event-info div {
  line-height: 1.6 !important;
  margin-top: 10px !important;
  background-color: transparent !important;
}

/* Override fieldset */
.signup-modal fieldset:not(.event-info):not(.event-info *),
.modal-content fieldset:not(.event-info):not(.event-info *),
fieldset:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override any collapse elements */
.signup-modal .collapse > :checked + label + div:not(.event-info):not(.event-info *),
.modal-content .collapse > :checked + label + div:not(.event-info):not(.event-info *),
.collapse > :checked + label + div:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override any card elements */
.signup-modal .card:not(.event-info):not(.event-info *),
.modal-content .card:not(.event-info):not(.event-info *),
.card:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

.signup-modal .card > .section:not(.event-info):not(.event-info *),
.modal-content .card > .section:not(.event-info):not(.event-info *),
.card > .section:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override any section elements */
.signup-modal section:not(.event-info):not(.event-info *),
.modal-content section:not(.event-info):not(.event-info *),
section:not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Override any h4 elements that might have backgrounds */
.signup-modal h4:not(.event-info h4),
.modal-content h4:not(.event-info h4) {
  background-color: transparent !important;
}

/* Override labels */
.signup-modal label:not(.event-info label),
.modal-content label:not(.event-info label) {
  background-color: transparent !important;
}

/* Override any potential table elements */
.signup-modal table:not(.event-info table),
.modal-content table:not(.event-info table),
.signup-modal th:not(.event-info th),
.modal-content th:not(.event-info th),
.signup-modal td:not(.event-info td),
.modal-content td:not(.event-info td) {
  background-color: #ffffff !important;
}

/* Override any potential list elements */
.signup-modal ul:not(.event-info ul),
.modal-content ul:not(.event-info ul),
.signup-modal ol:not(.event-info ol),
.modal-content ol:not(.event-info ol),
.signup-modal li:not(.event-info li),
.modal-content li:not(.event-info li) {
  background-color: transparent !important;
}

/* Additional catch-all for any other element that might get a grey background, excluding event-info */
.signup-modal *:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *),
.modal-content *:not(.btn):not(.btn-submit):not(.close-modal):not(.modal-header):not(.event-info):not(.event-info *) {
  background-color: #ffffff !important;
}

/* Ensure buttons and other interactive elements maintain their styling */
.signup-modal .btn,
.modal-content .btn,
.signup-modal .btn-submit,
.modal-content .btn-submit {
  background-color: var(--mainColor, #005b94) !important;
  color: white !important;
}

/* Specific override for the modal header */
.modal-header {
  background-color: var(--mainColorLight, #e5edf4) !important;
}

/* Focus states should still work */
.signup-modal input:focus,
.modal-content input:focus,
.signup-modal textarea:focus,
.modal-content textarea:focus,
.signup-modal select:focus,
.modal-content select:focus {
  background-color: #ffffff !important;
  border-color: var(--mainColor, #005b94) !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 148, 0.1) !important;
}