:root
{
    --cookies-primary-base: #d255f6;
    --cookies-primary-dark: #b126d9;
    --cookies-text-grey8: #363036;
    --cookies-white: #ffffff;
    --cookies-shadow-black: #00000099;
}
#zeikoCookiePopup
{
    font-family: 'Rubik', Helvetica, Verdana, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    width: clamp(60vw, 400px, 90vw);
    z-index: 20000; /* should be above anything else */
}
#zeikoCookiePopup.hidden
{
    display: none;
}
#zeikoCookiePopup > div
{
    background-color: var(--cookies-white);
    color: var(--cookies-text-grey8);
    border-radius: 8px;
    box-shadow: 0 0 3px var(--cookies-shadow-black);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
#zeikoCookiePopup a
{
    color: var(--cookies-primary-base);
    text-decoration: none;
}
#zeikoCookiePopup a:hover
{
    color: var(--cookies-primary-dark);
}
#zeikoCookiePopup button
{
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    align-self: flex-end;
    color: var(--cookies-white);
    background-color: var(--cookies-primary-base);
    border-radius: 4px;
    height: 48px;
    padding: 12px 24px 12px 24px;
    transition: background-color 0.15s ease;
    outline: none;
    border: none;
    cursor: pointer;
}
#zeikoCookiePopup button:hover
{
    background-color: var(--cookies-primary-dark);
}