/* Custom Insurance Checkbox Styles */
.custom-insurance-container {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
    display: block !important;
}

.custom-insurance-container:hover {
    border-color: #ff671d !important;
    box-shadow: 0 4px 8px rgba(255, 103, 29, 0.1) !important;
}

.custom-insurance-container.selected {
    border-color: #ff671d !important;
    background: #fff8f5 !important;
}

.insurance-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
}

.insurance-logo {
    width: 80px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.fidamy-logo-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fallback styling als afbeelding niet laadt */
.insurance-logo:has(.fidamy-logo-img[src=""]),
.insurance-logo:has(.fidamy-logo-img:not([src])) {
    background: transparent !important;
    color: #4a90e2 !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-shadow: none !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 6px !important;
}

.insurance-logo:has(.fidamy-logo-img[src=""]):after,
.insurance-logo:has(.fidamy-logo-img:not([src])):after {
    content: "Fidamy" !important;
}

.insurance-checkbox-container {
    margin-left: auto !important;
    margin-top: 5px !important;
}

.custom-insurance-checkbox {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: #ff671d !important;
    transform: scale(1.2) !important;
    margin: 0 !important;
}

.custom-insurance-checkbox:hover {
    transform: scale(1.3) !important;
}

.insurance-content h3 {
    margin: 0 0 10px 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.3 !important;
}

.insurance-content p {
    margin: 0 0 10px 0 !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.insurance-content p:first-of-type {
    color: #ff671d !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

.insurance-learn-more {
    color: #4a90e2 !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.insurance-learn-more:hover {
    color: #357abd !important;
    text-decoration: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .custom-insurance-container {
        padding: 15px !important;
        margin: 15px 0 !important;
    }
    
    .insurance-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .insurance-checkbox-container {
        margin-left: 0 !important;
        margin-top: 10px !important;
        align-self: flex-end !important;
    }
    
    .insurance-logo {
        margin-bottom: 10px !important;
    }
    
    .insurance-content h3 {
        font-size: 16px !important;
    }
}

/* Animation for checkbox selection */
.custom-insurance-container.checkbox-checked {
    animation: checkboxSelected 0.3s ease !important;
}

@keyframes checkboxSelected {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Ensure HTML and body elements are never hidden */
html, body {
    display: block !important;
    visibility: visible !important;
}

/* Hide original Ecwid insurance options - very specific selectors only */
.ecwid .ec-form__cell.insurance-processed,
.ecwid-productBrowser .ec-form__cell.insurance-processed,
.product-details .insurance-processed,
.details-product-option--Verzekering.insurance-processed,
.product-details-module.insurance-processed,
label.insurance-processed,
span.insurance-processed,
div.insurance-processed,
p.insurance-processed {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Specifieke Ecwid verzekering selectors */
.details-product-option--Verzekering,
.product-details-module:has(.details-product-option__title:contains("Verzekering")),
[class*="details-product-option"][class*="Verzekering"] {
    /* Deze worden via JavaScript verborgen met insurance-processed class */
}

/* Verberg labels die "Voeg verzekering toe" bevatten */
label:contains("Voeg verzekering toe"),
.form-control__inline-label:contains("Voeg verzekering toe") {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Prevent any accidental hiding of main elements */
.ecwid, .ecwid-productBrowser, .product-details {
    display: block !important;
}

/* Only hide elements that are specifically marked as processed - NEVER html or body */
[class*="insurance-processed"]:not(html):not(body) {
    display: none !important;
}

/* Absolute protection for html and body elements */
html.insurance-processed,
body.insurance-processed {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
}

/* Ensure proper spacing in product details for different scenarios */
.product-details__general-info .custom-insurance-container,
.product-details .custom-insurance-container,
.details-product-purchase .custom-insurance-container,
.ecwid-productBrowser .custom-insurance-container {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

/* Specific positioning within Ecwid containers */
.ecwid .custom-insurance-container {
    font-family: inherit !important;
    z-index: 1 !important;
}

/* Prevent overflow issues */
.ecwid .custom-insurance-container,
.ecwid-productBrowser .custom-insurance-container {
    overflow: visible !important;
    position: relative !important;
}

/* Fix for when container is added to body (fallback) */
body > .custom-insurance-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    background: white !important;
    border: 2px solid #ff671d !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    max-width: 500px !important;
}

/* Close button for body fallback */
body > .custom-insurance-container::before {
    content: "×" !important;
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #999 !important;
}

/* Integration with Ecwid product page */
.ecwid .custom-insurance-container {
    font-family: inherit !important;
}

.ecwid .custom-insurance-container * {
    box-sizing: border-box !important;
}