/* ==========================================================================
   Fire Safety for Life — Product Page Cleanup
   Styles for EPO, quantity pricing table, price total, and cart area
   Add to: Storefront Child Theme
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. EPO SECTION CONTAINERS
   Wrap each EPO group in a clean bordered card
   -------------------------------------------------------------------------- */

.tc-extra-product-options {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Each EPO section (Personalize, Upload, Language) */
.tc-extra-product-options .cpf-section {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.tc-extra-product-options .cpf-section:hover {
    border-color: #ccc;
}


/* --------------------------------------------------------------------------
   2. EPO SECTION HEADINGS
   Clean, compact labels instead of big H3s
   -------------------------------------------------------------------------- */

.tc-extra-product-options h3.tc-epo-label,
.tc-extra-product-options .tm-section-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border: none !important;
}


/* --------------------------------------------------------------------------
   3. EPO RADIO BUTTON OPTIONS
   Card-style selectable rows
   -------------------------------------------------------------------------- */

/* Radio option rows */
.tc-extra-product-options .tmcp-field-wrap {
    margin-bottom: 4px !important;
    padding: 0 !important;
}

.tc-extra-product-options .tmcp-field-wrap-inner {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
}

.tc-extra-product-options .tmcp-field-wrap-inner:hover {
    background: #f8f8f8 !important;
}

/* Selected state */
.tc-extra-product-options .tmcp-field-wrap.tc-active .tmcp-field-wrap-inner {
    background: #fafafa !important;
    border-color: #ddd !important;
}

/* Radio labels - cleaner typography */
.tc-extra-product-options .tm-epo-field-label {
    font-size: 14px !important;
    color: #444 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* EPO price display next to radio options */
.tc-extra-product-options .tc-price-wrap {
    font-size: 13px !important;
    color: #888 !important;
    font-weight: 500 !important;
}

.tc-extra-product-options span.price.tc-price {
    font-size: 13px !important;
    color: #888 !important;
    font-weight: 500 !important;
}

/* Tooltip icons - subtler */
.tc-extra-product-options .tm-tooltip.tc-tooltip {
    color: #bbb !important;
    font-size: 13px !important;
    margin-left: 4px !important;
}

.tc-extra-product-options .tm-tooltip.tc-tooltip:hover {
    color: #888 !important;
}


/* --------------------------------------------------------------------------
   4. EPO TEXT INPUTS & FILE UPLOADS
   Clean form styling for imprint text and file upload fields
   -------------------------------------------------------------------------- */

.tc-extra-product-options .tm-epo-field.tmcp-textfield,
.tc-extra-product-options .tm-epo-field.tmcp-textarea {
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
    transition: border-color 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tc-extra-product-options .tm-epo-field.tmcp-textfield:focus,
.tc-extra-product-options .tm-epo-field.tmcp-textarea:focus {
    border-color: #c0392b !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1) !important;
}

/* EPO element labels (e.g. "Enter Your Custom Imprint Message") */
.tc-extra-product-options .tm-epo-element-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* File upload area */
.tc-extra-product-options .tm-epo-field.tmcp-upload {
    border: 2px dashed #ddd !important;
    border-radius: 8px !important;
    padding: 16px !important;
    background: #fafafa !important;
    transition: border-color 0.2s ease !important;
}

.tc-extra-product-options .tm-epo-field.tmcp-upload:hover {
    border-color: #c0392b !important;
    background: #fff8f7 !important;
}


/* --------------------------------------------------------------------------
   5. ARTWORK CONSULTATION LINK
   Keep it subtle inside the EPO card
   -------------------------------------------------------------------------- */

.tc-extra-product-options .tm-element-description {
    font-size: 13px !important;
    color: #777 !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.tc-extra-product-options .tm-element-description a {
    color: #c0392b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.tc-extra-product-options .tm-element-description a:hover {
    text-decoration: underline !important;
}


/* --------------------------------------------------------------------------
   6. QUANTITY DISCOUNT TABLE (WCDPD)
   Styled tier cards instead of plain table
   -------------------------------------------------------------------------- */

.rp_wcdpd_product_page {
    margin: 4px 0 16px 0 !important;
    padding: 0 !important;
}

/* "Quantity discounts" heading */
.rp_wcdpd_product_page .rp_wcdpd_pricing_table_label,
.rp_wcdpd_product_page > strong,
.rp_wcdpd_product_page > b {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.rp_wcdpd_pricing_table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 6px 0 !important;
    table-layout: fixed !important;
}

.rp_wcdpd_pricing_table th,
.rp_wcdpd_pricing_table td {
    text-align: center !important;
    padding: 10px 6px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    background: #f9f9f9 !important;
    font-size: 13px !important;
}

.rp_wcdpd_pricing_table th {
    font-weight: 600 !important;
    color: #555 !important;
    font-size: 12px !important;
    background: #f4f4f4 !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
}

.rp_wcdpd_pricing_table td {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
}

/* Active tier highlight — requires JS (see product-page-cleanup.js) */
.rp_wcdpd_pricing_table td.fse-active-tier,
.rp_wcdpd_pricing_table th.fse-active-tier {
    background: #fff !important;
    border-color: #c0392b !important;
    color: #c0392b !important;
}


/* --------------------------------------------------------------------------
   7. ADD-TO-CART ROW
   Tighter, cleaner button row
   -------------------------------------------------------------------------- */

.single-product form.cart {
    margin-bottom: 0 !important;
}

.single-product form.cart .quantity {
    margin-right: 8px !important;
}

.single-product form.cart .quantity .qty {
    width: 76px !important;
    height: 50px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}

.single-product form.cart .quantity .qty::-webkit-inner-spin-button,
.single-product form.cart .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.single-product form.cart .quantity .qty:focus {
    border-color: #c0392b !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.1) !important;
}

/* Primary Add to Cart button */
.single-product form.cart button.single_add_to_cart_button:first-of-type {
    background: #c0392b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 32px !important;
    height: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 0.15s ease !important;
    line-height: 50px !important;
}

.single-product form.cart button.single_add_to_cart_button:first-of-type:hover {
    background: #a93226 !important;
}

/* Free Sample button — secondary/outline style */
.single-product form.cart button.single_add_to_cart_button:nth-of-type(2) {
    background: transparent !important;
    color: #c0392b !important;
    border: 2px solid #c0392b !important;
    border-radius: 6px !important;
    padding: 0 24px !important;
    height: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all 0.15s ease !important;
    line-height: 46px !important;
    margin-left: 8px !important;
}

.single-product form.cart button.single_add_to_cart_button:nth-of-type(2):hover {
    background: rgba(192, 57, 43, 0.06) !important;
}


/* --------------------------------------------------------------------------
   8. PRICING SUMMARY BOX (generated by JS)
   Replaces the disconnected Elementor price widget
   -------------------------------------------------------------------------- */

#fse-pricing-summary {
    background: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    margin-top: 12px !important;
}

.fse-ps-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    font-size: 14px !important;
}

.fse-ps-row.fse-ps-hidden {
    display: none !important;
}

.fse-ps-row.fse-ps-muted .fse-ps-label {
    color: #777 !important;
}

.fse-ps-row.fse-ps-muted .fse-ps-value {
    color: #444 !important;
    font-weight: 500 !important;
}

.fse-ps-row.fse-ps-total {
    padding-top: 10px !important;
    margin-top: 6px !important;
    border-top: 1px solid #e0e0e0 !important;
}

.fse-ps-row.fse-ps-total .fse-ps-label {
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 15px !important;
}

.fse-ps-row.fse-ps-total .fse-ps-value {
    font-weight: 700 !important;
    color: #c0392b !important;
    font-size: 18px !important;
}

/* Hide the old Elementor product price widget — the summary box replaces it */
.single-product .elementor-widget-woocommerce-product-price {
    display: none !important;
}


/* --------------------------------------------------------------------------
   8b. PRICE TOTAL DISPLAY (fallback if JS fails)
   Styles the Elementor price widget in case JS doesn't run
   -------------------------------------------------------------------------- */

/* The main price shown by Elementor widget */
.single-product .elementor-widget-woocommerce-product-price {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding: 14px 20px !important;
    background: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
}

.single-product .elementor-widget-woocommerce-product-price p.price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #c0392b !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-variant-numeric: tabular-nums !important;
}

.single-product .elementor-widget-woocommerce-product-price p.price .woocommerce-Price-amount,
.single-product .elementor-widget-woocommerce-product-price p.price .amount {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Add a label before the price */
.single-product .elementor-widget-woocommerce-product-price p.price::before {
    content: "Estimated total" !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #777 !important;
    margin-bottom: 4px !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Reduce Elementor section gap above price widget */
.single-product .elementor-widget-woocommerce-product-add-to-cart {
    margin-bottom: 0 !important;
}

.single-product .elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   9. EPO TOTALS BREAKDOWN (when options are selected)
   -------------------------------------------------------------------------- */

.tc-totals-form {
    margin: 0 !important;
    padding: 0 !important;
}

.tc-epo-totals {
    margin: 0 !important;
    padding: 0 !important;
}

/* Only show padding when totals content is populated */
.tc-epo-totals:has(.tm-final-totals) {
    padding: 12px 0 !important;
}

.tm-custom-price-totals {
    margin: 0 !important;
    padding: 0 !important;
}

/* Collapse the DL when empty */
.tm-custom-price-totals:empty {
    display: none !important;
}

.tm-custom-price-totals dt,
.tm-custom-price-totals dd {
    font-size: 13px !important;
    padding: 4px 0 !important;
    color: #666 !important;
}

.tm-custom-price-totals .amount {
    font-weight: 600 !important;
    color: #333 !important;
}

/* Final total row in EPO totals */
.tm-custom-price-totals .tm-final-totals dt,
.tm-custom-price-totals .tm-final-totals dd {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #c0392b !important;
    padding-top: 8px !important;
    border-top: 1px solid #eee !important;
    margin-top: 4px !important;
}


/* --------------------------------------------------------------------------
   10. REDUCE EXCESS WHITESPACE
   Tighten the overall product page vertical rhythm
   -------------------------------------------------------------------------- */

/* The BR and P tags in the form that add empty space */
.single-product form.cart > br {
    display: none !important;
}

.single-product form.cart > p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reduce space between EPO and the form */
.tc-extra-product-options + .rp_wcdpd_product_page,
.tc-extra-product-options + * + .rp_wcdpd_product_page {
    margin-top: 0 !important;
}

/* Reduce gap between Elementor widget sections */
.single-product .elementor-widget-woocommerce-product-price .elementor-widget-container {
    padding: 0 !important;
}

/* Tighten Elementor inner section wrap padding around price widget */
.single-product .elementor-element-e936208 > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-top: 4px !important;
}

/* Also tighten the add-to-cart section bottom wrap */
.single-product .elementor-element-651d212 > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-bottom: 0 !important;
}

/* ---- "Only for qualified organizations" — tuck under Free Sample button ---- */
.single-product form.cart > p:last-child {
    font-size: 11px !important;
    color: #999 !important;
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}


/* --------------------------------------------------------------------------
   11. GENERAL CLEANUP
   Minor tweaks for overall polish
   -------------------------------------------------------------------------- */

/* Remove any double borders between EPO sections */
.tc-extra-product-options .tm-extra-product-options-fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tc-extra-product-options .tm-extra-product-options-field {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0 0 !important;
}

/* Remove default UL styling from radio lists */
.tc-extra-product-options .tmcp-ul-wrap {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure section inner wraps don't add surprise padding */
.tc-extra-product-options .tc-section-inner-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.tc-extra-product-options .tc-row {
    margin: 0 !important;
}

.tc-extra-product-options .tc-section-fields {
    padding: 0 !important;
}