/* ============================================
   NUTRAGILE - Tunnel de commande (checkout)
   ============================================ */

/* ---- Header checkout ---- */
#checkout #header {
    border-bottom: 1px solid var(--nutragile-cream) !important;
    box-shadow: none !important;
}

#checkout #header-main {
    padding: 11.6px 0 !important;
}

#checkout a {
    color: var(--nutragile-green-bright) !important;
}
#checkout a:hover {
    color: var(--nutragile-green-dark) !important;
}

#checkout #content-wrapper {
    margin-top: 20px !important;
}

#checkout .nutragile-sticky-cart {
    display: none !important;
}

/* ---- Titre "Votre commande" ---- */
#checkout #content-wrapper h1,
#checkout .page-header h1 {
    font-family: var(--nutragile-font) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--nutragile-text-dark) !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* ---- Steps accordion ---- */
#checkout .checkout-step {
    border: 1px solid var(--nutragile-cream) !important;
    border-radius: 8px !important;
    margin-bottom: 9.6px !important;
    box-shadow: none !important;
    background: var(--nutragile-white) !important;
    overflow: hidden !important;
}

/* Step header */
#checkout .checkout-step .step-title {
    font-family: var(--nutragile-font) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--nutragile-text-dark) !important;
    text-transform: none !important;
    padding: 16px 19.2px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    border: none !important;
    position: relative !important;
}

/* Numéro du step */
#checkout .checkout-step .step-number {
    background: var(--nutragile-white) !important;
    color: var(--nutragile-text-dark) !important;
    font-family: var(--nutragile-font) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    width: 22.4px !important;
    height: 22.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 9.6px !important;
    flex-shrink: 0 !important;
    border: none !important;
}

#checkout .checkout-step .step-number::after {
    content: '-';
    margin-left: 10.4px;
}

/* Step inactif — numéro gris */
#checkout .checkout-step.-unreachable .step-number,
#checkout .checkout-step.-complete:not(.-current) .step-number {
    background: var(--nutragile-white) !important;
}

/* Chevron */
#checkout .checkout-step .step-title::after {
    content: '';
    position: absolute;
    right: 19.2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--nutragile-text-light);
    border-bottom: 2px solid var(--nutragile-text-light);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

#checkout .checkout-step.-current .step-title::after {
    transform: rotate(-135deg);
}

/* Cacher l'icône material-icons existante */
#checkout .checkout-step .step-title .material-icons {
    display: none !important;
}

/* Step content */
#checkout #opart-devis-payment,
#checkout .checkout-step .content p,
#checkout .checkout-step .content .page-content.page-cms ul
#checkout .checkout-step .content {
    font-family: var(--nutragile-font-link) !important;
    font-size: 11px !important;
    color: var(--nutragile-text-dark) !important;
}

#checkout .checkout-step .content {
    padding: 0 19.2px 19.2px !important;
}

#checkout section.checkout-step small {
    color: var(--nutragile-text-dark) !important;
}

/* Bouton "Continuer" dans les steps */
#checkout .checkout-step .content .btn-primary,
#checkout .checkout-step .content button.continue {
    background: var(--nutragile-green-bright) !important;
    color: var(--nutragile-white) !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: var(--nutragile-font-link) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 9.6px 24px !important;
    text-transform: none !important;
}

#checkout .checkout-step .content .btn-primary:hover,
#checkout .checkout-step .content button.continue:hover {
    background: #007a30 !important;
}

/* Onglets "Commander en tant qu'invité / Se connecter" */
#checkout .nav-tabs .nav-link {
    font-family: var(--nutragile-font) !important;
    font-size: 11px !important;
    color: var(--nutragile-text-dark) !important;
    text-transform: none !important;
    border: 1px solid var(--nutragile-cream) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px !important;
}

#checkout .nav-tabs .nav-link.active {
    background: var(--nutragile-green-bright) !important;
    color: var(--nutragile-white) !important;
    border-color: var(--nutragile-green-bright) !important;
}

/* Formulaire */
#checkout .form-group label,
#checkout .custom-checkbox label {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    color: var(--nutragile-text-dark) !important;
    font-weight: 300 !important;
}

#checkout .custom-checkbox label, #checkout .form-control-comment {
    font-family: var(--nutragile-font-link) !important;
    font-size: 11px !important;
    color: var(--nutragile-text-dark) !important;
    font-weight: 300 !important;
}

#checkout .custom-checkbox label em {
    font-size: 8px !important;
    font-style: normal !important;
}

#checkout .form-control {
    border: 1px solid var(--nutragile-cream) !important;
    border-radius: 6px !important;
    font-family: var(--nutragile-font-link) !important;
    font-size: 11px !important;
    padding: 8px 11.2px !important;
}

#checkout .radio-inline .custom-radio {
    margin-top: -2.4px !important;
}

#checkout .form-control:focus {
    outline: 0.1875rem solid var(--nutragile-green-bright) !important;
    box-shadow: 0 0 0 2px rgba(0, 149, 59, 0.1) !important;
}

/* Checkbox custom vert */
#checkout .custom-radio input[type="radio"]:checked + span {
    background-color: var(--nutragile-green-bright) !important;
    border-color: var(--nutragile-green-bright) !important;
}

#checkout form section .form-informations {
    display: none !important;
}

/* ---- Champ password avec oeil + optionnel ---- */
#checkout .input-group.js-parent-focus {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

#checkout .input-group.js-parent-focus .form-control {
    padding-right: 128px !important;
}

#checkout .input-group-btn .btn[data-action="show-password"]::before {
    content: '';
    display: inline-block;
    width: 17.6px;
    height: 11.2px;
    background-color: var(--nutragile-text-light);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='13'%3E%3Cpath fill='%237d7d7d' d='M11.09 0C6.888 0 3.077 2.28.266 5.982a.74.74 0 000 1.031C3.077 10.72 6.888 13 11.09 13c4.202 0 8.012-2.28 10.824-5.983a.74.74 0 000-1.03C19.102 2.28 15.292 0 11.09 0zm.301 11.077c-2.789.174-5.092-2.105-4.917-4.876.144-2.284 2.011-4.135 4.315-4.278 2.789-.174 5.092 2.105 4.917 4.876-.149 2.28-2.016 4.131-4.315 4.278zm-.139-2.114c-1.503.093-2.744-1.134-2.646-2.624.077-1.231 1.085-2.226 2.326-2.306 1.503-.094 2.745 1.133 2.646 2.623-.081 1.236-1.089 2.231-2.326 2.307z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='13'%3E%3Cpath fill='%237d7d7d' d='M11.09 0C6.888 0 3.077 2.28.266 5.982a.74.74 0 000 1.031C3.077 10.72 6.888 13 11.09 13c4.202 0 8.012-2.28 10.824-5.983a.74.74 0 000-1.03C19.102 2.28 15.292 0 11.09 0zm.301 11.077c-2.789.174-5.092-2.105-4.917-4.876.144-2.284 2.011-4.135 4.315-4.278 2.789-.174 5.092 2.105 4.917 4.876-.149 2.28-2.016 4.131-4.315 4.278zm-.139-2.114c-1.503.093-2.744-1.134-2.646-2.624.077-1.231 1.085-2.226 2.326-2.306 1.503-.094 2.745 1.133 2.646 2.623-.081 1.236-1.089 2.231-2.326 2.307z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#checkout .input-group.js-parent-focus .input-group-btn {
    position: absolute !important;
    right: 16px !important;
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 9.6px !important;
    gap: 6.4px !important;
    z-index: 1000;
}

#checkout div.form-control-comment {
    margin-top: 1.6px;
}

#checkout .checkout-step .content .forgot-password a {
    color: var(--nutragile-green-bright) !important;
}
#checkout .checkout-step .content .forgot-password {
    text-align: right;
    margin-right: 247.2px;
}

#checkout .input-group-btn .btn[data-action="show-password"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#checkout .input-group-btn .btn[data-action="show-password"] svg {
    width: 16px !important;
    height: auto !important;
}

#checkout .input-group-btn .form-control-comment {
    font-family: var(--nutragile-font-link) !important;
    font-size: 10px !important;
    color: var(--nutragile-text-light) !important;
    font-style: italic !important;
    white-space: nowrap !important;
}

#checkout section.checkout-step .address-item .custom-radio {
    margin-top: -4px !important;
    margin-right: 2.4px !important;
}

#checkout section.checkout-step .address-item .h4 {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--nutragile-text-dark) !important;
}

#checkout section.checkout-step .address-item .address {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
    line-height: 21px !important;
    height: 104px !important;
}

#checkout section.checkout-step .address-item.selected {
    border: 2px solid var(--nutragile-green-bright) !important;
}

#checkout section.checkout-step .address-item {
    background: var(--nutragile-light-cream) !important;
    border-radius: 6px !important;
}

#checkout section.checkout-step .address-item .address-footer a {
    font-family: var(--nutragile-font-link) !important;
}

#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
    display: none !important;
}

#checkout section.checkout-step .delivery-options .delivery-option {
    background: var(--nutragile-light-cream) !important;
    border-radius: 6px !important;
}

#checkout section.checkout-step .delivery-options>.row {
    border: none !important;
}

#checkout .custom-radio input[type="radio"]:checked+span {
    top: 0.149rem;
}

#checkout section.checkout-step .carrier-delay, body#checkout section.checkout-step .carrier-name {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--nutragile-text-dark) !important;
    line-height: 21px !important;
}

#checkout section.checkout-step .carrier-delay {
    font-weight: 300 !important;
}

#checkout #gift_message, body#checkout #delivery label {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
}

#checkout #gift_message textarea, body#checkout #delivery textarea {
    min-height: 100px !important;
}

#checkout section.checkout-step .payment-options label {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--nutragile-text-dark) !important;
}

#checkout section.checkout-step .payment-options .payment-option {
    background: var(--nutragile-light-cream) !important;
    border-radius: 6px !important;
    height: 50px;
    padding-top: 15px !important;
    padding-left: 15px !important;
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--nutragile-text-dark) !important;
}

.definition-list dl dd, .definition-list dl dt {
    background: var(--nutragile-light-cream) !important;
    border-radius: 6px !important;
    font-family: var(--nutragile-font-link) !important;
    font-size: 12px !important;
    font-weight: 300 !important;
}

#checkout .condition-label label {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
}

/* ============================================
   SIDEBAR CHECKOUT — identique au panier
   ============================================ */

/* Container */
#checkout #js-checkout-summary {
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background: var(--nutragile-cream) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Libellule */
#checkout #js-checkout-summary::after {
    content: '';
    position: absolute;
    bottom: -96px;
    left: -68px;
    width: 256px;
    height: 256px;
    background-color: var(--nutragile-light-cream);
    -webkit-mask: url(../img/libellule.svg) no-repeat center / contain;
    mask: url(../img/libellule.svg) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

#checkout #js-checkout-summary > * {
    position: relative;
    z-index: 1;
}

/* Card blocks */
#checkout #js-checkout-summary .card-block {
    padding: 16px !important;
    background: transparent !important;
}

/* "7 articles" */
#checkout .cart-summary-products > p:first-child {
    font-family: var(--nutragile-font) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--nutragile-text-dark) !important;
    margin: 0 0 20px !important;
}

/* "afficher les détails" */
#checkout .cart-summary-products .js-show-details {
    font-family: var(--nutragile-font-link) !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
    text-decoration: underline !important;
}

#checkout .cart-summary-products .js-show-details .material-icons {
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* Liste produits */
#checkout .cart-summary-products .media-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#checkout .cart-summary-products .media {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
}

#checkout .cart-summary-products .media:last-child {
    border-bottom: none !important;
}

/* Image produit */
#checkout .cart-summary-products .media-left {
    position: relative !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#checkout .cart-summary-products .media-left img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
}

/* Badge quantité sur l'image */
#checkout .cart-summary-products .product-quantity {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: var(--nutragile-green-bright) !important;
    color: var(--nutragile-white) !important;
    font-family: var(--nutragile-font-link) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
}

/* Nom produit */
#checkout .cart-summary-products .product-name {
    font-family: var(--nutragile-font-link) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--nutragile-text-dark) !important;
    display: block !important;
}

#checkout .cart-summary-products .product-name a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Prix */
#checkout .cart-summary-products .product-price {
    font-family: var(--nutragile-font-link) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--nutragile-text-dark) !important;
    float: none !important;
}

/* Variante */
#checkout .cart-summary-products .product-line-info-secondary {
    font-family: var(--nutragile-font-link) !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-light) !important;
}

#checkout .cart-summary-products .media-body br {
    display: none !important;
}

/* Totaux */
#checkout .cart-summary-subtotals-container {
    padding: 4.8px 16px !important;
}

#checkout #js-checkout-summary .cart-summary-line {
    font-family: var(--nutragile-font-link) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
    padding: 4.8px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
}

#checkout #js-checkout-summary .cart-summary-line .label,
#checkout #js-checkout-summary .cart-summary-line .value {
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
}

/* Total */
#checkout #js-checkout-summary .cart-total {
    font-family: var(--nutragile-font-link) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--nutragile-text-dark) !important;
    border: none !important;
    padding: 9.6px 0 !important;
    margin-top: 6.4px !important;
}

#checkout #js-checkout-summary .cart-total .label,
#checkout #js-checkout-summary .cart-total .value {
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* Cacher taxes */
#checkout #js-checkout-summary .cart-summary-totals .cart-summary-line:not(.cart-total) {
    display: none !important;
}

/* Code promo */
#checkout #js-checkout-summary .block-promo {
    padding: 4.8px 16px !important;
}

#checkout #js-checkout-summary .promo-code-button a {
    font-family: var(--nutragile-font-link) !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: var(--nutragile-text-dark) !important;
    text-decoration: underline !important;
}

#checkout #js-checkout-summary .block-promo .promo-input {
    border: 1px solid var(--nutragile-text-light) !important;
    border-radius: 6px 0 0 6px !important;
    font-family: var(--nutragile-font-link) !important;
}

#checkout #js-checkout-summary .block-promo .promo-input + button {
    border: 2px solid var(--nutragile-green-bright) !important;
    border-radius: 0 6px 6px 0 !important;
    font-family: var(--nutragile-font) !important;
    color: var(--nutragile-white) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    background: var(--nutragile-green-bright) !important;
}

#checkout #js-checkout-summary .cart-summary-line .value {
    text-align: right !important;
    margin-left: auto !important;
}

#checkout #js-checkout-summary .cart-summary-totals {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: -20px;
    margin-bottom: -20px;
}

#checkout .nt-product__payment-secure {
    display: block !important;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    #checkout .cart-summary {
        margin-top: 16px !important;
    }
}

@media (max-width: 768px) {
    #checkout #header-main {
        padding: 18.6px !important;
    }

    #checkout #content-wrapper h1 {
        font-size: 19px !important;
    }

    #checkout .checkout-step .step-title {
        font-size: 12px !important;
        padding: 12.8px !important;
    }

    #checkout .checkout-step .content {
        padding: 0 12.8px 12.8px !important;
    }

    #checkout .blockreassurance_product {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    #checkout .blockreassurance_product > div {
        flex: 0 0 45% !important;
    }
}