/* ILO PopUps frontend styles */

.ilo-popup-overlay {
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
}

.ilo-popup-overlay.ilo-popup-visible {
    display: flex;
}

.ilo-popup-wrapper {
    position: relative;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Desktop / tablet: popup un po' più grande */
@media (min-width: 768px) {
    .ilo-popup-wrapper {
        max-width: 680px;
    }
}

.ilo-popup-inner {
    position: relative;
    background: #111;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    /* bordo frastagliato simulato con clip-path */
    clip-path: polygon(
        5% 0%,
        15% 5%,
        30% 0%,
        45% 6%,
        60% 0%,
        75% 5%,
        90% 0%,
        100% 15%,
        95% 30%,
        100% 45%,
        94% 60%,
        100% 75%,
        95% 90%,
        85% 100%,
        70% 95%,
        55% 100%,
        40% 95%,
        25% 100%,
        10% 95%,
        0% 80%,
        6% 65%,
        0% 50%,
        6% 35%,
        0% 20%
    );
    /* ombra morbida, senza bordo chiaro aggiuntivo */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
}

.ilo-popup-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.ilo-popup-content img {
    width: 85%;
    max-width: 85%;
    height: auto;
    display: block;
    margin: 0 auto 12px auto;
}

.ilo-popup-content a.ilo-popup-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    margin: 6px 6px 0 0;
    background: #e03131;
    color: #fff;
}

.ilo-popup-content a.ilo-popup-btn:hover {
    opacity: 0.9;
}

/* Effetti animazione base */
.ilo-popup-anim-zoom-in {
    animation: ilo-popup-zoom-in 0.5s ease-out forwards;
}

.ilo-popup-anim-slide-up {
    animation: ilo-popup-slide-up 0.5s ease-out forwards;
}

.ilo-popup-anim-rotate-in {
    animation: ilo-popup-rotate-in 0.5s ease-out forwards;
}

@keyframes ilo-popup-zoom-in {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ilo-popup-slide-up {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ilo-popup-rotate-in {
    from {
        transform: rotate(-8deg) scale(0.85);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}


.ilo-popup-anim-out-fade {
    animation: ilo-popup-fade-out 0.5s ease-in forwards;
}

.ilo-popup-anim-out-zoom-out {
    animation: ilo-popup-zoom-out 0.5s ease-in forwards;
}

.ilo-popup-anim-out-slide-down {
    animation: ilo-popup-slide-down 0.5s ease-in forwards;
}

@keyframes ilo-popup-fade-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: none;
    }
}

@keyframes ilo-popup-zoom-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes ilo-popup-slide-down {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(40px);
        opacity: 0;
    }
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .ilo-popup-wrapper {
        max-width: 95%;
        padding: 10px;
    }

    .ilo-popup-inner {
        padding: 16px;
    }

    .ilo-popup-close {
        top: 4px;
        right: 8px;
    }
}