/*
 * klaro-3p-score.css - Custom Styling for 3P Score Brand
 * Version: 1.0
 * Created: 2025-09-11
 * Author: moorwald | sven döring
 * 
 * Brand Colors:
 * Primary Blue: rgba(0,0,158,1) / #00009e
 * Secondary Gold: rgba(202,182,119,1) / #cab677
 * White: rgba(255,255,255,1) / #ffffff
 */

/* Import Space Grotesk Font if not already loaded */
@import url('https://api.fonts.coollabs.io/css2?family=Space+Grotesk:wght@400;700&display=swap');

/* ===========================================
   CSS VARIABLES OVERRIDE - 3P SCORE COLORS
   ========================================== */

/* Override klaro.js default CSS variables with 3P Score branding */
:root {
    --green1: #00009e !important;  /* Replace default green #1a936f with 3P Score blue */
    --green2: #0000cc !important;  /* Replace secondary green with darker 3P Score blue */
    --green3: rgba(0, 0, 158, 0.1) !important;  /* Replace light green with light 3P Score blue */
    --primary-color: #00009e !important;  /* Primary 3P Score blue */
    --accent-color: #cab677 !important;   /* 3P Score gold accent */
}

/* Force override any remaining green colors in klaro components */
.klaro-3p-score * {
    --green1: #00009e !important;
    --green2: #0000cc !important;  
    --green3: rgba(0, 0, 158, 0.1) !important;
}

/* NUCLEAR OPTION - Override any inline styles that might be set by klaro.js */
[id^="klaro"] button,
[class*="klaro"] button,
[class*="cm-btn"] {
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
}

/* Extremely specific override for GDPR compliance */
body .klaro-3p-score .cm-modal .cm-buttons > * {
    flex: 0 0 170px !important;
    width: 170px !important;
    max-width: 170px !important;
}

/* ===========================================
   KLARO BASE OVERRIDES - 3P SCORE BRANDING
   ========================================== */

/* Global Font and Base Settings */
.klaro-3p-score,
.klaro-3p-score * {
    font-family: 'Space Grotesk', Helvetica, Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* ===========================================
   CONSENT MODAL STYLING
   ========================================== */

/* Modal Container */
.klaro-3p-score .cm-modal {
    border-radius: 15px !important;
    box-shadow: 0 0 80px rgba(0, 0, 158, 0.25) !important;
    border: 1px solid rgba(0, 0, 158, 0.1) !important;
    overflow: hidden !important;
    max-width: 900px !important;
    max-height: 90vh !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: rgba(0,0,158,1) !important;
    background: white !important;
}

/* Modal Header */
.klaro-3p-score .cm-modal .cm-header {
    background-color: rgba(0, 0, 158, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 158, 0.1) !important;
    padding: 30px !important;
    text-align: center !important;
}

.klaro-3p-score .cm-modal .cm-header h1 {
    color: rgba(0, 0, 158, 1) !important;
    font-size: 35px !important;
    font-weight: 700 !important;
    line-height: 1.10 !important;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
}

.klaro-3p-score .cm-modal .cm-header .cm-description {
    font-size: 20px !important;
    line-height: 1.4 !important;
    color: rgba(0, 0, 158, 1) !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Modal Body */
.klaro-3p-score .cm-modal .cm-body {
    padding: 30px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
}

/* Modal Footer */
.klaro-3p-score .cm-modal .cm-footer {
    padding: 20px 30px 30px 30px !important;
    border-top: 1px solid rgba(0, 0, 158, 0.1) !important;
    background-color: rgba(255, 255, 255, 1) !important;
}

/* ===========================================
   SERVICE DETAILS STYLING
   ========================================== */

/* Fix green text in service details - change to 3P Score blue */
.klaro-3p-score .cm-modal .cm-services .cm-service .purposes,
.klaro-3p-score .cm-modal .cm-services .cm-service .cm-list-description,
.klaro-3p-score .cm-modal .cm-services .cm-caret a {
    color: rgba(0, 0, 158, 0.7) !important;
}

/* Service titles */
.klaro-3p-score .cm-modal .cm-services .cm-service .cm-list-title {
    color: rgba(0, 0, 158, 1) !important;
    font-weight: 600 !important;
}

/* Active/enabled service indicators */
.klaro-3p-score .cm-modal .cm-services .cm-service .slider.active,
.klaro-3p-score .cm-modal .cm-services .cm-service .slider.round.active {
    background-color: rgba(0, 0, 158, 1) !important;
}

/* Service list styling */
.klaro-3p-score .cm-modal .cm-services .cm-service {
    border-bottom: 1px solid rgba(0, 0, 158, 0.1) !important;
}

/* Caret/dropdown styling */
.klaro-3p-score .cm-modal .cm-services .cm-caret a span {
    color: rgba(0, 0, 158, 1) !important;
}

/* ===========================================
   BUTTON STYLING - 3P SCORE DESIGN SYSTEM  
   ========================================== */

/* Base Button Styling - GDPR Compliant (All buttons equal size) */
div.klaro-3p-score .cm-modal .cm-buttons .cm-btn,
div.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn,
.klaro-3p-score .cm-modal .cm-buttons button.cm-btn,
.klaro-3p-score .cm-notice .cm-notice-buttons button.cm-btn {
    font-family: 'Space Grotesk', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    border-radius: 100px !important;
    padding: 12px 15px !important;
    min-width: 170px !important;
    width: 170px !important;  /* Equal width for all buttons */
    max-width: 170px !important; /* Prevent expansion */
    text-align: center !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    margin: 0 6px !important;
    height: 46px !important;  /* Equal height for all buttons */
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ultra-specific selectors for each button type */
/* GDPR-compliant button order: Decline → Accept All (middle) → Accept Selected */
div.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-decline,
div.klaro-3p-score .cm-modal .cm-buttons button.cm-btn.cm-btn-decline {
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
    order: 1 !important; /* First position */
}

div.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-accept-all,
div.klaro-3p-score .cm-modal .cm-buttons button.cm-btn.cm-btn-accept-all {
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
    order: 2 !important; /* Middle position - GDPR compliant */
}

div.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-accept-selected,  
div.klaro-3p-score .cm-modal .cm-buttons button.cm-btn.cm-btn-accept-selected {
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
    order: 3 !important; /* Last position */
}

/* Primary Button - "Alle akzeptieren" */
.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-accept-all,
.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn.cm-btn-accept-all {
    background-color: rgba(0, 0, 158, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(0, 0, 158, 1) !important;
}

.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-accept-all:hover,
.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn.cm-btn-accept-all:hover {
    opacity: 0.7 !important;
    transform: translateY(-1px) !important;
}

/* Secondary Button - "Auswahl akzeptieren" */
.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-accept-selected {
    background-color: rgba(255, 255, 255, 1) !important;
    color: rgba(0, 0, 158, 1) !important;
    border: 1px solid rgba(0, 0, 158, 1) !important;
}

.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-accept-selected:hover {
    background-color: rgba(0, 0, 158, 0.05) !important;
    transform: translateY(-1px) !important;
}

/* Decline Button */
.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-decline {
    background-color: transparent !important;
    color: rgba(0, 0, 158, 0.7) !important;
    border: 1px solid rgba(0, 0, 158, 0.3) !important;
}

.klaro-3p-score .cm-modal .cm-buttons .cm-btn.cm-btn-decline:hover {
    background-color: rgba(0, 0, 158, 0.05) !important;
    color: rgba(0, 0, 158, 1) !important;
    border-color: rgba(0, 0, 158, 0.5) !important;
}

/* Button Container - GDPR Compliant Layout */
.klaro-3p-score .cm-modal .cm-buttons,
.klaro-3p-score .cm-notice .cm-notice-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0px !important;  /* No gap, use button margins instead */
    flex-wrap: wrap !important;
    margin-top: 30px !important;
    padding: 0 20px !important;
}

/* GDPR compliant button order - ensure "Alle akzeptieren" is in middle */
.klaro-3p-score .cm-modal .cm-buttons {
    flex-direction: row !important;
}

/* Mobile responsive stacking for small screens */
@media (max-width: 768px) {
    .klaro-3p-score .cm-modal .cm-buttons,
    .klaro-3p-score .cm-notice .cm-notice-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-buttons .cm-btn,
    .klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
    }
}

/* ===========================================
   SERVICE CONFIGURATION STYLING
   ========================================== */

/* Services Container */
.klaro-3p-score .cm-modal .cm-services {
    margin: 20px 0 !important;
}

/* Individual Service Item */
.klaro-3p-score .cm-modal .cm-services .cm-service {
    border: 1px solid rgba(0, 0, 158, 0.15) !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    padding: 20px !important;
    background-color: rgba(255, 255, 255, 1) !important;
    transition: all 0.3s ease !important;
}

.klaro-3p-score .cm-modal .cm-services .cm-service:hover {
    border-color: rgba(0, 0, 158, 0.3) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 158, 0.1) !important;
}

/* Service Header */
.klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

/* Service Title */
.klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-title {
    color: rgba(0, 0, 158, 1) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* Service Description */
.klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-description {
    color: rgba(0, 0, 158, 0.8) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 10px 0 0 0 !important;
}

/* Toggle Switch Styling */
.klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-switch {
    accent-color: rgba(0, 0, 158, 1) !important;
    transform: scale(1.2) !important;
    cursor: pointer !important;
}

/* Required Service Indicator */
.klaro-3p-score .cm-modal .cm-services .cm-service.cm-service-required {
    border-color: rgba(202, 182, 119, 0.5) !important;
    background-color: rgba(202, 182, 119, 0.05) !important;
}

.klaro-3p-score .cm-modal .cm-services .cm-service.cm-service-required .cm-service-title::after {
    content: " (erforderlich)";
    font-size: 14px !important;
    color: rgba(202, 182, 119, 1) !important;
    font-weight: 400 !important;
}

/* ===========================================
   CONSENT NOTICE (BANNER) STYLING
   ========================================== */

/* Notice Container */
.klaro-3p-score .cm-notice {
    background-color: rgba(0, 0, 158, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
    font-family: 'Space Grotesk', Helvetica, Arial, sans-serif !important;
    border-radius: 10px !important;
    margin: 20px !important;
    padding: 25px !important;
    box-shadow: 0 0 30px rgba(0, 0, 158, 0.3) !important;
    border: none !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    max-width: 800px !important;
    margin: 0 auto 20px auto !important;
}

/* Notice Text */
.klaro-3p-score .cm-notice .cm-notice-description {
    margin-bottom: 20px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}

/* Notice Buttons in Banner */
.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn.cm-btn-accept-all {
    background-color: rgba(202, 182, 119, 1) !important;
    color: rgba(0, 0, 158, 1) !important;
    border: none !important;
    font-weight: 700 !important;
}

.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn.cm-btn-accept-all:hover {
    background-color: rgba(202, 182, 119, 0.8) !important;
    transform: translateY(-1px) !important;
}

.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn.cm-btn-show-preferences {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn.cm-btn-show-preferences:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px) !important;
}

/* ===========================================
   PURPOSE GROUPING
   ========================================== */

.klaro-3p-score .cm-modal .cm-purposes {
    margin: 20px 0 !important;
}

.klaro-3p-score .cm-modal .cm-purpose {
    margin-bottom: 25px !important;
}

.klaro-3p-score .cm-modal .cm-purpose .cm-purpose-title {
    color: rgba(0, 0, 158, 1) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid rgba(0, 0, 158, 0.1) !important;
}

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

@media (max-width: 640px) {
    /* Modal adjustments */
    .klaro-3p-score .cm-modal {
        margin: 10px !important;
        border-radius: 10px !important;
        max-height: 95vh !important;
        font-size: 15px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-header {
        padding: 20px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-header h1 {
        font-size: 23px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-body {
        padding: 20px !important;
        max-height: 50vh !important;
    }
    
    /* Button adjustments */
    .klaro-3p-score .cm-modal .cm-buttons,
    .klaro-3p-score .cm-notice .cm-notice-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-buttons .cm-btn,
    .klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn {
        width: 100% !important;
        margin: 0 !important;
        font-size: 16px !important;
        padding: 12px 20px !important;
    }
    
    /* Notice banner adjustments */
    .klaro-3p-score .cm-notice {
        margin: 10px !important;
        padding: 20px !important;
        font-size: 15px !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 10px 10px 0 0 !important;
    }
    
    /* Service items mobile */
    .klaro-3p-score .cm-modal .cm-services .cm-service {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-title {
        font-size: 18px !important;
    }
    
    .klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-description {
        font-size: 14px !important;
    }
}

/* ===========================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================== */

/* Focus states */
.klaro-3p-score .cm-modal .cm-buttons .cm-btn:focus,
.klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn:focus {
    outline: 2px solid rgba(0, 0, 158, 1) !important;
    outline-offset: 2px !important;
}

.klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-switch:focus {
    outline: 2px solid rgba(0, 0, 158, 1) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .klaro-3p-score .cm-modal {
        border: 2px solid rgba(0, 0, 158, 1) !important;
    }
    
    .klaro-3p-score .cm-modal .cm-services .cm-service {
        border-width: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .klaro-3p-score .cm-modal .cm-buttons .cm-btn,
    .klaro-3p-score .cm-notice .cm-notice-buttons .cm-btn,
    .klaro-3p-score .cm-modal .cm-services .cm-service {
        transition: none !important;
    }
}

/* ===========================================
   DARK MODE SUPPORT (Optional)
   ========================================== */

@media (prefers-color-scheme: dark) {
    .klaro-3p-score .cm-modal {
        background-color: rgba(40, 40, 40, 1) !important;
        color: rgba(255, 255, 255, 1) !important;
        box-shadow: 0 0 70px rgba(0, 0, 158, 0.4) !important;
    }
    
    .klaro-3p-score .cm-modal .cm-header {
        background-color: rgba(0, 0, 158, 0.15) !important;
        border-bottom-color: rgba(0, 0, 158, 0.3) !important;
    }
    
    .klaro-3p-score .cm-modal .cm-header h1,
    .klaro-3p-score .cm-modal .cm-header .cm-description {
        color: rgba(255, 255, 255, 1) !important;
    }
    
    .klaro-3p-score .cm-modal .cm-services .cm-service {
        background-color: rgba(60, 60, 60, 1) !important;
        border-color: rgba(0, 0, 158, 0.3) !important;
    }
    
    .klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-title {
        color: rgba(255, 255, 255, 1) !important;
    }
    
    .klaro-3p-score .cm-modal .cm-services .cm-service .cm-service-description {
        color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* ===========================================
   CLOSE BUTTON STYLING
   ========================================== */

.klaro-3p-score .cm-modal .cm-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: rgba(0, 0, 158, 0.7) !important;
    cursor: pointer !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.klaro-3p-score .cm-modal .cm-close:hover {
    background-color: rgba(0, 0, 158, 0.1) !important;
    color: rgba(0, 0, 158, 1) !important;
}

/* ===========================================
   ANIMATION AND TRANSITIONS
   ========================================== */

.klaro-3p-score .cm-modal {
    animation: slideInUp 0.3s ease-out !important;
}

.klaro-3p-score .cm-notice {
    animation: slideInUp 0.4s ease-out !important;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state */
.klaro-3p-score.klaro-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ===========================================
   PRINT STYLES
   ========================================== */

@media print {
    .klaro-3p-score .cm-notice,
    .klaro-3p-score .cm-modal {
        display: none !important;
    }
}