/* ============================================================
   Klaro Cookie Consent — Custom Styles
   ============================================================ */

/* --- Backdrop: block page while notice is visible --- */
body:has(.klaro .cookie-notice:not(.cookie-notice-hidden)) {
    overflow: hidden;
}

body:has(.klaro .cookie-notice:not(.cookie-notice-hidden))::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    pointer-events: all;
}

/* ============================================================
   NOTICE — centered modal card
   ============================================================ */

.klaro .cookie-notice:not(.cn-embedded) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 600px !important;
    width: calc(100% - 40px) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    border: none !important;
}

.klaro .cookie-notice .cn-body {
    padding: 32px 36px 28px !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 18px !important;
}

.cn-learn-more{
    width: 50% !important;
}

.cn-buttons{
    width: 50%;
}

/* Notice title */
.klaro .cookie-notice .cn-body h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111 !important;
    text-align: center !important;
    margin: 0 0 14px !important;
}

.cm-header p{
    color: #111 !important;
}

/* Notice description text */
.klaro .cookie-notice .cn-body > p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #444 !important;
    margin-bottom: 8px !important;
}

/* Privacy policy link */
.klaro .cookie-notice .cn-body p a,
.klaro .cookie-notice .cn-body a.cn-learn-more {
    color: #111 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Notice button area — two buttons side by side, equal width */
.klaro .cookie-notice .cn-ok {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

/* cn-decline when moved inline into description paragraph */
.klaro .cookie-notice .cn-body p .cn-decline {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    color: #111 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}

/* cn-decline before DOM move (inside cn-ok) — hide it until moved */
.klaro .cookie-notice .cn-ok .cn-decline {
    display: none !important;
}

/* "Let Me Choose" & "Accept and Continue" — both dark, equal col-6 width */
.klaro .cookie-notice .cn-ok .cm-btn,
.klaro .cookie-notice .cn-ok a.cn-learn-more {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* "Accept and Continue" */
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-success {
    background: #111 !important;
    color: #fff !important;
    width: 100% !important;
}

/* "Let Me Choose" (rendered as <a> when modal closed, <button> when open) */
.klaro .cookie-notice .cn-ok a.cn-learn-more,
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-info,
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-lern-more {
    background: #111 !important;
    color: #fff !important;
}

/* ============================================================
   FULL MODAL — Cookie Settings
   ============================================================ */

.klaro .cookie-modal {
    z-index: 9999 !important;
}

/* Overlay behind modal */
.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, 0.55) !important;
}

.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal.cm-klaro {
    border-radius: 18px !important;
    max-width: 600px !important;
    width: calc(100% - 40px) !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #333 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2) !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Hide X close button */
.klaro .cookie-modal .cm-modal .cm-header .hide {
    display: none !important;
}

/* Modal header */
.klaro .cookie-modal .cm-modal .cm-header {
    padding: 24px 28px 10px !important;
    background: #fff !important;
    border-bottom: none !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Modal body */
.klaro .cookie-modal .cm-modal .cm-body {
    padding: 0 20px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    color: #333 !important;
}

.klaro .cookie-modal .cm-modal .cm-body > p,
.klaro .cookie-modal .cm-modal .cm-body p {
    font-size: 13px !important;
    color: #555 !important;
    line-height: 1.65 !important;
    margin: 10px 0 14px !important;
}

/* Force all text dark inside modal */
.klaro .cookie-modal .cm-modal .cm-body * {
    color: inherit;
}

/* Privacy policy & links inside modal */
.klaro .cookie-modal .cm-modal a {
    color: #111 !important;
    text-decoration: underline !important;
}

/* ============================================================
   SERVICE / PURPOSE LIST ITEMS
   ============================================================ */

/* Each li row */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service {
    padding: 16px 0 16px 66px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    min-height: 0 !important;
    position: relative !important;
}

.klaro .cookie-modal .cm-modal .cm-body ul li:last-child {
    border-bottom: none !important;
}

/* Title */
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-list-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* Description */
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-list-description {
    font-size: 13px !important;
    color: #666 !important;
    display: block !important;
    margin-top: 3px !important;
    line-height: 1.5 !important;
}

/* "Always required" badge */
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-opt-out {
    color: #888 !important;
}

/* "↓ N service(s)" caret/count text */
.klaro .cookie-modal .cm-modal .cm-body ul li .cm-services .cm-caret,
.klaro .cookie-modal .cm-modal .cm-body ul li p.purposes {
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 4px !important;
}

/* "Enable or disable all" title */
.klaro .cookie-modal .cm-modal .cm-body ul li.cm-toggle-all span.cm-list-title {
    color: #111 !important;
}
.klaro .cookie-modal .cm-modal .cm-body ul li.cm-toggle-all span.cm-list-description {
    color: #666 !important;
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */

/* Track — unchecked */
.klaro .cm-list-label .slider {
    background-color: #ccc !important;
    box-shadow: none !important;
    width: 50px !important;
    height: 30px !important;
    border-radius: 30px !important;
}

/* Knob */
.klaro .cm-list-label .slider::before {
    background-color: #fff !important;
    width: 22px !important;
    height: 22px !important;
    left: 4px !important;
    bottom: 4px !important;
    border-radius: 50% !important;
}

/* Track — checked (ON) → black */
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: #111 !important;
    opacity: 1 !important;
}

/* Track — half-checked (some ON, not all) → stays gray/OFF */
.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider {
    background-color: #ccc !important;
    opacity: 1 !important;
}

/* Knob stays LEFT when half-checked */
.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before {
    transform: translateX(0) !important;
}

/* Track — required (always ON) → black */
.klaro .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cm-list-input.only-required + .cm-list-label .slider {
    background-color: #111 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Knob translate when checked */
.klaro .cm-list-label input:checked + .slider::before,
.klaro .cm-list-input:checked + .cm-list-label .slider::before {
    transform: translateX(20px) !important;
}

/* ============================================================
   "Enable or disable all services" row
   ============================================================ */

.klaro .cookie-modal .cm-modal .cm-body ul li.cm-toggle-all {
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: none !important;
    margin-top: 4px !important;
}

/* ============================================================
   MODAL FOOTER BUTTONS
   ============================================================ */

/* Hide "Realized with Klaro!" */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    display: none !important;
}

.klaro .cookie-modal .cm-modal .cm-footer {
    padding: 14px 20px 22px !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #fff !important;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: stretch !important;
}

/* All modal footer buttons */
.klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons .cm-btn {
    flex: 1 !important;
    padding: 15px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* "Accept All" — black */
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-success-var,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-accept-all {
    background: #111 !important;
    color: #fff !important;
    border: none !important;
}

/* "Accept Selected" — white outline */
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cm-btn-accept {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #ddd !important;
}

/* Hide privacy policy text block in modal (keep only in notice) */
.klaro .cookie-modal .cm-modal .cm-body .cm-privacy-policy,
.klaro .cookie-modal .cm-modal .cm-body p:has(a[href*="privacy"]) {
    display: none !important;
}

/* Hide "opt out and reject all" button in modal footer */
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn-danger,
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn-decline,
.klaro .cookie-modal .cm-modal .cm-footer .cn-decline {
    display: none !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
    .klaro .cookie-notice .cn-body {
        padding: 24px 20px 20px !important;
    }

    .cn-buttons{
        width: 100%;
    }

    /* Mobile: col-12 col-12 — each button full width, stacked */
    .klaro .cookie-notice .cn-ok {
        flex-direction: column !important;
    }

    .klaro .cookie-notice .cn-ok .cm-btn,
    .klaro .cookie-notice .cn-ok a.cn-learn-more {
        flex: none !important;
        width: 100% !important;
        white-space: normal !important;
    }

    /* Center modal on mobile */
    .klaro .cookie-modal {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .klaro .cookie-modal .cm-modal {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: auto !important;
        max-height: 92vh !important;
    }

    .klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
        flex-direction: column !important;
    }
}