/* 
=== KLARO COOKIE CONSENT - CUSTOM STYLES ===
Based on exact working HTML structure - NO OVERLAPPING
*/

/* Design tokens */
:root {
    --ios-toggle-off: linear-gradient(
        to right,
        rgba(139, 92, 246, 0.15) 0%,
        rgba(16, 185, 129, 0.15) 100%
    );
    --ios-toggle-off-solid: rgba(139, 92, 246, 0.18);
    --ios-toggle-off-border: rgba(139, 92, 246, 0.25);
    --ios-toggle-on: linear-gradient(to right, #8B5CF6 0%, #10B981 100%);
    --ios-toggle-on-solid: #10B981;
    --ios-toggle-on-border: rgba(139, 92, 246, 0.45);
    --ios-toggle-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --ios-toggle-handle-shadow: 0 5px 12px rgba(139, 92, 246, 0.28);
    --ios-toggle-handle-active-shadow: 0 6px 16px rgba(16, 185, 129, 0.38);

    /* Button design tokens */
    --klaro-surface: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.95));
    --klaro-surface-hover: linear-gradient(135deg, rgba(248, 250, 252, 1), rgba(255, 255, 255, 1));
    --klaro-surface-muted: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.95));
    --klaro-border: rgba(148, 163, 184, 0.35);
    --klaro-border-strong: rgba(99, 102, 241, 0.45);
    --klaro-border-success: rgba(16, 185, 129, 0.55);
    --klaro-text: #0f172a;
    --klaro-text-muted: #475569;
    --klaro-text-inverse: #f8fafc;
    --klaro-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    --klaro-shadow-strong: 0 24px 60px rgba(76, 29, 149, 0.35);
    --klaro-shadow-success: 0 24px 60px rgba(6, 95, 70, 0.35);
}

@media (prefers-color-scheme: dark) {
    :root {
        --klaro-surface: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
        --klaro-surface-hover: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
        --klaro-surface-muted: linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94));
        --klaro-border: rgba(148, 163, 184, 0.45);
        --klaro-border-strong: rgba(129, 140, 248, 0.55);
        --ios-toggle-off-solid: rgba(139, 92, 246, 0.25);
        --ios-toggle-on-solid: #34D399;
        --klaro-border-success: rgba(16, 185, 129, 0.6);
        --klaro-text: #e2e8f0;
        --klaro-text-muted: #cbd5f5;
        --klaro-text-inverse: #f8fafc;
        --klaro-shadow: 0 20px 55px rgba(2, 6, 23, 0.55);
        --klaro-shadow-strong: 0 26px 70px rgba(79, 70, 229, 0.45);
        --klaro-shadow-success: 0 26px 70px rgba(5, 150, 105, 0.45);
    }
}

/* Reset */
.klaro *,
.cm-modal * {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
}

/* Modal Container */
.klaro .cm-modal {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    max-width: 600px !important;
    width: 100% !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    margin: 20px auto !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Modal Overlay */
.klaro .cm-modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
}

/* Modal Header */
.klaro .cm-header h1,
.klaro .cm-title {
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Removed duplicate cookie icon - already in config */

/* Description */
.klaro .cm-description {
    color: #666 !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
}

.klaro .cm-description a {
    color: #10B981 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.klaro .cm-description a:hover {
    text-decoration: underline !important;
}

/* Service List */
.klaro .cm-list {
    margin: 0 !important;
}

/* Cookie Category Container */
.klaro .cm-list-item {
    background: #f8f8f8 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    border: none !important;
    display: block !important;
}

/* CRITICAL: Category Header Row - Contains toggle and labels */
.klaro .cm-list-item > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    min-height: 32px !important;
}

/* Left Group - Toggle + Title */
.klaro .cm-list-item .cm-list-item-toggle {
    position: relative !important;
    width: 56px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
}

/* Toggle Input (hidden) */
.klaro .cm-list-input {
    position: absolute !important;
    inset: auto !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    margin: 0 !important;
}

.klaro .cm-list-item .cm-switch input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Toggle Label Container */
.klaro .cm-list-item > input + label,
.klaro .cm-list-input + .cm-list-label {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 40px !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 14px !important;
    -webkit-tap-highlight-color: transparent !important;
}

.klaro .cm-list-item .cm-switch {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.klaro .cm-list-input + .cm-list-label .cm-required,
.klaro .cm-list-input + .cm-list-label .cm-switch {
    flex-shrink: 0 !important;
}

.klaro .cm-list-input + .cm-list-label .cm-list-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Toggle container in Klaro v0.7 markup */
.klaro .cm-list-label .cm-switch {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 32px !important;
    border-radius: 9999px !important;
}

/* Toggle Slider Background - iOS inspired */
.klaro .cm-list-item .slider,
.klaro .cm-list-label .cm-switch .slider {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--ios-toggle-off) !important;
    background-image: var(--ios-toggle-off) !important;
    background-color: var(--ios-toggle-off-solid) !important;
    border-radius: 9999px !important;
    box-shadow: inset 0 0 0 1px var(--ios-toggle-off-border) !important;
    transition: var(--ios-toggle-transition) !important;
    -webkit-transition: var(--ios-toggle-transition) !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Toggle Slider Button */
.klaro .cm-list-item .slider:before,
.klaro .cm-list-label .cm-switch .slider:before {
    position: absolute !important;
    content: "" !important;
    height: 26px !important;
    width: 26px !important;
    left: 3px !important;
    top: 3px !important;
    background: linear-gradient(to right, #ffffff 0%, #f3e8ff 100%) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: var(--ios-toggle-handle-shadow) !important;
    transition: var(--ios-toggle-transition) !important;
    -webkit-transition: var(--ios-toggle-transition) !important;
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    z-index: 1 !important;
}

/* Checked State */
.klaro .cm-list-item input:checked + label .slider,
.klaro .cm-list-item input[aria-checked="true"] + label .slider,
.klaro .cm-list-item input[aria-checked="mixed"] + label .slider,
.klaro .cm-list-item .cm-switch input:checked + .slider,
.klaro .cm-list-item .cm-switch input[aria-checked="true"] + .slider,
.klaro .cm-list-item .cm-switch input[aria-checked="mixed"] + .slider,
.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider,
.klaro .cm-list-input[aria-checked="true"] + .cm-list-label .cm-switch .slider,
.klaro .cm-list-input[aria-checked="mixed"] + .cm-list-label .cm-switch .slider {
    background: var(--ios-toggle-on) !important;
    background-image: var(--ios-toggle-on) !important;
    background-color: var(--ios-toggle-on-solid) !important;
    box-shadow: inset 0 0 0 1px var(--ios-toggle-on-border) !important;
}

.klaro .cm-list-item input:checked + label .slider:before,
.klaro .cm-list-item input[aria-checked="true"] + label .slider:before,
.klaro .cm-list-item input[aria-checked="mixed"] + label .slider:before,
.klaro .cm-list-item .cm-switch input:checked + .slider:before,
.klaro .cm-list-item .cm-switch input[aria-checked="true"] + .slider:before,
.klaro .cm-list-item .cm-switch input[aria-checked="mixed"] + .slider:before,
.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider:before,
.klaro .cm-list-input[aria-checked="true"] + .cm-list-label .cm-switch .slider:before,
.klaro .cm-list-input[aria-checked="mixed"] + .cm-list-label .cm-switch .slider:before {
    background: linear-gradient(to right, #ede9fe 0%, #d1fae5 100%) !important;
    border-color: rgba(16, 185, 129, 0.55) !important;
    box-shadow: var(--ios-toggle-handle-active-shadow) !important;
    transform: translateX(24px) !important;
    -webkit-transform: translateX(24px) !important;
}

/* Disabled State (Essential Cookies) */
.klaro .cm-list-item-required input:disabled + label .slider,
.klaro .cm-list-item-required .cm-switch input:disabled + .slider,
.klaro .cm-list-input.required:disabled + .cm-list-label .cm-switch .slider {
    background: var(--ios-toggle-on) !important;
    background-image: var(--ios-toggle-on) !important;
    background-color: var(--ios-toggle-on-solid) !important;
    box-shadow: inset 0 0 0 1px var(--ios-toggle-on-border) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.klaro .cm-list-item-required .cm-list-item-toggle,
.klaro .cm-list-input.required:disabled + .cm-list-label {
    cursor: not-allowed !important;
}

/* Keyboard focus */
.klaro .cm-list-item input[type="checkbox"]:focus-visible + label .slider,
.klaro .cm-list-item .cm-switch input[type="checkbox"]:focus-visible + .slider,
.klaro .cm-list-input:focus-visible + .cm-list-label .cm-switch .slider {
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.6), 0 0 0 4px rgba(139, 92, 246, 0.25) !important;
}

.klaro .cm-list-item input[type="checkbox"]:focus-visible + label .slider:before,
.klaro .cm-list-item .cm-switch input[type="checkbox"]:focus-visible + .slider:before,
.klaro .cm-list-input:focus-visible + .cm-list-label .cm-switch .slider:before {
    box-shadow: var(--ios-toggle-handle-active-shadow) !important;
}

/* Mobile sizing */
@media (max-width: 640px) {
    .klaro .cm-list-item .cm-list-item-toggle,
    .klaro .cm-list-label .cm-switch {
        flex: 0 0 60px !important;
        width: 60px !important;
        height: 34px !important;
    }

    .klaro .cm-list-item .slider:before,
    .klaro .cm-list-label .cm-switch .slider:before {
        height: 28px !important;
        width: 28px !important;
    }

    .klaro .cm-list-item input:checked + label .slider:before,
    .klaro .cm-list-item input[aria-checked="true"] + label .slider:before,
    .klaro .cm-list-item input[aria-checked="mixed"] + label .slider:before,
    .klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider:before,
    .klaro .cm-list-input[aria-checked="true"] + .cm-list-label .cm-switch .slider:before,
    .klaro .cm-list-input[aria-checked="mixed"] + .cm-list-label .cm-switch .slider:before {
        transform: translateX(26px) !important;
        -webkit-transform: translateX(26px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .klaro .cm-list-item .slider,
    .klaro .cm-list-item .slider:before,
    .klaro .cm-list-label .cm-switch .slider,
    .klaro .cm-list-label .cm-switch .slider:before {
        transition: none !important;
        -webkit-transition: none !important;
    }
}

/* Category Title */
.klaro .cm-list-item-title {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #333 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

/* Required Badge */
.klaro .cm-list-item-title small,
.klaro .cm-list-item-title .required {
    font-weight: normal !important;
    font-size: 14px !important;
    color: #666 !important;
}

/* Service Count - Right Side with green accent */
.klaro .cm-list-item .cm-list-item-title span:last-child {
    color: #10B981 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Add arrow to service count */
.klaro .cm-list-item .cm-list-item-title span:last-child:before {
    content: "↑ " !important;
}

/* Description Section */
.klaro .cm-list-item-description {
    margin-left: 64px !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.klaro .cm-list-item-description strong {
    font-weight: 600 !important;
}

/* Purpose Text */
.klaro .cm-purposes,
.klaro .cm-purpose {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #888 !important;
}

/* Divider */
.klaro .cm-list:after {
    content: "" !important;
    display: block !important;
    border-top: 1px solid #e5e5e5 !important;
    margin: 24px 0 !important;
}

/* Button Group - Fixed alignment */
.klaro .cm-footer {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Buttons - Magic UI inspired styling */
.klaro .cm-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex: 1 1 160px !important;
    min-width: 140px !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    border: 1px solid var(--klaro-border) !important;
    background: var(--klaro-surface) !important;
    color: var(--klaro-text) !important;
    box-shadow: var(--klaro-shadow) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease !important;
}

.klaro .cm-btn:hover {
    transform: translateY(-3px) !important;
    background: var(--klaro-surface-hover) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18) !important;
}

.klaro .cm-btn:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.55) !important;
    outline-offset: 2px !important;
}

.klaro .cm-btn:active {
    transform: translateY(-1px) !important;
}

/* Reject Button */
.klaro .cm-btn-decline {
    background: var(--klaro-surface-muted) !important;
    color: var(--klaro-text) !important;
    border-color: var(--klaro-border) !important;
    box-shadow: var(--klaro-shadow) !important;
}

.klaro .cm-btn-decline:hover {
    background: var(--klaro-surface-hover) !important;
}

/* Accept Selection Button - Secondary with gradient */
.klaro .cm-btn-accept {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(79, 70, 229, 0.98)) !important;
    color: var(--klaro-text-inverse) !important;
    border-color: var(--klaro-border-strong) !important;
    box-shadow: var(--klaro-shadow-strong) !important;
}

.klaro .cm-btn-accept:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(67, 56, 202, 1)) !important;
    box-shadow: 0 28px 70px rgba(76, 29, 149, 0.45) !important;
}

.klaro .cm-btn-accept:focus-visible {
    outline-color: rgba(139, 92, 246, 0.65) !important;
}

/* Accept All Button - Primary green theme */
.klaro .cm-btn-accept-all {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.98), rgba(5, 150, 105, 0.98)) !important;
    color: var(--klaro-text-inverse) !important;
    border-color: var(--klaro-border-success) !important;
    box-shadow: var(--klaro-shadow-success) !important;
}

.klaro .cm-btn-accept-all:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 1), rgba(4, 120, 87, 1)) !important;
    box-shadow: 0 28px 70px rgba(5, 150, 105, 0.45) !important;
}

.klaro .cm-btn-accept-all:focus-visible {
    outline-color: rgba(16, 185, 129, 0.65) !important;
}

/* CRITICAL MOBILE FIX: Buttons MUST be visible! */
@media (max-width: 768px) {
    .klaro .cm-modal {
        width: calc(100% - 20px) !important; /* Not 100%, with margin */
        max-width: 100% !important;
        margin: 10px !important;
        padding: 20px 15px !important;
        border-radius: 12px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* BUTTONS MUST STACK VERTICALLY */
    .klaro .cm-footer,
    .klaro .cm-footer-buttons {
        display: flex !important;
        flex-direction: column !important; /* VERTICAL, not horizontal */
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: 20px !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .klaro .cm-btn {
        width: 100% !important; /* Full width */
        min-width: unset !important; /* No min width */
        max-width: 100% !important;
        margin: 0 !important; /* No side margins */
        padding: 1rem 1.25rem !important;
        font-size: 1rem !important;
        justify-content: center !important;
        white-space: normal !important;
        min-height: 44px !important; /* iOS touch target */
        flex: 0 0 auto !important;
        align-self: stretch !important;
    }

    /* Specific button order and colors */
    .klaro .cm-btn-decline {
        order: 1 !important;
    }

    .klaro .cm-btn-accept {
        order: 2 !important;
    }

    .klaro .cm-btn-accept-all {
        order: 3 !important;
    }

    .klaro .cm-list-item-description {
        margin-left: 0 !important;
        margin-top: 12px !important;
    }
    
    .klaro .cm-list-item .cm-list-item-toggle {
        margin-right: 8px !important;
    }
    
    .klaro .cm-header h1,
    .klaro .cm-title {
        font-size: 20px !important;
    }
}

/* Prevent horizontal scroll on mobile */
body.klaro-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* iPhone Specific Viewport Adjustments */
@media screen and (max-width: 428px) { /* iPhone 14 Pro Max and smaller */
    .klaro .cm-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling iOS */
        padding: 16px !important;
    }

    /* Buttons MUST ALL be visible */
    .klaro .cm-footer,
    .klaro .cm-footer-buttons {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 20px !important;
        padding-bottom: 10px !important; /* Extra padding bottom */
    }

    .klaro .cm-btn {
        display: inline-flex !important;
        width: 100% !important;
        padding: 0.9rem 1.1rem !important;
        font-size: 0.95rem !important;
        border-radius: 999px !important;
        font-weight: 600 !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 44px !important; /* iOS minimum touch target */
        flex: 0 0 auto !important;
        align-self: stretch !important;
    }
    
    /* Smaller font for title on very small screens */
    .klaro .cm-header h1,
    .klaro .cm-title {
        font-size: 18px !important;
    }
    
    /* Adjust toggle size for small screens */
    .klaro .cm-list-item .cm-list-item-toggle {
        width: 48px !important;
        height: 26px !important;
    }
    
    .klaro .cm-list-item .cm-switch,
    .klaro .cm-list-item > input + label {
        width: 48px !important;
        height: 26px !important;
    }

    .klaro .cm-list-item .slider:before {
        height: 22px !important;
        width: 22px !important;
        top: 2px !important;
        left: 2px !important;
    }

    .klaro .cm-list-item input:checked + label .slider:before,
    .klaro .cm-list-item input[aria-checked="true"] + label .slider:before,
    .klaro .cm-list-item input[aria-checked="mixed"] + label .slider:before {
        transform: translateX(22px) !important;
        -webkit-transform: translateX(22px) !important;
    }
}

/* Very small devices (iPhone SE, etc.) */
@media (max-width: 375px) {
    .klaro .cm-modal {
        padding: 14px !important;
        margin: 6px !important;
    }
    
    .klaro .cm-btn {
        padding: 0.85rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .klaro .cm-description {
        font-size: 13px !important;
    }
    
    .klaro .cm-list-item {
        padding: 12px !important;
    }
}

/* Hide Powered By */
.klaro .cm-powered-by {
    display: none !important;
}

/* Close Button */
.klaro .cm-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 2px solid #ccc !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10000 !important;
}

.klaro .cm-close:hover {
    background: #f3f4f6 !important;
    border-color: #999 !important;
}

/* OVERRIDE ANY CONFLICTING STYLES */
.klaro .cm-list-item > * {
    position: relative !important;
    z-index: auto !important;
}

/* Force toggle to stay inline */
.klaro .cm-list-item .cm-list-item-toggle {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
}

/* Ensure title stays inline with toggle */
.klaro .cm-list-item .cm-list-item-info {
    display: inline-flex !important;
    flex: 1 !important;
    align-items: center !important;
}

/* Force flexbox on the header row */
.klaro .cm-list-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    min-height: 32px !important;
}

/* Left group flexbox */
.klaro .cm-list-item-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}

/* Right group alignment */
.klaro .cm-list-item-header > div:last-child {
    flex-shrink: 0 !important;
}

/* ===== iOS-SPECIFIC FIXES FOR SAFARI/CHROME ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS only styles */
    .klaro .cm-list-item .slider {
        -webkit-tap-highlight-color: transparent !important;
        background: var(--ios-toggle-off) !important;
        background-image: var(--ios-toggle-off) !important;
        background-color: var(--ios-toggle-off-solid) !important;
        box-shadow: inset 0 0 0 1px var(--ios-toggle-off-border) !important;
    }

    .klaro .cm-list-item input:checked + label .slider,
    .klaro .cm-list-item input[aria-checked="true"] + label .slider,
    .klaro .cm-list-item input[aria-checked="mixed"] + label .slider {
        background: var(--ios-toggle-on) !important;
        background-image: var(--ios-toggle-on) !important;
        background-color: var(--ios-toggle-on-solid) !important;
        box-shadow: inset 0 0 0 1px var(--ios-toggle-on-border) !important;
    }
    
    /* Ensure toggle doesn't use webkit appearance */
    .klaro .cm-list-item input[type="checkbox"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        position: absolute !important;
        opacity: 0 !important;
        cursor: pointer !important;
        height: 0 !important;
        width: 0 !important;
    }
}

/* Additional webkit-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Ensure slider visibility on webkit browsers */
    .klaro .cm-list-item .slider {
        background: var(--ios-toggle-off) !important;
        background-image: var(--ios-toggle-off) !important;
        background-color: var(--ios-toggle-off-solid) !important;
        box-shadow: inset 0 0 0 1px var(--ios-toggle-off-border) !important;
    }

    .klaro .cm-list-item input:checked + label .slider,
    .klaro .cm-list-item input[aria-checked="true"] + label .slider,
    .klaro .cm-list-item input[aria-checked="mixed"] + label .slider {
        background: var(--ios-toggle-on) !important;
        background-image: var(--ios-toggle-on) !important;
        background-color: var(--ios-toggle-on-solid) !important;
        box-shadow: inset 0 0 0 1px var(--ios-toggle-on-border) !important;
    }

    .klaro .cm-list-item input:checked + label .slider:before,
    .klaro .cm-list-item input[aria-checked="true"] + label .slider:before,
    .klaro .cm-list-item input[aria-checked="mixed"] + label .slider:before {
        background-color: #FFFFFF !important;
        box-shadow: var(--ios-toggle-handle-shadow) !important;
    }

    .klaro .cm-list-item .slider:before {
        background-color: #FFFFFF !important;
        box-shadow: var(--ios-toggle-handle-shadow) !important;
    }
}