/*
 * M Cookie Consent banner styles.
 *
 * Two themes, both driven by CSS custom properties:
 *  - .mcc-theme-modern  — the built-in design: rounded card, gradient accent.
 *  - .mcc-theme-inherit — neutral banner that picks up the site's own font
 *                         and stays visually quiet ("match my website theme").
 */
:root {
	--mcc-accent: #6d5cf5;
	--mcc-accent-2: #9d5cf5;
	--mcc-bg: #ffffff;
	--mcc-text: #191d2b;
	--mcc-muted: #4c5265;
	--mcc-soft: #6b7280;
	--mcc-border: #e5e7ee;
	--mcc-radius: 22px;
	--mcc-radius-btn: 13px;
	--mcc-shadow: 0 18px 50px rgba(17, 12, 46, 0.16), 0 2px 10px rgba(17, 12, 46, 0.06);
	--mcc-z: 99999;
	--mcc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Skeleton (both themes) ---------- */

.mcc-banner,
.mcc-modal,
.mcc-reopen {
	font-family: var(--mcc-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--mcc-text);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.mcc-banner *,
.mcc-modal *,
.mcc-reopen * {
	box-sizing: border-box;
}

.mcc-banner[hidden],
.mcc-modal[hidden],
.mcc-reopen[hidden] {
	display: none;
}

/* "Match my website theme": neutral shapes, the site's own font, flat colours. */
.mcc-theme-inherit {
	font-family: inherit;
	font-size: 15px;
}

.mcc-banner.mcc-theme-inherit {
	border: 1px solid var(--mcc-border);
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.mcc-banner.mcc-theme-inherit.mcc-pos-bar {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

.mcc-theme-inherit .mcc-modal__panel {
	border-radius: 8px;
}

.mcc-theme-inherit .mcc-btn {
	border-radius: 5px;
	font-weight: 600;
	font-size: 15px;
	padding: 11px 18px;
}

.mcc-theme-inherit .mcc-banner__heading {
	font-size: 19px;
	letter-spacing: 0;
}

.mcc-theme-inherit .mcc-banner__message {
	font-size: 15px;
}

.mcc-banner {
	position: fixed;
	z-index: var(--mcc-z);
	background: var(--mcc-bg);
	box-shadow: var(--mcc-shadow);
}

.mcc-pos-bar {
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 1px solid var(--mcc-border);
}

.mcc-pos-bar .mcc-banner__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 20px 18px;
}

.mcc-pos-card-left,
.mcc-pos-card-right {
	bottom: 24px;
	max-width: 460px;
	width: calc(100% - 48px);
	border-radius: var(--mcc-radius);
}

.mcc-pos-card-left {
	left: 24px;
}

.mcc-pos-card-right {
	right: 24px;
}

.mcc-pos-card-left .mcc-banner__inner,
.mcc-pos-card-right .mcc-banner__inner {
	padding: 28px 28px 20px;
}

/* ---------- Banner content ---------- */

.mcc-banner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 17px;
	color: #ffffff;
	background: var(--mcc-accent);
	background: linear-gradient(135deg, var(--mcc-accent), var(--mcc-accent-2));
	box-shadow: 0 8px 18px rgba(17, 12, 46, 0.18);
}

.mcc-banner__heading {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: inherit;
}

.mcc-banner__message {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--mcc-muted);
}

.mcc-banner__message a,
.mcc-cat__desc a {
	color: var(--mcc-accent);
	text-decoration: underline;
}

.mcc-banner__actions {
	display: flex;
	gap: 14px;
}

.mcc-banner__actions .mcc-btn {
	flex: 1 1 0;
}

/* ---------- Buttons ---------- */

.mcc-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 1.5px solid transparent;
	border-radius: var(--mcc-radius-btn);
	padding: 14px 20px;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: filter 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.mcc-btn:active {
	transform: scale(0.985);
}

/* "Accept all" and "Only necessary" are the same size and weight: GDPR
   requires that refusing is as easy and visible as accepting. */
.mcc-btn--primary {
	background: var(--mcc-accent);
	background: linear-gradient(135deg, var(--mcc-accent), var(--mcc-accent-2));
	color: #ffffff;
}

.mcc-btn--primary:hover {
	filter: brightness(1.08);
}

.mcc-btn--secondary {
	background: var(--mcc-bg);
	border-color: var(--mcc-border);
	color: var(--mcc-text);
}

.mcc-btn--secondary:hover {
	background: rgba(17, 12, 46, 0.045);
}

.mcc-theme-inherit .mcc-btn--primary {
	background: var(--mcc-accent);
}

.mcc-btn:focus-visible,
.mcc-link:focus-visible,
.mcc-reopen:focus-visible,
.mcc-modal__close:focus-visible,
.mcc-switch input:focus-visible ~ .mcc-switch__track {
	outline: 3px solid var(--mcc-accent);
	outline-offset: 2px;
}

/* ---------- Footer links row ---------- */

.mcc-banner__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 26px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--mcc-border);
}

.mcc-link {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--mcc-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.15s ease;
}

.mcc-link:hover {
	color: var(--mcc-text);
}

/* ---------- Modal (layer 2) ---------- */

.mcc-modal {
	position: fixed;
	inset: 0;
	z-index: calc(var(--mcc-z) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mcc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 12, 34, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.mcc-modal__panel {
	position: relative;
	background: var(--mcc-bg);
	width: 100%;
	max-width: 560px;
	max-height: min(85vh, 700px);
	display: flex;
	flex-direction: column;
	border-radius: var(--mcc-radius);
	box-shadow: var(--mcc-shadow);
}

.mcc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 26px;
	border-bottom: 1px solid var(--mcc-border);
}

.mcc-modal__title {
	margin: 0;
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: inherit;
}

.mcc-modal__close {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: var(--mcc-soft);
	font-size: 26px;
	line-height: 1;
	padding: 2px 8px;
	cursor: pointer;
	border-radius: 8px;
}

.mcc-modal__close:hover {
	color: var(--mcc-text);
}

.mcc-modal__body {
	padding: 8px 26px;
	overflow-y: auto;
}

.mcc-cat {
	padding: 16px 0;
	border-bottom: 1px solid var(--mcc-border);
}

.mcc-cat:last-child {
	border-bottom: 0;
}

.mcc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mcc-cat__title {
	font-weight: 700;
	font-size: 16px;
}

.mcc-cat__locked {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mcc-accent);
	white-space: nowrap;
}

.mcc-cat__desc {
	margin: 6px 0 0;
	font-size: 14.5px;
	color: var(--mcc-muted);
}

.mcc-modal__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 26px 22px;
	border-top: 1px solid var(--mcc-border);
}

.mcc-modal__footer .mcc-btn {
	padding: 12px 18px;
	font-size: 15.5px;
}

/* ---------- Toggle switch ---------- */

.mcc-switch {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}

.mcc-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.mcc-switch__track {
	display: block;
	width: 48px;
	height: 27px;
	background: #d3d5df;
	border-radius: 999px;
	transition: background-color 0.18s ease;
	pointer-events: none;
}

.mcc-switch__track::after {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	margin: 3px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(17, 12, 46, 0.25);
	transition: transform 0.18s ease;
}

.mcc-switch input:checked ~ .mcc-switch__track {
	background: var(--mcc-accent);
	background: linear-gradient(135deg, var(--mcc-accent), var(--mcc-accent-2));
}

.mcc-theme-inherit .mcc-switch input:checked ~ .mcc-switch__track {
	background: var(--mcc-accent);
}

.mcc-switch input:checked ~ .mcc-switch__track::after {
	transform: translateX(21px);
}

.mcc-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ---------- Floating reopen button ---------- */

.mcc-reopen {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: var(--mcc-z);
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--mcc-accent);
	background: linear-gradient(135deg, var(--mcc-accent), var(--mcc-accent-2));
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(17, 12, 46, 0.28);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.mcc-reopen:hover {
	transform: scale(1.08);
}

.mcc-reopen.mcc-theme-inherit {
	background: var(--mcc-bg);
	color: var(--mcc-accent);
	border: 1px solid var(--mcc-border);
}

/* ---------- Shortcode / menu trigger ---------- */

.mcc-open-settings {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	color: var(--mcc-accent);
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Theme hardening ----------
   Some themes colour every h2/p/button, which can wash out or even hide the
   banner text (e.g. a white heading on the white card). These ID-scoped rules
   have higher specificity than any theme class selector, and are marked
   important so they also win against theme rules that use !important. They
   still read from the custom properties, so the admin's chosen colours apply. */

#mcc-banner .mcc-banner__heading,
#mcc-modal .mcc-modal__title,
#mcc-modal .mcc-cat__title {
	color: var(--mcc-text) !important;
}

#mcc-banner .mcc-banner__message,
#mcc-modal .mcc-cat__desc {
	color: var(--mcc-muted) !important;
}

#mcc-banner .mcc-btn--secondary,
#mcc-modal .mcc-btn--secondary {
	color: var(--mcc-text) !important;
	background: var(--mcc-bg) !important;
}

#mcc-banner .mcc-btn--primary,
#mcc-modal .mcc-btn--primary {
	color: #ffffff !important;
}

#mcc-banner .mcc-link,
#mcc-modal .mcc-link {
	color: var(--mcc-soft) !important;
}

#mcc-modal .mcc-cat__locked {
	color: var(--mcc-accent) !important;
}

/* ---------- Scroll lock while the modal is open ---------- */

.mcc-modal-open,
.mcc-modal-open body {
	overflow: hidden;
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.mcc-pos-card-left,
	.mcc-pos-card-right {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
	}

	.mcc-pos-card-left .mcc-banner__inner,
	.mcc-pos-card-right .mcc-banner__inner {
		padding: 22px 20px 16px;
	}

	.mcc-banner__actions {
		flex-direction: column;
	}

	.mcc-modal__footer .mcc-btn {
		flex: 1 1 100%;
	}

	.mcc-banner__icon {
		width: 46px;
		height: 46px;
		margin-bottom: 14px;
		border-radius: 14px;
	}

	.mcc-reopen {
		left: 12px;
		bottom: 12px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.mcc-btn,
	.mcc-link,
	.mcc-reopen,
	.mcc-switch__track,
	.mcc-switch__track::after {
		transition: none;
	}

	.mcc-btn:active {
		transform: none;
	}
}