.zen-cookie-root[hidden],
.zen-cookie-panel[hidden],
.zen-cookie-backdrop[hidden],
.zen-cookie-reopen[hidden] {
display: none !important;
}
.zen-cookie-root {
position: fixed;
inset: 0;
z-index: 999999;
pointer-events: none;
}
.zen-cookie-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.35);
pointer-events: auto;
}
.zen-cookie-banner {
pointer-events: auto;
position: absolute;
max-width: min(460px, calc(100vw - 24px));
max-height: calc(100vh - 32px);
overflow: auto;
background: var(--zen-bg, #fff);
color: var(--zen-text, #1f2937);
border-radius: var(--zen-radius, 12px);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.zen-cookie-root[data-position='bottom-left'] .zen-cookie-banner {
left: 16px;
bottom: 16px;
}
.zen-cookie-root[data-position='bottom-center'] .zen-cookie-banner {
left: 50%;
bottom: 16px;
transform: translateX(-50%);
}
.zen-cookie-root[data-position='bottom-right'] .zen-cookie-banner {
right: 16px;
bottom: 16px;
}
.zen-cookie-logo {
margin: 0 0 12px;
}
.zen-cookie-logo__img {
display: block;
max-height: 36px;
width: auto;
max-width: 160px;
object-fit: contain;
}
.zen-cookie-title,
.zen-cookie-prefs-title {
margin: 0 0 8px;
font-size: 1.15rem;
line-height: 1.3;
color: inherit;
}
.zen-cookie-desc {
margin: 0 0 12px;
font-size: 0.925rem;
line-height: 1.45;
opacity: 0.95;
}
.zen-cookie-policy {
color: var(--zen-link, #2a67bd);
font-size: 0.875rem;
}
.zen-cookie-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.zen-cookie-btn {
appearance: none;
border: 1px solid transparent;
border-radius: calc(var(--zen-radius, 12px) / 2);
padding: 10px 14px;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zen-cookie-btn--primary {
background: var(--zen-btn-bg, #2a67bd);
color: var(--zen-btn-text, #fff);
}
.zen-cookie-btn--primary:hover,
.zen-cookie-btn--primary:focus-visible {
background: var(--zen-btn-hover-bg, #1e4f96);
color: var(--zen-btn-hover-text, #fff);
}
.zen-cookie-btn--secondary,
.zen-cookie-btn--ghost {
background: var(--zen-btn2-bg, transparent);
color: var(--zen-btn2-text, #2a67bd);
border-color: var(--zen-btn2-border, #2a67bd);
}
.zen-cookie-cat {
border: 1px solid rgba(127, 127, 127, 0.25);
border-radius: 8px;
padding: 12px;
margin: 10px 0;
}
.zen-cookie-cat label {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
}
.zen-cookie-cat strong {
display: block;
margin-bottom: 4px;
}
.zen-cookie-cat p {
margin: 0;
font-size: 0.85rem;
opacity: 0.9;
}
.zen-cookie-reopen {
position: fixed;
z-index: 999998;
border: 0;
border-radius: 999px;
padding: 10px 14px;
background: var(--zen-bg, #fff);
color: var(--zen-text, #1f2937);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
cursor: pointer;
opacity: 0.4;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
font: inherit;
font-size: 0.8rem;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.zen-cookie-reopen:hover,
.zen-cookie-reopen:focus-visible {
opacity: 1;
transform: translateY(0);
}
.zen-cookie-reopen--bottom-left {
left: 16px;
bottom: 16px;
}
.zen-cookie-reopen--bottom-center {
left: 50%;
bottom: 16px;
transform: translate(-50%, 8px);
}
.zen-cookie-reopen--bottom-center:hover,
.zen-cookie-reopen--bottom-center:focus-visible {
transform: translate(-50%, 0);
}
.zen-cookie-reopen--bottom-right {
right: 16px;
bottom: 16px;
}
.zen-cookie-table-wrap {
overflow-x: auto;
margin: 1.5rem 0;
}
.zen-cookie-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.zen-cookie-table th,
.zen-cookie-table td {
border: 1px solid #e5e7eb;
padding: 8px 10px;
text-align: left;
vertical-align: top;
}
.zen-cookie-table th {
background: #f9fafb;
}
.zen-cookie-manage {
margin-top: 1rem;
}
.zen-cookie-manage__btn {
appearance: none;
border: 1px solid #2a67bd;
background: #2a67bd;
color: #fff;
border-radius: 8px;
padding: 10px 16px;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.zen-cookie-manage__btn:hover,
.zen-cookie-manage__btn:focus-visible {
background: #1e4f96;
}
@media (max-width: 640px) {
.zen-cookie-actions {
flex-direction: column;
}
.zen-cookie-btn {
width: 100%;
}
}