/* ============================================================
   lootopia.css - tokens globaux + flash messages
   Chargé dans base.html.twig, hérité par tous les templates.
   ============================================================ */

/* ----------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------- */
:root {
    --lp-dark: #1a1a2e;
    --lp-dark-hover: #252540;
    --lp-gold: #f0c040;
    --lp-gold-hover: #f5ce60;
    --lp-gold-subtle: rgba(240, 192, 64, 0.12);
    --lp-gold-border: rgba(240, 192, 64, 0.25);
    --lp-muted: #9090a8;
    --lp-text-sec: #808090;
    --lp-border: rgba(0, 0, 0, 0.08);
    --lp-border-soft: rgba(255, 255, 255, 0.12);
    --lp-radius-card: 12px;
    --lp-radius-btn: 8px;
    --lp-radius-sm: 6px;
}

/* ----------------------------------------------------------
   2. Flash messages
   ---------------------------------------------------------- */
#lp-alerts {
    position: fixed;
    top: 70px;
    right: 1.25rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 2.5rem);
    pointer-events: none;
}

.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: var(--lp-radius-card);
    border: 0.5px solid var(--lp-border);
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    pointer-events: all;
    animation: lp-slide-in 0.25s ease both;
    transition: opacity 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
}

.lp-alert.hiding {
    opacity: 0;
    transform: translateX(20px);
}

@keyframes lp-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lp-alert-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.lp-alert-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.lp-alert-body {
    flex: 1;
    min-width: 0;
}

.lp-alert-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-dark);
    margin-bottom: 2px;
}

.lp-alert-msg {
    font-size: 13px;
    color: var(--lp-text-sec);
    line-height: 1.45;
}

.lp-alert-close {
    background: none;
    border: none;
    color: #b0b0b8;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    align-self: flex-start;
}

.lp-alert-close:hover {
    color: var(--lp-dark);
}

.lp-alert-success .lp-alert-bar {
    background: #22c55e;
}

.lp-alert-success .lp-alert-icon {
    color: #22c55e;
}

.lp-alert-warning .lp-alert-bar {
    background: var(--lp-gold);
}

.lp-alert-warning .lp-alert-icon {
    color: #d97706;
}

.lp-alert-danger .lp-alert-bar {
    background: #ef4444;
}

.lp-alert-danger .lp-alert-icon {
    color: #ef4444;
}

.lp-alert-info .lp-alert-bar {
    background: #3b82f6;
}

.lp-alert-info .lp-alert-icon {
    color: #3b82f6;
}