/* doc-project | paiement/assets/css/payment-order-correction-modal.css | Définit les styles dédiés à la modale intermédiaire confirmant l’appel du point de vente pour corriger une commande, mettant en évidence la référence métier L/P suivie de id_date et présentant le numéro du magasin comme lien téléphonique accessible. | Expose: orderCorrectionCallModal, orderCorrectionCallModal__notice, orderCorrectionCallModal__orderNumber, orderCorrectionCallModal__phone, orderCorrectionCallModal__phone--disabled, orderCorrectionCallModal__callButton | Dépend de: paiement/modals.php, paiement/assets/css/payment-modals.css, paiement/assets/css/payment-experience.css, Font Awesome | Impacte: lisibilité des consignes de modification, confirmation avant appel, mise en avant de la référence de commande, appel smartphone depuis le numéro affiché, ergonomie mobile des CTA Appeler et Annuler | Tables: aucune */

.orderCorrectionCallModal__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(181, 34, 43, 0.18);
    border-radius: var(--payment-radius-md, 17px);
    color: var(--payment-text, #241f1b);
    background:
        linear-gradient(
            145deg,
            var(--payment-primary-soft, #fff0f1),
            var(--payment-surface, #fff)
        );
}

.orderCorrectionCallModal__notice p {
    margin: 0;
    line-height: 1.6;
}

.orderCorrectionCallModal__noticeIcon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    color: var(--payment-primary, #b5222b);
    background: #fff;
    box-shadow: 0 7px 18px rgba(60, 37, 22, 0.1);
}

.orderCorrectionCallModal__orderNumber {
    display: inline-block;
    padding: 0.12rem 0.42rem;
    border-radius: 7px;
    color: var(--payment-primary-dark, #881820);
    background: rgba(181, 34, 43, 0.1);
    font-weight: 900;
    white-space: nowrap;
}

.orderCorrectionCallModal__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: fit-content;
    margin: 1rem auto 0;
    color: var(--payment-primary, #b5222b);
    font-size: 1.12rem;
    font-weight: 900;
    text-decoration: none;
    transition:
        color var(--payment-transition, 180ms ease),
        transform var(--payment-transition, 180ms ease);
}

a.orderCorrectionCallModal__phone:hover,
a.orderCorrectionCallModal__phone:focus-visible {
    outline: none;
    color: var(--payment-primary-dark, #881820);
    text-decoration: underline;
    transform: translateY(-1px);
}

.orderCorrectionCallModal__phone--disabled {
    color: var(--payment-muted, #70675f);
}

.orderCorrectionCallModal__callButton {
    gap: 0.5rem;
    text-decoration: none !important;
}

.orderCorrectionCallModal__callButton:hover,
.orderCorrectionCallModal__callButton:focus-visible {
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .orderCorrectionCallModal__notice {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .orderCorrectionCallModal__noticeIcon {
        flex-basis: 44px;
    }

    .orderCorrectionCallModal__phone {
        font-size: 1rem;
    }

    .orderCorrectionCallModal__phone {
        width: 100%;
    }

    .orderCorrectionCallModal__callButton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orderCorrectionCallModal__phone,
    .orderCorrectionCallModal__callButton {
        transition: none;
    }
}