/* PUQ Klaro skin — BS5 vars, glass notice, solid modal, dark/light auto */

#klaro,
#klaro * {
    font-family: inherit !important;
    box-sizing: border-box;
}

/* ============ Bottom notice (small bar) — glass ============ */

#klaro .cookie-notice:not(.cookie-modal-notice) {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    color: var(--bs-body-color) !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
}

[data-bs-theme="dark"] #klaro .cookie-notice:not(.cookie-modal-notice) {
    background: rgba(20, 14, 35, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

#klaro .cookie-notice .cn-body p {
    color: var(--bs-body-color) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
}

#klaro .cookie-notice .cn-buttons { gap: 8px; display: flex; flex-wrap: wrap; }

/* ============ Settings modal — solid card ============ */

#klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, 0.6) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

#klaro .cookie-modal .cm-modal {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    max-width: 640px !important;
}

#klaro .cookie-modal .cm-header {
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding: 20px 24px !important;
}

#klaro .cookie-modal .cm-header h1,
#klaro .cookie-modal .cm-header h1.title {
    color: var(--bs-body-color) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 0 8px !important;
}

#klaro .cookie-modal .cm-header p,
#klaro .cookie-modal .cm-header .description {
    color: var(--bs-secondary-color) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#klaro .cookie-modal .cm-body { padding: 8px 24px !important; }

#klaro .cookie-modal .cm-footer {
    background: var(--bs-tertiary-bg) !important;
    border-top: 1px solid var(--bs-border-color) !important;
    padding: 16px 24px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

#klaro .cookie-modal .cm-footer-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Purpose group (Strictly necessary, Analytics) — preserve Klaro's 60px toggle space */

#klaro .cookie-modal ul.cm-purposes > li.cm-purpose {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--bs-border-color) !important;
    padding: 16px 0 16px 60px !important;
    margin: 0 !important;
    min-height: 40px !important;
}

#klaro .cookie-modal ul.cm-purposes > li.cm-purpose:first-child { border-top: none !important; }

#klaro .cookie-modal li.cm-purpose > span.cm-list-title {
    color: var(--bs-body-color) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Service item inside purpose — DO NOT override padding-left:60px (toggle space) */

#klaro .cookie-modal .cm-services li.cm-service,
#klaro .cookie-modal ul.cm-purposes li.cm-service {
    background: var(--bs-tertiary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 8px !important;
    padding: 12px 14px 12px 70px !important;
    margin: 8px 0 0 !important;
    min-height: 44px !important;
}

/* Toggle stays at left:10px inside the padding */
#klaro .cookie-modal li.cm-service .cm-list-input,
#klaro .cookie-modal li.cm-service .cm-list-label .slider {
    left: 10px !important;
}

#klaro .cookie-modal li.cm-service span.cm-list-title {
    color: var(--bs-body-color) !important;
    font-size: 0.9375rem !important;
}

#klaro .cookie-modal li.cm-service .cm-list-description,
#klaro .cookie-modal li.cm-service p.purposes,
#klaro .cookie-modal li.cm-service .cm-content p {
    color: var(--bs-body-color) !important;
    opacity: 0.75;
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    margin: 6px 0 0 !important;
}

#klaro .cookie-modal li.cm-service span.cm-required,
#klaro .cookie-modal li.cm-service span.cm-opt-out {
    color: var(--bs-secondary-color) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* Toggle switch (BS5-like) */

#klaro .cm-list-label .slider {
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

#klaro .cm-list-label .slider::before {
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

#klaro .cm-list-input:disabled + .cm-list-label .slider {
    opacity: 0.6;
    cursor: not-allowed;
}

#klaro .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Links */

#klaro a,
#klaro .cookie-notice a,
#klaro .cookie-modal a {
    color: var(--bs-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

#klaro a:hover { opacity: 0.85; }

/* "Cookie settings" learn-more link in the notice */
#klaro .cm-link.cn-learn-more,
#klaro .cookie-notice .cn-learn-more {
    color: var(--bs-secondary-color) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#klaro .cm-link.cn-learn-more:hover { color: var(--bs-primary) !important; }

/* Buttons */

#klaro .cm-btn {
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    transition: filter 0.15s ease, transform 0.05s ease !important;
    margin: 0 !important;
    cursor: pointer;
}

#klaro .cm-btn:hover { filter: brightness(1.05); }
#klaro .cm-btn:active { transform: translateY(1px); }

#klaro .cm-btn.cm-btn-success,
#klaro .cm-btn.cm-btn-accept-all,
#klaro .cm-btn.cm-btn-accept {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] #klaro .cm-btn.cm-btn-success,
[data-bs-theme="dark"] #klaro .cm-btn.cm-btn-accept-all,
[data-bs-theme="dark"] #klaro .cm-btn.cm-btn-accept {
    color: #0f172a !important;
}

#klaro .cm-btn.cm-btn-decline,
#klaro .cm-btn.cm-btn-danger {
    background: transparent !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

#klaro .cm-btn.cm-btn-info,
#klaro .cm-btn.cn-learn-more {
    background: transparent !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Hide Powered-by Klaro link entirely */
#klaro .cm-powered-by,
#klaro a[href*="klaro.kiprotect"] { display: none !important; }

/* Responsive notice */

@media (max-width: 575.98px) {
    #klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        padding: 14px !important;
    }
    #klaro .cookie-notice .cn-buttons { flex-direction: column; }
    #klaro .cm-btn { width: 100%; }
}