/**
 * Consultation Popup Mobile Fixes - Bouton Fermeture Visible
 *
 * Corrections pour rendre le bouton "X" de fermeture visible sur mobile
 * Contexte: La "X" verte sur fond vert n'est pas visible
 *
 * @version 1.0.0
 * @date 2026-01-25
 */

/* ============================================================================
   BOUTON FERMETURE - VISIBLE SUR TOUS FORMATS
   ========================================================================= */

/* Bouton de fermeture - Fond blanc semi-transparent avec bordure */
.fbea-popup-close,
button.fbea-popup-close,
.fbea-popup-header .fbea-popup-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;

    /* Fond blanc semi-transparent pour contraste */
    background: rgba(255, 255, 255, 0.9) !important;

    /* Bordure blanche pour visibilité */
    border: 2px solid rgba(255, 255, 255, 1) !important;

    /* Icône "X" en couleur foncée */
    color: #333333 !important;

    /* Ombre portée pour relief */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* Position */
    margin-top: 0 !important;
    margin-left: 8px !important;

    /* Reset */
    padding: 0 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Hover state - Desktop */
@media (min-width: 769px) {
    .fbea-popup-close:hover,
    button.fbea-popup-close:hover {
        background: rgba(255, 255, 255, 1) !important;
        transform: rotate(90deg) scale(1.1) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Icône SVG à l'intérieur du bouton */
.fbea-popup-close svg,
.fbea-popup-close path {
    color: #333333 !important;
    fill: #333333 !important;
    stroke: #333333 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Si l'icône est un texte "×" */
.fbea-popup-close::before,
.fbea-popup-close::after {
    color: #333333 !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}

/* ============================================================================
   MOBILE - BOUTON PLUS GRAND ET VISIBLE
   ========================================================================= */

@media (max-width: 768px) {
    .fbea-popup-close,
    button.fbea-popup-close,
    .fbea-popup-header .fbea-popup-close {
        /* Bouton plus grand sur mobile pour meilleure accessibilité */
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;

        /* Fond blanc opaque pour maximum de visibilité */
        background: rgba(255, 255, 255, 0.95) !important;

        /* Bordure plus marquée */
        border: 3px solid rgba(255, 255, 255, 1) !important;

        /* Ombre plus prononcée */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;

        /* Z-index élevé pour être au-dessus */
        z-index: 9999 !important;

        /* Position ajustée */
        margin-top: 0 !important;
        margin-left: 8px !important;
    }

    /* Icône "X" plus grande sur mobile */
    .fbea-popup-close svg,
    .fbea-popup-close path {
        width: 24px !important;
        height: 24px !important;
    }

    .fbea-popup-close::before,
    .fbea-popup-close::after {
        font-size: 28px !important;
    }
}

/* Très petit mobile */
@media (max-width: 480px) {
    .fbea-popup-close,
    button.fbea-popup-close,
    .fbea-popup-header .fbea-popup-close {
        /* Encore plus grand sur très petit écran */
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;

        /* Fond blanc total */
        background: rgba(255, 255, 255, 1) !important;
    }
}

/* ============================================================================
   HEADER - S'ASSURER QUE LE BOUTON EST VISIBLE
   ========================================================================= */

.fbea-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

/* Container pour le bouton */
.fbea-popup-header > button:last-child,
.fbea-popup-header > .fbea-popup-close {
    flex-shrink: 0 !important;
}

/* ============================================================================
   ANTI-OVERRIDE - Empêcher tout autre CSS de modifier
   ========================================================================= */

[class*="fbea-popup-close"] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333333 !important;
    border-radius: 50% !important;
}

@media (max-width: 768px) {
    [class*="fbea-popup-close"] {
        width: 48px !important;
        height: 48px !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
}