/**
 * Swivl Cookie Consent - frontend styling.
 * Layered on top of the vendored cookieconsent.css; keep selectors scoped
 * with the swivl-cc- prefix to avoid clashing with theme styles or future
 * CookieConsent library CSS changes.
 *
 * IMPORTANT: cookieconsent.css applies a hard `all: unset` reset to every
 * `input`/`button`/etc. under `#cc-main` via an ID-scoped selector
 * (`#cc-main input { all: unset }`). Any of our own rules for elements
 * injected INSIDE the modals (the DNSMPI checkbox/buttons, the custom close
 * button) must therefore also be prefixed with `#cc-main` to win on
 * specificity -- a bare class selector silently loses to it (confirmed via
 * Playwright: unprefixed rules produced a 0x0 checkbox).
 */

.swivl-cc-btn {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
}

.swivl-cc-btn--primary {
	background: var( --cc-btn-primary-bg, #1a73e8 );
	color: var( --cc-btn-primary-color, #fff );
}

.swivl-cc-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.swivl-cc-preference-center {
	display: block;
	max-width: 100%;
	margin-top: 0.5em;
}

.swivl-cc-preference-center.wp-block-buttons {
	gap: 0;
}

.swivl-cc-preference-center .wp-block-button {
	width: auto;
	max-width: 100%;
}

/* Preferences modal: do not overflow narrow viewports / content columns. */
#cc-main .pm.pm--box {
	max-width: min(36em, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow: auto;
}

#cc-main .cm .cm-wrapper {
	position: relative;
}

/* Close (X) lives in the text column so it does not overlap the button stack
 * on "bar inline" layouts (Manage preferences sits top-right of the btn col).
 * Pad the whole text block — title may be empty (Coursera-style banner), so
 * padding only on .cm__title left the description under the X. */
#cc-main .cm .cm__texts {
	position: relative;
}

#cc-main .cm.swivl-cc-has-close .cm__texts {
	padding-right: 2.5em;
}

#cc-main .swivl-cc-x {
	all: revert;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 2em;
	height: 2em;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	line-height: 1;
	background: transparent;
	border: none;
	color: inherit;
}

@media screen and (max-width: 640px) {
	#cc-main .cm.swivl-cc-has-close .cm__texts {
		padding-right: 2.75em;
	}
}

/* Hide per-script service bullets (registry names) in preferences modal. */
#cc-main .pm .service,
#cc-main .pm .service-header,
#cc-main .pm .service-title {
	display: none !important;
}

/* GPC opt-out notice (future toast) and in-banner badge preview. */
.swivl-cc-gpc-notice {
	position: fixed;
	left: 1em;
	bottom: 1em;
	max-width: 320px;
	padding: 0.75em 1em;
	background: #202124;
	color: #fff;
	font-size: 0.85em;
	border-radius: 6px;
	z-index: 2147483000;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
}

.swivl-cc-gpc-badge {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.75em 0 0;
	padding: 0.5em 0.75em;
	background: #f1f3f4;
	border-radius: 4px;
	font-size: 0.9em;
}