/* --- Premium Modern Styling --- */

/* 1. The Container */
div#klaro .cookie-notice {
    background-color: #0f172a !important; 
    border: 1px solid #1e293b !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
    padding: 24px !important;
    width: 400px !important;
    bottom: 30px !important;
    right: 30px !important;
}

/* 2. Text Spacing (More space above Manage) */
div#klaro .cn-body p {
    margin-bottom: 30px !important; /* Pushes the buttons down */
}

/* 3. Button Layout Container (Less space between Manage and buttons below) */
div#klaro .cn-ok {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Tightens the space between Manage and the bottom row */
}

/* 4. Bottom Button Row Alignment */
div#klaro .cn-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
}

/* 5. Unified Button Styling - Applies to all three buttons */
div#klaro .cm-btn,
div#klaro .cn-learn-more {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
    padding: 12px 8px !important; /* Slightly more padding for a "button" feel */
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* 6. "Accept All" - Primary action */
div#klaro .cm-btn-success {
    background-color: #00d4ff !important;
    color: #000 !important;
}

/* 7. "Reject All" - Secondary action */
div#klaro .cm-btn-danger {
    background-color: #334155 !important;
    color: #fff !important;
}

/* 8. "Manage" - Tertiary action */
div#klaro .cn-learn-more {
    background-color: #334155 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    width: 100% !important; /* Ensures it spans the width */
}

/* 9. Unified Hover effects */
div#klaro .cm-btn:hover,
div#klaro .cn-learn-more:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-2px) !important;
    cursor: pointer !important;
}

/* Responsive adjustment for small screens */
@media (max-width: 450px) {
    div#klaro .cookie-notice {
        width: 90vw !important;
        right: 5vw !important;
    }
}

/* --- Premium Modern Styling (Unified) --- */

/* --- 1. Initial Cookie Banner --- */
div#klaro .cookie-notice {
    background-color: #0f172a !important; 
    border: 1px solid #1e293b !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
    padding: 24px !important;
    width: 400px !important;
    bottom: 30px !important;
    right: 30px !important;
}

div#klaro .cn-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 20px !important;
}

/* Unified Button Styling */
div#klaro .cm-btn,
div#klaro .cn-learn-more {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
    padding: 12px 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    text-align: center !important;
    white-space: nowrap !important;
}

div#klaro .cm-btn-success { background-color: #00d4ff !important; color: #000 !important; }
div#klaro .cm-btn-danger { background-color: #334155 !important; color: #fff !important; }
div#klaro .cn-learn-more { background-color: #334155 !important; color: #fff !important; }

/* --- 2. Configuration Modal --- */
div#klaro .cm-modal {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
    color: #ffffff !important;
}

div#klaro .cm-modal .cm-header {
    border-bottom: 1px solid #1e293b !important;
    padding-bottom: 20px !important;
}

div#klaro .cm-modal h1.title {
    color: #ffffff !important;
    font-size: 20px !important;
}

/* Purpose and Service Cards */
div#klaro .cm-purposes {
    padding: 0 !important;
    margin-top: 20px !important;
}

div#klaro .cm-purpose {
    background-color: #1e293b !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    border: 1px solid #334155 !important;
}

/* --- 3. The Slider/Switch Logic --- */
div#klaro .cm-switch {
    background-color: #334155 !important;
    border-radius: 20px !important;
    width: 44px !important;
    height: 24px !important;
    position: relative !important;
    display: inline-block !important;
}

div#klaro .slider {
    background-color: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    transition: transform 0.3s ease !important;
    margin: 0 !important;
}

div#klaro .slider::before {
    display: none !important;
    content: none !important;
}

div#klaro .cm-list-input:checked + .cm-list-label .cm-switch {
    background-color: #00d4ff !important;
}

div#klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider {
    transform: translateX(20px) !important;
}

/* --- 4. Nested Content Alignment (Confirmed Fix) --- */
/* Reset the container holding the nested services */
div#klaro .cm-content, 
div#klaro .cm-services {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure the inner card doesn't have offset margins */
div#klaro .cm-service {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100% - 32px) !important; 
    margin: 0 auto 10px auto !important; 
    background-color: #0f172a !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #1e293b !important;
}

/* --- 5. Text and Labels --- */
div#klaro .cm-list-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    margin: 0 !important;
}

div#klaro .cm-list-title {
    color: #f8fafc !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

div#klaro .purposes p {
    color: #94a3b8 !important;
    font-size: 13px !important;
    margin: 5px 0 0 0 !important;
}

/* --- 6. Footer and Utilities --- */
div#klaro .cm-footer {
    border-top: 1px solid #1e293b !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

div#klaro .cm-modal .hide { 
    color: #ffffff !important; 
    opacity: 0.7 !important; 
}
div#klaro .cm-modal .hide:hover { opacity: 1 !important; }

/* Unified Hover effects */
div#klaro .cm-btn:hover,
div#klaro .cn-learn-more:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-2px) !important;
    cursor: pointer !important;
}

/* Responsive adjustment */
@media (max-width: 450px) {
    div#klaro .cookie-notice {
        width: 90vw !important;
        right: 5vw !important;
    }
}