/**
 * Final fix for popup display - ensures 2 items per line
 * This overrides all previous attempts with a clean solution
 */

/* Reset container to simple block layout */
#wcc-popup-content .wcc-options-prices,
#wcc-popup .wcc-options-prices,
.wcc-popup-mode .wcc-options-prices,
body.wcc-popup-active .wcc-options-prices {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important; /* Remove whitespace between inline-block elements */
    line-height: 0 !important;
    text-align: left !important;
    
    /* Disable any flex or grid */
    flex-direction: initial !important;
    flex-wrap: initial !important;
    grid-template-columns: initial !important;
    display: block !important;
}

/* Remove any row wrappers that might have been added */
#wcc-popup-content .wcc-options-row,
#wcc-popup .wcc-options-row {
    display: block !important;
    width: 100% !important;
    table-layout: initial !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* Force items to be inline-block with exact width */
#wcc-popup-content .wcc-option-price-item,
#wcc-popup .wcc-option-price-item,
.wcc-popup-mode .wcc-option-price-item,
body.wcc-popup-active .wcc-option-price-item,
#wcc-popup-content .wcc-options-row .wcc-option-price-item {
    display: inline-block !important;
    width: 48% !important;
    max-width: 48% !important;
    min-width: 48% !important;
    margin: 0 1% 10px 0 !important;
    padding: 10px 8px !important;
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    text-align: center !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: normal !important;
    position: relative !important;
    
    /* Disable table-cell display */
    display: inline-block !important;
    float: none !important;
    flex: none !important;
}

/* Every second item has no right margin */
#wcc-popup-content .wcc-option-price-item:nth-child(even),
#wcc-popup .wcc-option-price-item:nth-child(even),
#wcc-popup-content .wcc-option-price-item:nth-of-type(even),
#wcc-popup .wcc-option-price-item:nth-of-type(even) {
    margin-right: 0 !important;
}

/* If items are inside rows, handle them specially */
#wcc-popup-content .wcc-options-row .wcc-option-price-item:nth-child(2),
#wcc-popup .wcc-options-row .wcc-option-price-item:nth-child(2) {
    margin-right: 0 !important;
}

/* Ensure title takes full width */
#wcc-popup-content .wcc-options-list-title,
#wcc-popup .wcc-options-list-title,
.wcc-popup-mode .wcc-options-list-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    font-size: 16px !important;
    line-height: normal !important;
    clear: both !important;
}

/* Fix for images inside items */
#wcc-popup-content .wcc-selected-option-image,
#wcc-popup .wcc-selected-option-image {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin: 0 auto 6px auto !important;
    display: block !important;
}

/* Fix for text inside items */
#wcc-popup-content .wcc-option-price-label,
#wcc-popup .wcc-option-price-label {
    display: block !important;
    font-size: 11px !important;
    color: #666 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

#wcc-popup-content .wcc-option-price-value,
#wcc-popup .wcc-option-price-value {
    display: block !important;
    font-size: 12px !important;
    color: var(--wcc-price-text-color, #d4a574) !important;
    line-height: 1.2 !important;
}

/* Force remove button to be properly positioned */
#wcc-popup-content .wcc-option-remove,
#wcc-popup .wcc-option-remove {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 14px !important;
    text-align: center !important;
    background: var(--wcc-remove-button-color, #ff0000) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile responsive - keep 2 columns even on small screens */
@media (max-width: 480px) {
    #wcc-popup-content .wcc-option-price-item,
    #wcc-popup .wcc-option-price-item {
        width: 48% !important;
        padding: 8px 4px !important;
    }
    
    #wcc-popup-content .wcc-selected-option-image,
    #wcc-popup .wcc-selected-option-image {
        width: 30px !important;
        height: 30px !important;
    }
    
    #wcc-popup-content .wcc-option-price-label,
    #wcc-popup .wcc-option-price-label {
        font-size: 10px !important;
    }
    
    #wcc-popup-content .wcc-option-price-value,
    #wcc-popup .wcc-option-price-value {
        font-size: 11px !important;
    }
}

/* Extra specificity to override any inline styles */
body #wcc-popup-overlay #wcc-popup #wcc-popup-content .wcc-popup-price-calculator .wcc-price-breakdown .wcc-options-prices .wcc-option-price-item[style*="display: table-cell"] {
    display: inline-block !important;
}

/* Clear any floats after the container */
#wcc-popup-content .wcc-options-prices::after,
#wcc-popup .wcc-options-prices::after {
    content: "";
    display: table;
    clear: both;
}

/**
 * Popup layout for certificate preview - Desktop: side by side, Mobile: stacked
 */
 
/* Desktop layout - fields on left, canvas on right */
@media (min-width: 769px) {
    .wcc-popup-flex-container {
        display: flex !important;
        gap: 30px !important;
        align-items: flex-start !important;
    }
    
    .wcc-popup-fields-column {
        flex: 1 1 60% !important;
        max-width: 60% !important;
    }
    
    .wcc-popup-canvas-column {
        flex: 1 1 40% !important;
        max-width: 40% !important;
        position: sticky !important;
        top: 20px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure canvas wrapper stays within column */
    .wcc-popup-canvas-column h4 {
        margin-top: 0 !important;
    }
    
    .wcc-popup-canvas-column #live-certificate-canvas {
        width: 100% !important;
        height: auto !important;
    }
}

/* Mobile layout - stacked vertically */
@media (max-width: 768px) {
    .wcc-popup-flex-container {
        display: block !important;
    }
    
    .wcc-popup-fields-column,
    .wcc-popup-canvas-column {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .wcc-popup-canvas-column {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
}

/**
 * Gallery styles for popup
 */
.wcc-popup-gallery-container {
    width: 100% !important;
    margin-bottom: 20px !important;
}

.wcc-popup-main-preview {
    cursor: zoom-in !important;
}

.wcc-gallery-thumb {
    position: relative !important;
}

.wcc-gallery-thumb:hover {
    border-color: #d4a574 !important;
    opacity: 0.8 !important;
}

.wcc-gallery-thumb.active {
    border-color: #d4a574 !important;
}

/**
 * Canvas title styling for popup
 */
.wcc-popup-canvas-column h4,
#wcc-popup-content .wcc-canvas-wrapper h4 {
    color: white !important;
    font-weight: bold !important;
    background-color: transparent !important;
    padding: 10px 0 !important;
    margin-bottom: 15px !important;
    font-size: 18px !important;
}

/* Fix canvas spacing and centering */
.wcc-popup-canvas-column {
    padding: 20px !important;
    background: #f5f5f5 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wcc-popup-canvas-column #live-certificate-canvas {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    background: white !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Desktop specific adjustments */
@media (min-width: 769px) {
    /* Fix popup width to allow proper spacing */
    #wcc-popup {
        max-width: 1200px !important; /* Allow more width for proper spacing */
    }
    
    .wcc-popup-flex-container {
        display: flex !important;
        gap: 80px !important; /* Clear gap between columns */
        justify-content: center !important; /* Center the content */
        align-items: flex-start !important;
        padding: 0 40px !important; /* Good padding from edges */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .wcc-popup-fields-column {
        flex: 1 1 auto !important; /* Allow natural sizing */
        max-width: 55% !important; /* Limit to 55% of container */
        min-width: 400px !important; /* Ensure minimum width */
    }
    
    .wcc-popup-canvas-column {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        width: 40% !important; /* Fixed 40% width */
        max-width: 450px !important;
        min-width: 350px !important;
    }
    
    /* Ensure canvas maintains its size */
    .wcc-popup-canvas-column #live-certificate-canvas {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Override the initial desktop settings from lines 184-215 */
@media (min-width: 769px) {
    .wcc-popup-flex-container {
        gap: 80px !important; /* Override the 30px gap */
    }
    
    .wcc-popup-fields-column {
        flex: 1 1 auto !important; /* Override flex: 1 1 60% */
        max-width: 55% !important; /* Override max-width: 60% */
    }
    
    .wcc-popup-canvas-column {
        flex: 0 0 auto !important; /* Override flex: 1 1 40% */
        width: 40% !important;
        max-width: 450px !important; /* Override max-width: 40% */
        margin-left: 0 !important; /* Remove any extra margin */
        position: sticky !important;
        top: 20px !important;
    }
}

/* Mobile - ensure title is visible and canvas fits properly */
@media (max-width: 768px) {
    .wcc-popup-canvas-column h4,
    #wcc-popup-content .wcc-canvas-wrapper h4 {
        color: #333 !important; /* Dark color for mobile for better visibility */
        text-align: center !important;
    }
    
    .wcc-popup-canvas-column {
        background: #f9f9f9 !important;
        border: 1px solid #ddd !important;
        padding: 15px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important; /* No scrolling */
        box-sizing: border-box !important;
    }
    
    /* Canvas scales to fit mobile width while maintaining aspect ratio */
    .wcc-popup-canvas-column #live-certificate-canvas {
        width: 100% !important; /* Full width of container */
        max-width: 100% !important; /* Ensure it doesn't exceed container */
        height: auto !important; /* Maintain aspect ratio */
        display: block !important;
        margin: 0 auto !important;
        object-fit: contain !important; /* Ensure canvas content fits */
    }
    
    /* Ensure proper mobile layout */
    #wcc-popup-content .wcc-live-builder-container,
    #wcc-popup-content .wcc-popup-flex-container {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/**
 * Fix date field alignment in popup certificate step - match other input fields
 */
#wcc-popup-content .wcc-certificate-fields .wcc-field-container input[type="date"],
#wcc-popup .wcc-certificate-fields .wcc-field-container input[type="date"],
.wcc-popup-mode .wcc-certificate-fields .wcc-field-container input[type="date"] {
    display: block !important;
    width: 100% !important; /* Same as text inputs */
    max-width: 100% !important; /* Same as text inputs */
    box-sizing: border-box !important;
    padding: 10px 12px !important; /* Match other inputs */
    min-height: 44px !important; /* Match other inputs */
    line-height: 1.5 !important;
    font-size: 1em !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Ensure all input fields in certificate section have consistent width */
#wcc-popup-content .wcc-certificate-fields .wcc-field-container input[type="text"],
#wcc-popup-content .wcc-certificate-fields .wcc-field-container input[type="email"],
#wcc-popup-content .wcc-certificate-fields .wcc-field-container input[type="date"],
#wcc-popup-content .wcc-certificate-fields .wcc-field-container textarea,
#wcc-popup .wcc-certificate-fields .wcc-field-container input[type="text"],
#wcc-popup .wcc-certificate-fields .wcc-field-container input[type="email"],
#wcc-popup .wcc-certificate-fields .wcc-field-container input[type="date"],
#wcc-popup .wcc-certificate-fields .wcc-field-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Field container styling for consistency */
#wcc-popup-content .wcc-certificate-fields .wcc-field-container,
#wcc-popup .wcc-certificate-fields .wcc-field-container {
    margin-bottom: 20px !important;
}

/* Label styling */
#wcc-popup-content .wcc-certificate-fields .wcc-field-container label,
#wcc-popup .wcc-certificate-fields .wcc-field-container label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

/* Force date input to match text input width - higher specificity */
#wcc-popup-content .wcc-popup-fields-column .wcc-certificate-fields input.wcc-date-input,
#wcc-popup .wcc-popup-fields-column .wcc-certificate-fields input.wcc-date-input,
#wcc-popup-content input#wcc_cert_field_date_de_deces,
#wcc-popup input#wcc_cert_field_date_de_deces,
#wcc-popup-content input[id*="date"][type="date"],
#wcc-popup input[id*="date"][type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important; /* Remove default browser styling */
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Reset any width auto that might be set elsewhere */
body #wcc-popup .wcc-date-input,
body #wcc-popup-content .wcc-date-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Ultimate override for date inputs - using ID and class selectors */
#wcc-popup .wcc-live-builder-fields .wcc-certificate-fields .wcc-field-container:has(input[type="date"]) input,
#wcc-popup-content .wcc-live-builder-fields .wcc-certificate-fields .wcc-field-container:has(input[type="date"]) input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: block !important;
}

/* Mobile specific fix */
@media (max-width: 768px) {
    #wcc-popup input[type="date"],
    #wcc-popup-content input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
        -webkit-appearance: none !important;
    }
}

/**
 * Make option boxes more compact on desktop
 */
/* Desktop - make boxes smaller and more elegant */
@media (min-width: 769px) {
    #wcc-popup .wcc-options-prices,
    #wcc-popup-content .wcc-options-prices {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: inherit !important;
    }
    
    #wcc-popup .wcc-option-price-item,
    #wcc-popup-content .wcc-option-price-item {
        width: auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 10px 8px !important;
    }
    
    /* Slightly bigger images as requested */
    #wcc-popup .wcc-selected-option-image,
    #wcc-popup-content .wcc-selected-option-image {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Tablet and Mobile - 2 items per line */
@media (max-width: 768px) {
    #wcc-popup .wcc-options-prices,
    #wcc-popup-content .wcc-options-prices {
        display: block !important;
        font-size: 0 !important; /* Remove whitespace between inline-block elements */
        text-align: left !important;
    }
    
    #wcc-popup .wcc-option-price-item,
    #wcc-popup-content .wcc-option-price-item {
        display: inline-block !important;
        width: 48% !important;
        margin: 0 2% 10px 0 !important;
        padding: 8px 4px !important;
        vertical-align: top !important;
        font-size: initial !important; /* Reset font size */
        box-sizing: border-box !important;
    }
    
    /* Remove margin from even items */
    #wcc-popup .wcc-option-price-item:nth-child(even),
    #wcc-popup-content .wcc-option-price-item:nth-child(even) {
        margin-right: 0 !important;
    }
}

/* Mobile - keep 2 per row but more compact */
@media (max-width: 480px) {
    #wcc-popup .wcc-options-prices,
    #wcc-popup-content .wcc-options-prices {
        display: block !important;
        font-size: 0 !important; /* Remove whitespace between inline-block elements */
    }
    
    #wcc-popup .wcc-option-price-item,
    #wcc-popup-content .wcc-option-price-item {
        display: inline-block !important;
        width: 48% !important;
        margin: 0 1% 10px 0 !important;
        padding: 8px 4px !important;
        vertical-align: top !important;
        font-size: initial !important; /* Reset font size */
    }
    
    /* Remove margin from even items */
    #wcc-popup .wcc-option-price-item:nth-child(even),
    #wcc-popup-content .wcc-option-price-item:nth-child(even) {
        margin-right: 0 !important;
    }
}

/**
 * Reduce popup padding on mobile for more content space
 */
@media (max-width: 768px) {
    /* Reduce overlay padding */
    #wcc-popup-overlay {
        padding: 0.5rem !important;
    }
    
    /* Reduce popup content padding */
    #wcc-popup-content {
        padding: 1rem !important;
        padding-top: 2rem !important; /* Keep space for close button */
    }
    
    /* Make sections full width on mobile ONLY */
    #wcc-popup .wcc-popup-step-section,
    #wcc-popup-content .wcc-popup-step-section {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border-radius: 0 !important; /* Remove border radius on mobile */
    }
    
    #wcc-popup .wcc-popup-price-calculator,
    #wcc-popup-content .wcc-popup-price-calculator {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        margin-top: 15px !important;
        padding: 15px !important;
        border-radius: 0 !important; /* Remove border radius on mobile */
    }
    
    .wcc-popup-product-info {
        margin-bottom: 1rem \!important;
        padding-bottom: 0.5rem \!important;
    }
    
    /* Reduce step content padding */
    .wcc-steps-content {
        padding: 0 \!important;
    }
    
    /* Reduce gallery container margins */
    .wcc-popup-gallery-container {
        margin-bottom: 15px \!important;
    }
    
    .wcc-popup-main-preview {
        margin-bottom: 8px \!important;
        height: 150px \!important; /* Smaller preview on mobile */
    }
    
    /* Reduce navigation buttons margin */
    .wcc-step-actions {
        margin-top: 15px \!important;
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    #wcc-popup-content {
        padding: 0.75rem !important;
        padding-top: 2rem !important;
    }
    
    /* Even smaller margins but still full width - MOBILE ONLY */
    #wcc-popup .wcc-popup-step-section,
    #wcc-popup-content .wcc-popup-step-section,
    #wcc-popup .wcc-popup-price-calculator,
    #wcc-popup-content .wcc-popup-price-calculator {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding: 12px !important;
    }
}