/* Adventskalender MX - Overlay Styles (glass + animation + dark mode) */
#adventmx-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:99999;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#adventmx-modal{
    position:relative; width:90%; max-width:920px; border-radius:14px; padding:14px; box-sizing:border-box;
    background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.55) 100%);
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.35);
    transform-origin: center center;
    opacity:0; transform: translateY(12px) scale(0.96);
    transition: opacity 420ms cubic-bezier(.2,.9,.3,1), transform 420ms cubic-bezier(.2,.9,.3,1);
}
#adventmx-overlay.adventmx-show #adventmx-modal{ opacity:1; transform: translateY(0) scale(1); }

/* Close button */
#adventmx-close{
    position:absolute; right:10px; top:10px; background:rgba(255,255,255,0.9); border:0; width:44px; height:44px; border-radius:50%;
    font-size:22px; line-height:44px; text-align:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* Image */
#adventmx-image{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,0.25); }

/* smaller screens */
@media (max-width:480px){
    #adventmx-modal{ width:96%; padding:10px; border-radius:8px; }
    #adventmx-close{ width:38px; height:38px; line-height:38px; font-size:20px; right:8px; top:8px;}
}

/* Dark mode fallback */
@media (prefers-color-scheme: dark){
    #adventmx-modal{
        background: linear-gradient(180deg, rgba(20,20,20,0.7) 0%, rgba(24,24,24,0.65) 100%);
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    }
    #adventmx-close{ background: rgba(30,30,30,0.85); color:#fff; }
}