/* ==================== POPUP OVERLAY ==================== */

.wgb-popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 999999;

    display: none;

    overflow-y: auto;

    padding: 20px;

}



/* Bloquer le scroll du body quand popup ouverte */

body.wgb-popup-open {

    overflow: hidden;

}



/* ==================== POPUP CONTAINER ==================== */

.wgb-popup-container {

    max-width: 900px;

    margin: 40px auto;

    background: #142451;

    border-radius: 12px;

    position: relative;

    transform: translateY(-30px);

    opacity: 0;

    transition: all 0.3s ease;

}

/* ==================== BADGE SVG ==================== */

/* ==================== BADGE SVG ==================== */

.wgb-popup-badge {

    position: absolute;

    top: -60px;

    left: -60px;

    z-index: 20;

    width: 150px;

    height: 150px;

    pointer-events: none;

    animation: badgeBounce 2.5s ease-in-out infinite;

}



.wgb-popup-badge img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));

}



/* Animation bounce douce */

@keyframes badgeBounce {

    0%, 100% { 

        transform: scale(1) translateY(0) rotate(0deg); 

    }

    50% { 

        transform: scale(1.08) translateY(-5px) rotate(-3deg); 

    }

}



/* Responsive */

@media (max-width: 768px) {

    .wgb-popup-badge {

        width: 100px;

        height: 100px;

        top: -20px;

        left: -20px;

    }

}

.wgb-popup-container.wgb-popup-show {

    transform: translateY(0);

    opacity: 1;

}



/* ==================== BOUTON FERMETURE ==================== */

.wgb-popup-close {

    position: absolute !important;

    top: 20px !important;

    right: 20px !important;

    background: transparent !important;

    border: 2px solid #F0B9F0 !important;

    color: #F0B9F0 !important;

    width: 45px !important;

    height: 45px !important;

    border-radius: 50% !important;

    font-size: 28px !important;

    cursor: pointer !important;

    z-index: 10 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: all 0.3s !important;

    line-height: 45px !important;

    padding: 0 !important;

}



.wgb-popup-close:hover {

    background: #F0B9F0 !important;

    color: #142451 !important;

    transform: rotate(90deg) !important;

    line-height: 45px !important;

}





/* ==================== CONTENU POPUP ==================== */

.wgb-popup-content {

    padding: 0;

    max-height: calc(100vh - 120px);

    overflow-y: auto;

}



/* Scrollbar personnalisée */

.wgb-popup-content::-webkit-scrollbar {

    width: 8px;

}



.wgb-popup-content::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

}



.wgb-popup-content::-webkit-scrollbar-thumb {

    background: #F0B9F0;

    border-radius: 4px;

}



.wgb-popup-content::-webkit-scrollbar-thumb:hover {

    background: #F2E2D0;

}



/* ==================== AJUSTEMENTS FORMULAIRE DANS POPUP ==================== */

.wgb-popup-overlay .wgb-registration-modal {

    min-height: auto;

    padding: 40px 20px;

    margin: 0;

}



.wgb-popup-overlay .wgb-modal-header {

    margin-bottom: 20px;

}



.wgb-popup-overlay .wgb-modal-body {

    max-width: 100%;

}



/* Masquer le badge si trop encombrant dans popup */

.wgb-popup-overlay .wgb-badge {

    display: block;

}



/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {

    .wgb-popup-overlay {

        padding: 0;

    }

    

    .wgb-popup-container {

        margin: 0;

        border-radius: 0;

        min-height: 100vh;

        max-width: 100%;

    }

    

    .wgb-popup-content {

        max-height: calc(100vh - 80px);

    }

    

    .wgb-popup-close {

        position: fixed;

        top: 10px;

        right: 10px;

        background: #F0B9F0;

        color: #142451;

        z-index: 99999;

    }

}



/* ==================== ANIMATION ==================== */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes slideDown {

    from {

        transform: translateY(-30px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}