/* Image Select Field Styles */

.elementor-field-type-image_select .elementor-field-options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.elementor-field-type-image_select .elementor-field-option {
    position: relative;
    cursor: pointer;
    border: 1px solid #ddd; /* Default border */
    border-radius: 4px;
    padding: 10px;
    transition: all 0.3s ease;
    text-align: center;
    flex-basis: calc(33.333% - 10px); /* 3 items per row by default */
    box-sizing: border-box;
}

.elementor-field-type-image_select .elementor-field-option:hover {
    border-color: #aaa;
}

/* Hidden Radio Input */
.elementor-field-type-image_select input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Selected State */
.elementor-field-type-image_select input[type="radio"]:checked + .elementor-field-option-label {
    /* We can style the label wrapper if needed, 
       but usually we want to style the parent .elementor-field-option 
       CSS :has() selector is great here if supported, 
       otherwise we might depend on JS or adjacent sibling trick 
       if the input is BEFORE the label content.
    */
}

/* Sibling selector approach: input needs to be before the content we want to style if we don't use :has() 
   Structure:
   <label class="elementor-field-option">
       <input type="radio" ... >
       <div class="elementor-image-select-content">
          <img ...>
          <span>Text</span>
       </div>
   </label>

   So:
*/
.elementor-field-type-image_select input[type="radio"]:checked ~ .elementor-image-select-content {
    /* Highlight the content */
}

/* Better approach: Style the label itself using :has or just rely on the input's checked state to style siblings */
.elementor-field-type-image_select label:has(input:checked) {
    border-color: #0073aa; /* Example active color */
    box-shadow: 0 0 5px rgba(0,115,170,0.5);
    background-color: #f0f9ff;
}

/* Fallback for older browsers if needed (not strictly necessary for modern Elementor sites) */
.elementor-field-type-image_select input[type="radio"]:checked + .elementor-image-select-wrapper {
   /* highlight */
}

.elementor-image-select-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.elementor-image-select-label {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.elementor-image-select-description {
    font-size: 0.85em;
    color: #666;
    display: block;
}