﻿/* Toujours dans le DOM : masqué si panier incomplet (évite Visible=false ASP.NET) */
.mobile-floating-checkout.is-hidden {
    display: none !important;
}

/* Masqué desktop */
@media (min-width: 992px) {
    .mobile-floating-checkout {
        display: none !important;
    }
}

.mobile-floating-checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    background: #fff;
    border-top: 1px solid #E4E4E4;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
    padding: 10px 12px;
    width: 100%;
    max-width: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease;
}

.mobile-floating-checkout__sums {
    display: flex;
    gap: 0;
    justify-content: space-between;
    margin-bottom: 8px;
    overflow: hidden;
    max-height: 96px;
    opacity: 1;
    transition:
        max-height 0.28s ease,
        opacity 0.22s ease,
        margin-bottom 0.28s ease;
}

.mobile-floating-checkout__sum {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid #E4E4E4;
    text-align: center;
}

.mobile-floating-checkout__sum.is-hidden {
    display: none !important;
}

/* Pas de séparateur sur la dernière zone visible */
.mobile-floating-checkout__sums > .mobile-floating-checkout__sum:last-child,
.mobile-floating-checkout__sums > .mobile-floating-checkout__sum:nth-last-child(2):has(+ .is-hidden) {
    border-right: 0;
}

.mobile-floating-checkout__label {
    font-family: 'Montserrat';
    font-size: 12px;
    color: #000000;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    line-height: 14px;
    margin-bottom: 6px;
    text-align: center;
}

.mobile-floating-checkout__label sup {
    font-size: 0.75em;
    position: relative;
    top: -0.12em;
}

.mobile-floating-checkout__value {
    font-family: 'Montserrat-Bold';
    font-size: 24px;
    color: #2B39FA;
    line-height: 26px;
    text-align: center;
}

.mobile-floating-checkout__value sup {
    font-size: 10px;
    position: relative;
    top: -0.55em;
    line-height: 1;
}

/* Remise => montant "par mois" en rose (comme le ticket de caisse) */
.mobile-floating-checkout__value.violet_lpm {
    color: #C81799 !important;
}

/* Règles "ticket visible" appliquées uniquement en mobile */
@media (max-width: 991.98px) {
    /* Réserve l'espace pour ne pas masquer le contenu derrière le flottant */
    .row.page_panier {
        padding-bottom: 130px !important;
        transition: padding-bottom 0.28s ease;
    }

    /* Complet → compact : fondu / repli des montants */
    html.ticket-de-caisse-visible .mobile-floating-checkout__sums {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        pointer-events: none;
    }

    /* Quand on est sur la zone ticket de caisse : on masque le bouton du bloc existant */
    html.ticket-de-caisse-visible .ticket-de-caisse-cta {
        display: none !important;
    }

    /* Compact → disparition (footer) : fondu du panier entier */
    html.mobile-floating-footer-visible .mobile-floating-checkout {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        pointer-events: none;
    }

    /* Plus besoin de réserver l'espace en bas quand le footer est là */
    html.mobile-floating-footer-visible .row.page_panier {
        padding-bottom: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-floating-checkout,
    .mobile-floating-checkout__sums,
    .row.page_panier {
        transition: none !important;
    }
}

/* RGAA 10.7 — focus visible (scopé panier, écrase lpm-controles-ui.css) */
.page_panier .btn:focus-visible,
.page_panier input.btn:focus-visible,
.page_panier input[type="button"].btn_add_remove:focus-visible,
.page_panier input[type="submit"]:focus-visible,
#mobileFloatingCheckout .btn:focus-visible,
#mobileFloatingCheckout input[type="submit"]:focus-visible {
    outline: 2px solid #2B39FA !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.btn-type-paiement label.btn:focus-visible {
    outline: 2px solid #2B39FA !important;
    outline-offset: 2px !important;
}

.btn-type-paiement .btn:focus-within {
    outline: 2px solid #2B39FA !important;
    outline-offset: 2px !important;
}

.btn-type-paiement input[type="radio"]:focus-visible {
    outline: 2px solid #2B39FA !important;
    outline-offset: 2px !important;
}
