/* FR: Variables de base (surchargées par le CSS dynamique selon l'admin) */
/* EN: Base variables (overridden by dynamic CSS from admin) */
:root {
    --ppqss-btn-bg: #ffffff;
    --ppqss-btn-border: #dddddd;
    --ppqss-btn-hover: #222222;
    --ppqss-btn-icon: #222222;
    --ppqss-qty-bg: #ffffff;
    --ppqss-qty-border: #dddddd;
    --ppqss-qty-text: #111111;
    --ppqss-border-radius: 50%;
    --ppqss-radius-circle: 9999px;
    --ppqss-size-desktop: 40px;
    --ppqss-size-mobile: 36px;
    --ppqss-font-size-desktop: 16px;
    --ppqss-font-size-mobile: 15px;
}

/* FR: Wrapper principal autour du sélecteur − 1 + */
/* EN: Main wrapper around − 1 + selector */
.ppqss-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* FR: Forcer cercles, couleurs et dimensions sur les boutons (override thème/Elementor/WooCommerce) */
/* EN: Force circles, colors and dimensions on buttons (override theme/Elementor/WooCommerce) */
.quantity.ppqss-quantity-wrapper .ppqss-qty-btn {
    box-sizing: border-box;
    width: var(--ppqss-size-desktop) !important;
    height: var(--ppqss-size-desktop) !important;
    min-width: var(--ppqss-size-desktop) !important;
    border-radius: var(--ppqss-border-radius) !important;
    padding: 0 !important;
    margin-inline-start: 0 !important;
    background-color: var(--ppqss-btn-bg) !important;
    border: 1px solid var(--ppqss-btn-border) !important;
    color: var(--ppqss-btn-icon) !important;
}

/* FR: Override complet Elementor/WooCommerce : marges et couleurs (spécificité > thème).
   EN: Full Elementor/WooCommerce override: margins and colors (specificity > theme). */
.woocommerce form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn {
    margin-inline-start: 0 !important;
    background-color: var(--ppqss-btn-bg) !important;
    border: 1px solid var(--ppqss-btn-border) !important;
    color: var(--ppqss-btn-icon) !important;
}

/* FR: Override Elementor Pro --button-spacing + couleurs (spécificité maximale WooCommerce).
   EN: Override Elementor Pro --button-spacing + colors (maximum WooCommerce specificity). */
body .woocommerce form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn.ppqss-qty-minus,
body .woocommerce form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn.ppqss-qty-plus {
    margin-inline-start: 0 !important;
    background-color: var(--ppqss-btn-bg) !important;
    border: 1px solid var(--ppqss-btn-border) !important;
    color: var(--ppqss-btn-icon) !important;
}

/* FR: Override widget Elementor Add to Cart (spécificité maximale).
   EN: Override inside Elementor Add to Cart widget (maximum specificity). */
.elementor-widget-woocommerce-product-add-to-cart form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn.ppqss-qty-minus,
.elementor-widget-woocommerce-product-add-to-cart form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn.ppqss-qty-plus {
    margin-inline-start: 0 !important;
    background-color: var(--ppqss-btn-bg) !important;
    border: 1px solid var(--ppqss-btn-border) !important;
    color: var(--ppqss-btn-icon) !important;
}

/* FR: Boutons − et +. --ppqss-btn-bg / --ppqss-btn-color surchargés par JS si « couleurs Add to cart ».
   EN: − and + buttons. --ppqss-btn-bg / --ppqss-btn-color overridden by JS when using Add to cart colors. */
.ppqss-qty-btn {
    width: var(--ppqss-size-desktop);
    height: var(--ppqss-size-desktop);
    border-radius: var(--ppqss-border-radius);
    border: 1px solid var(--ppqss-btn-border);
    background-color: var(--ppqss-btn-bg);
    color: var(--ppqss-btn-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ppqss-font-size-desktop);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    margin-inline-start: 0 !important;
    margin: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, filter 0.2s ease;
}

/* FR: État hover des boutons (couleurs admin, haute spécificité).
   EN: Button hover state (admin colors, high specificity). */
.quantity.ppqss-quantity-wrapper .ppqss-qty-btn:hover,
.woocommerce form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn:hover,
.elementor-widget-woocommerce-product-add-to-cart form.cart .quantity.ppqss-quantity-wrapper .ppqss-qty-btn:hover {
    background-color: var(--ppqss-btn-hover) !important;
    color: #ffffff !important;
    border-color: var(--ppqss-btn-hover) !important;
}

/* FR: Hover quand couleurs « Add to cart » : assombrissement du fond via brightness.
   EN: Hover when using Add to cart colors: darken background via brightness filter.
   FR: Spécificité > hover normal pour garantir l'override.
   EN: Specificity > normal hover to guarantee override. */
.quantity.ppqss-quantity-wrapper.ppqss-use-add-to-cart-colors .ppqss-qty-btn:hover,
.woocommerce form.cart .quantity.ppqss-quantity-wrapper.ppqss-use-add-to-cart-colors .ppqss-qty-btn:hover,
.elementor-widget-woocommerce-product-add-to-cart form.cart .quantity.ppqss-quantity-wrapper.ppqss-use-add-to-cart-colors .ppqss-qty-btn:hover {
    filter: brightness(0.85) !important;
    background-color: var(--ppqss-btn-bg) !important;
    color: var(--ppqss-btn-icon) !important;
    border-color: var(--ppqss-btn-border) !important;
}

/* FR: État actif (clic) */
/* EN: Active (pressed) state */
.ppqss-qty-btn:active {
    transform: scale(0.95);
}

/* FR: État disabled */
/* EN: Disabled state */
.ppqss-qty-btn[disabled],
.ppqss-qty-btn.ppqss-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* FR: Focus accessible sur les boutons */
/* EN: Accessible focus state on buttons */
.ppqss-qty-btn:focus-visible {
    outline: 2px solid var(--ppqss-btn-hover);
    outline-offset: 2px;
}

/* FR: Input central (quantité) — chiffre seul, non cerclé par défaut */
/* EN: Central input (quantity) — plain number, not circled by default */
.ppqss-qty-input {
    width: 2ch;
    min-width: 2ch;
    box-sizing: content-box;
    border: none;
    background: transparent;
    color: var(--ppqss-qty-text);
    text-align: center;
    font-size: var(--ppqss-font-size-desktop);
    font-weight: 600;
    padding: 0 !important;
    line-height: 1;
    box-shadow: none;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* FR: Suppression des flèches natives sur input[type=number] */
/* EN: Remove native spinners on input[type=number] */
.ppqss-qty-input[type=number]::-webkit-inner-spin-button,
.ppqss-qty-input[type=number]::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.ppqss-qty-input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* FR: Même chaîne :is() qu’Elementor Pro + form.cart — padding uniquement (Hello reset + conflits logiques).
   EN: Same :is() as Elementor Pro + form.cart — padding only. */
:is(.elementor-widget-woocommerce-product-add-to-cart, .woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart, .elementor-widget-wc-add-to-cart, .woocommerce div.product .elementor-widget-wc-add-to-cart)
form.cart
.quantity.ppqss-quantity-wrapper
input.qty.ppqss-qty-input[type="number"] {
    padding: 0 !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

/* FR: Focus de l'input (contour discret) */
/* EN: Input focus (subtle outline) */
.ppqss-qty-input:focus-visible {
    outline: 1px solid var(--ppqss-qty-border);
    outline-offset: 2px;
}

/* FR: Alignement avec le wrapper WooCommerce .quantity */
/* EN: Align with WooCommerce .quantity wrapper */
.quantity.ppqss-quantity-wrapper {
    vertical-align: middle;
}

/* FR: Responsif mobile */
/* EN: Mobile responsive */
@media (max-width: 480px) {
    .quantity.ppqss-quantity-wrapper .ppqss-qty-btn {
        width: var(--ppqss-size-mobile) !important;
        height: var(--ppqss-size-mobile) !important;
        min-width: var(--ppqss-size-mobile) !important;
    }

    .ppqss-qty-btn {
        width: var(--ppqss-size-mobile);
        height: var(--ppqss-size-mobile);
        font-size: var(--ppqss-font-size-mobile);
    }

    .ppqss-qty-input {
        font-size: var(--ppqss-font-size-mobile);
    }
}