/* Minimal Forminator styling - COLORS ONLY, no layout changes */

/* Input fields - lighter dark background */
#contact-modal .forminator-input,
#contact-modal .forminator-textarea {
    background-color: #1a1a24 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* Instagram Handle field - add icon */
#contact-modal input[name*="instagram" i],
#contact-modal input[placeholder*="instagram" i],
#contact-modal .forminator-field--instagram input,
#contact-modal input[id*="instagram" i] {
    background-color: #1a1a24 !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23e6d762" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    background-size: 18px 18px !important;
    padding-left: 46px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Instagram field focus - gold outline */
#contact-modal input[name*="instagram" i]:focus,
#contact-modal input[placeholder*="instagram" i]:focus,
#contact-modal .forminator-field--instagram input:focus,
#contact-modal input[id*="instagram" i]:focus {
    border-color: #e6d762 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(230, 215, 98, 0.3) !important;
}

#contact-modal .forminator-input:focus,
#contact-modal .forminator-textarea:focus {
    border-color: #e6d762 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(230, 215, 98, 0.3) !important;
}

/* Labels - light gray text - ALWAYS VISIBLE with proper z-index */
#contact-modal .forminator-label,
#contact-modal .forminator-label--floating {
    color: #e2e8f0 !important;
    opacity: 1 !important;
    background-color: #13131a !important;
    padding: 0 4px !important;
    z-index: 1 !important;
}

/* Floating labels when field is empty - keep visible but slightly dimmed */
#contact-modal .forminator-floating--input .forminator-label {
    color: #e2e8f0 !important;
    opacity: 0.7 !important;
    background-color: #13131a !important;
}

/* Floating labels when field has value or is focused */
#contact-modal .forminator-floating--input.forminator-is_filled .forminator-label,
#contact-modal .forminator-floating--input.forminator-is_active .forminator-label {
    color: #e6d762 !important;
    opacity: 1 !important;
    background-color: #13131a !important;
}

/* Placeholder text */
#contact-modal .forminator-input::placeholder,
#contact-modal .forminator-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Select2 dropdown - closed state - MATCH INPUT FIELDS */
#contact-modal .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single {
    background-color: #1a1a24 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* Select2 text color - WHITE to match other inputs */
#contact-modal .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered,
span.select2-selection__rendered {
    color: #ffffff !important;
    line-height: normal !important;
}

#contact-modal .select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}

/* Force all Select2 rendered text to be white */
.select2-selection__rendered * {
    color: #ffffff !important;
}

#contact-modal .select2-container--default.select2-container--focus .select2-selection--single,
#contact-modal .select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #e6d762 !important;
    box-shadow: 0 0 0 1px rgba(230, 215, 98, 0.3) !important;
    outline: none !important;
}

/* Force remove any browser default outline */
.select2-container--default .select2-selection--single:focus,
.select2-selection--single:focus,
.select2-container:focus,
.select2-container--open:focus {
    outline: none !important;
}

/* Kill all blue outlines on Select2 */
.select2-container *,
.select2-container *:focus,
.select2-container--default *,
.select2-container--default *:focus,
.select2-selection,
.select2-selection:focus,
.select2-selection--single,
.select2-selection--single:focus {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
}

#contact-modal .select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent !important;
}

/* Select2 dropdown menu - open state - MORE SPECIFIC SELECTORS */
.select2-container--default .select2-dropdown,
.forminator-select-dropdown,
.select2-container--open .select2-dropdown,
span.forminator-select-dropdown {
    background-color: #1a1a24 !important;
    border-color: #e6d762 !important;
    border-radius: 8px !important;
}

/* Select2 search field inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field,
.forminator-select-dropdown .select2-search__field {
    background-color: #13131a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

/* Select2 results container - dark background - VERY SPECIFIC */
.select2-container--default .select2-results__options,
.forminator-select-dropdown .select2-results__options,
.select2-results__options,
ul.select2-results__options {
    background-color: #1a1a24 !important;
}

/* All dropdown options - FORCE DARK */
.select2-container--default .select2-results__option,
.forminator-select-dropdown .select2-results__option,
.select2-results__option,
li.select2-results__option,
.select2-results__option--selectable {
    background-color: #1a1a24 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
}

/* Hover state for dropdown options - VERY SPECIFIC */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.forminator-select-dropdown .select2-results__option--highlighted,
.select2-results__option--highlighted,
li.select2-results__option--highlighted {
    background-color: #e6d762 !important;
    color: #0a0a0e !important;
}

/* Selected option in dropdown */
.select2-container--default .select2-results__option[aria-selected=true],
.forminator-select-dropdown .select2-results__option[aria-selected=true] {
    background-color: #2a2a34 !important;
    color: #e6d762 !important;
}

/* Fix placeholder text in search */
.select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Radio buttons */
#contact-modal .forminator-radio input[type="radio"] + span {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#contact-modal .forminator-radio input[type="radio"]:checked + span {
    border-color: #e6d762 !important;
    background-color: #e6d762 !important;
}

#contact-modal .forminator-radio label {
    color: #e2e8f0 !important;
}

/* Social media icons - rounded - AGGRESSIVE SELECTORS */
#contact-modal .forminator-radio label img,
#contact-modal img,
#contact-modal .forminator-checkbox img,
#contact-modal .forminator-radio img,
.forminator-custom-form img,
.forminator-ui img,
img[src*="instagram"],
img[src*="reddit"] {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Submit button - match primary button gradient style exactly */
#contact-modal .forminator-button-submit,
#contact-modal button[type="submit"],
.forminator-button-submit {
    background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), linear-gradient(to right, #e6d762, #978033, #b5a673, #ccb448, #e1d481, #bfad61) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(230, 215, 98, 0.3) !important;
}

#contact-modal .forminator-button-submit:hover,
#contact-modal button[type="submit"]:hover,
.forminator-button-submit:hover {
    opacity: 0.9 !important;
    transform: scale(1.02) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(230, 215, 98, 0.4) !important;
}

/* Mobile-specific fixes for modal positioning and scrolling */
@media (max-width: 768px) {
    /* Fix modal overlay to cover entire screen */
    #contact-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 9999 !important;
    }
    
    /* Fix modal content container positioning */
    #contact-modal > div:last-child {
        position: relative !important;
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin: 16px auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Make modal scrollable on mobile */
    #contact-modal .relative {
        overflow-y: visible !important;
        max-height: none !important;
    }
    
    /* Adjust modal padding for mobile */
    #contact-modal .p-6 {
        padding: 16px !important;
    }
    
    /* Ensure form fields are properly sized on mobile */
    #contact-modal .forminator-input,
    #contact-modal .forminator-textarea,
    #contact-modal .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Fix Instagram input field on mobile */
    #contact-modal input[name*="instagram" i],
    #contact-modal input[placeholder*="instagram" i] {
        font-size: 16px !important;
        background-position: 12px center !important;
        padding-left: 42px !important;
    }
    
    /* Adjust submit button for mobile */
    #contact-modal .forminator-button-submit,
    #contact-modal button[type="submit"] {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        margin-top: 8px !important;
    }
    
    /* Fix modal header sticky positioning on mobile */
    #contact-modal .sticky {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    /* Ensure proper spacing at bottom of modal */
    #contact-modal .p-6:last-child {
        padding-bottom: 32px !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    #contact-modal > div:last-child {
        margin: 8px auto !important;
        width: calc(100% - 16px) !important;
    }
    
    #contact-modal .p-6 {
        padding: 12px !important;
    }
    
    /* Reduce header padding on small mobile */
    #contact-modal .sticky.top-0 {
        padding: 16px 12px !important;
    }
    
    /* Adjust title sizes for very small screens */
    #contact-modal h3 {
        font-size: 1.25rem !important;
    }
}