/* ------------------------------------------------------------------
   Consent Gate — front-end popup
   Colors come from inline CSS custom properties set per popup:
   --cg-primary, --cg-accent, --cg-btn-text, --cg-overlay-alpha
   ------------------------------------------------------------------ */

.cg-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba( 4, 20, 41, var( --cg-overlay-alpha, 0.55 ) );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.cg-overlay.cg-hidden { display: none; }

.cg-overlay, .cg-overlay * { box-sizing: border-box !important; }

.cg-modal {
	width: var( --cg-modal-width, 750px ) !important;
	max-width: 100% !important;
	max-height: 92vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba( 4, 20, 41, 0.35 );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1b2733;
}

/* Guard against theme/page-builder typography rules (e.g. ".entry-content h2")
   bleeding into the popup when it is placed via the [consent_gate] shortcode
   inside post content — those rules can otherwise win on specificity/order
   and make the heading render far larger than intended. */
.cg-modal-header {
	background: var( --cg-primary, #042551 ) !important;
	padding: 26px 28px 22px;
	text-align: center;
}
.cg-modal-header img { max-height: 34px; width: auto; margin-bottom: 12px; }
.cg-modal-header h2,
.cg-overlay .cg-modal .cg-modal-header h2 {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: #fff !important;
}
.cg-modal-header p,
.cg-overlay .cg-modal .cg-modal-header p {
	margin: 4px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	color: var( --cg-accent, #5e97dd ) !important;
	font-weight: 500 !important;
}

.cg-modal-body { padding: 22px 28px 26px; }

.cg-notice {
	background: #f4f8fd;
	border: 1px solid #e3e8f0;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.3;
	color: #33475b;
}
.cg-notice p:first-child { margin-top: 0; }
.cg-notice p:last-child { margin-bottom: 0; }
.cg-notice a { color: var( --cg-primary, #042551 ); font-weight: 600; }

.cg-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.cg-check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cg-check-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var( --cg-primary, #042551 ); flex-shrink: 0; }
.cg-check-row span { font-size: 13px; line-height: 1.55; }
.cg-check-row a { color: var( --cg-primary, #042551 ); font-weight: 600; text-decoration: underline; text-decoration-color: var( --cg-accent, #5e97dd ); }

.cg-actions { display: flex; gap: 10px; }
.cg-btn {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 44px;
	border-radius: 9px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity .15s, transform .1s;
	box-shadow: none !important;
	text-shadow: none !important;
}
.cg-btn:active { transform: scale( 0.98 ); }
.cg-btn-decline {
	background: #fff !important;
	color: #64748b !important;
	border: 1.5px solid #e2e8f0 !important;
}
.cg-btn-decline:hover { background: #f5f7fa !important; }

/* The accept button is intentionally muted (not literally invisible) while
   required checkboxes are unticked, then switches to a fully solid,
   high-contrast state once enabled. Colors are pinned with !important so a
   theme's own "button[disabled]" / "button:disabled" reset rules (which
   commonly force a grey background + faint text on ALL buttons, including
   ones that have since become enabled) cannot leave the accept button
   looking washed-out or invisible after every box is checked. */
.cg-btn-accept,
.cg-btn-accept:disabled {
	background-color: var( --cg-primary, #042551 ) !important;
	color: var( --cg-btn-text, #fff ) !important;
	opacity: 0.45;
	cursor: not-allowed;
}
.cg-btn-accept:not(:disabled) {
	background-color: var( --cg-primary, #042551 ) !important;
	color: var( --cg-btn-text, #fff ) !important;
	opacity: 1 !important;
	cursor: pointer;
}
.cg-btn-accept:not(:disabled):hover {
	background-color: var( --cg-accent, #5e97dd ) !important;
}

@media ( max-width: 480px ) {
	.cg-modal-header, .cg-modal-body { padding-left: 20px; padding-right: 20px; }
}