.cpcmp-scope,
.cpcmp-scope *,
.cpcmp-ph,
.cpcmp-ph * {
box-sizing: border-box;
}
.cpcmp-scope:not(.cpcmp-policy-table) {
--cpcmp-font-stack: var(--cpcmp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
font-family: var(--cpcmp-font-stack);
font-size: var(--cpcmp-fs, 15px);
line-height: 1.55;
color: var(--cpcmp-text, #1f2430);
-webkit-font-smoothing: antialiased;
}
.cpcmp-sr {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
} .cpcmp-overlay {
position: fixed;
inset: 0;
background: var(--cpcmp-overlay, rgba(15, 20, 30, .55));
z-index: 2147483600;
animation: cpcmp-fade .18s ease-out;
} .cpcmp-banner {
position: fixed;
z-index: 2147483610;
background: var(--cpcmp-bg, #fff);
color: var(--cpcmp-text, #1f2430);
border: 1px solid var(--cpcmp-border, #dfe4ea);
box-shadow: var(--cpcmp-shadow, 0 12px 40px rgba(15, 20, 30, .18));
padding: var(--cpcmp-pad, 20px);
opacity: 0;
transform: translateY(8px);
transition: opacity .22s ease-out, transform .22s ease-out;
}
.cpcmp-banner.is-in {
opacity: 1;
transform: translateY(0);
}
.cpcmp-banner[data-layout="bar-bottom"] {
left: 0; right: 0; bottom: 0;
border-left: 0; border-right: 0; border-bottom: 0;
border-radius: 0;
}
.cpcmp-banner[data-layout="bar-top"] {
left: 0; right: 0; top: 0;
border-left: 0; border-right: 0; border-top: 0;
border-radius: 0;
transform: translateY(-8px);
}
.cpcmp-banner[data-layout="bar-top"].is-in { transform: translateY(0); }
.cpcmp-banner[data-layout="box"] {
bottom: 20px;
width: min(var(--cpcmp-width, 480px), calc(100vw - 40px));
border-radius: var(--cpcmp-radius, 12px);
}
.cpcmp-banner[data-layout="box"][data-pos="right"] { right: 20px; }
.cpcmp-banner[data-layout="box"][data-pos="left"] { left: 20px; }
.cpcmp-banner[data-layout="box"][data-pos="center"] { left: 50%; transform: translate(-50%, 8px); }
.cpcmp-banner[data-layout="box"][data-pos="center"].is-in { transform: translate(-50%, 0); }
.cpcmp-banner[data-layout="modal"] {
top: 50%; left: 50%;
width: min(var(--cpcmp-width, 480px), calc(100vw - 40px));
max-height: calc(100vh - 40px);
overflow: auto;
border-radius: var(--cpcmp-radius, 12px);
transform: translate(-50%, calc(-50% + 8px));
}
.cpcmp-banner[data-layout="modal"].is-in { transform: translate(-50%, -50%); }
.cpcmp-banner[data-layout="fullscreen"] {
inset: 0;
border: 0;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: max(var(--cpcmp-pad, 20px), 6vh) max(var(--cpcmp-pad, 20px), 6vw);
}
.cpcmp-banner[data-layout="fullscreen"] .cpcmp-desc,
.cpcmp-banner[data-layout="fullscreen"] .cpcmp-banner__head { max-width: 640px; } .cpcmp-banner__head {
display: flex;
align-items: center;
gap: 10px;
}
.cpcmp-logo {
max-height: 28px;
width: auto;
}
.cpcmp-title {
margin: 0;
font-size: 1.08em;
font-weight: 600;
flex: 1 1 auto;
}
.cpcmp-desc {
margin: .55em 0 0;
color: var(--cpcmp-muted, #5b6472);
}
.cpcmp-policy { margin: .45em 0 0; font-size: .93em; }
.cpcmp-policy a,
.cpcmp-link {
color: var(--cpcmp-accent, #0b5c55);
text-decoration: underline;
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: .93em;
cursor: pointer;
}
.cpcmp-gpc {
margin: .6em 0 0;
padding: 8px 10px;
font-size: .9em;
border: 1px solid var(--cpcmp-border, #dfe4ea);
border-radius: calc(var(--cpcmp-radius, 12px) / 2);
color: var(--cpcmp-muted, #5b6472);
background: var(--cpcmp-sec, #eef1f4);
}
.cpcmp-x {
flex: 0 0 auto;
background: none;
border: 0;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: var(--cpcmp-muted, #5b6472);
padding: 2px 6px;
border-radius: 6px;
}
.cpcmp-x:hover { color: var(--cpcmp-text, #1f2430); } .cpcmp-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.cpcmp-actions--equal .cpcmp-btn { flex: 1 1 auto; }
.cpcmp-btn {
font: inherit;
font-weight: 600;
padding: 10px 18px;
border-radius: calc(var(--cpcmp-radius, 12px) * .66);
border: 1px solid transparent;
cursor: pointer;
text-align: center;
transition: filter .12s ease, background .12s ease;
}
.cpcmp-btn--accent {
background: var(--cpcmp-accent, #0b5c55);
color: var(--cpcmp-accent-tx, #fff);
}
.cpcmp-btn--sec {
background: var(--cpcmp-sec, #eef1f4);
color: var(--cpcmp-sec-tx, #1f2430);
border-color: var(--cpcmp-border, #dfe4ea);
}
.cpcmp-btn--ghost {
background: transparent;
color: var(--cpcmp-text, #1f2430);
border-color: var(--cpcmp-border, #dfe4ea);
}
.cpcmp-btn:hover { filter: brightness(.96); }
.cpcmp-btn--ghost:hover { background: var(--cpcmp-sec, #eef1f4); }
.cpcmp-scope button:focus-visible,
.cpcmp-scope a:focus-visible,
.cpcmp-scope input:focus-visible + .cpcmp-switch__ui,
.cpcmp-ph button:focus-visible {
outline: 2px solid var(--cpcmp-accent, #0b5c55);
outline-offset: 2px;
} @media (min-width: 900px) {
.cpcmp-banner[data-layout="bar-bottom"],
.cpcmp-banner[data-layout="bar-top"] {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "head actions" "desc actions" "policy actions";
column-gap: 28px;
align-items: center;
}
.cpcmp-banner[data-layout="bar-bottom"] .cpcmp-banner__head,
.cpcmp-banner[data-layout="bar-top"] .cpcmp-banner__head { grid-area: head; }
.cpcmp-banner[data-layout="bar-bottom"] .cpcmp-desc,
.cpcmp-banner[data-layout="bar-top"] .cpcmp-desc { grid-area: desc; margin-top: .3em; }
.cpcmp-banner[data-layout="bar-bottom"] .cpcmp-policy,
.cpcmp-banner[data-layout="bar-top"] .cpcmp-policy { grid-area: policy; }
.cpcmp-banner[data-layout="bar-bottom"] .cpcmp-actions,
.cpcmp-banner[data-layout="bar-top"] .cpcmp-actions { grid-area: actions; margin-top: 0; }
.cpcmp-banner[data-layout="bar-bottom"] .cpcmp-actions--equal .cpcmp-btn,
.cpcmp-banner[data-layout="bar-top"] .cpcmp-actions--equal .cpcmp-btn { flex: 0 0 auto; }
} .cpcmp-prefs {
position: fixed;
z-index: 2147483620;
top: 50%; left: 50%;
transform: translate(-50%, calc(-50% + 8px));
width: min(560px, calc(100vw - 32px));
max-height: min(720px, calc(100vh - 32px));
display: flex;
flex-direction: column;
background: var(--cpcmp-bg, #fff);
color: var(--cpcmp-text, #1f2430);
border: 1px solid var(--cpcmp-border, #dfe4ea);
border-radius: var(--cpcmp-radius, 12px);
box-shadow: var(--cpcmp-shadow, 0 12px 40px rgba(15, 20, 30, .18));
opacity: 0;
transition: opacity .2s ease-out, transform .2s ease-out;
}
.cpcmp-prefs.is-in {
opacity: 1;
transform: translate(-50%, -50%);
}
.cpcmp-overlay--prefs { z-index: 2147483615; }
.cpcmp-prefs__head {
display: flex;
align-items: center;
gap: 10px;
padding: var(--cpcmp-pad, 20px);
padding-bottom: 12px;
border-bottom: 1px solid var(--cpcmp-border, #dfe4ea);
}
.cpcmp-prefs__body {
padding: 6px var(--cpcmp-pad, 20px);
overflow: auto;
flex: 1 1 auto;
}
.cpcmp-prefs__foot {
padding: 12px var(--cpcmp-pad, 20px) var(--cpcmp-pad, 20px);
border-top: 1px solid var(--cpcmp-border, #dfe4ea);
}
.cpcmp-prefs__foot .cpcmp-actions { margin-top: 0; }
.cpcmp-prefs__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
align-items: center;
margin-top: 10px;
font-size: .88em;
color: var(--cpcmp-muted, #5b6472);
}
.cpcmp-id { word-break: break-all; }
.cpcmp-cat {
padding: 12px 0;
border-bottom: 1px solid var(--cpcmp-border, #dfe4ea);
}
.cpcmp-cat:last-child { border-bottom: 0; }
.cpcmp-cat__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cpcmp-cat__name { font-weight: 600; }
.cpcmp-cat__locked {
font-size: .85em;
font-weight: 600;
color: var(--cpcmp-accent, #0b5c55);
}
.cpcmp-cat__desc {
margin: .35em 0 0;
font-size: .92em;
color: var(--cpcmp-muted, #5b6472);
} .cpcmp-switch {
position: relative;
display: inline-block;
flex: 0 0 auto;
cursor: pointer;
}
.cpcmp-switch input {
position: absolute;
opacity: 0;
width: 100%; height: 100%;
margin: 0;
cursor: pointer;
}
.cpcmp-switch__ui {
display: block;
width: 44px; height: 24px;
border-radius: 24px;
background: var(--cpcmp-border, #dfe4ea);
transition: background .15s ease;
position: relative;
pointer-events: none;
}
.cpcmp-switch__ui::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 20, 30, .3);
transition: transform .15s ease;
}
.cpcmp-switch input:checked + .cpcmp-switch__ui { background: var(--cpcmp-accent, #0b5c55); }
.cpcmp-switch input:checked + .cpcmp-switch__ui::after { transform: translateX(20px); } .cpcmp-float {
position: fixed;
z-index: 2147483590;
bottom: 18px;
width: 50px; height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--cpcmp-border, #dfe4ea);
background: var(--cpcmp-bg, #fff);
color: var(--cpcmp-accent, #0b5c55);
box-shadow: 0 6px 20px rgba(15, 20, 30, .22);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, filter .12s ease;
}
.cpcmp-float[data-pos="br"] { right: 18px; }
.cpcmp-float[data-pos="bl"] { left: 18px; }
.cpcmp-float:hover {
filter: brightness(.97);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(15, 20, 30, .28);
}
.cpcmp-float svg { width: 24px; height: 24px; } .cpcmp-scope:has(.cpcmp-banner[data-layout="bar-bottom"]) .cpcmp-float {
bottom: calc(18px + 72px);
} iframe[data-cpcmp-src] { display: none !important; }
.cpcmp-ph {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
width: 100%;
background: var(--cpcmp-sec, #eef1f4);
border: 1px dashed var(--cpcmp-border, #c9d1da);
border-radius: calc(var(--cpcmp-radius, 12px) * .66);
font-family: var(--cpcmp-font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
font-size: var(--cpcmp-fs, 15px);
color: var(--cpcmp-text, #1f2430);
overflow: hidden;
}
.cpcmp-ph__inner {
text-align: center;
padding: 20px;
max-width: 440px;
}
.cpcmp-ph__text {
margin: 0 0 12px;
color: var(--cpcmp-muted, #5b6472);
font-size: .95em;
}
.cpcmp-ph__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.cpcmp-ph__always {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: .87em;
color: var(--cpcmp-accent, #0b5c55);
text-decoration: underline;
cursor: pointer;
} @keyframes cpcmp-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 520px) {
.cpcmp-banner[data-layout="box"] {
left: 10px !important;
right: 10px !important;
bottom: 10px;
width: auto;
transform: translateY(8px);
}
.cpcmp-banner[data-layout="box"].is-in { transform: translateY(0); }
.cpcmp-actions { flex-direction: column; }
.cpcmp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cpcmp-banner,
.cpcmp-prefs,
.cpcmp-overlay,
.cpcmp-switch__ui,
.cpcmp-switch__ui::after,
.cpcmp-btn {
transition: none !important;
animation: none !important;
}
}
@media print {
#cpcmp-root, .cpcmp-float, .cpcmp-overlay { display: none !important; }
} .cpcmp-policy-table {
font: inherit;
line-height: inherit;
color: inherit;
}
.cpcmp-policy-table .cpcmp-policy-meta,
.cpcmp-policy-table .cpcmp-policy-cat,
.cpcmp-policy-table .cpcmp-policy-catdesc,
.cpcmp-policy-table .cpcmp-table,
.cpcmp-policy-table .cpcmp-table th,
.cpcmp-policy-table .cpcmp-table td,
.cpcmp-policy-table .cpcmp-table code {
color: inherit !important;
}
.cpcmp-policy-table .cpcmp-table {
width: 100%;
border-collapse: collapse;
background: transparent;
}
.cpcmp-policy-table .cpcmp-table th,
.cpcmp-policy-table .cpcmp-table td {
padding: .6em .75em;
vertical-align: top;
background: transparent !important;
border-color: currentColor;
border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.cpcmp-policy-table .cpcmp-table th {
font-weight: 700;
}
.cpcmp-policy-table .cpcmp-table code {
background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (max-width: 768px) {
.cpcmp-policy-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cpcmp-policy-table .cpcmp-table {
min-width: 640px;
}
}