/* Custom Cookie Consent Styles to match portfolio design */

:root {
    --cc-bg: #FEFFF0;
    --cc-primary-color: #000000;
    --cc-secondary-color: #666666;
    --cc-btn-primary-bg: #000000;
    --cc-btn-primary-color: #FEFFF0;
    --cc-btn-primary-hover-bg: #333333;
    --cc-btn-secondary-bg: #BAE6FF;
    --cc-btn-secondary-color: #000000;
    --cc-btn-secondary-hover-bg: #9DD1F0;
    --cc-separator-border-color: #E5E5E5;
    --cc-toggle-on-bg: #000000;
    --cc-toggle-off-bg: #E5E5E5;
    --cc-toggle-on-knob-bg: #FEFFF0;
    --cc-toggle-off-knob-bg: #999999;
    --cc-cookie-category-block-bg: #F5F5F5;
    --cc-overlay-bg: rgba(0, 0, 0, 0.5);
    --cc-font-family: "Space Grotesk", sans-serif;
}

/* Modal styling */
#cc-main .cm,
#cc-main .pm {
    background: var(--cc-bg);
    border: 2px solid #000000;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: var(--cc-font-family);
}

/* Title styling */
#cc-main .cm__title,
#cc-main .pm__title {
    font-family: var(--cc-font-family);
    font-weight: 700;
    color: var(--cc-primary-color);
}

/* Description text */
#cc-main .cm__desc,
#cc-main .pm__section-desc {
    font-family: var(--cc-font-family);
    color: var(--cc-secondary-color);
    line-height: 1.6;
}

/* Button styling */
#cc-main button {
    font-family: var(--cc-font-family);
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Primary button (Accept all) */
#cc-main .cm__btn--primary,
#cc-main .pm__btn--primary {
    background: var(--cc-btn-primary-bg);
    color: var(--cc-btn-primary-color);
    border-color: var(--cc-btn-primary-bg);
}

#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
    background: var(--cc-btn-primary-hover-bg);
    border-color: var(--cc-btn-primary-hover-bg);
    transform: translateY(-2px);
}

/* Secondary button (Reject all / Manage preferences) */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
    background: var(--cc-btn-secondary-bg);
    color: var(--cc-btn-secondary-color);
    border-color: var(--cc-btn-secondary-bg);
}

#cc-main .cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover {
    background: var(--cc-btn-secondary-hover-bg);
    border-color: var(--cc-btn-secondary-hover-bg);
    transform: translateY(-2px);
}

/* Toggle switches */
#cc-main .section__toggle {
    background: var(--cc-toggle-off-bg);
}

#cc-main .section__toggle.toggle--on {
    background: var(--cc-toggle-on-bg);
}

/* Badge styling */
#cc-main .pm__badge {
    background: #FFB6D9;
    color: #000000;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85em;
}

/* Section blocks */
#cc-main .pm__section {
    border-radius: 8px;
    border: 1px solid #E5E5E5;
}

/* Separator */
#cc-main .pm__section + .pm__section {
    border-top-color: var(--cc-separator-border-color);
}

/* Overlay */
#cc-main #cm,
#cc-main #s-all-bn {
    backdrop-filter: blur(4px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #cc-main .cm {
        border-radius: 12px 12px 0 0;
    }
}