:root {
    --cc-bg: #111827;
    --cc-fg: #ffffff;
    --cc-btn-bg: #ffffff;
    --cc-btn-fg: #111827;
    --cc-btn-bg-accept: #00676c;
    --cc-radius: 14px;
    --cc-icon: #4caf50;
}

#cookie-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0px;
    display: grid;
    place-items: center;
    padding: 16px;
    z-index: 9999;
    background: transparent;
}

@media (max-width: 1199px) {
    #cookie-consent {
        bottom: 50px;
    }
}

#cookie-consent .cc-container {
    width: min(920px, 95vw);
    background: var(--cc-bg);
    color: var(--cc-fg);
    border-radius: var(--cc-radius);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

#cookie-consent .cc-text {
    font-size: 14px;
    line-height: 1.4;
}

#cookie-consent .cc-text p {
    margin: 8px 0 6px;
}

#cookie-consent .cc-link {
    color: #93c5fd;
    text-decoration: underline;
}

#cookie-consent .cc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-btn {
    border: 1px solid transparent;
    background: var(--cc-btn-bg);
    color: var(--cc-btn-fg);
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.cc-decline {
    background: var(--cc-btn-bg);
    color: var(--cc-btn-fg);
}

.cc-accept {
    background: var(--cc-btn-bg-accept);
    color: #fff;
}

.cc-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.cc-icon {
    margin-left: 6px;
    color: var(--cc-icon);
    font-weight: bold;
    font-size: 16px;
}

@media (max-width: 640px) {
    #cookie-consent .cc-container {
        grid-template-columns: 1fr;
    }

    .cc-actions {
        justify-content: flex-start;
    }
}