@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root{
    --accent-purple: rgb(168, 85, 247);
    --accent-purple-soft: rgba(168, 85, 247, 0.35);
    --accent-purple-border: rgba(168, 85, 247, 0.6);
}

.cookie-banner {
    position: fixed;
    bottom: 10px;
    left: 20px;
    z-index: 9999;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(18px) scale(0.99);
    filter: blur(14px);
    animation: fadeInbanner 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity, filter;
}

@keyframes fadeInbanner {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.99);
        filter: blur(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.cookie-banner .cookieCard {
    width: 250px;
    height: 160px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.97), rgba(246, 248, 255, 0.97));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;  
    padding: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.16);
    border-radius: 12px;
    font-family: 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    border: 1px solid rgba(148, 163, 184, 0.6);
    z-index: 0;
    user-select: none;
}
.cookie-banner .cookieCard::before {
    width: 100px;
    height: 100px;
    content: "";
    background: radial-gradient(
        circle at 50% 50%,
        var(--accent-purple-soft),
        rgba(168, 85, 247, 0.05)
    );
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    right: -14%;
    top: -14%;
    animation: scaleDot 1.8s ease-out forwards;
    transform-origin: 50% 50%;
}

.cookie-banner .cookieCard::after {
    width: 100px;
    height: 100px;
    content: "";
    position: absolute;
    right: -14%;
    top: -14%;
    border-radius: 50%;
    border: 1px solid var(--accent-purple-border);
    box-shadow: 0 0 0 0 var(--accent-purple-border);
    z-index: 1;
    opacity: 0;
    animation: pingWave 2.4s ease-out infinite 2.2s;
    transform-origin: 50% 50%;
}

@keyframes scaleDot {
    0% {
        transform: scale(2);
        filter: blur(5px);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes pingWave {
    0% {
        transform: scale(1);
        opacity: 0;
        filter: blur(2px);
        box-shadow: 0 0 0 0 rgba(168,85,247,0);
    }
    10% {
        opacity: 0.85;
        box-shadow: 0 0 0 0 rgba(168,85,247,0.6);
    }
    60% {
        transform: scale(1.7);
        opacity: 0;
        filter: blur(10px);
        box-shadow: 0 0 0 28px rgba(168,85,247,0);
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
        filter: blur(14px);
        box-shadow: 0 0 0 32px rgba(168,85,247,0);
    }
}

.dark-mode .cookie-banner .cookieCard::after {
    border: 1px solid rgba(192, 132, 252, 0.85);
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.55);
    filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.35));
    animation: pingWaveDark 2.4s ease-out infinite 2.2s;
    transform-origin: 50% 50%;
}

@keyframes pingWaveDark {
    0% {
        transform: scale(1);
        opacity: 0;
        filter: blur(1px);
        box-shadow: 0 0 0 0 rgba(192, 132, 252, 0);
    }
    12% {
        opacity: 0.95;
        filter: blur(2px);
        box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.65);
    }
    60% {
        transform: scale(1.7);
        opacity: 0;
        filter: blur(12px);
        box-shadow: 0 0 0 34px rgba(192, 132, 252, 0);
    }
    100% {
        transform: scale(1.95);
        opacity: 0;
        filter: blur(16px);
        box-shadow: 0 0 0 40px rgba(192, 132, 252, 0);
    }
}

.cookie-banner .cookieHeading {
    font-size: 1.2em;
    font-weight: 600;
    color: #0f172a;
    position: relative;
    z-index: 2;
    margin-bottom: 2px;  
}

.cookie-banner .cookieDescription {
    font-size: 0.8em;
    color: #4b5563;
    position: relative;
    z-index: 2;
    margin-top: 15px; 
    margin-bottom: 2px; 
}

.cookie-banner .cookieDescription a {
    color: rgb(147, 51, 234);
    text-decoration: underline;
}

.cookie-banner .cookieDescription a:hover {
    color: rgb(126, 34, 206);
}

.dark-mode .cookie-banner .cookieDescription a {
    color: rgb(192, 132, 252);
}

.dark-mode .cookie-banner .cookieDescription a:hover {
    color: rgb(216, 180, 254);
}

.cookie-banner .acceptButton {
    padding: 4px 10px;
    align-self: flex-end;
    margin-top: auto;
    background: #2575fc;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
    border: none;
    color: #f9fafb;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    z-index: 2;
    border-radius: 999px;
    outline: none;
}

.cookie-banner .acceptButton:hover {
    background: #1f63e6;
}

.dark-mode .cookie-banner .cookieCard {
    background: #1a1a1a;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55);
    border: 1px solid #2b2b2f;
}

.dark-mode .cookie-banner .cookieCard::before {
    background: radial-gradient(
        circle at 35% 35%,
        rgba(168,85,247,0.22),
        rgba(88,28,135,0.06)
    );
}

.dark-mode .cookie-banner .cookieHeading {
    color: #e5e7eb;
}

.dark-mode .cookie-banner .cookieDescription {
    color: #9ca3af;
}

.dark-mode .cookie-banner .acceptButton {
    background: #3a7bff;
    color: #fff;
    border: none;
    outline: none;
}

.dark-mode .cookie-banner .acceptButton:hover {
    background: #1f63e6;
}
.cookieCard .ping {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(168,85,247,0) 55%,
        rgba(168,85,247,0.55) 75%,
        rgba(168,85,247,0) 100%
    );
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.9;
    filter: blur(4px);
    animation: clickPing 0.9s ease-out forwards;
    z-index: 0;
}

@keyframes clickPing {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.9;
        filter: blur(4px);
        box-shadow: 0 0 0 0 rgba(168,85,247,0.40);
    }
    50% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0.5;
        filter: blur(7px);
        box-shadow: 0 0 0 14px rgba(168,85,247,0.18);
    }
    100% {
        transform: translate(-50%, -50%) scale(3.4);
        opacity: 0;
        filter: blur(10px);
        box-shadow: 0 0 0 22px rgba(168,85,247,0);
    }
}

.dark-mode .cookieCard .ping {
    background: radial-gradient(
        circle,
        rgba(168,85,247,0) 48%,
        rgba(192,132,252,0.85) 68%,
        rgba(168,85,247,0) 100%
    );
}

@media (max-width: 960px) {
    .cookie-banner {
        left: 50%;
        bottom: 1rem;
        transform: translateX(-50%) translateY(18px) scale(0.99);
        width: calc(100% - 2rem);
        max-width: 340px;
    }

    /* Override the entrance animation to keep the centered translateX */
    .cookie-banner {
        animation: fadeInbannerMobile 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes fadeInbannerMobile {
        0% {
            opacity: 0;
            transform: translateX(-50%) translateY(18px) scale(0.99);
            filter: blur(14px);
        }
        100% {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
            filter: blur(0);
        }
    }

    .cookie-banner .cookieCard {
        width: 100%;
        height: auto;
        padding: 14px 16px;
    }
}