/* 
 * VENUE MODAL COLOR CONTRAST FIX
 * Fixes white-on-white contrast issues in venue selection modal
 * WCAG 2.1 Level AA Compliance
 */

#venueModal {
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 100001 !important;
}

#venueModal > div {
    background: rgba(10, 14, 39, 0.98) !important;
    border: 1px solid rgba(0, 255, 200, 0.3) !important;
    color: #FFFFFF;
}

/* Headers and titles */
#venueModal h2,
#venueModal h3,
#venueModal h4 {
    color: #00FFC8 !important;
}

/* Tabs */
#venueModal .venue-tab-btn,
#venueModal button[onclick*="switchVenueTab"] {
    background: rgba(0, 255, 200, 0.15) !important;
    border: 1px solid rgba(0, 255, 200, 0.3) !important;
    color: #00FFC8 !important;
    padding: 0.45rem 0.6rem !important;
}

#venueModal button[onclick*="switchVenueTab"]:hover {
    background: rgba(0, 255, 200, 0.25) !important;
    border-color: #00FFC8 !important;
}

/* Tab content */
#searchTab,
#savedTab {
    color: #FFFFFF;
}

/* Labels - High contrast */
#venueModal label {
    color: #00FFC8 !important;
    font-weight: 600;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input fields - Dark background, light text */
#venueModal input[type="text"],
#venueModal input[type="email"],
#venueModal input[type="number"],
#venueModal textarea,
#venueModal select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(0, 255, 200, 0.3) !important;
    color: #FFFFFF !important;
    padding: 0.45rem 0.6rem !important;
    border-radius: 6px !important;
}

#venueModal input[type="text"]::placeholder,
#venueModal input[type="email"]::placeholder,
#venueModal input[type="number"]::placeholder,
#venueModal textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#venueModal input[type="text"]:focus,
#venueModal input[type="email"]:focus,
#venueModal input[type="number"]:focus,
#venueModal textarea:focus,
#venueModal select:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #00FFC8 !important;
    box-shadow: 0 0 8px rgba(0, 255, 200, 0.3) !important;
    outline: none !important;
}

/* Suggestion boxes and dropdowns */
#venueModal .suggestion-box,
#venueModal .venue-suggestion,
#venueModal .suggestions-list,
#venueModal ul[style*="background"],
#venueModal li[style*="background"] {
    background: rgba(15, 20, 50, 0.8) !important;
    border: 1px solid rgba(0, 255, 200, 0.2) !important;
    color: #FFFFFF !important;
}

/* Suggestion items */
#venueModal .suggestion-item,
#venueModal li {
    color: #FFFFFF !important;
    padding: 0.5rem 0.6rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#venueModal .suggestion-item:hover,
#venueModal li:hover {
    background: rgba(0, 255, 200, 0.15) !important;
    color: #00FFC8 !important;
}

/* Saved venues section */
#venueModal .saved-venues,
#venueModal #savedVenuesList,
#venueModal .saved-venue-item {
    background: rgba(15, 20, 50, 0.6) !important;
    border: 1px solid rgba(0, 255, 200, 0.2) !important;
    color: #FFFFFF !important;
}

/* Cards within modal */
#venueModal .venue-card,
#venueModal .venue-item,
#venueModal [style*="background: rgba(255, 255, 255, 0.05)"] {
    background: rgba(15, 20, 50, 0.7) !important;
    border: 1px solid rgba(0, 255, 200, 0.2) !important;
    color: #FFFFFF !important;
}

/* Buttons */
#venueModal button {
    color: #FFFFFF !important;
    transition: all 0.2s ease;
}

#venueModal button[style*="background-color: #FFD700"],
#venueModal button[style*="background: #FFD700"] {
    background: #FFD700 !important;
    color: #0a0e27 !important;
    font-weight: 600;
}

#venueModal button[style*="background-color: #FFD700"]:hover,
#venueModal button[style*="background: #FFD700"]:hover {
    background: #FFC700 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Secondary buttons */
#venueModal button[style*="background-color: white"],
#venueModal button[style*="background: white"],
#venueModal button[style*="background: #f0f0f0"],
#venueModal button[style*="background: rgba(255, 255, 255"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #00FFC8 !important;
}

#venueModal button[style*="background-color: white"]:hover,
#venueModal button[style*="background: white"]:hover,
#venueModal button[style*="background: #f0f0f0"]:hover,
#venueModal button[style*="background: rgba(255, 255, 255"]:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #00FFC8 !important;
}

/* Close button */
#venueModal button[onclick*="closeVenueModal"] {
    background: none !important;
    border: none !important;
    color: #00FFC8 !important;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 !important;
    transition: color 0.2s ease;
}

#venueModal button[onclick*="closeVenueModal"]:hover {
    color: #FFD700 !important;
}

/* Text content */
#venueModal p,
#venueModal span {
    color: rgba(255, 255, 255, 0.85) !important;
}

#venueModal .error,
#venueModal .error-message,
#venueModal [style*="color: red"] {
    color: #FF6B6B !important;
}

#venueModal .success,
#venueModal .success-message,
#venueModal [style*="color: green"] {
    color: #10B981 !important;
}

/* Sections and dividers */
#venueModal > div > div {
    color: #FFFFFF;
}

/* Ensure all text is readable */
#venueModal * {
    color: inherit;
}

#venueModal strong,
#venueModal b {
    color: #FFD700;
}

/* Address/location text */
#venueModal [style*="font-size"] {
    color: #FFFFFF !important;
}

/* Grid layout */
#venueModal [style*="grid"] {
    color: #FFFFFF;
}

/* Flex items */
#venueModal [style*="display: flex"] {
    color: #FFFFFF;
}

/* Override any conflicting background styles */
#venueModal [style*="background: rgba(255, 255, 255, 0.05)"],
#venueModal [style*="background:rgba(255,255,255,0.05)"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

#venueModal [style*="background: rgba(255, 255, 255, 0.1)"],
#venueModal [style*="background:rgba(255,255,255,0.1)"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

#venueModal [style*="background: rgba(255, 255, 255, 0.15)"],
#venueModal [style*="background:rgba(255,255,255,0.15)"] {
    background: rgba(15, 20, 50, 0.7) !important;
    color: #FFFFFF !important;
}

#venueModal [style*="background: rgba(255, 255, 255, 0.2)"],
#venueModal [style*="background:rgba(255,255,255,0.2)"] {
    background: rgba(15, 20, 50, 0.8) !important;
    color: #FFFFFF !important;
}

/* Border colors */
#venueModal [style*="border: 1px solid rgba(255, 255, 255"] {
    border-color: rgba(0, 255, 200, 0.3) !important;
}

/* Accessibility */
#venueModal :focus {
    outline: 2px solid #00FFC8 !important;
    outline-offset: 2px !important;
}

#venueModal :focus:not(:focus-visible) {
    outline: none !important;
}

#venueModal :focus-visible {
    outline: 2px solid #00FFC8 !important;
    outline-offset: 2px !important;
}