/*
 * ATTPPF Universal Field Name Hiding CSS
 * Hides customization field names (like "Placeholder") across all themes and locations
 * Targets: Cart, Order History, PDF, Checkout, Email Templates
 * Version: 1.0.0 - Phase 1 Implementation
 */

/* ========================================
   UNIVERSAL CUSTOMIZATION FIELD NAME HIDING
   ======================================== */

/* CART PAGE: Hide "Placeholder" text in paragraphs */
p.mb-2.text-dark,
.product-customization-modal__line p.mb-2.text-dark,
.customization p.mb-2.text-dark {
    display: none !important;
}

/* ORDER HISTORY: Hide .label div containing field names like "Type your text here" */
.product-customization-modal__line .label,
.product-customization-modal__line div.label {
    display: none !important;
}

/* Generic field name hiding */
.customization-text-label,
.customization-field-name,
/*[class*="customization"] p:first-of-type {
    display: none !important;
}

/* IMPORTANT: Always show PDF links and icons - override any hiding */
p[class*="pdf_link"],
.pdf_link,
[class*="pdf_link"] {
    display: block !important;
    visibility: visible !important;
}

/* Always show PDF icons and links */
a[href*="pdf"],
a[href*="PDF"],
a[href*=".pdf"],
.material-icons.picture_as_pdf,
i.material-icons[style*="dc3545"] {
    display: inline !important;
    visibility: visible !important;
}

/* Always show PDF link text */
a[href*="modules/attppf/docs/"] {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* DROPDOWN SPECIFIC: Always show PDF links in dropdown containers */
.custom-dropdown-container p[class*="pdf_link"],
.color-group-container p[class*="pdf_link"],
.attribute-group p[class*="pdf_link"],
div[class*="group"] p[class*="pdf_link"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure PDF links in any form container are visible */
.form-group p[class*="pdf_link"],
.mb-3 p[class*="pdf_link"],
.col-12 p[class*="pdf_link"] {
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   CART PAGE SPECIFIC
   ======================================== */

/* Cart detailed product customizations - additional fallbacks */
.cart-detailed-product .product-customization-line p.mb-2.text-dark,
.cart-detailed-product .customization p.mb-2.text-dark,
.cart-summary .product-customization p.mb-2.text-dark,
.cart-item .customization p.mb-2.text-dark {
    display: none !important;
}

/* Shopping cart modal customizations */
.cart-products-list .product-customization p.mb-2.text-dark,
.cart-product .customization-data p.mb-2.text-dark {
    display: none !important;
}

/* ========================================
   ORDER HISTORY / ACCOUNT PAGES
   ======================================== */

/* Order detail page customizations - target .label divs */
.order-detail-table .product-customization-modal__line .label,
.order-products .product-customization-modal__line .label,
.order-line-customization .label,
.account-order .customization .label {
    display: none !important;
}

/* Order confirmation customizations */
.order-confirmation-table .customization .label,
.order-items .product-customization .label {
    display: none !important;
}

/* Customer account order history */
.orders-table .customization .label,
.order-history .product-customization .label {
    display: none !important;
}

/* ========================================
   CHECKOUT PAGE SPECIFIC
   ======================================== */

/* Checkout summary customizations */
.checkout-summary .product-customization p:first-child,
.checkout-cart .customization p:first-child,
.checkout-products .customization-data p:first-child {
    display: none !important;
}

/* ========================================
   PDF / INVOICE SPECIFIC
   ======================================== */

/* PDF customization displays */
.invoice-customization p:first-child,
.pdf-customization p:first-child,
.document-customization p:first-child {
    display: none !important;
}

/* ========================================
   EMAIL TEMPLATE SPECIFIC
   ======================================== */

/* Email customization displays */
.email-customization p:first-child,
.mail-customization p:first-child {
    display: none !important;
}

/* ========================================
   GENERIC FALLBACKS FOR ANY THEME
   ======================================== */

/* Generic selectors that should work with most themes */
.customization p.text-dark:first-child,
.customization-content p:first-child,
.product-line-customization p:first-child {
    display: none !important;
}

/* Target elements containing "Placeholder" text specifically using CSS selectors */
/* Note: CSS :contains() is not supported, so we use JavaScript for this */

/* SPECIFIC FIX: Hide empty paragraphs that typically contain field names */
.product-customization-modal__line p.mb-2.text-dark:empty + p .mb-0,
.customization p:empty + p,
.customization-line p:empty + p {
    display: none !important;
}

/* ADMIN ORDER VIEW: Specific targeting for field names */
.admin-order .customization p:first-child,
.order-admin .customization-field-label {
    display: none !important;
}

/* ========================================
   PRESTASHOP 9 SPECIFIC CLASSES
   ======================================== */

/* PrestaShop 9 modal and cart specific */
.product-customization-modal__line .mb-2.text-dark:empty,
.product-customization-modal__line p.mb-2.text-dark:first-child {
    display: none !important;
}

/* ========================================
   RESPONSIVE CONSIDERATIONS
   ======================================== */

/* Ensure hiding works on mobile devices */
@media (max-width: 768px) {
    .mobile-cart .customization p:first-child,
    .mobile-order .customization p:first-child {
        display: none !important;
    }
}
/* Hide the placeholder label */
.product-customization-modal__line .label {
    display: none !important;
  }

  /* Force values to break into separate lines */
  .product-customization-modal__line .value {
    white-space: pre-line; /* turns \n into <br> */
  }

/* ========================================
   DEBUG HELPER (Remove in production)
   ======================================== */

/* Uncomment for debugging - highlights customization containers */
/*
.customization,
[class*="customization"] {
    border: 1px dashed red !important;
}
*/

/* ========================================
   CART MODAL NATIVE DISPLAY STYLING
   Clean, compact modal with structured customization list
   ======================================== */

/* Make ONLY customization modals smaller and more compact */
.modal.attppf-customization-modal .modal-dialog,
.modal-dialog.attppf-customization-modal {
    max-width: 500px !important;
    margin: 30px auto !important;
}

/* Modal body styling - only for customization modals */
.modal.attppf-customization-modal .modal-body {
    padding: 20px;
    line-height: 1.5;
    max-height: 500px;
    overflow-y: auto;
}

/* Hide original plain text paragraph - only in customization modals */
.modal.attppf-customization-modal .modal-body p.mb-0 {
    display: none !important;
}

/* Formatted customization list container */
.modal.attppf-customization-modal .modal-body .formatted-customization-list {
    margin: 0;
    padding: 0;
}

/* Individual customization items (created by JS) - HORIZONTAL LAYOUT */
.modal.attppf-customization-modal .modal-body .customization-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    min-height: auto;
}

.modal.attppf-customization-modal .modal-body .customization-item:last-child {
    border-bottom: none;
    margin-bottom: 15px;
}

/* Customization text (left side, flexible width) */
.modal.attppf-customization-modal .modal-body .customization-item .text {
    display: block;
    flex: 1;
    margin-right: 15px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    word-wrap: break-word;
    font-weight: 500;
}

/* Price (right side, fixed width) */
.modal.attppf-customization-modal .modal-body .customization-item .price {
    display: block;
    flex-shrink: 0;
    font-weight: 600;
    color: #28a745;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}

/* Hide ONLY truly empty prices (no content at all) */
.modal.attppf-customization-modal .modal-body .customization-item .price:empty {
    display: none;
}

/* Ensure prices with content are visible */
.modal.attppf-customization-modal .modal-body .customization-item .price:not(:empty) {
    display: block !important;
    visibility: visible !important;
}

/* Subtotal styling */
.modal.attppf-customization-modal .modal-body .customization-subtotal {
    display: flex;
    justify-content: space-between; /* Text on left, price on right */
    align-items: center;
    padding: 12px 0 8px 0;
    margin-top: 10px;
    border-top: 2px solid #ddd;
    font-weight: 600;
    font-size: 15px;
    background: #f8f9fa;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.modal.attppf-customization-modal .modal-body .customization-subtotal .subtotal-label {
    font-weight: 600;
    color: #333;
    display: inline-block !important;
    visibility: visible !important;
}

.modal.attppf-customization-modal .modal-body .customization-subtotal .amount {
    font-weight: 600;
    color: #28a745;
    font-size: 16px;
}

/* Modal header styling - only for customization modals */
.modal.attppf-customization-modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
}

.modal.attppf-customization-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
}

/* ORDER HISTORY MODAL STYLING */
/* Style the order history customization modals with similar formatting */
.modal .product-customization-modal__line .value {
    font-family: inherit;
    line-height: 1.6;
    white-space: pre-line; /* Preserve line breaks */
}

/* Apply similar formatting to order history modals */
.modal .product-customization-modal__line {
    margin-bottom: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.modal .product-customization-modal__line:last-child {
    border-bottom: none;
}

/* ORDER HISTORY MODAL - FORMATTED CUSTOMIZATION LIST STYLING */
/* Apply the same styling as cart modals to order history modals */
.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.4;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-item:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-item .text {
    display: block;
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-right: 15px;
    font-weight: 500;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-item .price {
    display: block;
    flex-shrink: 0;
    font-weight: 600;
    color: #28a745;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-item .price:empty {
    display: none;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 8px 0;
    margin-top: 10px;
    border-top: 2px solid #ddd;
    font-weight: 600;
    font-size: 15px;
    background: #f8f9fa;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-subtotal .subtotal-label {
    font-weight: 600;
    color: #333;
    display: inline-block !important;
    visibility: visible !important;
}

.modal.attppf-customization-modal .product-customization-modal__line .formatted-customization-list .customization-subtotal .amount {
    font-weight: 600;
    color: #28a745;
    font-size: 16px;
}

/* ========================================
   ENHANCED MODE TEMPLATE STYLING
   For customization_modal_enhanced.tpl
   ======================================== */

/* HIDE ONLY NATIVE CUSTOMIZATION MODAL LINES in ORDER HISTORY modals specifically */
.modal[id*="order"] .product-customization-modal__line.mb-3:not(.attppf-customization-display),
.modal[class*="order"] .product-customization-modal__line.mb-3:not(.attppf-customization-display) {
    display: none !important;
}

/* Hide unformatted text content ONLY in ORDER HISTORY modals */
.modal[id*="order"] .product-customization-modal__line .value:not(.formatted-customization-list),
.modal[class*="order"] .product-customization-modal__line .value:not(.formatted-customization-list) {
    display: none !important;
}

/* Hide messy customization lines - JavaScript will add this class */
.attppf-messy-line {
    display: none !important;
}

/* Keep only the first clean customization line visible */
.product-customization-modal__line[data-attppf-processed="true"]:not(:first-of-type) .customization-item .text {
    /* This will be handled by JavaScript for better browser compatibility */
}


/* ENSURE OUR ATTPPF CUSTOMIZATION DISPLAY is always visible */
.attppf-customization-display.product-customization-modal__line.mb-3,
.attppf-customization-display {
    display: block !important;
    background: #f8f9fa;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.attppf-customization-title {
    color: #343a40;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
}

.attppf-selections-container {
    margin-bottom: 12px;
}

.attppf-selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.attppf-selection-row:last-child {
    border-bottom: none;
}

.attppf-selection-text {
    display: block;
    flex: 1;
    font-size: 14px;
    color: #495057;
    font-weight: 500;
    margin-right: 15px;
    line-height: 1.4;
}

.attppf-selection-price {
    display: block !important;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #28a745 !important;
    text-align: right;
    white-space: nowrap;
    visibility: visible !important;
}

/* Hide empty prices */
.attppf-selection-price:empty {
    display: none !important;
}

.attppf-selection-price em {
    color: #6c757d;
    font-style: italic;
    font-weight: normal;
}

.attppf-subtotal-section {
    border-top: 2px solid #ddd;
    padding-top: 12px;
    margin-top: 12px;
    display: block !important;
    visibility: visible !important;
}

.attppf-subtotal-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.attppf-subtotal-label {
    font-size: 15px;
    font-weight: 600;
    color: #343a40;
}

.attppf-subtotal-price {
    font-size: 16px;
    font-weight: 600;
    color: #28a745 !important;
}

/* Enhanced Mode Responsive design */
@media (max-width: 768px) {
    .attppf-selection-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .attppf-selection-price {
        margin-left: 0;
        margin-top: 4px;
        align-self: flex-end;
    }
}