/*
 * Modale de confirmation — style La Mémée.
 *
 * Remplace le confirm() natif du navigateur sur tout le front.
 * Le JS associé est assets/js/wgb-confirm.js (window.wgbConfirm).
 *
 * Ce CSS vivait auparavant dans templates/front/dashboard-styles.php,
 * donc la modale n'était stylée QUE dans le dashboard. Les autres écrans
 * (boutique, panier virtuel, conversion de panier) devaient se rabattre
 * sur le confirm() natif. Il est désormais chargé partout où le plugin
 * est actif — voir wgb_enqueue_confirm_assets() dans woo-groupbuy.php.
 */


.wgb-confirm-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(20, 36, 81, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999999; /* ⭐ Au-dessus de TOUT */

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}

.wgb-confirm-overlay.active {

    opacity: 1;

    visibility: visible;

}

.wgb-confirm-modal {

    background: linear-gradient(135deg, #142451 0%, #1a3060 100%);

    border-radius: 20px;

    max-width: 420px;

    width: 90%;

    padding: 0;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);

    transform: scale(0.8) translateY(20px);

    transition: transform 0.3s ease;

    border: 3px solid #F0B9F0;

    overflow: hidden;

}

.wgb-confirm-overlay.active .wgb-confirm-modal {

    transform: scale(1) translateY(0);

}

.wgb-confirm-header {

    background: rgba(240, 185, 240, 0.15);

    padding: 25px 30px 20px;

    text-align: center;

    border-bottom: 2px solid rgba(240, 185, 240, 0.3);

}

.wgb-confirm-icon {

    font-size: 48px;

    margin-bottom: 10px;

    display: none; /* ⭐ Masqué par défaut */

}

.wgb-confirm-icon.visible {

    display: block;

}

.wgb-confirm-title {

    color: #F2E2D0;

    font-size: 22px;

    font-weight: 700;

    margin: 0;

    font-family: 'Decoy', serif;

}

.wgb-confirm-body {

    padding: 25px 30px;

    text-align: center;

}

.wgb-confirm-message {

    color: #F2E2D0;

    font-size: 16px;

    line-height: 1.6;

    margin: 0 0 10px 0;

}

.wgb-confirm-warning {

    color: #F0B9F0;

    font-size: 14px;

    font-weight: 600;

    margin: 15px 0 0 0;

    padding: 10px 15px;

    background: rgba(240, 185, 240, 0.1);

    border-radius: 8px;

    border: 1px solid rgba(240, 185, 240, 0.3);

}

.wgb-confirm-footer {

    padding: 20px 30px 25px;

    display: flex;

    gap: 15px;

    justify-content: center;

    flex-wrap: wrap;

}

.wgb-confirm-btn {

    padding: 14px 24px;

    border-radius: 30px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    border: 2px solid transparent;

    min-width: 130px;

    max-width: 100%;

    white-space: normal;

    line-height: 1.3;

    text-align: center;

    box-sizing: border-box;

}

.wgb-confirm-btn-cancel {

    background: transparent;

    color: #F2E2D0;

    border-color: #F2E2D0;

}

.wgb-confirm-btn-cancel:hover {

    background: transparent!important;

    color: #F2E2D0!important;

    transform: scale(1.02);

}

.wgb-confirm-btn-confirm {

    background: #F0B9F0!important;

    color: #142451!important;

    border-color: #F0B9F0!important;

}

.wgb-confirm-btn-confirm:hover {

    background: #f5cef5!important;

    transform: scale(1.05);

    box-shadow: 0 5px 20px rgba(240, 185, 240, 0.4);

}

.wgb-confirm-btn-danger {

    background: #F0B9F0;

    color: #142451;

    border-color: #F0B9F0;

}

.wgb-confirm-btn-danger:hover {

    background: #F0B9F0!important;

    transform: scale(1.05);

    box-shadow: 0 5px 20px rgba(240, 185, 240, 0.4);

}

/* Animation de shake pour les actions dangereuses */

@keyframes wgb-shake {

    0%, 100% { transform: translateX(0); }

    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

    20%, 40%, 60%, 80% { transform: translateX(5px); }

}

.wgb-confirm-modal.shake {

    animation: wgb-shake 0.5s ease;

}