/* ─────────────────────────────────────────────────────────────────────────
 * SellSpark AI — Klaro Cookie Banner brand overrides (v7.36.2)
 *
 * Three styled surfaces:
 *   A. Notice (first-visit bottom-center card, mustConsent=false / US+RoW)
 *   B. Modal (full settings UI, mustConsent=true / GDPR users + when reopened)
 *   C. Persistent #sellspark-cookie-widget floating button (always-on access)
 *
 * Plus:
 *   - :focus suppression on click (only :focus-visible shows outline)
 *   - Mobile + tablet responsive
 *   - prefers-reduced-motion respected
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
 * SHARED — focus visibility (only on keyboard nav, not click)
 * ═══════════════════════════════════════════════════════════════════════════ */

.klaro button:focus,
.klaro a:focus,
.klaro input:focus,
.klaro [tabindex]:focus,
.sellspark-cookie-widget:focus {
    outline: none !important;
    box-shadow: none !important;
}

.klaro button:focus-visible,
.klaro a:focus-visible,
.klaro input:focus-visible + .cm-list-label .slider,
.klaro [tabindex]:focus-visible,
.sellspark-cookie-widget:focus-visible {
    outline: 2px solid #FF6B35 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * A. NOTICE (bottom-center cream card — mustConsent=false)
 * ═══════════════════════════════════════════════════════════════════════════ */

.klaro .cookie-notice:not(.cookie-modal-notice) {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    background: #fdf7ef !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 14px !important;
    color: #1a1a1a !important;
    box-shadow: 0 16px 44px -14px rgba(0, 0, 0, 0.55) !important;
    width: 600px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 22px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    padding: 18px 20px !important;
    z-index: 10000 !important;
}

.klaro .cookie-notice .cn-body {
    margin: 0 !important;
    padding: 0 !important;
}

.klaro .cookie-notice .cn-body h2,
.klaro .cookie-notice .cn-body h1 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 5px !important;
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body .cn-changes {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    margin: 0 !important;
}

.klaro .cookie-notice .cn-body p a,
.klaro .cookie-notice .cn-body a {
    color: #FF6B35 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 500 !important;
}

.klaro .cookie-notice .cn-ok {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

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

.klaro .cm-btn,
.klaro .cookie-notice button {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    border: 0 !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    min-width: 100px !important;
    transition: opacity 0.15s, transform 0.1s !important;
}

/* Consistent hover/active across all real action buttons (V3 — brightness only).
 * Wrapped in @media (hover: hover) per site convention to skip on touch devices. */
.klaro .cm-btn { text-decoration: none !important; }
@media (hover: hover) {
    .klaro .cm-btn:hover { filter: brightness(0.92) !important; opacity: 1 !important; }
    /* Outlined Reject button: explicit selectors for both notice + modal contexts to beat
     * Klaro's .cm-btn-danger:hover specificity. Without modal scope, the rule never matched. */
    .klaro .cookie-notice .cm-btn-decline:hover,
    .klaro .cookie-notice .cn-decline:hover,
    .klaro .cookie-modal .cm-btn-decline:hover,
    .klaro .cookie-modal .cm-footer .cm-btn-decline:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        border-color: rgba(0, 0, 0, 0.28) !important;
        filter: none !important;
        color: #1a1a1a !important;
    }
}
.klaro .cm-btn:active { transform: scale(0.98) !important; filter: brightness(0.88) !important; }

.klaro .cm-btn-accept-all,
.klaro .cm-btn-success,
.klaro .cookie-notice .cm-btn-success-var,
.klaro .cookie-notice .cn-ok .cm-btn-success {
    background: #FF6B35 !important;
    color: #fff !important;
}

.klaro .cm-btn-decline,
.klaro .cookie-notice .cn-decline,
.klaro .cookie-notice .cn-ok .cm-btn-decline {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    padding: 8px 17px !important;
}

/* "Learn more" text link in the NOTICE only — must not underline modal action buttons
 * (Klaro applies cm-btn-info to "Save choices" too, which would inherit the underline). */
.klaro .cookie-notice .cn-learn-more {
    background: transparent !important;
    color: #FF6B35 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    padding: 9px 6px !important;
    min-width: 0 !important;
    border: 0 !important;
}
.klaro .cookie-notice .cn-learn-more:hover {
    background: transparent !important;
    filter: none !important;
    text-decoration-thickness: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * B. MODAL (full settings UI — mustConsent=true / Cookie settings click)
 * ═══════════════════════════════════════════════════════════════════════════ */

.klaro .cookie-modal {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.klaro .cookie-modal .cm-bg {
    /* Solid rgba — no backdrop-filter blur (perf-critical: blur recomputes every
     * frame across full viewport, causes the slowdown reported on modal open). */
    background: rgba(0, 0, 0, 0.6) !important;
    will-change: opacity !important;
}

.klaro .cookie-modal .cm-modal {
    background: #fdf7ef !important;
    color: #1a1a1a !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 28px 80px -20px rgba(0, 0, 0, 0.7) !important;
    width: 560px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 460px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    /* Perf: contain layout/style/paint inside the modal so changes don't trigger
     * page-wide repaint cycles. Safe because nothing inside overflows. */
    contain: layout style paint !important;
}

.klaro .cookie-modal .cm-header {
    padding: 18px 20px 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #1a1a1a !important;
    margin: 0 0 4px !important;
}

.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-body p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    margin: 0 !important;
}

.klaro .cookie-modal .cm-header a,
.klaro .cookie-modal .cm-body a {
    color: #FF6B35 !important;
    text-decoration: underline !important;
}

/* Scrollable body */
.klaro .cookie-modal .cm-body {
    padding: 4px 20px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    background: transparent !important;
}

/* Custom scrollbar inside modal — match SellSpark scrollbar pattern (thin, brand-tinted) */
.klaro .cookie-modal .cm-body::-webkit-scrollbar { width: 10px; }
.klaro .cookie-modal .cm-body::-webkit-scrollbar-track { background: transparent; border-right: 4px solid #fdf7ef; background-clip: padding-box; }
.klaro .cookie-modal .cm-body::-webkit-scrollbar-thumb { background: rgba(255, 107, 53, 0.45); border-right: 4px solid #fdf7ef; background-clip: padding-box; border-radius: 999px; }
.klaro .cookie-modal .cm-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 107, 53, 0.75); border-right: 4px solid #fdf7ef; background-clip: padding-box; }

.klaro .cookie-modal .cm-purposes,
.klaro .cookie-modal .cm-services {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 12px 0 !important;
    background: transparent !important;
}

.klaro .cookie-modal .cm-purpose:first-child,
.klaro .cookie-modal .cm-service:first-child {
    border-top: 0 !important;
}

.klaro .cookie-modal .cm-list-title {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

.klaro .cookie-modal .cm-list-description {
    color: #666 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-top: 3px !important;
}

.klaro .cookie-modal .cm-required {
    color: #888 !important;
    font-style: italic !important;
    font-size: 10.5px !important;
}

/* Klaro v0.7 toggle — Klaro renders <span class="cm-switch"><div class="slider round active"></div></span>
 * and toggles the .active class on the slider via JS (not :checked + label). Klaro's own CSS
 * only sizes .cookie-notice .cm-switch, so inside .cookie-modal the wrapper collapses to 0
 * and the slider overflows. We set explicit sizing + use .slider.active for the on-state. */
.klaro .cookie-modal .cm-list-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    cursor: pointer !important;
    min-height: 24px !important;
}

.klaro .cookie-modal .cm-list-label .cm-list-title {
    flex: 1 1 auto !important;
    order: 1 !important;
}

.klaro .cookie-modal .cm-list-label .cm-required {
    flex-shrink: 0 !important;
    order: 2 !important;
    margin-right: 6px !important;
}

.klaro .cookie-modal .cm-list-label .cm-switch {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 22px !important;
    display: inline-block !important;
    left: auto !important;
    top: auto !important;
    margin-left: auto !important;
    order: 3 !important;
}

/* Slider base visual (shape, transitions, thumb) — NO background-color here.
 * Background-color is handled ONLY by the :checked / :not(:checked) rules below
 * so the toggle visual always matches the input's checked state. */
.klaro .cookie-modal .cm-switch .slider {
    position: absolute !important;
    inset: 0 !important;
    width: 38px !important;
    height: 22px !important;
    border-radius: 22px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    box-shadow: none !important;
    display: block !important;
}

.klaro .cookie-modal .cm-switch .slider::before {
    content: "" !important;
    position: absolute !important;
    height: 16px !important;
    width: 16px !important;
    left: 3px !important;
    bottom: 3px !important;
    top: auto !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.2s !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* Toggle colors — uses Klaro's own :checked + sibling CSS mechanism.
 * NOT .slider.active (which was the bug: .slider{bg:#ccc !important} overrode
 * the :checked state, making the toggle ALWAYS grey regardless of state).
 * The :checked pseudo-class updates automatically with the native checkbox. */

/* Off state (unchecked) — grey */
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider {
    background-color: #ccc !important;
}
/* On state (checked) — brand orange */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background-color: #FF6B35 !important;
}
/* Thumb position matches checked state */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
    transform: translateX(16px) !important;
}

/* Disabled toggle (Essential — always required) */
.klaro .cookie-modal .cm-list-input:disabled + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* No overrides on .cm-list-input — let Klaro's default positioning work.
 * Klaro uses onChange on the input for state management. The input must
 * remain interactive (no pointer-events:none) for onChange to fire. */

/* With groupByPurpose:false (v7.36.7), services render as a flat list — no
 * .cm-purpose wrapper, no .cm-caret, no nested .cm-services. These rules are
 * kept as safety fallback in case Klaro still renders them in some edge case. */
.klaro .cookie-modal .cm-caret {
    display: none !important;
}

/* Close X button (top-right) — Klaro injects <button class="hide"> with default styling.
 * Make it a small subtle icon button matching the brand. */
.klaro .cookie-modal .cm-header {
    position: relative !important;
    padding-right: 44px !important;
}

.klaro .cookie-modal .cm-modal .hide {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #888 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s, color 0.15s !important;
}

@media (hover: hover) {
    .klaro .cookie-modal .cm-modal .hide:hover {
        background: rgba(0, 0, 0, 0.06) !important;
        color: #1a1a1a !important;
    }
}

.klaro .cookie-modal .cm-modal .hide svg {
    width: 12px !important;
    height: 12px !important;
}

.klaro .cookie-modal .cm-modal .hide svg line {
    stroke: currentColor !important;
}

/* Better spacing inside purpose rows */
.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
    padding: 14px 0 !important;
}

.klaro .cookie-modal .cm-list-description {
    margin-top: 8px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Footer */
.klaro .cookie-modal .cm-footer {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 14px 20px !important;
    flex-shrink: 0 !important;
}

.klaro .cookie-modal .cm-footer-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.klaro .cookie-modal .cm-powered-by {
    color: rgba(0, 0, 0, 0.35) !important;
    font-size: 10.5px !important;
    margin-right: auto !important;
}

.klaro .cookie-modal .cm-powered-by a {
    color: #FF6B35 !important;
    text-decoration: none !important;
}

/* Modal-scoped button colors — Save (dark) is distinct from Notice's missing Save state */
.klaro .cookie-modal .cm-btn-success,
.klaro .cookie-modal .cm-btn-success-var,
.klaro .cookie-modal .cm-btn-accept-all {
    background: #FF6B35 !important;
    color: #fff !important;
}

.klaro .cookie-modal .cm-btn-decline {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    padding: 8px 17px !important;
}

/* "Save current selection" button — distinct dark fill */
.klaro .cookie-modal .cm-btn-success:not(.cm-btn-accept-all):not(.cm-btn-success-var) {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * C. PERSISTENT WIDGET (always-visible cookie settings reopener)
 *    DOM injected by klaro-runtime.js. Hides when the modal is open.
 * ═══════════════════════════════════════════════════════════════════════════ */

#sellspark-cookie-widget {
    position: fixed !important;
    left: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: var(--cream-white, #FDF9F0) !important;
    will-change: transform !important;
    contain: layout style paint !important;
    border: 1px solid rgba(255, 107, 53, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
    opacity: 0.75 !important;
}

#sellspark-cookie-widget::before {
    content: "🍪";
    font-size: 18px;
    line-height: 1;
}

@media (hover: hover) {
    #sellspark-cookie-widget:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 107, 53, 0.7) !important;
        box-shadow: 0 12px 28px -8px rgba(255, 107, 53, 0.35) !important;
        opacity: 1 !important;
    }
    #sellspark-cookie-widget:hover::after {
        opacity: 1;
    }
}
#sellspark-cookie-widget:active {
    transform: translateY(0);
}

/* Tooltip on hover (desktop) */
#sellspark-cookie-widget::after {
    content: "Cookie settings";
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Hide widget while a Klaro modal/notice is open (avoids double-show) */
.klaro:has(.cookie-modal:not([style*="display: none"])) ~ #sellspark-cookie-widget,
.klaro:has(.cookie-notice:not(.cookie-notice-hidden)) ~ #sellspark-cookie-widget,
body.klaro-open #sellspark-cookie-widget {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SCROLL LOCK + ANIMATION PAUSE WHEN MODAL IS OPEN
 * body.modal-active is set by klaro-runtime.js MutationObserver when the
 * consent MODAL (not the slim notice) is visible. Reuses the site-wide
 * convention from styles.css (lines 5-12) for animation pausing.
 * Scroll lock uses overflow:hidden per project convention (memory:
 * body-no-scroll class pattern — NOT position:fixed which breaks iOS).
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-active {
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE — mobile + tablet
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet (640–1024px) */
@media (max-width: 1024px) {
    .klaro .cookie-modal .cm-modal {
        max-height: 480px !important;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        width: 540px !important;
    }
}

/* Mobile (<640px) */
@media (max-width: 640px) {
    /* Notice: stack copy + buttons vertically, full-width buttons */
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        padding: 16px !important;
    }
    .klaro .cookie-notice .cn-ok,
    .klaro .cookie-notice .cn-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    .klaro .cookie-notice button,
    .klaro .cm-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Modal: full-viewport-friendly with safe-area */
    .klaro .cookie-modal .cm-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 14px !important;
    }
    .klaro .cookie-modal .cm-footer-buttons {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    .klaro .cookie-modal .cm-footer-buttons button {
        width: 100% !important;
    }
    .klaro .cookie-modal .cm-powered-by {
        margin-right: 0 !important;
        text-align: center !important;
        padding-bottom: 8px !important;
    }

    #sellspark-cookie-widget {
        font-size: 18px !important;
    }
    /* Hide tooltip on mobile (no hover) */
    #sellspark-cookie-widget::after {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Reduced motion preference
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .klaro .cookie-notice,
    .klaro .cookie-modal,
    .klaro .cm-btn,
    #sellspark-cookie-widget,
    #sellspark-cookie-widget:hover {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}