/* credbl.ai Klaro Theme Overrides */
.klaro {
    /* Klaro color variable overrides */
    --green1: #D4A012 !important; /* Primary Brand Gold */
    --green2: #FFD866 !important; /* Gold Light */
    --green3: #A07A0A !important; /* Gold Dark */
    --border1: rgba(212, 160, 18, 0.3) !important;
    --border2: rgba(212, 160, 18, 0.16) !important;
    --background1: rgba(14, 21, 40, 0.95) !important; /* Elevated deep blue */
    --font-color1: #F2F0EB !important; /* Text white */
    --font-color2: #D1D5DB !important; /* Text dim */
    --font-color3: #6B7280 !important; /* Text muted */
}

/* General Layout overrides */
.klaro .cookie-notice, .klaro .cookie-modal {
    font-family: 'Outfit', sans-serif !important;
    color: #F2F0EB !important;
}

.klaro .cookie-notice {
    background: rgba(14, 21, 40, 0.8) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(212, 160, 18, 0.2) !important;
}

/* Cookie Notice Footer & Button Re-ordering */
.klaro .cookie-notice .cn-ok {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

.klaro .cookie-notice .cn-buttons {
    display: contents !important; /* Flatten buttons out of the wrapper so we can reorder them individually */
}

/* Middle: Let me choose */
.klaro .cookie-notice .cn-learn-more {
    order: 2 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #D4A012 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    margin: 0 !important;
}

.klaro .cookie-notice .cn-learn-more:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

/* Left: Accept */
.klaro .cookie-notice .cm-btn-success {
    order: 1 !important;
    margin: 0 !important; /* Reset default margins */
}

/* Right: Decline */
.klaro .cookie-notice .cn-decline {
    order: 3 !important;
    margin: 0 !important; /* Reset default margins */
}

.klaro .cookie-modal .cm-modal {
    background: rgba(14, 21, 40, 0.8) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(212, 160, 18, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important;
}

/* Titles and links */
.klaro .cookie-modal h1, .klaro .cookie-modal .cm-app-title {
    font-family: 'Instrument Serif', Georgia, serif !important;
    color: #D4A012 !important;
    font-weight: 400 !important;
}
.klaro .cookie-notice a, .klaro .cookie-modal a {
    color: #D4A012 !important;
    text-decoration: none !important;
}
.klaro .cookie-notice a:hover, .klaro .cookie-modal a:hover {
    text-decoration: underline !important;
}

/* Buttons */
.klaro .cm-btn, .klaro .cn-button {
    background: linear-gradient(135deg, #FFD866 0%, #D4A012 50%, #A07A0A 100%) !important;
    color: #030508 !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 24px rgba(212,160,18,0.25) !important;
    text-shadow: none !important;
    padding: 10px 20px !important;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}

.klaro .cm-btn:hover, .klaro .cn-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 40px rgba(212,160,18,0.45) !important;
}

/* Secondary Button / Decline */
.klaro .cm-btn.cm-btn-decline, .klaro .cm-btn.cm-btn-danger, .klaro .cn-button.cn-decline {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #D1D5DB !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 400 !important;
}

.klaro .cm-btn.cm-btn-decline:hover, .klaro .cm-btn.cm-btn-danger:hover, .klaro .cn-button.cn-decline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFF !important;
}

/* Toggles */
.klaro .slider, .klaro .cm-switch .slider {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Toggled ON state */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input:checked ~ .cm-list-label .slider,
.klaro .cm-switch .slider.checked,
.klaro span.checked {
    background-color: #D4A012 !important;
    box-shadow: 0 0 8px rgba(212, 160, 18, 0.5) !important;
}

/* Knob styling */
.klaro .slider::before,
.klaro .cm-switch .slider::before {
    background-color: #F2F0EB !important;
}