/* Barre de paiement fixe sur mobile, page Paiement
   (resources/views/theme/checkout/index.blade.php). */

.checkout-pay-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -6px 20px rgba(17, 24, 39, 0.08);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.checkout-pay-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

.checkout-pay-bar__total {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.checkout-pay-bar__label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.checkout-pay-bar__amount {
    font-size: 18px;
    font-weight: 800;
    color: #0037C4;
    white-space: nowrap;
}

.checkout-pay-bar__button {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 20px;
    border-radius: 9999px;
    background: #0037C4;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.checkout-pay-bar__button:hover,
.checkout-pay-bar__button:focus-visible {
    background: #002da8;
}

@media (min-width: 1024px) {
    .checkout-pay-bar {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    body.has-checkout-pay-bar {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Le bouton d'assistance flotte au même endroit : on le remonte. */
    body.checkout-pay-bar-visible #assistance-toggle {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

    body.checkout-pay-bar-visible #assistance-panel {
        bottom: calc(144px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-pay-bar,
    .checkout-pay-bar.is-visible {
        transition: none;
    }
}