.klaro {
    --font-family: Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size: 15px;
    --dark1: #12131a;
    --dark2: #1f2230;
    --dark3: #6f7486;
    --light1: #f8f9ff;
    --light2: rgba(255, 255, 255, 0.16);
    --light3: rgba(255, 255, 255, 0.08);
    --white1: #12131a;
    --white2: #25293a;
    --white3: #34394e;
    --green1: #4c7fdf;
    --green2: #14b8a6;
    --green3: #8b5cf6;
    --blue1: #4c7fdf;
    --border-radius: 18px;
    --notice-max-width: 460px;
    --modal-width: 760px;
}

.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro {
    background:
        radial-gradient(circle at top left, rgba(76, 127, 223, 0.28), transparent 38%),
        linear-gradient(145deg, #12131a 0%, #1c2030 58%, #111827 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.klaro .cookie-modal .cm-bg {
    background: rgba(8, 9, 14, 0.72);
    backdrop-filter: blur(5px);
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
    border-color: rgba(255, 255, 255, 0.10);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body,
.klaro .cookie-modal .cm-modal .cm-body {
    color: #f8f9ff;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
.klaro .cookie-modal p,
.klaro .cookie-modal li,
.klaro .cookie-modal .cm-list-description {
    color: rgba(248, 249, 255, 0.72);
    line-height: 1.55;
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-modal .cm-list-title {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0;
}

.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .cookie-modal .cm-link,
.klaro .cookie-notice .cm-link {
    color: #8ec5ff;
    font-weight: 600;
}

.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #f8f9ff;
    font-weight: 700;
    padding: 11px 16px;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.klaro .cookie-modal .cm-btn:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover {
    border-color: rgba(142, 197, 255, 0.52);
    transform: translateY(-1px);
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
    background: linear-gradient(135deg, #4c7fdf 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #ffffff;
}

.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
    background: rgba(255, 255, 255, 0.08);
    color: #f8f9ff;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
    background: linear-gradient(135deg, #4c7fdf 0%, #14b8a6 100%);
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
    background: linear-gradient(135deg, #14b8a6 0%, #4c7fdf 100%);
}

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
    background-color: rgba(255, 255, 255, 0.14);
}

.klaro .cookie-modal .cm-switch-container,
.klaro .context-notice .cm-switch-container,
.klaro .cookie-notice .cm-switch-container,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
    border-color: rgba(255, 255, 255, 0.10);
}

@media (max-width: 640px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 12px;
        right: 12px;
        width: auto;
    }

    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
        gap: 8px;
    }

    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
        width: 100%;
    }
}