/* PUQ Klaro skin — self-contained, falls back to BS5 vars if present */

#klaro {
    --klaro-bg: var(--bs-body-bg, #ffffff);
    --klaro-text: var(--bs-body-color, #1a1a1a);
    --klaro-muted: var(--bs-secondary-color, #6b7280);
    --klaro-border: var(--bs-border-color, #e5e7eb);
    --klaro-primary: var(--bs-primary, #6d28d9);
    --klaro-primary-rgb: var(--bs-primary-rgb, 109, 40, 217);
    --klaro-surface: var(--bs-tertiary-bg, #f9fafb);
    --klaro-surface-2: var(--bs-secondary-bg, #e5e7eb);
}

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

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

#klaro .cookie-notice:not(.cookie-modal-notice) {
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--klaro-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    color: var(--klaro-text) !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.88) !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(--klaro-text) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
}

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

/* ============ 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(--klaro-bg) !important;
    color: var(--klaro-text) !important;
    border: 1px solid var(--klaro-border) !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(--klaro-border) !important;
    padding: 20px 24px !important;
}

#klaro .cookie-modal .cm-header h1,
#klaro .cookie-modal .cm-header h1.title {
    color: var(--klaro-text) !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(--klaro-muted) !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(--klaro-surface) !important;
    border-top: 1px solid var(--klaro-border) !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 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

/* Purpose group — 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(--klaro-border) !important;
    padding: 16px 0 16px 60px !important;
    margin: 0 !important;
    min-height: 40px !important;
    position: relative !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(--klaro-text) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Service item inside purpose */

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

#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(--klaro-text) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !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(--klaro-text) !important;
    opacity: 0.75 !important;
    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(--klaro-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* ============ Toggle switch — only colors and knob, dimensions from klaro.min.css ============ */

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

#klaro .cm-list-label .slider::before {
    background-color: #ffffff !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(--klaro-primary) !important;
    border-color: var(--klaro-primary) !important;
}

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

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

/* ============ Links ============ */

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

#klaro a:hover { opacity: 0.85 !important; }

#klaro .cm-link.cn-learn-more,
#klaro .cookie-notice .cn-learn-more {
    color: var(--klaro-muted) !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(--klaro-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 !important;
    line-height: 1.4 !important;
}

#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(--klaro-primary) !important;
    color: #ffffff !important;
}

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

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

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

/* ============ Responsive ============ */

@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 !important; }
    #klaro .cm-btn { width: 100% !important; }
}