/* css/package.css */

:root {
    --delivery-skull-image: none;
    --package-tooltip-frame-top: url("../assets/ui/livraison/haut.png");
    --package-tooltip-frame-middle: url("../assets/ui/livraison/centre.png");
    --package-tooltip-frame-bottom: url("../assets/ui/livraison/bas.png");
}

.package-tooltip {
    --pkg-skull-size: 44px;
    --pkg-skull-image: var(--delivery-skull-image);

    /* Ajuste ces hauteurs pour matcher EXACTEMENT tes PNG */
    --pkg-frame-top-h: 162px;
    --pkg-frame-bottom-h: 289px;

    /* Marges internes (contenu) */
    --pkg-pad-x: 150px;
    --pkg-pad-top: 22px;
    --pkg-pad-bottom: 0px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    color: rgba(235, 250, 255, 0.96);
    font-family: "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.2px;

    /* Le PNG gère le cadre : on garde juste une ombre douce */
    filter: drop-shadow(0 26px 88px rgba(0, 0, 0, 0.66));
    pointer-events: none;
    transform: translate(-50%, calc(-100% + 90px + var(--pkg-bob, 0px)));
    transform-origin: 50% 100%;
    opacity: 1;
    visibility: visible;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 0ms;
}

.package-tooltip.is-hidden {
    opacity: 0; 
    visibility: hidden; 
    transform: translate(-50%, calc(-100% - 12px + var(--pkg-bob, 0px))) scale(0.985);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0ms linear 120ms;
}

/* Structure 3-slices */
.package-tooltip__frame {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.package-tooltip__frameTop {
    height: var(--pkg-frame-top-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pkg-pad-x);
    background-image: var(--package-tooltip-frame-top);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 100% 100%, cover;
}

.package-tooltip__frameMid {
    padding: var(--pkg-pad-top) var(--pkg-pad-x) var(--pkg-pad-bottom);
    background-image: var(--package-tooltip-frame-middle);
    background-repeat: repeat-y, no-repeat;
    background-position: top center, center;
    background-size: 100% auto, cover;
}

.package-tooltip__frameBottom {
    height: var(--pkg-frame-bottom-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pkg-pad-x);
    background-image: var(--package-tooltip-frame-bottom);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 100% 100%, cover;
}

.package-tooltip__bottomContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -81px 0 50px;
}

.package-tooltip__title {
    margin: 100px 0 0 0;
    font-size: 44px;
    font-weight: 900;
    text-align: center;
    color: rgba(235, 250, 255, 0.98);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.40),
        0 0 22px rgba(160, 220, 255, 0.16);
}

.package-tooltip__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 26px;
    row-gap: 14px;

    font-size: 15px;
}

.package-tooltip__grid > :nth-child(1),
.package-tooltip__grid > :nth-child(2) {
    align-self: center;
}

.package-tooltip__label {
    color: rgba(200, 230, 255, 0.84);
    font-weight: 700;
}

.package-tooltip__value {
    color: rgba(235, 250, 255, 0.98);
    text-align: right;
    font-weight: 800;
    letter-spacing: 0.15px;
}

.package-tooltip__skulls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.package-tooltip__skull {
    display: inline-block;
    width: var(--pkg-skull-size);
    height: var(--pkg-skull-size);
    background-image: var(--pkg-skull-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;

    position: relative;
    isolation: isolate;

    opacity: 0.18;
    transform: translateY(-0.5px);
    filter: none;
}

.package-tooltip__skull.is-active {
    opacity: 1;
    filter:
        drop-shadow(0 0 10px rgba(72, 37, 106, 0.42))
        drop-shadow(0 0 22px rgba(0, 0, 0, 0.55));
}

.package-tooltip__skull.is-active::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--pkg-skull-size) * 1.45);
    height: calc(var(--pkg-skull-size) * 1.45);
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle,
        rgba(190, 110, 255, 0.62) 0%,
        rgba(190, 110, 255, 0.26) 35%,
        rgba(190, 110, 255, 0.00) 68%);
    filter: blur(7px);
    opacity: 0.95;
    animation: pkgSkullGlowPulse 1.55s ease-in-out infinite;
}


.package-tooltip__hint {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: rgba(235, 250, 255, 0.84);

    /* Ligne discrète (si ton bas.png a déjà sa séparation, tu peux supprimer) */
    position: relative;
    padding-top: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-tooltip__hint::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    background: rgba(160, 220, 255, 0.18);
}

/* --- Bouton premium "E — Accepter" --- */
.package-tooltip__hintBtn {
    /* Palette (violet sombre / néon) */
    --pkg-violet-deep: rgba(10, 8, 14, 0.92);
    --pkg-violet-mid: rgba(48, 16, 74, 0.08);
    --pkg-violet-edge: rgba(0, 0, 0, 0.00);
    --pkg-violet-border: rgba(140, 90, 220, 0.22);
    --pkg-violet-line: rgba(71, 41, 116, 0.75);
    --pkg-violet-neon: rgb(104 78 141 / 85%);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 93px;

    /* IMPORTANT: évite que les effets “débordent” en dehors du bouton */
    overflow: hidden;
    isolation: isolate;

    /* Dégradé transparent gauche/droite + touche violet au centre */
    border-radius: 18px;
    background: radial-gradient(69% 170% at 50% -25%, rgba(175, 120, 255, 0.22), rgba(0, 0, 0, 0.00) 60%),
        linear-gradient(
            90deg,
            var(--pkg-violet-edge) 0%,
            rgba(22, 10, 34, 0.25) 8%,
            var(--pkg-violet-mid) 18%,
            var(--pkg-violet-deep) 50%,
            var(--pkg-violet-mid) 82%,
            rgba(22, 10, 34, 0.25) 92%,
            var(--pkg-violet-edge) 100%
        );
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Bordures haut/bas violet sombre + pulse néon de temps en temps */
.package-tooltip__hintBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(60, 28, 95, 0.65) 10%,
            var(--pkg-violet-line) 50%,
            rgba(60, 28, 95, 0.65) 90%,
            transparent 100%
        ) top / 100% 2px no-repeat,
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(60, 28, 95, 0.65) 10%,
            var(--pkg-violet-line) 50%,
            rgba(60, 28, 95, 0.65) 90%,
            transparent 100%
        ) bottom / 100% 2px no-repeat;

    opacity: 0.62;
    animation: packageTooltipNeonPulse 9.2s ease-in-out infinite;
}

/* Rayon de soleil (shimmer) UNIQUEMENT sur le bouton */
.package-tooltip__hintBtn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(240, 230, 255, 0.06) 36%,
        rgba(240, 230, 255, 0.70) 50%,
        rgba(240, 230, 255, 0.06) 64%,
        transparent 100%
    );

    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;

    /* pas de mix-blend-mode => pas de “lumière” qui se propage hors du bouton */
    animation: packageTooltipSunSweep 8.8s ease-in-out infinite;
}

@keyframes packageTooltipSunSweep {
    0% {
        transform: translateX(-140%) skewX(-18deg);
        opacity: 0;
    }

    62% {
        transform: translateX(-140%) skewX(-18deg);
        opacity: 0;
    }

    72% {
        opacity: 0.55;
    }

    86% {
        transform: translateX(140%) skewX(-18deg);
        opacity: 0.0;
    }

    100% {
        transform: translateX(140%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes packageTooltipNeonPulse {
    0% {
        opacity: 0.58;
        filter: none;
    }

    68% {
        opacity: 0.58;
        filter: none;
    }

    74% {
        opacity: 0.90;
        filter:
            drop-shadow(0 0 10px rgba(175, 120, 255, 0.40))
            drop-shadow(0 0 18px rgba(175, 120, 255, 0.22));
    }

    80% {
        opacity: 0.68;
        filter:
            drop-shadow(0 0 6px rgba(175, 120, 255, 0.22));
    }

    100% {
        opacity: 0.58;
        filter: none;
    }
}

.package-tooltip__keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgb(255 255 255 / 55%);
    color: rgba(248, 240, 255, 0.96);
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px rgba(175, 120, 255, 0.16);
}

.package-tooltip__hintText {
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0.25px;
    color: rgba(240, 235, 255, 0.90);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.40),
        0 0 22px rgba(175, 120, 255, 0.10);
}

/* --- Malus (prévisualisation) --- */
.package-tooltip__maluses {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 0 10px;
}

.package-tooltip__malusIcon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    

    pointer-events: auto;
    cursor: help;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(255, 235, 140, 0.08);
}

.package-tooltip__malusIcon img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    /*filter:
        drop-shadow(0 0 10px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 8px rgba(255, 235, 140, 0.18));*/
}



.package-tooltip__malusIcon:hover {
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.38),
        0 0 22px rgba(190, 110, 255, 0.18);
    border-color: rgba(210, 150, 255, 0.22);
}


/* Tooltip malus (prévisualisation livraison) */
.pkg-malus-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    min-width: 220px;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(16, 10, 28, 0.88);
    border: 1px solid rgba(210, 150, 255, 0.20);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(190, 110, 255, 0.18);
    backdrop-filter: blur(8px);
    color: rgba(240, 235, 255, 0.92);
    font-family: "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    transform: translate(10px, 10px);
}

.pkg-malus-tooltip.is-hidden {
    display: none;
}

.pkg-malus-tt-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.25px;
    margin-bottom: 4px;
    color: rgba(245, 240, 255, 0.96);
    text-shadow: 0 0 18px rgba(190, 110, 255, 0.16);
}

.pkg-malus-tt-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(240, 235, 255, 0.86);
}