#velupa-cookie-root {
--vc-bg: #1f2430;
--vc-text: #f3f4f6;
--vc-muted: #b8bcc6;
--vc-accent: #2f6fed;
--vc-accent-text: #ffffff;
--vc-border: rgba(255, 255, 255, 0.12);
position: fixed;
z-index: 999999;
left: 0;
right: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.vc-banner {
box-sizing: border-box;
background: var(--vc-bg);
color: var(--vc-text);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
padding: 20px 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
}
#velupa-cookie-root.vc-pos-bottom { bottom: 0; }
#velupa-cookie-root.vc-pos-bottom .vc-banner { width: 100%; border-radius: 0; }
#velupa-cookie-root.vc-pos-top { top: 0; }
#velupa-cookie-root.vc-pos-top .vc-banner { width: 100%; border-radius: 0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); }
#velupa-cookie-root.vc-pos-bottom-left,
#velupa-cookie-root.vc-pos-bottom-right {
bottom: 20px;
left: auto;
right: auto;
max-width: 420px;
width: calc(100% - 40px);
}
#velupa-cookie-root.vc-pos-bottom-left { left: 20px; }
#velupa-cookie-root.vc-pos-bottom-right { right: 20px; }
#velupa-cookie-root.vc-pos-bottom-left .vc-banner,
#velupa-cookie-root.vc-pos-bottom-right .vc-banner {
border-radius: 10px;
flex-direction: column;
align-items: stretch;
}
#velupa-cookie-root.vc-pos-center {
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
#velupa-cookie-root.vc-pos-center .vc-banner {
position: relative;
z-index: 1;
width: min(480px, 100%);
border-radius: 12px;
flex-direction: column;
align-items: stretch;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.vc-banner-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}
.vc-content { flex: 1 1 320px; min-width: 0; }
.vc-title { font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.vc-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--vc-muted); }
.vc-text a { color: var(--vc-text); text-decoration: underline; }
.vc-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex: 0 0 auto;
}
.vc-btn {
cursor: pointer;
border: 1px solid transparent;
border-radius: 6px;
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.vc-btn--accept { background: var(--vc-accent); color: var(--vc-accent-text); }
.vc-btn--reject,
.vc-btn--settings { background: transparent; color: var(--vc-text); border-color: var(--vc-border); }
.vc-btn--accept-outline { background: transparent; color: var(--vc-accent); border-color: var(--vc-accent); }
.vc-btn--save { background: var(--vc-accent); color: var(--vc-accent-text); }
.vc-btn--back { background: transparent; color: var(--vc-muted); border: none; padding-left: 0; }
.vc-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999998;
}
.vc-modal {
position: fixed;
z-index: 999999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
color: #1f2430;
width: min(520px, calc(100% - 40px));
max-height: calc(100% - 40px);
overflow-y: auto;
border-radius: 10px;
padding: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.vc-modal h2 { margin: 0 0 16px; font-size: 18px; }
.vc-modal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.vc-modal-icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f0f2f5;
color: #1f2430;
display: flex;
align-items: center;
justify-content: center;
}
.vc-modal-title { margin: 0; font-size: 18px; flex: 1 1 auto; }
.vc-modal-close {
flex: 0 0 auto;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #9aa0aa;
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 6px;
}
.vc-modal-close:hover { background: #f0f2f5; color: #1f2430; }
.vc-modal-intro {
margin: 0 0 18px;
font-size: 13px;
line-height: 1.5;
color: #6b7280;
}
.vc-category-list { margin-bottom: 4px; }
.vc-category { padding: 14px 0; border-bottom: 1px solid #eceef1; }
.vc-category:last-of-type { border-bottom: none; }
.vc-category-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.vc-category-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.vc-category-desc { font-size: 13px; color: #6b7280; margin: 0; }
.vc-category-always { font-size: 12px; color: #9aa0aa; font-weight: 600; white-space: nowrap; }
.vc-category-toggle {
margin-top: 8px;
border: none;
background: transparent;
color: var(--vc-accent, #2f6fed);
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
.vc-category-toggle:hover { text-decoration: underline; }
.vc-category-details {
margin-top: 8px;
padding: 10px 12px;
background: #f7f8fa;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
color: #6b7280;
}
.vc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.vc-switch input { opacity: 0; width: 0; height: 0; }
.vc-switch-track {
position: absolute; inset: 0; background: #d1d5db; border-radius: 999px;
transition: background 0.15s ease; cursor: pointer;
}
.vc-switch-track::before {
content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform 0.15s ease;
}
.vc-switch input:checked + .vc-switch-track { background: var(--vc-accent); }
.vc-switch input:checked + .vc-switch-track::before { transform: translateX(18px); }
.vc-switch input:disabled + .vc-switch-track { opacity: 0.6; cursor: not-allowed; }
.vc-modal-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.vc-modal-actions .vc-btn--reject,
.vc-modal-actions .vc-btn--settings { border-color: #d1d5db; color: #1f2430; }
.vc-floating-icon {
position: fixed;
bottom: 20px;
z-index: 999997;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--vc-bg, #1f2430);
color: var(--vc-text, #f3f4f6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
padding: 0;
transition: transform 0.15s ease;
}
.vc-floating-icon:hover { transform: scale(1.08); }
.vc-floating-icon.vc-floating-left { left: 20px; }
.vc-floating-icon.vc-floating-right { right: 20px; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
.vc-banner { flex-direction: column; align-items: stretch; }
.vc-actions { justify-content: stretch; }
.vc-btn { flex: 1 1 auto; text-align: center; }
.vc-modal-actions { flex-direction: column-reverse; }
.vc-modal-actions .vc-btn { width: 100%; }
}