: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.standalone
{
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
}
#zeikoCookiePopup > div:first-child
{
    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 input[type="checkbox"]
{
    accent-color: var(--cookies-primary-base);
}
#zeikoCookiePopup label
{
    cursor: pointer;
}
#buttonDiv
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
}
#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: 0.15s ease;
    outline: none;
    border: none;
    cursor: pointer;
}
#zeikoCookiePopup button:hover
{
    background-color: var(--cookies-primary-dark);
}
#zeikoCookiePopup button.secondary
{
    color: var(--cookies-primary-base);
    background-color: transparent;
    outline: 1px solid var(--cookies-primary-base);
    outline-offset: -1px;
}
#zeikoCookiePopup button.secondary:hover
{
    color: var(--cookies-primary-dark);
    background-color: transparent;
    outline: 1px solid var(--cookies-primary-dark);
}
