/**
 * ATTPPF Modal Display Fix - Akira Child Theme
 * Fixes the customization modal display without modifying the module
 */

/* Hide the messy native customization text that shows before ATTPPF formats it */
.customization-modal .product-customization-line .value {
    white-space: pre-line !important;
    line-height: 1.8 !important;
}

/* Ensure ATTPPF formatted display is always visible */
.attppf-customization-display-modal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide empty customization lines that JavaScript might create */
.product-customization-line:has(.value:empty) {
    display: none !important;
}

/* Hide the label column that says "Placeholder" */
.product-customization-line .label[data-attppf-hidden="true"],
.product-customization-line .label[style*="display: none"] {
    display: none !important;
}

/* Make the value column full width when label is hidden */
.product-customization-line:has(.label[data-attppf-hidden="true"]) .value,
.product-customization-line:has(.label[style*="display: none"]) .value {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
}

/* Format the native PrestaShop customization text to display each line separately */
.customization-modal .product-customization-line .value {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* If ATTPPF display is present, hide the native messy text */
.modal-body:has(.attppf-customization-display-modal) .product-customization-line:not(:has(.attppf-customization-display-modal)) {
    display: none !important;
}

/* Ensure modal stays visible and doesn't flash */
.attppf-customization-modal,
.customization-modal.attppf-customization-modal {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Prevent JavaScript from hiding the modal content */
.modal-body .attppf-customization-display-modal,
.modal-body .attppf-modal-items,
.modal-body .attppf-modal-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
}

.modal-body .attppf-modal-item {
    display: flex !important;
}