/**
 * MP Quote Request - Front-End Styles
 *
 * @author    Maxime Potier <contact@maximepotier.fr>
 * @copyright 2025 Maxime Potier
 */

/* ========================================
   Quote Button Layout (Inline with Add to Cart)
   ======================================== */

/* Desktop: Elements in a row */
.mp-ppc-product .product-add-to-cart.js-product-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

/* Quote button: First position */
.mp-ppc-product .product-add-to-cart .mp-quote-cta-container {
    order: -1 !important;
    width: auto !important;
    margin: 0 !important;
    flex: 1;
}

/* Quantity selector */
.mp-ppc-product .product-add-to-cart .product-quantity {
    order: 0 !important;
    flex: 0 0 auto;
}

/* Minimal quantity message - hide or move to next line */
.mp-ppc-product .product-add-to-cart .product-minimal-quantity {
    order: 3 !important;
    width: 100%;
}

.mp-quote-cta-container {
    width: auto;
}

/* Desktop + Mobile: Remove margin-right on .add */
body .main-product-details .product-add-to-cart .inline-style .add,
.mp-ppc-product .main-product-details .product-add-to-cart .inline-style .add,
.main-product-details .product-add-to-cart .inline-style .add {
    margin-right: 0 !important;
}

/* Quote CTA Button - design system accent button (see
   product-quote-cta.tpl: "lfdp-btn lfdp-btn-accent" classes already
   provide color/font/padding/radius/hover/focus, flat - no gradient/
   shadow/uppercase/letter-spacing/lift-on-hover, "le kit privilégie les
   aplats" per lfdp-tokens.css). Only the full-width layout and icon size
   specific to this CTA's position (top of the add-to-cart row) are kept
   here. MP fix (2026-08-05, client request "mp-quote-btn doit avoir le
   bon style design system"). */
.mp-quote-btn {
    width: 100%;
}

/* Desktop: keep the label on a single line (client request 2026-07-23) -
   .mp-quote-btn's flex "width: 100%" combined with the parent's
   flex-wrap could still let the <span> text wrap onto 2 lines if the
   container got narrow; force nowrap + let the button shrink content
   instead of the text wrapping. Mobile keeps its own "allow wrap" rule
   further below (font-size var(--lfdp-fs-sm), white-space: normal). */
@media (min-width: 768px) {
    .mp-quote-btn span {
        white-space: nowrap;
    }
}

.mp-quote-btn .material-icons {
    font-size: 20px;
}

/* Add to Cart Button - design system blue (was a hardcoded, unrelated
   teal #00a3e2 - MP fix 2026-08-05, client report "la couleur du bouton
   ajouter au panier ne correspond pas au design system"). PPC products
   still allow adding to cart at the (non-recommended) selling price
   alongside the quote request - this is a neutral/secondary action next
   to the accent-red quote CTA, hence primary blue, not accent red. */
.mp-ppc-product .product-add-to-cart .add-to-cart,
.mp-ppc-product .add-to-cart[data-button-action="add-to-cart"],
.mp-ppc-product button[data-button-action="add-to-cart"] {
    background: var(--lfdp-color-primary) !important;
    border-color: var(--lfdp-color-primary) !important;
    color: #fff !important;
}

.mp-ppc-product .product-add-to-cart .add-to-cart:hover,
.mp-ppc-product .add-to-cart[data-button-action="add-to-cart"]:hover,
.mp-ppc-product button[data-button-action="add-to-cart"]:hover {
    background: var(--lfdp-color-primary-hover) !important;
    border-color: var(--lfdp-color-primary-hover) !important;
}

/* ========================================
   Reassurance Banner
   ======================================== */

.mp-quote-reassurance {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-left: 4px solid #22c55e;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
}

.mp-quote-reassurance-icon {
    flex-shrink: 0;
}

.mp-quote-reassurance-icon .material-icons {
    font-size: 28px;
    color: #22c55e;
}

.mp-quote-reassurance-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #166534;
}

/* ========================================
   Quote Modal - design system (see .cursor/rules/lfdp.mdc,
   lfdp-tokens.css, lfdp-components.css). MP fix (2026-08-05, client
   request "la modale #mpQuoteModal doit avoir le bon style design
   system") - own module CSS, edited directly rather than bridged from
   lfdp-components.css (unlike vendor-module modals, e.g.
   mp-callback-modal__dialog, which cannot be edited at the source).
   ======================================== */

#mpQuoteModal .modal-dialog {
    max-width: 550px;
}

#mpQuoteModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* "lfdp-dialog" (product-quote-cta.tpl) - surface/radius/font identity,
   flat single-tone header instead of the previous teal gradient ("le kit
   privilégie les aplats", lfdp-tokens.css). */
#mpQuoteModal .lfdp-dialog {
    background-color: var(--lfdp-color-surface);
    border-radius: var(--lfdp-radius-lg);
    font-family: var(--lfdp-font-family);
}

#mpQuoteModal .mpqr-modal-header {
    background: var(--lfdp-color-primary);
    color: #fff;
    border-bottom: none;
    border-radius: var(--lfdp-radius-lg) var(--lfdp-radius-lg) 0 0;
}

#mpQuoteModal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--lfdp-fs-lg);
    font-weight: var(--lfdp-fw-bold);
    color: #fff;
}

#mpQuoteModal .mpqr-modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

#mpQuoteModal .mpqr-modal-header .close:hover {
    opacity: 1;
}

/* Modal Body Layout */
#mpQuoteModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Product Recap */
.mp-quote-product-recap {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--lfdp-color-surface-alt);
    border-radius: var(--lfdp-radius-lg);
    padding: 15px;
    margin-bottom: 20px;
}

.mp-quote-product-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--lfdp-radius-sm);
    border: 1px solid var(--lfdp-color-border-light);
}

.mp-quote-product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--lfdp-font-family);
}

.mp-quote-product-name {
    font-size: var(--lfdp-fs-base);
    font-weight: var(--lfdp-fw-medium);
    color: var(--lfdp-color-text);
    line-height: 1.3;
}

.mp-quote-product-ref {
    font-size: var(--lfdp-fs-xs);
    color: var(--lfdp-color-text-secondary);
}

/* .js-mp-ppc-display (product info recap price) - same identity as the
   product card's PPC price (see ".lfdp-ppc-price",
   lfdp-components.css): accent red, bold, this IS the recommended price
   the customer is requesting a quote for. */
.mp-quote-product-price {
    font-size: var(--lfdp-fs-md);
    font-weight: var(--lfdp-fw-bold);
    color: var(--lfdp-color-accent);
}

/* Form Styles - mirrors ".lfdp-form-label"/".lfdp-input" (lfdp-components.css) */
.mp-quote-form .form-group {
    margin-bottom: 15px;
}

.mp-quote-form label {
    display: block;
    font-family: var(--lfdp-font-family);
    font-size: var(--lfdp-fs-xs);
    font-weight: var(--lfdp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--lfdp-color-text-secondary);
    margin-bottom: var(--lfdp-space-1);
}

.mp-quote-form label .required {
    color: var(--lfdp-color-error);
}

.mp-quote-form .form-control {
    width: 100%;
    font-family: var(--lfdp-font-family);
    font-size: var(--lfdp-fs-md);
    color: var(--lfdp-color-text);
    background: var(--lfdp-color-surface);
    border: 1px solid var(--lfdp-color-border);
    border-radius: var(--lfdp-radius-md);
    padding: 11px 15px;
    transition: border-color var(--lfdp-transition);
}

.mp-quote-form .form-control:focus {
    border-color: var(--lfdp-color-primary);
    box-shadow: var(--lfdp-focus-ring);
    outline: none;
}

.mp-quote-form .form-check {
    padding-left: 0;
}

.mp-quote-form .form-check-input {
    margin-right: 8px;
}

.mp-quote-form .form-check-label {
    font-size: var(--lfdp-fs-xs);
    font-weight: var(--lfdp-fw-regular);
    color: var(--lfdp-color-text-secondary);
    cursor: pointer;
}

/* Alerts - mirrors ".lfdp-alert-error"/".lfdp-alert-success" (lfdp-components.css) */
.mp-quote-alert {
    font-family: var(--lfdp-font-family);
    padding: 15px 19px;
    border-radius: var(--lfdp-radius-md);
    border-left: 4px solid transparent;
    font-size: var(--lfdp-fs-base);
    margin-top: 15px;
    margin-bottom: 15px;
}

.mp-quote-alert-error {
    background: var(--lfdp-color-error-bg);
    border-color: var(--lfdp-color-error);
    color: #8A1C1C;
}

/* Invalid field styling */
.mp-quote-form .form-control.is-invalid,
.mp-quote-form .form-check-input.is-invalid {
    border-color: var(--lfdp-color-error) !important;
    box-shadow: 0 0 0 2px rgba(192, 14, 28, 0.2) !important;
}

.mp-quote-form .form-check-input.is-invalid + .form-check-label {
    color: var(--lfdp-color-error);
}

/* reCAPTCHA styling */
.mp-quote-recaptcha {
    margin-bottom: 15px;
}

.mp-quote-recaptcha.is-invalid {
    padding: 5px;
    border: 2px solid var(--lfdp-color-error);
    border-radius: var(--lfdp-radius-md);
    background: var(--lfdp-color-error-bg);
}

/* GDPR checkbox alignment */
.mp-quote-gdpr-group {
    margin-top: 15px;
    margin-bottom: 10px;
}

.mp-quote-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

.mp-quote-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    margin-right: 10px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--lfdp-color-primary);
}

.mp-quote-checkbox-text {
    font-family: var(--lfdp-font-family);
    font-size: var(--lfdp-fs-xs);
    line-height: 1.5;
    color: var(--lfdp-color-text);
}

.mp-quote-checkbox.is-invalid {
    outline: 2px solid var(--lfdp-color-error);
    outline-offset: 1px;
}

.mp-quote-checkbox.is-invalid + .mp-quote-checkbox-text {
    color: var(--lfdp-color-error);
}

.mp-quote-alert-success {
    background: var(--lfdp-color-success-bg);
    border-color: var(--lfdp-color-success);
    color: #1E5C25;
}

/* Modal Footer */
#mpQuoteModal .modal-footer {
    border-top: 1px solid var(--lfdp-color-border-light);
    padding: 15px 20px;
}

/* Footer buttons - "lfdp-btn-outline"/"lfdp-btn-primary" (product-quote-cta.tpl)
   already own color/border/hover/focus; only layout not covered by the
   design system (icon gap, disabled/loading states) is kept here. MP fix
   (2026-08-05, design system pass): dropped the previous gray
   ".btn-secondary" / teal gradient submit button in favor of these classes -
   the submit button is blue (lfdp-btn-primary), not accent red, because
   this is a lead-form submission (like the "on vous rappelle" callback
   modal), not a purchase - see lfdp.mdc. */
.mp-quote-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.mp-quote-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.mp-quote-submit-btn .material-icons {
    font-size: 18px;
}

/* Loading State */
.mp-quote-submit-btn.is-loading {
    pointer-events: none;
}

.mp-quote-submit-btn.is-loading span {
    opacity: 0;
}

.mp-quote-submit-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mp-spin 0.8s linear infinite;
}

@keyframes mp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Responsive - Mobile
   ======================================== */

@media (max-width: 767px) {
    /* Mobile: Quote button on top, then qty + add-to-cart on same line */
    .mp-ppc-product .product-add-to-cart.js-product-add-to-cart {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Quote button: full width, first row */
    .mp-ppc-product .product-add-to-cart .mp-quote-cta-container {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
        order: -1 !important;
    }

    /* Quantity selector: second row, left side */
    .mp-ppc-product .product-add-to-cart .product-quantity {
        flex: auto !important;
    }

    /* Add to cart container: second row, fills remaining space */
    .mp-ppc-product .product-add-to-cart .add,
    .main-product-details .product-add-to-cart .inline-style .add {
        margin-left: 4% !important;
        margin-right: 0 !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Force parent containers to not overflow */
    .mp-ppc-product .product-information,
    .mp-ppc-product .product-actions {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Quote button - allow wrap on 2 lines. Font-size/padding shrunk via
       tokens (var(--lfdp-fs-sm)/space-2/space-4) instead of hardcoded
       px - text-transform:uppercase dropped (design system buttons are
       sentence case, see .lfdp-btn base rule). */
    .mp-quote-btn {
        font-size: var(--lfdp-fs-sm) !important;
        padding: var(--lfdp-space-2) var(--lfdp-space-4) !important;
        width: 100% !important;
        white-space: normal !important;
    }

    #mpQuoteModal .modal-dialog {
        margin: 10px;
    }

    .mp-quote-product-recap {
        flex-direction: column;
        text-align: center;
    }

    .mp-quote-reassurance {
        flex-direction: column;
        text-align: center;
    }
}