/* Custom Image Upload Form Styles - High Specificity for Elementor Compatibility */

/* Main Container */
.cui-container {
    max-width: 500px !important;
    margin: 20px 0 !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
}

/* Form Wrapper */
.cui-form {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Form Groups */
.cui-form-group {
    margin-bottom: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Two-column layout for paired fields */
.cui-form-row {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.cui-form-row .cui-form-group {
    flex: 1 !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

/* Labels */
.cui-label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Elementor-specific label spacing fix */
.elementor-widget-container .cui-label,
.elementor-section .cui-label,
.elementor-column .cui-label {
    margin-bottom: 5px !important;
}

/* Input Fields */
.cui-input {
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.cui-text-input,
.cui-select,
.cui-file-input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.cui-text-input:focus,
.cui-select:focus,
.cui-file-input:focus {
    outline: none !important;
    border-color: #0073aa !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
}

/* Select Dropdown */
.cui-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 30px !important;
    cursor: pointer !important;
}

/* Radio Button Group */
.cui-radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 5px !important;
}

.cui-radio-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.cui-radio-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.cui-radio-label {
    font-weight: normal !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Confirmation sections */
.cui-confirmation-section {
    margin-bottom: 20px !important;
    padding: 15px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background-color: #f9f9f9 !important;
}

.cui-confirmation-question {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.cui-confirmation-options {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

.cui-confirmation-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cui-confirmation-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.cui-confirmation-label {
    font-weight: normal !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Helper Text */
.cui-helper-text {
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 3px !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* Submit Button */
.cui-submit-btn {
    background-color: #0073aa !important;
    color: white !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease !important;
    box-sizing: border-box !important;
    min-width: 140px !important;
}

.cui-submit-btn:hover {
    background-color: #005a87 !important;
}

.cui-submit-btn:disabled {
    background-color: #ccc !important;
    cursor: not-allowed !important;
}

/* Messages */
.cui-messages {
    margin-top: 15px !important;
    width: 100% !important;
}

.cui-messages .success-message {
    color: #008000 !important;
    background-color: #f0fff0 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #008000 !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.cui-messages .error-message {
    color: #cc0000 !important;
    background-color: #fff0f0 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #cc0000 !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.cui-messages .warning-message {
    color: #996600 !important;
    background-color: #fff9e6 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #cc9900 !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Warning Messages Container (above submit button) */
.cui-warning-messages {
    margin-bottom: 15px !important;
    width: 100% !important;
}

.cui-warning-messages .warning-message {
    color: #996600 !important;
    background-color: #fff9e6 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #cc9900 !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cui-container {
        max-width: 100% !important;
        margin: 10px 0 !important;
    }
    
    .cui-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .cui-form-row .cui-form-group {
        margin-bottom: 15px !important;
    }
    
    .cui-radio-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .cui-confirmation-options {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .cui-submit-btn {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* Elementor-specific overrides */
.elementor-widget-container .cui-container,
.elementor-section .cui-container,
.elementor-column .cui-container {
    max-width: 500px !important;
}

.elementor-widget-container .cui-text-input,
.elementor-widget-container .cui-select,
.elementor-widget-container .cui-file-input,
.elementor-section .cui-text-input,
.elementor-section .cui-select,
.elementor-section .cui-file-input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget-container .cui-radio-group,
.elementor-section .cui-radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

/* Override common Elementor form styles */
.elementor * .cui-input {
    margin: 0 !important;
}

.elementor .cui-form-group {
    margin-bottom: 15px !important;
}

/* Enhanced Elementor Gap Fix - Target specific Elementor structures */
.elementor-widget-container .cui-label,
.elementor-section .cui-label,
.elementor-column .cui-label,
.elementor .cui-label {
    margin-bottom: 3px !important;
    margin-top: 0 !important;
}

.elementor-widget-container .cui-text-input,
.elementor-widget-container .cui-select,
.elementor-widget-container .cui-file-input,
.elementor-section .cui-text-input,
.elementor-section .cui-select,
.elementor-section .cui-file-input,
.elementor .cui-text-input,
.elementor .cui-select,
.elementor .cui-file-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Target common Elementor typography spacing */
.elementor-widget-container .cui-form-group,
.elementor-section .cui-form-group,
.elementor-column .cui-form-group,
.elementor .cui-form-group {
    margin-bottom: 15px !important;
}

/* Override Elementor's default spacing for form elements */
.elementor-widget-container .cui-form-group > *,
.elementor-section .cui-form-group > *,
.elementor-column .cui-form-group > *,
.elementor .cui-form-group > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.elementor-widget-container .cui-form-group > .cui-label,
.elementor-section .cui-form-group > .cui-label,
.elementor-column .cui-form-group > .cui-label,
.elementor .cui-form-group > .cui-label {
    margin-bottom: 3px !important;
}

.elementor-widget-container .cui-form-group > .cui-helper-text,
.elementor-section .cui-form-group > .cui-helper-text,
.elementor-column .cui-form-group > .cui-helper-text,
.elementor .cui-form-group > .cui-helper-text {
    margin-top: 3px !important;
}

/* Target Elementor's widget content specifically */
.elementor-widget-html .cui-container,
.elementor-widget-shortcode .cui-container {
    margin: 0 !important;
}

/* Additional specificity for stubborn Elementor themes */
.elementor-widget-container .cui-container .cui-form-group,
.elementor-section .cui-container .cui-form-group {
    margin-bottom: 15px !important;
}

.elementor-widget-container .cui-container .cui-label,
.elementor-section .cui-container .cui-label {
    margin-bottom: 3px !important;
    margin-top: 0 !important;
}

.elementor-widget-container .cui-container .cui-input,
.elementor-section .cui-container .cui-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Override any Elementor typography margins */
.elementor [class*="elementor-"] .cui-label,
.elementor [class*="elementor-"] .cui-input {
    margin-top: 0 !important;
}

.elementor [class*="elementor-"] .cui-label {
    margin-bottom: 3px !important;
}

.elementor [class*="elementor-"] .cui-input {
    margin-bottom: 0 !important;
}

/* Hide unwanted <br> tags that Elementor adds */
.elementor .cui-container br,
.elementor-widget-container .cui-container br,
.elementor-section .cui-container br,
.elementor-column .cui-container br {
    display: none !important;
}

/* Additional targeting for stubborn <br> tags */
.cui-container br {
    display: none !important;
}

.cui-form-group br {
    display: none !important;
}