/**
 * CF7 Multi Icons Frontend Styles
 */

/* Field Wrapper */
.cf7mi-field-wrapper {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
    overflow: hidden; /* Ensure everything stays inside the wrapper */
}

.cf7mi-field-wrapper:hover {
    border-color: #aaa;
}

.cf7mi-field-wrapper.cf7mi-field-focused {
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

/* Field Styles */
.cf7mi-field-wrapper .wpcf7-form-control {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 40px; /* Ensure consistent height */
}

.cf7mi-field-wrapper textarea.wpcf7-form-control {
    min-height: 120px;
    resize: vertical;
}

.cf7mi-field-wrapper select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path fill="%23666" d="M0 0l6 6 6-6z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    padding-right: 35px !important;
}

/* Icon Styles */
.cf7mi-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-left: 1px solid #ddd;
    background-color: #f9f9f9;
    height: 100%;
    min-width: 50px; /* Ensure icon has minimum width */
    cursor: pointer; /* Show it's clickable */
    transition: background-color 0.2s ease;
}

.cf7mi-field-icon:hover {
    background-color: #f0f0f0;
}

.cf7mi-field-focused .cf7mi-field-icon {
    background-color: #e7f4fc;
    border-left-color: #0073aa;
}

.cf7mi-field-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Special field type styles */
.cf7mi-dropdown-icon {
    background-color: #f5f5f5;
}

/* For textareas, adjust icon position */
.cf7mi-field-wrapper:has(textarea) {
    align-items: flex-start;
}

.cf7mi-field-wrapper:has(textarea) .cf7mi-field-icon {
    padding-top: 15px;
}

.cf7mi-textarea-icon {
    align-items: flex-start;
    padding-top: 15px !important;
}

/* Checkbox and Radio Specific Styling */
.cf7mi-field-wrapper .wpcf7-checkbox,
.cf7mi-field-wrapper .wpcf7-radio {
    display: block;
    width: 100%;
    padding: 10px !important;
}

.cf7mi-field-wrapper .wpcf7-list-item {
    margin: 0 0 5px 0;
    display: block;
}

.cf7mi-field-wrapper .wpcf7-list-item-label {
    padding-left: 5px;
}

/* For standard wpcf7 layout (for non-modified fields) */
.wpcf7-form-control-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* Fix for required fields */
.cf7mi-field-wrapper .wpcf7-not-valid-tip {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 12px;
}

/* Ensure icon is visible */
.cf7mi-field-icon svg,
.cf7mi-field-icon img {
    max-width: 20px;
    max-height: 20px;
    display: block;
}

/* Responsive Styles */
@media screen and (max-width: 480px) {
    .cf7mi-field-wrapper {
        flex-direction: row; /* Keep horizontal layout on mobile */
    }
    
    .cf7mi-field-icon {
        min-width: 40px;
        padding: 0 10px;
    }
}