.mso-consent,
.mso-consent * {
	box-sizing: border-box;
}

/* P7 Spam Protection — honeypot field. Off-screen positioning rather than
   display:none, since some bots specifically skip display:none fields. */
.mso-spam-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* P7 Spam Protection — Smart Challenge step-up widget. Only rendered at all
   when a submission was already scored as suspicious; never shown by default. */
.mso-challenge-notice {
	margin: 10px 0 6px;
	font-size: 0.9em;
}

.mso-challenge-widget {
	margin: 6px 0 14px;
}

/*
 * BUG-CONSENT-003: on goldencreativelogistics.com (Elementor + the "Logico"
 * theme), the banner's old <h2> title rendered as an illegible ~80px
 * near-black-on-dark ghost heading instead of the intended small white
 * title text. Root cause, confirmed via computed styles and the live CSSOM:
 * the theme ships `.logico-front-end h2:not([class*="logico-title-h"])`
 * (specificity 0-2-1: one class + one attribute selector inside :not() +
 * one element), which genuinely outranks a plain `.mso-consent h2` (0-1-1)
 * regardless of stylesheet load order. The redesigned banner below no
 * longer uses a heading element at all (title is inline text inside the
 * message paragraph), which removes that specific attack surface, but a
 * host theme's global `p`/`button`/`a` rules are just as untrustworthy —
 * same reasoning that already justifies inline styles on the SMTP module's
 * outbound HTML email template (see class-smtp-email.php). The blanket
 * `!important` reset below is the equivalent defense for real page markup.
 */
.mso-consent {
	font-family: Arial, Helvetica, sans-serif !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/*
 * BUG-CONSENT-002/003 design pass: the previous permanent floating
 * "Privacy" reopen button (bottom-right, always visible after a decision)
 * visually collided with this site's own Mishk HUB chat-widget launcher and
 * the theme's scroll-to-top button — all three fixed to the same corner.
 * The banner is also simplified to a single slim bar (message + "Manage
 * Cookies" + "Accept All") with the granular category checkboxes and
 * Save/Reject controls tucked behind "Manage Cookies", instead of a wide
 * modal showing every control at once. Once a choice is saved, the banner
 * is gone for good for that visitor (cookie-based) — there is no
 * persistent floating element left on screen.
 *
 * BUG-CONSENT-005: the original dark navy palette (#050c18) read as jarring
 * and out of place against light corporate sites (this plugin has no
 * per-site theme-color integration -- there is no reliable way to read an
 * arbitrary WP theme's brand colors, so the banner ships one fixed palette).
 * Switched to a light, neutral card that sits comfortably on the vast
 * majority of light-background sites this plugin targets, and switched
 * centering from `right/left + margin:auto` (which can be finicky when a
 * host page's own layout interferes with the fixed positioning context) to
 * an explicit `left:50%; transform:translateX(-50%);` -- centered
 * regardless of viewport width, host CSS, or content length, and anchored
 * to the bottom of the viewport by default.
 */
.mso-consent {
	position: fixed;
	z-index: 999999;
	left: 50%;
	bottom: 20px;
	width: min(920px, calc(100% - 32px));
	transform: translateX(-50%);
	padding: 16px 20px;
	border: 1px solid #dfe4ec;
	border-radius: 10px;
	background: #ffffff;
	color: #1b2436;
	box-shadow: 0 18px 48px rgba(17, 24, 39, 0.16);
}

.mso-consent--center {
	top: 50%;
	bottom: auto;
	width: min(560px, calc(100% - 32px));
	transform: translate(-50%, -50%);
}

.mso-consent[hidden] {
	display: none;
}

.mso-consent__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.mso-consent__text {
	flex: 1 1 320px;
	margin: 0;
	color: #47506b;
	font-size: 13px;
	line-height: 1.5;
}

.mso-consent__text strong {
	color: #1b2436;
}

.mso-consent__policy {
	margin-left: 4px;
	color: #1d5fd6;
	font-weight: 700;
	white-space: nowrap;
}

.mso-consent__categories {
	display: grid;
	grid-template-columns: repeat(2, minmax(130px, 1fr));
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e5e9f0;
}

.mso-consent__categories[hidden] {
	display: none;
}

.mso-consent__categories label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #1b2436;
	font-size: 13px;
	font-weight: 700;
}

.mso-consent__categories .mso-consent__actions {
	grid-column: 1 / -1;
	margin-top: 4px;
}

.mso-consent__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}

.mso-consent button {
	min-height: 36px;
	padding: 8px 14px;
	border: 1px solid #c7cee0;
	border-radius: 6px;
	background: #ffffff;
	color: #1b2436;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.mso-consent [data-mso-consent-accept] {
	border-color: transparent;
	background: #1d5fd6;
	color: #ffffff;
	font-weight: 800;
}

.mso-consent button:hover {
	background: #f0f3f9;
	border-color: #9fa9c2;
}

.mso-consent [data-mso-consent-accept]:hover {
	background: #164cb0;
	border-color: #164cb0;
	color: #ffffff;
}

@media (max-width: 640px) {
	.mso-consent {
		width: calc(100% - 24px);
		bottom: 12px;
		padding: 14px 16px;
	}

	.mso-consent__row {
		flex-direction: column;
		align-items: stretch;
	}

	/* `flex: 1 1 320px` on .mso-consent__text sets a *width* basis in the
	   default row layout, but the same basis becomes a *height* basis once
	   .mso-consent__row switches to flex-direction:column above -- without
	   this reset the text block stretches to a fixed 320px tall with a large
	   empty gap before the buttons. */
	.mso-consent__text {
		flex: 0 0 auto;
	}

	.mso-consent__categories {
		grid-template-columns: 1fr;
	}

	.mso-consent__actions,
	.mso-consent__categories .mso-consent__actions {
		justify-content: stretch;
	}

	.mso-consent__actions button {
		flex: 1 1 auto;
	}
}