:root {
--wpcg-modal-border-radius: 8px;
--wpcg-modal-text-color: #333333;
--wpcg-modal-bg-color: #ffffff;
--wpcg-modal-bg-opacity: 0.95;
--wpcg-modal-bg-blur: 0px;
--wpcg-modal-bg-rgba: rgba(255, 255, 255, 0.95);
} .wpcg-custom-modal .wpcg-modal-body {
white-space: pre-line !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
line-height: 1.6 !important;
}
.wpcg-custom-modal .wpcg-modal-body h2:first-child {
margin-top: 0 !important;
} .wpcg-custom-modal {
display: none;
position: fixed;
z-index: 999999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-animation: wpcgFadeIn 0.3s forwards;
animation: wpcgFadeIn 0.3s forwards;
transition: opacity 0.3s ease;
backdrop-filter: blur(var(--wpcg-modal-bg-blur, 3px));
-webkit-backdrop-filter: blur(var(--wpcg-modal-bg-blur, 3px));
visibility: hidden;
}
.wpcg-custom-modal.active {
opacity: 1;
visibility: visible;
}
.wpcg-custom-modal .wpcg-custom-modal-content {
position: relative;
margin: 10vh auto;
padding: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 700px;
max-height: 80vh;
display: flex;
flex-direction: column;
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
background: var(--wpcg-modal-bg-rgba);
border-radius: var(--wpcg-modal-border-radius); color: var(--wpcg-modal-text-color);
} .wpcg-custom-modal .wpcg-modal-content {
position: relative;
margin: 10vh auto;
padding: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 700px;
max-height: 80vh;
display: flex;
flex-direction: column;
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
background: var(--wpcg-modal-bg-rgba);
border-radius: var(--wpcg-modal-border-radius); color: var(--wpcg-modal-text-color);
} .wpcg-custom-modal.active .wpcg-custom-modal-content,
.wpcg-custom-modal.active .wpcg-modal-content {
transform: translateY(0);
opacity: 1;
} .wpcg-custom-modal .wpcg-close {
position: absolute !important;
right: 15px !important;
top: 15px !important;
background: none !important;
border: none !important;
font-size: 20px !important;
cursor: pointer !important;
color: var(--wpcg-modal-text-color) !important; border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: none !important;
z-index: 10 !important;
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
width: 30px !important;
height: 30px !important;
}
.wpcg-custom-modal .wpcg-close:hover {
background: none !important;
color: #ffffff !important;
transform: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
.wpcg-custom-modal .wpcg-close:focus,
.wpcg-custom-modal .wpcg-close:active {
outline: none !important;
box-shadow: none !important;
background: none !important;
color: #ffffff !important;
text-shadow: none !important;
} .wpcg-custom-modal h2 {
margin: 0;
padding: 40px 60px 30px;
font-size: 2em;
color: var(--wpcg-modal-text-color);
} .wpcg-custom-modal .wpcg-modal-body p,
.wpcg-modal.wpcg-custom-modal .wpcg-modal-body p,
div.wpcg-custom-modal .wpcg-modal-body p {
line-height: 1.6 !important;
margin: 0 0 15px 0 !important; padding: 0 !important; color: var(--wpcg-modal-text-color) !important;
display: block !important; box-sizing: border-box !important;
} .wpcg-custom-modal .wpcg-modal-body p:first-child,
.wpcg-modal.wpcg-custom-modal .wpcg-modal-body p:first-child {
margin-top: 0 !important;
} .wpcg-custom-modal .wpcg-modal-body p:last-child,
.wpcg-modal.wpcg-custom-modal .wpcg-modal-body p:last-child {
margin-bottom: 10px !important;
}
hr {
border: 1px solid currentColor;
margin: 0;
}
.wpcg-custom-modal .wpcg-modal-body h2,
.wpcg-custom-modal .wpcg-modal-body h3,
.wpcg-custom-modal .wpcg-modal-body h4 {
display: block !important;
font-weight: 600 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
.wpcg-custom-modal .wpcg-modal-body h2:first-child,
.wpcg-custom-modal .wpcg-modal-body h3:first-child,
.wpcg-custom-modal .wpcg-modal-body h4:first-child {
margin-top: 0 !important;
}
.wpcg-modal-body h3 {
white-space: pre-line !important;
word-wrap: break-word !important;
margin-top: 25px !important;
margin-bottom: 15px !important;
color: var(--wpcg-modal-text-color);
font-size: 1.3em;
}
.wpcg-custom-modal .wpcg-modal-body h4 {
white-space: normal !important;
margin-top: 45px !important;
color: var(--wpcg-modal-text-color);
font-size: 1.2em;
}
.wpcg-custom-modal .wpcg-modal-body ul,
.wpcg-custom-modal .wpcg-modal-body ol {
margin: 0;
padding: 0 0 0 20px;
white-space: normal !important;
}
.wpcg-custom-modal .wpcg-modal-body li {
margin-bottom: 5px;
} .wpcg-custom-modal .wpcg-modal-body {
padding: 0 30px 0 0;
overflow-y: auto;
max-height: 60vh;
margin: 0 30px 0 60px;
} .wpcg-custom-modal .wpcg-modal-buttons {
text-align: right;
}
.wpcg-custom-modal .wpcg-modal-button {
display: inline-block;
padding: 10px 20px;
margin-left: 10px;
background-color: transparent;
color: var(--wpcg-modal-text-color);
text-decoration: none;
border-radius: var(--wpcg-modal-border-radius);
border: 1px solid var(--wpcg-modal-text-color);
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.wpcg-custom-modal .wpcg-modal-button:hover {
background-color: var(--wpcg-modal-text-color);
color: var(--wpcg-modal-text-color);
}
.wpcg-custom-modal .wpcg-modal-button.secondary {
background-color: #666;
}
.wpcg-custom-modal .wpcg-modal-button.secondary:hover {
background-color: #555;
} .wpcg-custom-modal .wpcg-privacy-accept {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
outline: none;
text-align: center;
min-width: 150px;
}
.wpcg-custom-modal .wpcg-privacy-accept:hover:not(:disabled) {
background-color: #005a87;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.wpcg-custom-modal .wpcg-privacy-accept:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} .wpcg-custom-modal .wpcg-privacy-accept:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
opacity: 0.7;
} .wpcg-custom-modal .wpcg-privacy-accept.active {
animation: buttonPulse 1.5s infinite;
background-color: #46b450;
} @keyframes buttonPulse {
0% {
box-shadow: 0 0 0 0 rgba(70, 180, 80, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(70, 180, 80, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(70, 180, 80, 0);
}
} .wpcg-custom-modal.scenario2 .wpcg-modal-footer {
text-align: center;
padding: 15px;
background-color: #f9f9f9;
position: relative;
z-index: 10;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
} .wpcg-custom-modal.scenario2 .wpcg-privacy-accept:not(:disabled) {
animation: fadeInButton 0.5s ease-in-out;
}
@keyframes fadeInButton {
from {
opacity: 0.5;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
} .wpcg-custom-modal .wpcg-privacy-checkbox-label {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
gap: 8px;
}
.wpcg-custom-modal .wpcg-privacy-checkbox-label input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.wpcg-custom-modal .wpcg-privacy-checkbox-label span {
line-height: 1.4;
color: #555;
} .wpcg-custom-modal .cg-privacy-validation-button:not(.wpcg-validation-blocked):hover {
transform: translateY(-1px);
transition: transform 0.2s ease;
} .wpcg-custom-modal .wpcg-consent-status {
margin-top: 10px;
padding: 8px 12px;
background-color: #f0f8ff;
border: 1px solid #b8daff;
border-radius: 4px;
color: #004085;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.wpcg-custom-modal .wpcg-consent-check {
display: inline-block;
margin-right: 8px;
font-size: 18px;
color: #46b450;
font-weight: bold;
} .wpcg-custom-modal .cg-privacy-checkbox:checked+label {
color: #4CAF50 !important;
font-weight: 500 !important;
}
.wpcg-custom-modal .cg-privacy-checkbox:not(:checked)+label {
color: #666 !important;
} @keyframes wpcgFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes wpcgFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} @media (max-width: 500px) {
.wpcg-custom-modal .wpcg-custom-modal-content,
.wpcg-custom-modal .wpcg-modal-content {
width: calc(100% - 20px);
height: 80vh;
margin: 10vh auto;
}
.wpcg-custom-modal h2 {
font-size: 24px;
padding: 20px 20px;
}
.wpcg-custom-modal .wpcg-modal-button {
text-align: center;
display: block;
width: 100%;
margin: 5px 0;
}
.wpcg-custom-modal .wpcg-modal-body {
padding: 0px;
overflow-y: auto;
max-height: 60vh;
margin: 0px 20px;
} .wpcg-custom-modal .wpcg-modal-footer {
padding: 20px 20px !important;
}
.wpcg-custom-modal .wpcg-close-button,
.wpcg-custom-modal .button.wpcg-close-button {
width: 100% !important;
min-width: auto !important;
}
} .wpcg-custom-modal:focus {
outline: none;
}
.wpcg-custom-modal .wpcg-custom-modal-content:focus,
.wpcg-custom-modal .wpcg-modal-content:focus {
outline: 2px solid #007acc;
outline-offset: 2px;
}
.wpcg-custom-modal .wpcg-close:focus {
outline: 2px solid #007acc;
outline-offset: 2px;
} @media print {
.wpcg-custom-modal {
display: none !important;
}
}  .wpcg-custom-modal .wpcg-modal-footer {
padding: 30px 30px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
} .wpcg-custom-modal .wpcg-close-button,
.wpcg-custom-modal .button.wpcg-close-button {
padding: 12px 24px !important;
border: 1px solid var(--wpcg-modal-text-color) !important;
font-size: 16px !important;
font-weight: 400 !important;
cursor: pointer !important;
text-decoration: none !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 140px !important;
height: 44px !important;
background: transparent !important;
color: var(--wpcg-modal-text-color) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
line-height: 1 !important;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
text-shadow: none !important;
border-width: 1px !important;
border-style: solid !important;
}
.wpcg-custom-modal .wpcg-close-button:hover,
.wpcg-custom-modal .button.wpcg-close-button:hover {
background: rgba(210, 200, 188, 0.1) !important;
color: var(--wpcg-modal-text-color) !important;
transform: none !important; border-color: var(--wpcg-modal-text-color) !important;
box-shadow: none !important;
text-shadow: none !important;
}
.wpcg-custom-modal .wpcg-close-button:focus,
.wpcg-custom-modal .wpcg-close-button:active,
.wpcg-custom-modal .button.wpcg-close-button:focus,
.wpcg-custom-modal .button.wpcg-close-button:active {
outline: none !important;
box-shadow: none !important;
background: var(--wpcg-modal-text-color) !important;
color: var(--wpcg-modal-bg-color) !important;
border-color: var(--wpcg-modal-text-color) !important;
text-shadow: none !important;
}   .wpcg-modal-scroll-area::-webkit-scrollbar,
.wpcg-custom-modal-content *::-webkit-scrollbar,
.wpcg-modal-content *::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
.wpcg-modal-scroll-area::-webkit-scrollbar-track,
.wpcg-custom-modal-content *::-webkit-scrollbar-track,
.wpcg-modal-content *::-webkit-scrollbar-track {
background: rgba(210, 200, 188, 0.5) !important;
border-radius: 3px !important;
border: none !important;
box-shadow: none !important;
} .wpcg-modal-scroll-area::-webkit-scrollbar-thumb,
.wpcg-modal-scroll-area::-webkit-scrollbar-thumb:hover,
.wpcg-modal-scroll-area::-webkit-scrollbar-thumb:active,
.wpcg-custom-modal-content *::-webkit-scrollbar-thumb,
.wpcg-custom-modal-content *::-webkit-scrollbar-thumb:hover,
.wpcg-custom-modal-content *::-webkit-scrollbar-thumb:active,
.wpcg-modal-content *::-webkit-scrollbar-thumb,
.wpcg-modal-content *::-webkit-scrollbar-thumb:hover,
.wpcg-modal-content *::-webkit-scrollbar-thumb:active {
background: var(--wpcg-cookie-modal-scrollbar-color, #D2C8BC) !important;
opacity: 1 !important;
border: none !important;
box-shadow: none !important;
border-radius: 2px !important;
min-height: 20px !important; transition: none !important;
transform: none !important;
filter: none !important;
animation: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
-webkit-transform: none !important;
-webkit-transition: none !important;
-webkit-animation: none !important;
-webkit-appearance: none !important;
outline: none !important;
cursor: default !important;
} .wpcg-modal-scroll-area::-webkit-scrollbar-thumb:window-inactive,
.wpcg-custom-modal-content *::-webkit-scrollbar-thumb:window-inactive,
.wpcg-modal-content *::-webkit-scrollbar-thumb:window-inactive {
background: var(--wpcg-cookie-modal-scrollbar-color, #D2C8BC) !important;
opacity: 1 !important;
} .wpcg-modal-scroll-area::-webkit-scrollbar-button,
.wpcg-modal-scroll-area::-webkit-scrollbar-corner,
.wpcg-modal-scroll-area::-webkit-scrollbar-track-piece,
.wpcg-custom-modal-content *::-webkit-scrollbar-button,
.wpcg-custom-modal-content *::-webkit-scrollbar-corner,
.wpcg-custom-modal-content *::-webkit-scrollbar-track-piece,
.wpcg-modal-content *::-webkit-scrollbar-button,
.wpcg-modal-content *::-webkit-scrollbar-corner,
.wpcg-modal-content *::-webkit-scrollbar-track-piece {
display: none !important;
background: transparent !important;
} .wpcg-modal-scroll-area,
.wpcg-modal-content * {
scrollbar-width: thin !important;
scrollbar-color: var(--wpcg-modal-scrollbar-color, #D2C8BC) var(--wpcg-background-rgba, rgba(210, 200, 188, 0.5)) !important;
scrollbar-track-color: rgba(210, 200, 188, 0.5) !important;
} .wpcg-modal-scroll-area { transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
}
.wpcg-modal-content * { scrollbar-color: unset !important;
scrollbar-width: unset !important;
}