/* ============================================================
   LVD Notification — Front CSS
   Social proof badges — identité graphique LVD
   Couleurs : --dark #200b3e  --orange #fd7325  --cyan #37ecea
   Font : Sarabun (héritée du thème)
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes lvd-flame {
    0%   { transform: scale(1)    rotate(-3deg); filter: brightness(1);   }
    20%  { transform: scale(1.15) rotate(2deg);  filter: brightness(1.2); }
    40%  { transform: scale(1.05) rotate(-2deg); filter: brightness(1.1); }
    60%  { transform: scale(1.2)  rotate(3deg);  filter: brightness(1.3); }
    80%  { transform: scale(1.08) rotate(-1deg); filter: brightness(1.1); }
    100% { transform: scale(1)    rotate(-3deg); filter: brightness(1);   }
}

@keyframes lvd-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.25); opacity: 0.75; }
}

@keyframes lvd-bounce {
    0%, 100% { transform: translateY(0);   }
    30%       { transform: translateY(-8px); }
    60%       { transform: translateY(-3px); }
}

@keyframes lvd-shimmer {
    0%   { left: -60%; }
    100% { left: 120%; }
}

@keyframes lvd-fade-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes lvd-live-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Wrapper ─────────────────────────────────────────────────── */

.lvd-notification-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 18px;
    font-family: "Sarabun", sans-serif;
}

/* ── Notification de base ────────────────────────────────────── */

.lvd-notification {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    position: relative;
    overflow: hidden;
    user-select: none;

    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease;
}

.lvd-notification.lvd-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Types de notification — palette LVD ─────────────────────── */

/* Paniers → orange LVD */
.lvd-notification--cart {
    background: linear-gradient(135deg, #fff4ec 0%, #fff9f5 100%);
    border-left: 3px solid #fd7325;
    color: #7a2e00;
}

/* Vues → cyan LVD */
.lvd-notification--views {
    background: linear-gradient(135deg, #e6fafa 0%, #f3fefe 100%);
    border-left: 3px solid #37ecea;
    color: #0e4a4a;
}

/* Meilleures ventes → violet LVD */
.lvd-notification--bestseller {
    background: linear-gradient(135deg, #f0eaf8 0%, #f7f4fb 100%);
    border-left: 3px solid #4e2b73;
    color: #200b3e;
}

/* Stock bas → rouge (urgence, on garde mais harmonisé) */
.lvd-notification--stock {
    background: linear-gradient(135deg, #fdecea 0%, #fff5f4 100%);
    border-left: 3px solid #e53935;
    color: #6b1010;
}

/* Commandes → vert foncé harmonisé LVD */
.lvd-notification--orders {
    background: linear-gradient(135deg, #e6f7f1 0%, #f2fbf7 100%);
    border-left: 3px solid #1a8a5a;
    color: #0a3d26;
}

/* ── Effet shimmer (meilleure vente) ─────────────────────────── */

.lvd-notification--bestseller::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 35%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: lvd-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

/* ── Icône ───────────────────────────────────────────────────── */

.lvd-notification__icon {
    display: inline-block;
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Animations sur l'icône ──────────────────────────────────── */

.lvd-anim-flame .lvd-notification__icon {
    animation: lvd-flame 1.4s ease-in-out infinite;
    transform-origin: center bottom;
}

.lvd-anim-pulse .lvd-notification__icon {
    animation: lvd-pulse 1.3s ease-in-out infinite;
}

.lvd-anim-bounce .lvd-notification__icon {
    animation: lvd-bounce 1.1s ease-in-out infinite;
}

/* ── Texte ───────────────────────────────────────────────────── */

.lvd-notification__text {
    flex: 1;
    min-width: 0;
}

/* ── Badge compteur ──────────────────────────────────────────── */

.lvd-notification__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    color: #fff;
}

.lvd-notification--cart   .lvd-notification__badge { background: #fd7325; }
.lvd-notification--views  .lvd-notification__badge { background: #0c9e9c; color: #fff; }
.lvd-notification--orders .lvd-notification__badge { background: #1a8a5a; }

/* ── Indicateur LIVE ─────────────────────────────────────────── */

.lvd-notification__live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: #0c9e9c;
    color: #fff;
    animation: lvd-live-blink 1.5s step-start infinite;
    flex-shrink: 0;
}

.lvd-notification__live::before {
    content: '●';
    font-size: 7px;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 575px) {
    .lvd-notification {
        font-size: 12px;
        padding: 9px 11px;
        gap: 8px;
    }

    .lvd-notification__icon {
        font-size: 16px;
    }
}


/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes lvd-flame {
    0%   { transform: scale(1)    rotate(-3deg); filter: brightness(1);   }
    20%  { transform: scale(1.15) rotate(2deg);  filter: brightness(1.2); }
    40%  { transform: scale(1.05) rotate(-2deg); filter: brightness(1.1); }
    60%  { transform: scale(1.2)  rotate(3deg);  filter: brightness(1.3); }
    80%  { transform: scale(1.08) rotate(-1deg); filter: brightness(1.1); }
    100% { transform: scale(1)    rotate(-3deg); filter: brightness(1);   }
}

@keyframes lvd-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.25); opacity: 0.75; }
}

@keyframes lvd-bounce {
    0%, 100% { transform: translateY(0);   }
    30%       { transform: translateY(-8px); }
    60%       { transform: translateY(-3px); }
}

@keyframes lvd-shimmer {
    0%   { left: -60%; }
    100% { left: 120%; }
}

@keyframes lvd-fade-slide-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes lvd-live-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Wrapper ─────────────────────────────────────────────────── */

.lvd-notification-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 16px;
}

/* ── Notification de base ────────────────────────────────────── */

.lvd-notification {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    position: relative;
    overflow: hidden;
    user-select: none;

    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .4s ease, transform .4s ease;
}

.lvd-notification.lvd-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Types de notification (couleurs) ────────────────────────── */

.lvd-notification--cart {
    background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
    border-left: 4px solid #f59e0b;
    color: #7c5100;
}

.lvd-notification--views {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border-left: 4px solid #0ea5e9;
    color: #0c4a6e;
}

.lvd-notification--bestseller {
    background: linear-gradient(135deg, #fef9c3 0%, #fefce8 100%);
    border-left: 4px solid #eab308;
    color: #713f12;
}

.lvd-notification--stock {
    background: linear-gradient(135deg, #fee2e2 0%, #fff5f5 100%);
    border-left: 4px solid #ef4444;
    color: #7f1d1d;
}

.lvd-notification--orders {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    border-left: 4px solid #10b981;
    color: #064e3b;
}

/* ── Effet shimmer (meilleure vente) ─────────────────────────── */

.lvd-notification--bestseller::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 35%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.65) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: lvd-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}

/* ── Icône ───────────────────────────────────────────────────── */

.lvd-notification__icon {
    display: inline-block;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Animations sur l'icône ──────────────────────────────────── */

.lvd-anim-flame .lvd-notification__icon {
    animation: lvd-flame 1.4s ease-in-out infinite;
    transform-origin: center bottom;
}

.lvd-anim-pulse .lvd-notification__icon {
    animation: lvd-pulse 1.3s ease-in-out infinite;
}

.lvd-anim-bounce .lvd-notification__icon {
    animation: lvd-bounce 1.1s ease-in-out infinite;
}

/* ── Texte ───────────────────────────────────────────────────── */

.lvd-notification__text {
    flex: 1;
    min-width: 0;
}

/* ── Badge compteur ──────────────────────────────────────────── */

.lvd-notification__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;

    background: rgba(0, 0, 0, .12);
    color: inherit;
}

.lvd-notification--cart     .lvd-notification__badge { background: #f59e0b; color: #fff; }
.lvd-notification--views    .lvd-notification__badge { background: #0ea5e9; color: #fff; }
.lvd-notification--orders   .lvd-notification__badge { background: #10b981; color: #fff; }

/* ── Indicateur LIVE ─────────────────────────────────────────── */

.lvd-notification__live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    background: #ef4444;
    color: #fff;
    animation: lvd-live-blink 1.5s step-start infinite;
    flex-shrink: 0;
}

.lvd-notification__live::before {
    content: '●';
    font-size: 8px;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 575px) {
    .lvd-notification {
        font-size: 12.5px;
        padding: 9px 11px;
        gap: 8px;
    }

    .lvd-notification__icon {
        font-size: 17px;
    }
}