/**
 * Popup-specific fixes for WooCommerce Certificate Customizer
 * These styles ensure proper display of options in popup mode
 */

/* Force container to block display */
.wcc-popup-mode .wcc-options-prices,
#wcc-popup .wcc-options-prices,
#wcc-popup-content .wcc-options-prices {
    display: block !important;
    width: 100% !important;
    font-size: 0 !important; /* Remove whitespace between inline-block elements */
    text-align: left !important;
}

/* Force 2 items per line with inline-block */
.wcc-popup-mode .wcc-option-price-item,
#wcc-popup .wcc-option-price-item,
#wcc-popup-content .wcc-option-price-item {
    display: inline-block !important;
    width: calc(50% - 5px) !important;
    font-size: 14px !important; /* Reset font size */
    vertical-align: top !important;
    margin-bottom: 10px !important;
    padding: 15px 8px 8px 8px !important;
    background: #f8f8f8 !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    text-align: center !important;
}

/* Ensure proper spacing between items */
.wcc-popup-mode .wcc-option-price-item:nth-child(odd),
#wcc-popup .wcc-option-price-item:nth-child(odd),
#wcc-popup-content .wcc-option-price-item:nth-child(odd) {
    margin-right: 10px !important;
}

/* Force title to its own line */
.wcc-popup-mode .wcc-options-list-title,
#wcc-popup .wcc-options-list-title,
#wcc-popup-content .wcc-options-list-title {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    font-size: 16px !important; /* Reset from parent's font-size: 0 */
}

/* Ensure images are properly sized */
.wcc-popup-mode .wcc-selected-option-image,
#wcc-popup .wcc-selected-option-image,
#wcc-popup-content .wcc-selected-option-image {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-bottom: 6px !important;
    border: 1px solid #e0e0e0 !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Option label styles */
.wcc-popup-mode .wcc-option-price-label,
#wcc-popup .wcc-option-price-label,
#wcc-popup-content .wcc-option-price-label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    color: #666 !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Option price styles - force color from CSS variable */
.wcc-popup-mode .wcc-option-price-value,
#wcc-popup .wcc-option-price-value,
#wcc-popup-content .wcc-option-price-value,
.wcc-popup-mode .wcc-options-prices .wcc-option-price-value,
#wcc-popup .wcc-options-prices .wcc-option-price-value,
#wcc-popup-content .wcc-options-prices .wcc-option-price-value {
    font-size: 12px !important;
    font-weight: normal !important;
    color: var(--wcc-price-text-color, #d4a574) !important;
    display: block !important;
}

/* Remove button styles */
.wcc-popup-mode .wcc-option-remove,
#wcc-popup .wcc-option-remove,
#wcc-popup-content .wcc-option-remove {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    background: var(--wcc-remove-button-color, #ff0000) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

/* Override any conflicting flex styles */
.wcc-popup-mode .wcc-price-breakdown,
#wcc-popup .wcc-price-breakdown,
#wcc-popup-content .wcc-price-breakdown {
    display: block !important;
}

/* Mobile responsiveness - maintain 2 items per line */
@media (max-width: 480px) {
    .wcc-popup-mode .wcc-option-price-item,
    #wcc-popup .wcc-option-price-item,
    #wcc-popup-content .wcc-option-price-item {
        width: calc(50% - 5px) !important;
        padding: 8px 6px 6px 6px !important;
    }
    
    .wcc-popup-mode .wcc-selected-option-image,
    #wcc-popup .wcc-selected-option-image,
    #wcc-popup-content .wcc-selected-option-image {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Force main product price to use plugin color */
.wcc-popup-mode .product-price .woocommerce-Price-amount,
#wcc-popup .product-price .woocommerce-Price-amount,
#wcc-popup-content .product-price .woocommerce-Price-amount {
    color: var(--wcc-price-text-color, #d4a574) !important;
}

/* Ensure popup content doesn't have conflicting styles */
#wcc-popup-content * {
    box-sizing: border-box !important;
}