/**
 * Notifications flottantes PingGalaxy
 *
 * Transforme les notices WooCommerce (erreur / succès / information) en bulles
 * superposées au contenu. Les notices du tunnel d'achat restent en place et
 * conservent leur mise en forme d'origine (voir notices.js).
 *
 * @package TT_Expert_Child
 */

/* ==========================================================================
   1. Pile de notifications
   ========================================================================== */

.pg-notices {
    position: fixed;
    top: calc(var(--pg-header-height) + 16px);
    right: 16px;
    z-index: var(--pg-z-notices);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 380px;
    max-width: calc(100vw - 32px);
    /* La pile ne doit jamais intercepter les clics : seules les bulles le font. */
    pointer-events: none;
}

/* ==========================================================================
   2. Bulle
   ========================================================================== */

.pg-notice {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 12px 13px 14px;
    background: var(--pg-white);
    border: 1px solid var(--pg-border-light);
    border-left: 3px solid var(--pg-grey-medium);
    border-radius: var(--pg-radius-sm);
    box-shadow: var(--pg-shadow-md);
    font-size: 14px;
    line-height: 1.45;
    color: var(--pg-text);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.pg-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pg-notice.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

/* ==========================================================================
   3. Icône
   ========================================================================== */

.pg-notice-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--pg-radius-sm);
}

.pg-notice-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   4. Contenu
   ========================================================================== */

.pg-notice-body {
    flex: 1 1 auto;
    min-width: 0;
    /* Les messages WooCommerce peuvent contenir des mots longs (emails, codes). */
    overflow-wrap: break-word;
}

.pg-notice-body p {
    margin: 0;
}

.pg-notice-body p + p {
    margin-top: 6px;
}

.pg-notice-body a {
    color: var(--pg-galaxy);
    font-weight: 600;
    text-decoration: underline;
}

.pg-notice-body a:hover {
    color: var(--pg-galaxy-hover);
}

/* Les boutons WooCommerce embarqués dans une notice n'ont pas de sens en bulle. */
.pg-notice-body .button,
.pg-notice-body .woocommerce-Button,
.pg-notice-body .wc-forward {
    display: none;
}

.pg-notice-title {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   5. Fermeture
   ========================================================================== */

.pg-notice-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--pg-radius-sm);
    color: var(--pg-grey-medium);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.pg-notice-close:hover {
    background: var(--pg-bg-light);
    color: var(--pg-dark);
}

.pg-notice-close svg {
    display: block;
    width: 12px;
    height: 12px;
}

/* ==========================================================================
   6. Variantes par type
   ========================================================================== */

.pg-notice-error {
    border-left-color: var(--pg-error);
}

.pg-notice-error .pg-notice-icon {
    background: var(--pg-notice-error-bg);
    color: var(--pg-error);
}

.pg-notice-error .pg-notice-title {
    color: var(--pg-error);
}

.pg-notice-success {
    border-left-color: var(--pg-success);
}

.pg-notice-success .pg-notice-icon {
    background: var(--pg-notice-success-bg);
    color: var(--pg-success);
}

.pg-notice-success .pg-notice-title {
    color: var(--pg-success);
}

.pg-notice-info {
    border-left-color: var(--pg-info);
}

.pg-notice-info .pg-notice-icon {
    background: var(--pg-notice-info-bg);
    color: var(--pg-info);
}

.pg-notice-info .pg-notice-title {
    color: var(--pg-info);
}

/* ==========================================================================
   7. Responsive — pleine largeur avec marges sous 640px
   ========================================================================== */

@media (max-width: 640px) {
    .pg-notices {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .pg-notice {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   Neutralisation des styles d'origine
   Les messages WooCommerce sont deplaces dans la bulle en conservant leurs
   classes : sans cela, les regles du theme (fond, bordure, puces, marges)
   redessinent une boite a l'interieur de la boite.
   ========================================================================== */

.pg-notice .woocommerce-error,
.pg-notice .woocommerce-message,
.pg-notice .woocommerce-info,
.pg-notice ul,
.pg-notice ol,
.pg-notice li,
.pg-notice p {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    list-style: none;
    color: inherit;
    font: inherit;
}

.pg-notice li + li,
.pg-notice p + p {
    margin-top: 4px;
}

/* Le contour de focus par defaut du navigateur (epais et noir) jurait avec la
   bulle : on le remplace par un anneau aux couleurs du site, visible
   uniquement au clavier. */
.pg-notice:focus,
.pg-notice-close:focus {
    outline: none;
}

.pg-notice-close:focus-visible {
    outline: 2px solid var(--pg-galaxy);
    outline-offset: 2px;
}