/**
 * ATTPPF Hide Native Customization Text Labels
 * =============================================
 *
 * This CSS file hides specific text labels in the native PrestaShop
 * customization section without affecting the functionality.
 *
 * Based on actual HTML structure:
 * - "Product customization" heading (h4)
 * - "Type your text here" card header
 * - "Your customization:" paragraph with h6 class
 *
 * Everything else (textarea, button, character count) remains visible.
 */

/* Hide main "Product customization" heading */
.product-customization > h4,
.js-product-customization > h4 {
    display: none !important;
}

/* Hide "Type your text here" card header - EXACT match from HTML */
.product-customization .product-customization__item .card-header.bg-transparent.fw-bold.border-1,
.js-product-customization .product-customization__item .card-header.bg-transparent.fw-bold.border-1,
.product-customization .card-header.bg-transparent.fw-bold,
.js-product-customization .card-header.bg-transparent.fw-bold {
    display: none !important;
}

/* Hide "Your customization:" paragraph with h6 class - EXACT match from HTML */
.product-customization .product-customization__message.h6,
.js-product-customization .product-customization__message.h6,
.product-customization p.h6.product-customization__message,
.js-product-customization p.h6.product-customization__message {
    display: none !important;
}

/* Alternative selectors for the customization message */
.product-customization .card-body .mt-3 > p.h6:first-child,
.js-product-customization .card-body .mt-3 > p.h6:first-child {
    display: none !important;
}

/* CRITICAL FIX: Make ATTPPF selections display VERTICALLY instead of horizontal line */
.product-customization .card-body .mt-3 > p.mb-0,
.js-product-customization .card-body .mt-3 > p.mb-0,
.product-customization .card-body p.mb-0,
.js-product-customization .card-body p.mb-0,
body .product-customization .card-body .mt-3 > p.mb-0,
body .js-product-customization .card-body .mt-3 > p.mb-0 {
    white-space: pre-line !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
    margin-bottom: 1rem !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
/* white space fix */
.card {
    border:medium none !important;
    background:none;
  }
  .fw-bold.d-block.mb-2 {
    display: none !important;
  }

  .product-customization .card-body .mt-3, .js-product-customization .card-body .mt-3 {
    white-space: nowrap !important;
    margin-top: 1rem !important;
  }
/* Force line breaks at specific text patterns for ATTPPF selections */
.product-customization .card-body p:not(.h6),
.js-product-customization .card-body p:not(.h6) {
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap !important;
    white-space: -o-pre-wrap !important;
    word-wrap: break-word !important;
}

/* Specific targeting for the ATTPPF selection text display */
.product-customization .card-body .mt-3,
.js-product-customization .card-body .mt-3 {
    white-space: pre-line;
}

/* Force vertical display using CSS content manipulation for common ATTPPF patterns */
.product-customization p[style*=""],
.js-product-customization p[style*=""] {
    white-space: pre-line !important;
}

/* Hide card footer with character count and "Optional" text */
.product-customization .product-customization__item .card-footer.bg-transparent.border-1,
.js-product-customization .product-customization__item .card-footer.bg-transparent.border-1,
.product-customization .card-footer.bg-transparent.border-1,
.js-product-customization .card-footer.bg-transparent.border-1 {
    display: none !important;
}

/* Ensure essential elements remain visible and functional */
.product-customization textarea,
.product-customization button,
.product-customization input[type="submit"],
.product-customization .form-control,
.js-product-customization textarea,
.js-product-customization button,
.js-product-customization input[type="submit"],
.js-product-customization .form-control {
    display: block !important;
    visibility: visible !important;
}

/* Adjust card body padding when header is hidden */
.product-customization .product-customization__item .card-body,
.js-product-customization .product-customization__item .card-body {
    padding-top: 1.5rem !important;
}

/* Ensure the card structure remains clean when headers are hidden */
.product-customization .product-customization__item,
.js-product-customization .product-customization__item {
    border: 1px solid #dee2e6 !important;
}

/* Make sure buttons are properly styled and accessible */
.product-customization button[name="submitCustomizedData"],
.js-product-customization button[name="submitCustomizedData"] {
    display: inline-block !important;
    visibility: visible !important;
    margin-top: 1rem !important;
}


