:root {
--gdb-color-primary: #1f4fff;
--gdb-color-background: #ffffff;
--gdb-color-text: #111111;
--gdb-color-muted: #666666;
--gdb-color-button: #1f4fff;
--gdb-color-border: #dddddd;
--gdb-color-overlay: rgba(0, 0, 0, 0.65);
--gdb-color-focus: #1f4fff;
--gdb-focus-outline: 3px solid var(--gdb-color-focus);
--gdb-radius: 10px;
--gdb-space: 1rem;
} .gdb-modal-open {
overflow: hidden;
} .gdb-modal {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--gdb-space);
}
.gdb-modal[hidden] {
display: none;
}
.gdb-modal__backdrop {
position: absolute;
inset: 0;
background: var(--gdb-color-overlay);
border: 0;
}
.gdb-modal__dialog {
position: relative;
width: 100%;
max-width: 34rem;
max-height: calc(100vh - 2 * var(--gdb-space));
overflow-y: auto;
background: var(--gdb-color-background);
color: var(--gdb-color-text);
border: 1px solid var(--gdb-color-border);
border-radius: var(--gdb-radius);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
padding: clamp(1rem, 3vw, 1.75rem);
}
.gdb-modal__dialog:focus {
outline: none;
}
.gdb-modal__header {
margin-bottom: 0.75rem;
}
.gdb-modal__title {
margin: 0;
font-size: 1.35rem;
line-height: 1.25;
color: var(--gdb-color-text);
}
.gdb-modal__description {
margin: 0 0 0.75rem;
line-height: 1.55;
}
.gdb-modal__privacy {
margin: 0 0 0.75rem;
}
.gdb-modal__privacy-link {
color: var(--gdb-color-primary);
}
.gdb-modal__details-toggle {
display: inline-block;
margin: 0 0 0.75rem;
padding: 0.25rem 0;
background: none;
border: 0;
color: var(--gdb-color-primary);
font: inherit;
cursor: pointer;
text-decoration: underline;
}
.gdb-modal__services-wrap {
margin: 0 0 0.75rem;
border: 1px solid var(--gdb-color-border);
border-radius: var(--gdb-radius);
padding: 0.5rem 0.75rem;
}
.gdb-modal__services-wrap[hidden] {
display: none;
}
.gdb-modal__services {
list-style: none;
margin: 0;
padding: 0;
}
.gdb-modal__service {
padding: 0.5rem 0;
border-bottom: 1px solid var(--gdb-color-border);
}
.gdb-modal__service:last-child {
border-bottom: 0;
}
.gdb-modal__service-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
cursor: pointer;
}
.gdb-modal__service-desc {
display: block;
margin-top: 0.25rem;
color: var(--gdb-color-muted);
font-size: 0.9rem;
line-height: 1.45;
}
.gdb-modal__actions {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 1rem;
} .gdb-modal__button,
.gdb-open-button {
flex: 0 1 auto;
min-width: 0;
cursor: pointer;
text-decoration: none;
} .gdb-style-filled .gdb-modal__button:not([hidden]),
.gdb-style-outline .gdb-modal__button:not([hidden]),
.gdb-open-button.gdb-style-filled,
.gdb-open-button.gdb-style-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.5rem 1.1rem;
border: 2px solid var(--gdb-color-button);
border-radius: var(--gdb-radius);
font: inherit;
font-weight: 600;
line-height: 1.2;
} .gdb-style-filled .gdb-modal__button,
.gdb-open-button.gdb-style-filled {
background: var(--gdb-color-button);
color: #ffffff;
} .gdb-style-outline .gdb-modal__button,
.gdb-open-button.gdb-style-outline {
background: transparent;
color: var(--gdb-color-button);
} .gdb-modal__button--tertiary[hidden] {
display: none;
} .gdb-blocker__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.5rem 1.1rem;
border: 2px solid var(--gdb-color-button);
border-radius: var(--gdb-radius);
font: inherit;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
}
.gdb-blocker__button--primary {
background: var(--gdb-color-button);
color: #ffffff;
}
.gdb-blocker__button--secondary {
background: transparent;
color: var(--gdb-color-text);
border-color: var(--gdb-color-border);
}
.gdb-blocker__button--link {
min-height: 0;
padding: 0.25rem 0.5rem;
background: none;
border: 0;
color: var(--gdb-color-primary);
text-decoration: underline;
} .gdb-modal__button:focus-visible,
.gdb-blocker__button:focus-visible,
.gdb-open-button:focus-visible,
.gdb-modal__details-toggle:focus-visible,
.gdb-modal__privacy-link:focus-visible,
.gdb-modal__service-checkbox:focus-visible {
outline: var(--gdb-focus-outline);
outline-offset: 3px;
} .gdb-blocker {
display: flex;
align-items: center;
justify-content: center;
min-height: 12rem;
padding: clamp(1rem, 4vw, 2rem);
background: var(--gdb-color-background);
color: var(--gdb-color-text);
border: 1px solid var(--gdb-color-border);
border-radius: var(--gdb-radius);
}
.gdb-blocker__inner {
max-width: 32rem;
text-align: center;
} .gdb-blocker--has-bg {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.gdb-blocker--has-bg::before {
content: "";
position: absolute;
inset: 0;
background: var(--gdb-color-overlay);
pointer-events: none;
}
.gdb-blocker--has-bg .gdb-blocker__inner {
position: relative;
z-index: 1;
padding: clamp(1rem, 3vw, 1.5rem);
background: var(--gdb-color-background);
color: var(--gdb-color-text);
border-radius: var(--gdb-radius);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.gdb-blocker__title {
margin: 0 0 0.5rem;
font-size: 1.2rem;
line-height: 1.3;
}
.gdb-blocker__text {
margin: 0 0 0.5rem;
line-height: 1.5;
}
.gdb-blocker__hint {
margin: 0 0 1rem;
color: var(--gdb-color-muted);
font-size: 0.9rem;
line-height: 1.45;
}
.gdb-blocker__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
} .wp-has-aspect-ratio .wp-block-embed__wrapper {
position: relative;
}
.wp-has-aspect-ratio .wp-block-embed__wrapper .gdb-blocker {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
overflow: auto;
} .gdb-list {
list-style: none;
margin: 0;
padding: 0;
}
.gdb-list__item {
padding: 0.5rem 0;
border-bottom: 1px solid var(--gdb-color-border);
}
.gdb-list__item:last-child {
border-bottom: 0;
}
.gdb-list__name {
display: block;
}
.gdb-list__desc {
display: block;
color: var(--gdb-color-muted);
font-size: 0.9rem;
}
.gdb-privacy__disclaimer {
color: var(--gdb-color-muted);
font-size: 0.9rem;
} @media (max-width: 30rem) {
.gdb-modal__actions {
flex-wrap: wrap;
justify-content: stretch;
}
.gdb-modal__button {
flex: 1 1 100%;
}
} @media (prefers-reduced-motion: reduce) {
.gdb-modal,
.gdb-modal__dialog,
.gdb-blocker {
animation: none;
transition: none;
}
}