.nccb-wrap {
--nccb-primary: #05ab5c;
--nccb-bg: #ffffff;
--nccb-text: #222222;
--nccb-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
--nccb-radius: 12px;
--nccb-z-banner: 999990;
--nccb-z-floating: 999985;
--nccb-z-modal: 999999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 15px;
line-height: 1.5;
box-sizing: border-box;
}
.nccb-wrap *,
.nccb-wrap *::before,
.nccb-wrap *::after {
box-sizing: border-box;
}
body.nccb-modal-open {
overflow: hidden;
} .nccb-banner {
position: fixed;
z-index: var(--nccb-z-banner);
background: var(--nccb-bg);
color: var(--nccb-text);
box-shadow: var(--nccb-shadow);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.nccb-banner[hidden] {
display: none !important;
}
.nccb-banner__inner {
padding: 20px 24px;
}
.nccb-banner__title {
margin: 0 0 8px;
font-size: 1.15em;
font-weight: 700;
color: var(--nccb-text);
}
.nccb-banner__text {
margin: 0 0 16px;
font-size: 0.95em;
opacity: 0.9;
}
.nccb-banner__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
} .nccb-position-bottom .nccb-banner {
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.nccb-position-bottom .nccb-banner__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nccb-position-bottom .nccb-banner__content {
flex: 1;
min-width: 260px;
}
.nccb-position-bottom .nccb-banner__text {
margin-bottom: 0;
} .nccb-position-bottom-left .nccb-banner,
.nccb-position-bottom-right .nccb-banner {
bottom: 24px;
width: min(420px, calc(100vw - 32px));
border-radius: var(--nccb-radius);
border: 1px solid var(--nccb-border-subtle, rgba(0, 0, 0, 0.06));
}
.nccb-position-bottom-left .nccb-banner {
left: 24px;
}
.nccb-position-bottom-right .nccb-banner {
right: 24px;
} .nccb-position-center .nccb-banner {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(520px, calc(100vw - 32px));
border-radius: var(--nccb-radius);
border: 1px solid var(--nccb-border-subtle, rgba(0, 0, 0, 0.06));
} .nccb-position-card .nccb-banner {
width: min(var(--nccb-card-width, 420px), calc(100vw - 32px));
border-radius: var(--nccb-radius);
border: 1px solid var(--nccb-border-subtle, rgba(0, 0, 0, 0.08));
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.nccb-position-card.nccb-card-position-bottom-left .nccb-banner {
bottom: 24px;
left: 24px;
}
.nccb-position-card.nccb-card-position-bottom-right .nccb-banner {
bottom: 24px;
right: 24px;
}
.nccb-position-card.nccb-card-position-center .nccb-banner {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nccb-position-card .nccb-banner__inner {
padding: 24px;
}
.nccb-position-card .nccb-banner__actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.nccb-position-card .nccb-btn {
width: 100%;
justify-content: center;
}
.nccb-position-card .nccb-btn--link {
width: 100%;
text-align: center;
} #nccb-cookie-compliance .nccb-btn,
#nccb-cookie-compliance button.nccb-btn,
#nccb-cookie-compliance [type="button"].nccb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
border-style: solid;
border-width: 2px;
border-color: transparent;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
font-family: inherit;
text-transform: none;
letter-spacing: normal;
-webkit-appearance: none;
appearance: none;
background-image: none !important;
text-shadow: none !important;
box-shadow: none !important;
text-decoration: none !important;
}
#nccb-cookie-compliance .nccb-btn:focus-visible,
#nccb-cookie-compliance button.nccb-btn:focus-visible,
#nccb-cookie-compliance [type="button"].nccb-btn:focus-visible {
outline: 2px solid var(--nccb-primary) !important;
outline-offset: 2px;
}
#nccb-cookie-compliance .nccb-btn--primary,
#nccb-cookie-compliance button.nccb-btn--primary,
#nccb-cookie-compliance [type="button"].nccb-btn--primary,
#nccb-cookie-compliance .nccb-btn--primary:hover,
#nccb-cookie-compliance button.nccb-btn--primary:hover,
#nccb-cookie-compliance [type="button"].nccb-btn--primary:hover,
#nccb-cookie-compliance .nccb-btn--primary:focus,
#nccb-cookie-compliance button.nccb-btn--primary:focus,
#nccb-cookie-compliance [type="button"].nccb-btn--primary:focus,
#nccb-cookie-compliance .nccb-btn--primary:focus-visible,
#nccb-cookie-compliance button.nccb-btn--primary:focus-visible,
#nccb-cookie-compliance [type="button"].nccb-btn--primary:focus-visible,
#nccb-cookie-compliance .nccb-btn--primary:active,
#nccb-cookie-compliance button.nccb-btn--primary:active,
#nccb-cookie-compliance [type="button"].nccb-btn--primary:active,
#nccb-cookie-compliance .nccb-btn--primary:visited,
#nccb-cookie-compliance button.nccb-btn--primary:visited {
background: var(--nccb-btn-primary-bg, var(--nccb-primary)) !important;
background-color: var(--nccb-btn-primary-bg, var(--nccb-primary)) !important;
color: var(--nccb-btn-primary-text, #ffffff) !important;
border-color: var(--nccb-btn-primary-border, var(--nccb-primary)) !important;
text-decoration: none !important;
box-shadow: none !important;
}
#nccb-cookie-compliance .nccb-btn--primary:hover,
#nccb-cookie-compliance button.nccb-btn--primary:hover,
#nccb-cookie-compliance [type="button"].nccb-btn--primary:hover {
opacity: 0.9;
}
#nccb-cookie-compliance .nccb-btn--secondary,
#nccb-cookie-compliance button.nccb-btn--secondary,
#nccb-cookie-compliance [type="button"].nccb-btn--secondary,
#nccb-cookie-compliance .nccb-btn--secondary:visited,
#nccb-cookie-compliance button.nccb-btn--secondary:visited {
background: var(--nccb-btn-secondary-bg, transparent) !important;
background-color: var(--nccb-btn-secondary-bg, transparent) !important;
color: var(--nccb-btn-secondary-text, var(--nccb-primary)) !important;
border-color: var(--nccb-btn-secondary-border, var(--nccb-primary)) !important;
text-decoration: none !important;
box-shadow: none !important;
}
#nccb-cookie-compliance .nccb-btn--secondary:hover,
#nccb-cookie-compliance button.nccb-btn--secondary:hover,
#nccb-cookie-compliance [type="button"].nccb-btn--secondary:hover,
#nccb-cookie-compliance .nccb-btn--secondary:focus,
#nccb-cookie-compliance button.nccb-btn--secondary:focus,
#nccb-cookie-compliance [type="button"].nccb-btn--secondary:focus,
#nccb-cookie-compliance .nccb-btn--secondary:focus-visible,
#nccb-cookie-compliance button.nccb-btn--secondary:focus-visible,
#nccb-cookie-compliance [type="button"].nccb-btn--secondary:focus-visible,
#nccb-cookie-compliance .nccb-btn--secondary:active,
#nccb-cookie-compliance button.nccb-btn--secondary:active,
#nccb-cookie-compliance [type="button"].nccb-btn--secondary:active {
background: var(--nccb-border-subtle, rgba(0, 0, 0, 0.04)) !important;
background-color: var(--nccb-border-subtle, rgba(0, 0, 0, 0.04)) !important;
color: var(--nccb-btn-secondary-text, var(--nccb-primary)) !important;
border-color: var(--nccb-btn-secondary-border, var(--nccb-primary)) !important;
text-decoration: none !important;
box-shadow: none !important;
}
#nccb-cookie-compliance .nccb-btn--link,
#nccb-cookie-compliance button.nccb-btn--link,
#nccb-cookie-compliance [type="button"].nccb-btn--link,
#nccb-cookie-compliance .nccb-btn--link:visited,
#nccb-cookie-compliance button.nccb-btn--link:visited {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
border-width: 0 !important;
color: var(--nccb-btn-link-text, var(--nccb-primary)) !important;
padding: 10px 12px;
text-decoration: underline !important;
box-shadow: none !important;
}
#nccb-cookie-compliance .nccb-btn--link:hover,
#nccb-cookie-compliance button.nccb-btn--link:hover,
#nccb-cookie-compliance [type="button"].nccb-btn--link:hover,
#nccb-cookie-compliance .nccb-btn--link:focus,
#nccb-cookie-compliance button.nccb-btn--link:focus,
#nccb-cookie-compliance [type="button"].nccb-btn--link:focus,
#nccb-cookie-compliance .nccb-btn--link:focus-visible,
#nccb-cookie-compliance button.nccb-btn--link:focus-visible,
#nccb-cookie-compliance [type="button"].nccb-btn--link:focus-visible,
#nccb-cookie-compliance .nccb-btn--link:active,
#nccb-cookie-compliance button.nccb-btn--link:active,
#nccb-cookie-compliance [type="button"].nccb-btn--link:active {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
color: var(--nccb-btn-link-text, var(--nccb-primary)) !important;
text-decoration: underline !important;
box-shadow: none !important;
opacity: 0.85;
}
#nccb-cookie-compliance .nccb-settings-trigger,
#nccb-cookie-compliance button.nccb-settings-trigger {
background: transparent !important;
background-color: transparent !important;
border: none !important;
color: var(--nccb-primary, #05ab5c) !important;
text-decoration: underline !important;
cursor: pointer;
font-size: inherit;
font-family: inherit;
padding: 0;
box-shadow: none !important;
}
#nccb-cookie-compliance .nccb-settings-trigger:hover,
#nccb-cookie-compliance .nccb-settings-trigger:focus,
#nccb-cookie-compliance .nccb-settings-trigger:active,
#nccb-cookie-compliance button.nccb-settings-trigger:hover,
#nccb-cookie-compliance button.nccb-settings-trigger:focus,
#nccb-cookie-compliance button.nccb-settings-trigger:active {
background: transparent !important;
background-color: transparent !important;
color: var(--nccb-primary, #05ab5c) !important;
text-decoration: underline !important;
opacity: 0.85;
} #nccb-cookie-compliance .nccb-floating-btn,
#nccb-cookie-compliance button.nccb-floating-btn,
#nccb-cookie-compliance [type="button"].nccb-floating-btn {
position: fixed;
z-index: var(--nccb-z-floating);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: none !important;
border-radius: 50px;
background: var(--nccb-floating-bg, var(--nccb-primary)) !important;
background-color: var(--nccb-floating-bg, var(--nccb-primary)) !important;
color: var(--nccb-floating-text, #ffffff) !important;
font-family: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
text-decoration: none !important;
text-shadow: none !important;
background-image: none !important;
-webkit-appearance: none;
appearance: none;
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
#nccb-cookie-compliance .nccb-floating-btn:hover,
#nccb-cookie-compliance .nccb-floating-btn:focus,
#nccb-cookie-compliance .nccb-floating-btn:focus-visible,
#nccb-cookie-compliance .nccb-floating-btn:active,
#nccb-cookie-compliance button.nccb-floating-btn:hover,
#nccb-cookie-compliance button.nccb-floating-btn:focus,
#nccb-cookie-compliance button.nccb-floating-btn:focus-visible,
#nccb-cookie-compliance button.nccb-floating-btn:active,
#nccb-cookie-compliance [type="button"].nccb-floating-btn:hover,
#nccb-cookie-compliance [type="button"].nccb-floating-btn:focus,
#nccb-cookie-compliance [type="button"].nccb-floating-btn:focus-visible,
#nccb-cookie-compliance [type="button"].nccb-floating-btn:active {
background: var(--nccb-floating-bg, var(--nccb-primary)) !important;
background-color: var(--nccb-floating-bg, var(--nccb-primary)) !important;
color: var(--nccb-floating-text, #ffffff) !important;
border-color: transparent !important;
text-decoration: none !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
opacity: 0.95;
}
#nccb-cookie-compliance .nccb-floating-btn:hover,
#nccb-cookie-compliance button.nccb-floating-btn:hover {
transform: translateY(-2px);
}
#nccb-cookie-compliance .nccb-floating-btn:focus-visible,
#nccb-cookie-compliance button.nccb-floating-btn:focus-visible {
outline: 2px solid var(--nccb-primary) !important;
outline-offset: 3px;
}
#nccb-cookie-compliance .nccb-floating-btn__icon,
#nccb-cookie-compliance .nccb-floating-btn__icon svg,
#nccb-cookie-compliance .nccb-floating-btn__text {
color: inherit !important;
fill: currentColor;
}
.nccb-floating-btn--bottom-left {
left: 20px;
bottom: 20px;
}
.nccb-floating-btn--bottom-right {
right: 20px;
bottom: 20px;
}
.nccb-floating-btn__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nccb-floating-btn__icon svg {
display: block;
}
.nccb-floating-btn__text {
white-space: nowrap;
} .nccb-modal[hidden] {
display: none !important;
}
.nccb-modal {
position: fixed;
inset: 0;
z-index: var(--nccb-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.nccb-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
cursor: pointer;
}
.nccb-modal__dialog {
position: relative;
z-index: 1;
width: min(560px, 100%);
max-height: calc(100vh - 32px);
overflow: auto;
background: var(--nccb-bg);
color: var(--nccb-text);
border-radius: var(--nccb-radius);
box-shadow: var(--nccb-shadow);
}
.nccb-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 0;
}
.nccb-modal__title {
margin: 0;
font-size: 1.2em;
font-weight: 700;
}
#nccb-cookie-compliance .nccb-modal__close,
#nccb-cookie-compliance button.nccb-modal__close {
background: transparent !important;
background-color: transparent !important;
border: none !important;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: var(--nccb-text) !important;
opacity: 0.6;
padding: 0 4px;
box-shadow: none !important;
text-decoration: none !important;
-webkit-appearance: none;
appearance: none;
}
#nccb-cookie-compliance .nccb-modal__close:hover,
#nccb-cookie-compliance .nccb-modal__close:focus,
#nccb-cookie-compliance .nccb-modal__close:active,
#nccb-cookie-compliance button.nccb-modal__close:hover,
#nccb-cookie-compliance button.nccb-modal__close:focus,
#nccb-cookie-compliance button.nccb-modal__close:active {
background: transparent !important;
background-color: transparent !important;
color: var(--nccb-text) !important;
border: none !important;
opacity: 1;
box-shadow: none !important;
text-decoration: none !important;
}
.nccb-modal__body {
padding: 16px 24px;
}
.nccb-modal__intro {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5;
opacity: 0.9;
}
.nccb-modal__footer {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 16px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
} .nccb-categories {
list-style: none;
margin: 0;
padding: 0;
}
.nccb-category {
display: block;
padding: 14px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.nccb-category:last-child {
border-bottom: none;
}
.nccb-category__main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nccb-category__label {
flex: 1;
cursor: pointer;
}
.nccb-category__name {
display: block;
font-weight: 600;
margin-bottom: 4px;
}
.nccb-category__desc {
display: block;
font-size: 0.85em;
opacity: 0.75;
}
.nccb-category-services {
margin-top: 8px;
padding-left: 0;
}
.nccb-category-services__summary {
font-size: 0.85em;
cursor: pointer;
color: var(--nccb-primary);
user-select: none;
}
.nccb-category-services__list {
margin: 8px 0 0;
padding-left: 18px;
font-size: 0.85em;
}
.nccb-category-services__list--consent {
list-style: none;
padding-left: 0;
}
.nccb-service-item {
margin: 4px 0;
}
.nccb-service-item__label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.nccb-service-item__checkbox:disabled + span {
opacity: 0.55;
} #nccb-cookie-compliance .nccb-toggle input:checked + .nccb-toggle__slider {
background: var(--nccb-primary) !important;
background-color: var(--nccb-primary) !important;
}
#nccb-cookie-compliance .nccb-toggle input:focus-visible + .nccb-toggle__slider {
outline: 2px solid var(--nccb-primary) !important;
outline-offset: 2px;
} .nccb-toggle {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
flex-shrink: 0;
}
.nccb-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.nccb-toggle__slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #ccc;
border-radius: 26px;
transition: background 0.2s;
}
.nccb-toggle__slider::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.nccb-toggle input:checked + .nccb-toggle__slider {
background: var(--nccb-primary);
}
.nccb-toggle input:checked + .nccb-toggle__slider::before {
transform: translateX(22px);
}
.nccb-toggle input:disabled + .nccb-toggle__slider {
opacity: 0.7;
cursor: not-allowed;
}
.nccb-toggle input:focus-visible + .nccb-toggle__slider {
outline: 2px solid var(--nccb-primary);
outline-offset: 2px;
} @media (max-width: 600px) {
.nccb-position-bottom-left .nccb-banner,
.nccb-position-bottom-right .nccb-banner {
left: 16px;
right: 16px;
width: auto;
bottom: 16px;
}
.nccb-position-bottom .nccb-banner__inner {
flex-direction: column;
align-items: stretch;
}
.nccb-banner__actions {
flex-direction: column;
}
.nccb-banner__actions .nccb-btn {
width: 100%;
}
.nccb-modal__footer {
flex-direction: column;
}
.nccb-modal__footer .nccb-btn {
width: 100%;
}
.nccb-floating-btn {
padding: 10px 14px;
font-size: 12px;
}
.nccb-floating-btn--bottom-left {
left: 12px;
bottom: 12px;
}
.nccb-floating-btn--bottom-right {
right: 12px;
bottom: 12px;
}
.nccb-position-bottom-left .nccb-banner,
.nccb-position-bottom-right .nccb-banner {
bottom: 72px;
}
}