/* 
 * Fix for countries dropdown not being visible on JoinUs page
 * This CSS overrides common dropdown visibility issues
 * Includes accessibility improvements
 */

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible styles for keyboard navigation */
*:focus-visible {
    outline: 3px solid #4facfe !important;
    outline-offset: 2px !important;
}

/* Skip to content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #4facfe;
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    z-index: 100000;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-to-content:focus {
    top: 0;
}

/* Improve form label visibility */
label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
}

/* Required field indicator */
label[for] .required,
label .required {
    color: #dc2626 !important;
    margin-left: 4px;
}

/* Better input focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: #4facfe !important;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.25) !important;
    outline: none !important;
}

/* Error state styling */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.input-error,
.has-error input,
.has-error select {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Error message styling */
.error-message,
.field-error,
[role="alert"] {
    color: #dc2626 !important;
    font-size: 0.875rem !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Success state styling */
input[aria-invalid="false"].touched,
select[aria-invalid="false"].touched {
    border-color: #22c55e !important;
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #f1f5f9 !important;
}

/* Screen reader only text */
.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: 0 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    input, select, textarea, button {
        border-width: 2px !important;
    }
    
    *:focus-visible {
        outline-width: 4px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================ */

/* Ensure dropdowns have proper z-index and positioning */
select {
    position: relative !important;
    z-index: 1000 !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    min-height: 40px !important;
    max-height: 300px !important;
    width: 100% !important;
    border: 1px solid #ccc !important;
    background-color: white !important;
    color: #333 !important;
    overflow-y: auto !important;
}

/* Fix for select elements that might be hidden */
select option {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
    color: #333 !important;
    padding: 8px 12px !important;
    border: none !important;
}

/* Ensure dropdown containers don't clip content */
.form-group,
.form-field,
.input-group,
.select-container,
div[class*="select"],
div[class*="dropdown"],
div[class*="form"] {
    overflow: visible !important;
    position: relative !important;
}

/* Specific fixes for common dropdown libraries */
.react-select__menu,
.select__menu,
.dropdown-menu,
.dropdown-content {
    z-index: 9999 !important;
    position: absolute !important;
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Custom scrollable dropdown for injected countries */
.injected-country-option {
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #eee !important;
    transition: background-color 0.2s ease !important;
}

.injected-country-option:hover {
    background-color: #f5f5f5 !important;
}

.injected-country-option:last-child {
    border-bottom: none !important;
}

/* Scrollbar styling for dropdown */
.dropdown-content::-webkit-scrollbar,
.scrollable-dropdown::-webkit-scrollbar {
    width: 8px !important;
}

.dropdown-content::-webkit-scrollbar-track,
.scrollable-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

.dropdown-content::-webkit-scrollbar-thumb,
.scrollable-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 4px !important;
}

.dropdown-content::-webkit-scrollbar-thumb:hover,
.scrollable-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Force scrollable dropdown styling */
.scrollable-dropdown {
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    position: absolute !important;
    z-index: 10000 !important;
    width: 100% !important;
}

/* Fix for select2 dropdowns */
.select2-container {
    z-index: 9999 !important;
}

.select2-dropdown {
    z-index: 9999 !important;
    background: white !important;
    border: 1px solid #ccc !important;
}

/* Native select styling improvements */
select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    background: white !important;
    border: 1px solid #ccc !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    min-height: 38px !important;
}

/* Focus states for better UX and accessibility */
select:focus {
    border-color: #4facfe !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.25) !important;
}

select:focus-visible {
    outline: 3px solid #4facfe !important;
    outline-offset: 2px !important;
}

/* Specific fix for countries dropdown */
select[name*="country"],
select[id*="country"],
select[class*="country"],
.country-select select,
.location-select select {
    z-index: 10000 !important;
    position: relative !important;
    background: white !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure parent containers don't interfere */
.signup-form,
.join-form,
.registration-form,
form[class*="join"],
form[class*="signup"] {
    overflow: visible !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Modal/overlay fixes if the form is in a modal */
.modal,
.overlay,
.popup {
    overflow: visible !important;
    z-index: 1050 !important;
}

.modal-body,
.modal-content {
    overflow: visible !important;
}

/* Fix for forms inside containers with hidden overflow */
.container,
.wrapper,
.content {
    overflow: visible !important;
}

/* Additional debugging - makes dropdowns more visible */
select:empty {
    background-color: #f8f9fa !important;
    border: 2px dashed #dc3545 !important;
}

select:empty::after {
    content: "No options available" !important;
    color: #dc3545 !important;
    padding: 10px !important;
    display: block !important;
}

/* Fix for any transforms that might hide content */
* {
    transform: none !important;
}

/* Ensure visibility for all dropdown elements */
select,
select *,
option {
    visibility: visible !important;
    display: block !important;
}

/* Style improvements for better visibility */
option:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

option:selected {
    background-color: #007bff !important;
    color: white !important;
}

/* Fix for any CSS that might be hiding the dropdown */
[style*="display: none"] select,
[style*="visibility: hidden"] select {
    display: block !important;
    visibility: visible !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
}

/* Force show countries if they're loaded via JS */
.countries-loaded select {
    background-color: white !important;
    color: #333 !important;
}

/* Debug helper - uncomment to see dropdown boundaries */
/*
select {
    border: 3px solid red !important;
    background: yellow !important;
}
*/

/* 
 * LOGO FIXES FOR HEADER 
 * Fix common logo display issues in the header/navigation
 */

/* General logo container fixes */
.logo,
.logo-container,
.brand,
.brand-logo,
.header-logo,
nav img,
.navbar img,
.navbar-brand img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Specific MoneyPings logo fixes */
img[src*="logo"],
img[src*="Logo"],
svg[class*="logo"],
svg[class*="Logo"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 60px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Header/Navigation container fixes */
header,
nav,
.header,
.navbar,
.navigation {
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Ensure logo links work properly */
a img,
a svg {
    display: block !important;
    pointer-events: all !important;
}

/* Fix for logo positioning */
.logo img,
.logo svg,
.brand img,
.brand svg {
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Fix for broken image sources */
img[src=""]:before,
img:not([src]):before,
img[src="#"]:before {
    content: "LOGO" !important;
    display: block !important;
    width: 120px !important;
    height: 40px !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    text-align: center !important;
    line-height: 40px !important;
    color: #6c757d !important;
    font-weight: bold !important;
}

/* SIMPLE LOGO FIX - Just make it visible */
div[alt="logo"],
div[alt="logo"] > div,
.injected-svg,
svg.injected-svg {
    display: block;
    visibility: visible;
    opacity: 1;
    /* max-height: 50px; */
    width: auto;
}

/* Fix for SVG patterns and images inside logo */
svg.injected-svg pattern,
svg.injected-svg image,
svg.injected-svg rect,
svg.injected-svg defs {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force SVG patterns to render properly */
div[alt="logo"] svg pattern,
div[alt="logo"] svg image,
div[alt="logo"] svg rect {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure logo SVG itself renders - more specific */
div[alt="logo"] > div > svg.injected-svg[data-src*="logo"] {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Logo container - simplified styles */
div[alt="logo"] {
    display: block;
    visibility: visible;
    opacity: 1;
    width: auto;
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    transform: none;
}

div[alt="logo"] svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

/* Force SVG patterns and images to render */
div[alt="logo"] svg pattern,
div[alt="logo"] svg image,
div[alt="logo"] svg defs,
div[alt="logo"] svg rect {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fallback fills removed - no more blue boxes */

/* Fix any transforms that might be hiding the logo */
div[alt="logo"],
div[alt="logo"] > div,
.injected-svg {
    transform: none;
    transition: none;
}

/* Final logo fix - simplified display */
div[alt="logo"] img {
    display: block;
    width: 212px;
    height: 46px;
    max-width: none;
    max-height: none;
}

/* Responsive logo fixes - ONLY for logo container */
@media (max-width: 768px) {
    div[alt="logo"] img {
        width: 180px;
        height: 39px;
    }
}

@media (max-width: 480px) {
    div[alt="logo"] img {
        width: 150px;
        height: 32px;
    }
}