/**
 * Cirtech Cookie Consent — banner, preferences modal, re-open button.
 *
 * Every colour references a --cc-* custom property that the plugin sets from
 * the active theme (or your overrides), so the banner matches each site.
 * Fallbacks below keep it readable even if the inline tokens don't load.
 */

/* The `hidden` attribute must always win, even over the display: rules below —
 * otherwise the modal (display:flex) would ignore [hidden] and stay open, since
 * author styles beat the browser's built-in [hidden]{display:none}. */
.cc[hidden], .cc-modal[hidden], .cc-reopen[hidden] { display: none !important; }

.cc {
	position: fixed; z-index: 100000;
	background: var(--cc-surface, #fff); color: var(--cc-text, #26303a);
	border-radius: var(--cc-radius, 14px);
	box-shadow: 0 20px 50px -12px rgba(15, 32, 52, .45);
	border: 1px solid var(--cc-border, #e6ebf0);
	font-family: var(--cc-font, inherit);
}

/* Bar: full-width strip along the bottom. */
.cc--bar { left: 16px; right: 16px; bottom: 16px; max-width: 1040px; margin: 0 auto; }

/* Box: compact floating card, positioned per setting. */
.cc--box { bottom: 16px; width: min(420px, calc(100vw - 32px)); }
.cc--box.cc--pos-left { left: 16px; }
.cc--box.cc--pos-right { right: 16px; }
.cc--box.cc--pos-center { left: 50%; transform: translateX(-50%); }
.cc--box .cc__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
.cc--box .cc__actions { width: 100%; }
.cc--box .cc__actions .cc__btn { flex: 1 1 auto; text-align: center; }

.cc__inner { display: flex; align-items: center; gap: 22px; padding: 18px 22px; flex-wrap: wrap; }
.cc__text { flex: 1 1 340px; min-width: 240px; }
.cc__text strong { display: block; font-size: 16px; font-weight: 800; color: var(--cc-accent, #2563eb); margin-bottom: 4px; }
.cc__text p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cc-muted, #5e6771); }
.cc__text a { color: var(--cc-accent, #2563eb); font-weight: 700; text-decoration: underline; }
.cc__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cc__btn {
	appearance: none; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
	padding: 11px 18px; border-radius: calc(var(--cc-radius, 14px) * .64); line-height: 1;
	transition: background .14s, color .14s, border-color .14s;
}
.cc__btn--ghost { background: transparent; color: var(--cc-text, #35404a); border: 1.5px solid var(--cc-border, #cbd5de); }
.cc__btn--ghost:hover { border-color: var(--cc-accent, #2563eb); color: var(--cc-accent, #2563eb); }
.cc__btn--accept { background: var(--cc-accent, #2563eb); color: var(--cc-accent-ink, #fff); }
.cc__btn--accept:hover { background: var(--cc-accent-hover, #1d4ed8); }

/* Preferences modal */
.cc-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cc-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 26, 43, .55); }
.cc-modal__panel {
	position: relative; background: var(--cc-surface, #fff); color: var(--cc-text, #26303a);
	border-radius: var(--cc-radius, 16px); max-width: 560px; width: 100%;
	max-height: 88vh; overflow-y: auto; padding: 26px 26px 22px; box-shadow: 0 30px 70px -20px rgba(10, 25, 45, .6);
	font-family: var(--cc-font, inherit);
}
.cc-modal__x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--cc-muted, #8a96a2); cursor: pointer; }
.cc-modal__x:hover { color: var(--cc-accent, #2563eb); }
.cc-modal__title { font-size: 21px; font-weight: 800; color: var(--cc-accent, #2563eb); margin: 0 0 8px; }
.cc-modal__intro { font-size: 14px; color: var(--cc-muted, #5e6771); line-height: 1.55; margin: 0 0 16px; }
.cc-cats { list-style: none; margin: 0 0 18px; padding: 0; }
.cc-cat { border: 1px solid var(--cc-border, #e6ebf0); border-radius: calc(var(--cc-radius, 14px) * .8); padding: 13px 15px; margin-bottom: 10px; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-cat__name { font-weight: 800; font-size: 14.5px; color: var(--cc-text, #26303a); }
.cc-cat__always { font-size: 12px; font-weight: 700; color: #2f9e44; text-transform: uppercase; letter-spacing: .04em; }
.cc-cat__desc { margin: 6px 0 0; font-size: 13px; color: var(--cc-muted, #5e6771); line-height: 1.5; }

/* Toggle switch */
.cc-switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__track { width: 42px; height: 24px; border-radius: 999px; background: #c3cdd7; transition: background .16s; position: relative; }
.cc-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cc-switch input:checked + .cc-switch__track { background: var(--cc-accent, #2563eb); }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid var(--cc-accent, #2f80c4); outline-offset: 2px; }

.cc-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-modal__actions .cc__btn { flex: 1 1 auto; text-align: center; }
.cc-modal__policy { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--cc-accent, #2563eb); text-decoration: underline; }
body.cc-open { overflow: hidden; }

/* Re-open button */
.cc-reopen {
	position: fixed; bottom: 16px; z-index: 99998; display: inline-flex; align-items: center; gap: 8px;
	background: var(--cc-reopen-bg, #26303a); color: #fff; border: none; cursor: pointer; padding: 10px 14px; border-radius: 999px;
	font-family: var(--cc-font, inherit); font-weight: 700; font-size: 13px; box-shadow: 0 8px 22px -6px rgba(15, 32, 52, .55);
}
.cc-reopen--left { left: 16px; }
.cc-reopen--right { right: 16px; }
.cc-reopen--center { left: 16px; }
.cc-reopen:hover { filter: brightness(1.12); }
.cc-reopen__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; position: relative; }
.cc-reopen__dot::before, .cc-reopen__dot::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cc-reopen__dot::before { width: 3px; height: 3px; top: 2px; left: 4px; }
.cc-reopen__dot::after { width: 3px; height: 3px; bottom: 2px; right: 2px; }

@media (max-width: 620px) {
	.cc--bar .cc__inner { padding: 16px; }
	.cc__actions { width: 100%; }
	.cc__actions .cc__btn { flex: 1 1 auto; text-align: center; }
	.cc-reopen__label { display: none; }
	.cc-reopen { padding: 11px; }
}