/* 2026-09-06: front-end cookie-consent banner.
   Colours / size / radius come from CSS variables injected per-site in
   inc/cookie-consent.php (ma_cookie_inline_vars). This file is structure only. */

.ma-cookie,
.ma-cookie * {
	box-sizing: border-box;
}

.ma-cookie {
	position: fixed;
	z-index: 99990;
	inset: auto 0 0 0;
	display: flex;
	padding: 16px;
	font-family: "IBM Plex Sans Thai", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	font-size: var(--mac-font, 14px);
	line-height: 1.55;
	color: var(--mac-text, #14212e);
}

.ma-cookie.is-hidden { display: none; }

/* ---- position variants ---- */
.ma-cookie[data-pos="top"] { inset: 0 0 auto 0; }
.ma-cookie[data-pos="bottom"] { inset: auto 0 0 0; }
.ma-cookie[data-pos="bottom-left"] { inset: auto auto 0 0; }
.ma-cookie[data-pos="bottom-right"] { inset: auto 0 0 auto; }
.ma-cookie[data-pos="center"] {
	inset: 0;
	align-items: center;
	justify-content: center;
}

/* full-width bar centres its panel; box variants hug the corner */
.ma-cookie[data-pos="bottom"],
.ma-cookie[data-pos="top"] { justify-content: center; }

.ma-cookie[data-pos="bottom-left"] .ma-cookie__panel,
.ma-cookie[data-pos="bottom-right"] .ma-cookie__panel,
.ma-cookie[data-pos="center"] .ma-cookie__panel {
	flex-direction: column;
	max-width: min(420px, calc(100vw - 32px));
}

/* ---- overlay (box / center only) ---- */
.ma-cookie__overlay {
	position: fixed;
	inset: 0;
	background: rgba(9, 16, 24, 0.45);
	z-index: -1;
}
.ma-cookie[data-overlay="1"][data-pos="center"] .ma-cookie__overlay,
.ma-cookie[data-overlay="1"][data-pos="bottom-left"] .ma-cookie__overlay,
.ma-cookie[data-overlay="1"][data-pos="bottom-right"] .ma-cookie__overlay {
	display: block;
}
.ma-cookie__overlay[hidden] { display: none; }

/* ---- panel ---- */
.ma-cookie__panel {
	width: 100%;
	max-width: var(--mac-max, 1120px);
	display: flex;
	gap: 18px 24px;
	align-items: center;
	flex-wrap: wrap;
	background: var(--mac-bg, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--mac-radius, 10px);
	box-shadow: var(--mac-shadow, 0 8px 40px rgba(0, 0, 0, 0.16));
	padding: 18px 20px;
}

.ma-cookie__main { flex: 1 1 460px; min-width: 0; }

.ma-cookie__heading {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 1.05em;
}
.ma-cookie__body { margin: 0; }
.ma-cookie__body a {
	color: var(--mac-link, #0f5aa8);
	text-decoration: underline;
}

/* ---- preferences ---- */
.ma-cookie__prefs {
	margin-top: 12px;
	display: grid;
	gap: 8px;
}
.ma-cookie__prefs[hidden] { display: none; }
.ma-cookie__row {
	display: flex;
	gap: 10px;
	align-items: start;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.04);
	background: color-mix(in srgb, var(--mac-text, #14212e) 5%, transparent);
	border-radius: 8px;
	cursor: pointer;
}
.ma-cookie__row input { margin-top: 3px; flex: none; }
.ma-cookie__row strong { font-weight: 600; }

/* ---- actions ---- */
.ma-cookie__actions {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.ma-cookie[data-pos="bottom-left"] .ma-cookie__actions,
.ma-cookie[data-pos="bottom-right"] .ma-cookie__actions,
.ma-cookie[data-pos="center"] .ma-cookie__actions {
	width: 100%;
}

.ma-cookie__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 8px;
	white-space: nowrap;
}
.ma-cookie__btn.is-solid {
	background: var(--mac-accent, #0f5aa8);
	color: var(--mac-accent-text, #fff);
}
.ma-cookie__btn.is-ghost {
	background: var(--mac-secondary, #eef1f4);
	color: var(--mac-secondary-text, #14212e);
}
.ma-cookie__btn:hover { filter: brightness(0.94); }
.ma-cookie__btn:focus-visible {
	outline: 2px solid var(--mac-accent, #0f5aa8);
	outline-offset: 2px;
}
.ma-cookie__btn[hidden] { display: none; }

/* ---- floating reopen tab ---- */
.ma-cookie-reopen {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99980;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background: #fff;
	color: #14212e;
	font-family: "IBM Plex Sans Thai", "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}
.ma-cookie-reopen.is-hidden { display: none; }
.ma-cookie-reopen svg { width: 17px; height: 17px; flex: none; }
.ma-cookie-reopen:hover { filter: brightness(0.96); }
.ma-cookie-reopen:focus-visible { outline: 2px solid #0f5aa8; outline-offset: 2px; }

@media (max-width: 600px) {
	.ma-cookie { padding: 10px; }
	.ma-cookie__panel { padding: 16px; gap: 14px; }
	.ma-cookie__actions { width: 100%; }
	.ma-cookie__btn { flex: 1 1 auto; text-align: center; }
	.ma-cookie-reopen span { display: none; }
	.ma-cookie-reopen { padding: 10px; }
}

@media (prefers-color-scheme: dark) {
	.ma-cookie[data-dark-auto="1"] .ma-cookie__panel { border-color: rgba(255, 255, 255, 0.12); }
	.ma-cookie-reopen { background: #161b22; color: #e6edf3; border-color: rgba(255, 255, 255, 0.14); }
}

@media (prefers-reduced-motion: no-preference) {
	.ma-cookie:not(.is-hidden) .ma-cookie__panel { animation: ma-cookie-in 0.25s ease-out; }
	@keyframes ma-cookie-in {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}
}