.elementor-60890 .elementor-element.elementor-element-31884ca9 > .elementor-background-overlay{background-color:var( --e-global-color-b51c709 );opacity:0.69;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-60890 .elementor-element.elementor-element-31884ca9 > .elementor-container{min-height:70vh;}.elementor-60890 .elementor-element.elementor-element-31884ca9 .elementor-background-slideshow__slide__image{background-size:cover;background-position:center center;}.elementor-60890 .elementor-element.elementor-element-31884ca9{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;overflow:visible;}.elementor-60890 .elementor-element.elementor-element-4397b434 > .elementor-element-populated{padding:1em 1em 1em 1em;}.elementor-60890 .elementor-element.elementor-element-f410258{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-60890 .elementor-element.elementor-element-cd2a86a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================
   NINJA FORMS IMAGE VOTE - MOBILE RESPONSIVE
   ============================================ */

/* --- 1. Base Styles for Image Options --- */
.nf-form-content .listimage-wrap ul {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 10px !important;
}

.nf-form-content .listimage-wrap ul li {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    background: #ffffff !important;
    overflow: visible !important;
    z-index: 1 !important;
    /* Mobile: Full width, Desktop: Auto width */
    width: 100% !important;
    max-width: 280px !important;
    box-sizing: border-box !important;
}

/* --- 2. Hover Effect --- */
.nf-form-content .listimage-wrap ul li:hover {
    border-color: #008fbf !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(0, 143, 191, 0.25) !important;
    background-color: #f9feff !important;
    z-index: 10 !important;
}

/* --- 3. SELECTED STATE --- */
.nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked) {
    border: 3px solid #00677f !important;
    background-color: #f0f9fb !important;
    box-shadow: 0 0 15px rgba(0, 103, 127, 0.4) !important;
    transform: translateY(-3px) !important;
    z-index: 100 !important;
}

/* --- 4. CHECKMARK - Yellow with High Z-Index --- */
.nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked)::after {
    content: '✔' !important;
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    background: #ff911c !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    z-index: 9999 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
    border: 2px solid #ffffff !important;
}

/* --- 5. Alternative: Style the label when radio is checked --- */
.nf-form-content .listimage-wrap ul li input[type="radio"]:checked + label {
    border: 3px solid #00677f !important;
    background-color: #f0f9fb !important;
    box-shadow: 0 0 15px rgba(0, 103, 127, 0.4) !important;
    border-radius: 12px !important;
    display: block !important;
    padding: 6px !important;
    margin: -6px !important;
}

/* --- 6. Hide default radio inputs --- */
.nf-form-content .listimage-wrap ul li input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- 7. Ensure images don't block clicks --- */
.nf-form-content .listimage-wrap ul li img {
    pointer-events: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* --- 8. Label styling --- */
.nf-form-content .listimage-wrap ul li label {
    display: block !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* --- 9. Ensure form container doesn't clip --- */
.nf-form-content {
    overflow: visible !important;
}

.nf-form-content .listimage-wrap {
    overflow: visible !important;
}

/* ============================================
   TABLET BREAKPOINT (min-width: 768px)
   ============================================ */
@media screen and (min-width: 768px) {
    .nf-form-content .listimage-wrap ul li {
        width: calc(50% - 10px) !important;
        max-width: 300px !important;
        padding: 12px !important;
    }
    
    .nf-form-content .listimage-wrap ul li:hover {
        transform: translateY(-8px) scale(1.03) !important;
        box-shadow: 0 10px 25px rgba(0, 143, 191, 0.25) !important;
    }
    
    .nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked) {
        border-width: 4px !important;
        box-shadow: 0 0 20px rgba(0, 103, 127, 0.4) !important;
        transform: translateY(-4px) !important;
    }
    
    .nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked)::after {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        top: -15px !important;
        right: -15px !important;
    }
}

/* ============================================
   DESKTOP BREAKPOINT (min-width: 1024px)
   ============================================ */
@media screen and (min-width: 1024px) {
    .nf-form-content .listimage-wrap ul {
        gap: 20px !important;
    }
    
    .nf-form-content .listimage-wrap ul li {
        width: auto !important;
        max-width: 320px !important;
        padding: 15px !important;
    }
    
    .nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked)::after {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
}

/* ============================================
   SMALL MOBILE FIXES (max-width: 480px)
   ============================================ */
@media screen and (max-width: 480px) {
    .nf-form-content .listimage-wrap ul {
        gap: 12px !important;
        padding: 5px !important;
    }
    
    .nf-form-content .listimage-wrap ul li {
        padding: 8px !important;
        margin-bottom: 5px !important;
    }
    
    /* Ensure checkmark doesn't get cut off on small screens */
    .nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked)::after {
        top: -10px !important;
        right: -10px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    /* Reduce border width on small screens */
    .nf-form-content .listimage-wrap ul li:has(input[type="radio"]:checked) {
        border-width: 3px !important;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .nf-form-content .listimage-wrap ul li:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: #e0e0e0 !important;
    }
    
    /* Larger touch targets */
    .nf-form-content .listimage-wrap ul li {
        min-height: 44px !important;
    }
    
    .nf-form-content .listimage-wrap ul li label {
        padding: 5px !important;
    }
}/* End custom CSS */