.gpccm-consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999999;
	background: var(--gpccm-bg, #ffffff);
	color: var(--gpccm-text-color, #1a1a1a);
	border-top: 1px solid #d5d5d5;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--gpccm-font-size, 14px);
	line-height: 1.5;
}

.gpccm-consent-bottom {
	bottom: 0;
}

.gpccm-consent-top {
	top: 0;
	border-top: none;
	border-bottom: 1px solid #d5d5d5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.gpccm-consent-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.gpccm-consent-copy {
	flex: 1 1 480px;
}

.gpccm-consent-copy strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
}

.gpccm-consent-copy p {
	margin: 0;
}

.gpccm-consent-copy a {
	color: var(--gpccm-optout-color, #0a5fa4);
	text-decoration: underline;
}

.gpccm-consent-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.gpccm-consent-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--gpccm-optout-color, #0a5fa4);
	text-decoration: underline;
	font-size: 13px;
	cursor: pointer;
}

.gpccm-consent-button {
	background: var(--gpccm-accept-bg, #0a5fa4);
	color: var(--gpccm-accept-text, #ffffff);
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

.gpccm-consent-button:hover {
	/* filter instead of a fixed darker hex, so any custom accept color
	   (set in Settings > Style) gets a sensible hover state automatically
	   without needing a second "hover color" field. */
	filter: brightness(0.9);
}

@media (max-width: 600px) {
	.gpccm-consent-banner {
		height: auto;
		max-height: none;
	}
	.gpccm-consent-inner {
		flex-direction: column;
		align-items: stretch;
	}
	.gpccm-consent-copy {
		/* Reset the desktop flex: 1 1 480px here. In row layout that
		   flex-grow lets the text block fill leftover horizontal space,
		   which is what we want on desktop. In column layout (mobile),
		   the same flex-grow applies along the now-vertical main axis
		   instead, and if the banner's container ever ends up with any
		   extra vertical room, the text block stretches to fill it and
		   pushes the buttons down toward the bottom of the screen. Zero
		   grow/shrink keeps this block sized to its own content only. */
		flex: 0 0 auto;
	}
	.gpccm-consent-actions {
		flex: 0 0 auto;
		justify-content: space-between;
		margin-top: 12px;
	}
}

.gpccm-consent-footer-wrap {
	text-align: center;
	padding: 8px 0;
	font-size: 12px;
}

.gpccm-consent-footer-wrap .gpccm-manage-consent-link {
	color: inherit;
	opacity: 0.7;
	text-decoration: underline;
}

.gpccm-consent-footer-wrap .gpccm-manage-consent-link:hover {
	opacity: 1;
}

.gpccm-consent-current-status {
	margin-top: 8px !important;
	font-size: 13px;
	color: #555;
}

.gpccm-consent-is-current {
	outline: 2px solid var(--gpccm-accept-bg, #0a5fa4);
	outline-offset: 2px;
}