/**
 * GrowthMed Consent Gate — consent UI (two-step opt-out: banner + modal).
 * All selectors scoped to .gm-cc-* so nothing leaks into client themes.
 * Self-contained: no external fonts/images, pure CSS toggle.
 */

.gm-cc-banner,
.gm-cc-banner *,
.gm-cc-overlay,
.gm-cc-overlay *,
.gm-cc-dns-link {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Banner */
.gm-cc-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Max z + kept last-in-DOM by consent-manager (same-z ties resolve by DOM
	   order, and chat/ADA widgets mount at max z after us). The banner is a slim
	   strip and dismissal is one tap, so briefly overlaying widget icons beats
	   marketing bubbles covering the legal notice. */
	z-index: 2147483647;
	display: none; /* shown by JS only when a decision is needed */
	background: #ffffff;
	border-top: 1px solid #d8d8d8;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	color: #1f1f1f;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.gm-cc-banner-inner {
	padding: 18px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.gm-cc-banner-text {
	margin: 0;
	flex: 0 1 900px; /* readable left column; doesn't grow, so space-between spreads text · button · X */
}

/* Block mode: narrower text column so the centered button group lands center-right (not jammed at the edge). */
.gm-cc-mode-block .gm-cc-banner-text {
	flex: 0 1 620px;
}

.gm-cc-banner-text a {
	color: #0b63c4;
	text-decoration: underline;
}

.gm-cc-banner-actions {
	flex: 1 1 auto; /* grow into the space after the text… */
	display: flex;
	align-items: center;
	justify-content: center; /* …and center the button group there (center-right, off the far edge) */
	gap: 20px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Buttons */
.gm-cc-btn {
	display: inline-block;
	background: #1a1a1a;
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-align: center;
}

.gm-cc-btn:hover {
	background: #000000;
}

/* Banner "Cookie settings" — subtle/outlined (Redfin-style) so it doesn't pull
   the eye away from the easy dismiss (X). The modal's red "Save Preferences"
   keeps .gm-cc-btn's prominent fill. */
.gm-cc-settings {
	background: transparent;
	color: #1f1f1f;
	border: 1px solid #b5b5b5;
}

.gm-cc-settings:hover {
	background: #f1f1f1;
}

.gm-cc-x,
.gm-cc-modal-x {
	background: transparent;
	border: 0;
	color: #6b6b6b;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.gm-cc-x:hover,
.gm-cc-modal-x:hover {
	color: #1f1f1f;
}

/* Banner close (X) — larger + darker so the easy "dismiss" is the obvious target.
   Sized well past the 44px WCAG tap-target minimum on purpose: one obvious click
   to keep browsing (opt-out posture — X = status quo; settings stays visible).

   Grey chip + dark hover fill (2026-08-20): as a bare glyph the X read as
   decoration next to the outlined "Cookie settings" button, so the cheap act
   (close, deny nothing, keep browsing) looked HARDER than opening settings. A
   filled circular target makes dismissal the visibly easiest thing on the
   banner. Neutral greys/black only — deliberately NOT a brand colour: a
   coloured chip reads as a consent CTA, which is the CPPA §7004 symmetry
   problem the "OK" wording already avoids.

   width/height AND min-width/min-height: the explicit pair keeps the chip a
   true circle, the min-* pair keeps the 48px tap target if a client theme's
   `button {}` reset shrinks it. */
.gm-cc-x {
	font-size: 28px;
	font-weight: 600;
	color: #1f1f1f;
	background: #ececec;
	border-radius: 50%;
	padding: 0;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Later in source order than the shared .gm-cc-x:hover above (same specificity),
   so the white glyph wins over that rule's #1f1f1f. */
.gm-cc-x:hover,
.gm-cc-x:focus-visible {
	background: #1f1f1f;
	color: #ffffff;
}

.gm-cc-x:focus-visible {
	outline: 2px solid #0b63c4;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Modal */
.gm-cc-overlay {
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483647; /* modal tops everything while open */
	display: none; /* flex when open (set inline by JS) */
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	padding: 20px;
}

.gm-cc-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: #1f1f1f;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow: hidden;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Fixed header — stays put while the body scrolls */
.gm-cc-modal-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	background: #ffffff;
	border-bottom: 1px solid #e4e4e4;
}

/* Scrollable body */
.gm-cc-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 24px 24px;
}

.gm-cc-modal-x {
	flex: 0 0 auto;
}

.gm-cc-modal h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.gm-cc-modal h3 {
	margin: 22px 0 6px;
	font-size: 16px;
	font-weight: 700;
}

.gm-cc-modal p {
	margin: 0 0 14px;
}

.gm-cc-modal a {
	color: #0b63c4;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- Preference rows */
.gm-cc-row {
	padding: 16px 0;
	border-top: 1px solid #e4e4e4;
}

.gm-cc-row:last-of-type {
	border-bottom: 1px solid #e4e4e4;
}

.gm-cc-row-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.gm-cc-row-label {
	font-weight: 600;
}

.gm-cc-row-desc {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #555555;
}

.gm-cc-always {
	color: #0b63c4;
	font-weight: 600;
	white-space: nowrap;
}

.gm-cc-modal-actions {
	margin-top: 20px;
	text-align: right;
}

/* ---------------------------------------------------------------- Toggle switch */
.gm-cc-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 28px;
	flex: 0 0 auto;
}

.gm-cc-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.gm-cc-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #c4c4c4;
	border-radius: 28px;
	transition: background 0.2s;
}

.gm-cc-slider::before {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background: #ffffff;
	border-radius: 50%;
	transition: transform 0.2s;
}

.gm-cc-switch input:checked + .gm-cc-slider {
	background: #1a8754;
}

.gm-cc-switch input:checked + .gm-cc-slider::before {
	transform: translateX(22px);
}

.gm-cc-switch input:focus-visible + .gm-cc-slider {
	outline: 2px solid #0b63c4;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Do Not Sell link (lives inside the site footer) */
.gm-cc-dns-bar {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 0; /* horizontal spacing comes from the theme container (or JS fallback) */
	text-align: right; /* change to left / center to taste */
	font-size: 12px;
	line-height: 1.4;
	/* No background, border, color, or font set — it inherits the footer's own
	   styling so it blends into whatever theme it lands in. */
}

.gm-cc-dns-link,
.gm-cc-dns-link:hover,
.gm-cc-dns-link:focus,
.gm-cc-dns-link:active {
	color: inherit !important; /* beat the theme's own a:hover so it never goes dark-on-dark */
	text-decoration: underline;
}

.gm-cc-dns-link {
	opacity: 0.85;
}

.gm-cc-dns-link:hover {
	opacity: 1; /* hover feedback via brightness, not a color change */
}

/* Contrast rescue (set by consent-manager when inherited color fails WCAG AA
   against the real footer background — e.g. black-on-black when a theme colors
   text via child selectors only). Must be AFTER the inherit rules: same
   importance, higher specificity, later source order. */
.gm-cc-dns-link.gm-cc-dns-link--light,
.gm-cc-dns-link.gm-cc-dns-link--light:hover,
.gm-cc-dns-link.gm-cc-dns-link--light:focus,
.gm-cc-dns-link.gm-cc-dns-link--light:active {
	color: #ffffff !important;
}

.gm-cc-dns-link.gm-cc-dns-link--dark,
.gm-cc-dns-link.gm-cc-dns-link--dark:hover,
.gm-cc-dns-link.gm-cc-dns-link--dark:focus,
.gm-cc-dns-link.gm-cc-dns-link--dark:active {
	color: #1f1f1f !important;
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 640px) {
	.gm-cc-banner-inner {
		position: relative; /* anchor for the absolute X */
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 16px;
		padding-right: 60px; /* keep text clear of the corner X chip (44px + 8px inset + 8px gutter) */
	}

	.gm-cc-banner-text {
		flex: 1 1 100%; /* full-width line; buttons wrap to the next line */
		/* Compact on small screens: the bottom edge is contested real estate
		   (UserWay bottom-left + chat widgets bottom-right at max z-index). The
		   FULL notice stays present and readable by scrolling — no wording change,
		   no notice_version bump — but the banner claims ~half the height, so the
		   corner widgets overlap far less of it. */
		font-size: 13px;
		line-height: 1.4;
		max-height: 8.5em;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.gm-cc-settings {
		flex: 1 1 auto;
	}

	/* Pin the X in the top-right corner on mobile — the expected spot, and it no
	   longer competes for space in the wrapped button row. 44px (not the desktop
	   48px) so the chip sits clear of the corner without crowding the text; still
	   at the WCAG tap-target minimum. Inset 8px, so it occupies 52px from the
	   right edge — see .gm-cc-banner-inner's padding-right above, which is 60px
	   to leave an 8px gutter between the notice text and the chip. */
	.gm-cc-x {
		position: absolute;
		top: 6px;
		right: 8px;
		font-size: 26px;
		padding: 0;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}

	/* block-mode 3-button group fills the width and wraps */
	.gm-cc-banner-actions {
		flex: 1 1 100%;
		flex-wrap: wrap;
	}

	.gm-cc-banner-actions .gm-cc-btn {
		flex: 1 1 auto;
	}
}