/* ----- Loading ----- */
.loading { position: relative; }
.btn.loading { color: transparent; }
.loading > * { opacity: 0; }

.loading:after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    height: 24px;
    width: 24px;
    margin-left: -12px;
    margin-top: -12px;
    padding: 0;
    background: transparent;
    border: 4px solid var(--color-light);
    border-bottom-color: var(--color-primary);
    border-radius: 50%;
    opacity: 1;
    animation: rotate 1s linear infinite;
    content: '';
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}



/* ----- Klaro styles (for late loading) ----- */
#klaro { opacity: 1; }

.cm-modal {
    padding-bottom: calc(3rem - 1px);
    border: 1px solid rgba(45, 63, 99, 1);
}

.cm-header p,
.cm-list-title,
li.cm-service p,
li.cm-purpose p { letter-spacing: -0.02em; }

.cm-header span a {
    font-weight: 500;
    color: var(--color-default);
}

.cm-list-title {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 150%;
}

li.cm-service span.cm-opt-out,
li.cm-service span.cm-required,
li.cm-purpose span.cm-opt-out,
li.cm-purpose span.cm-required {
    padding-left: 1.063rem;
    font-size: 0.875rem;
    line-height: 150%;
    letter-spacing: -0.03em;
    color: var(--color-inactive);
}

.cm-btn { opacity: 1; }

.cm-list-label input:checked + .slider::before,
.cm-list-input:checked + .cm-list-label .slider::before { background: #fff; }

.cm-bg { backdrop-filter: blur(8px); }

@media ( hover: hover ) {
    .cm-header span a:hover { color: var(--color-primary); }

    .cm-btn:hover {
        color: var(--color-white);
        background: var(--color-secondary);
        border-color: var(--color-secondary);
    }
}