/* ------------------------------------------------------------------
   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; }
}

/* ---- Elementor: "reopen consent" trigger button ---- */

.cg-reopen-btn {
	display: inline-block;
	background-color: #042551;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
}
.cg-reopen-btn:hover { opacity: 0.9; }

/* ---- Elementor editor: empty-state placeholder ---- */

.cg-elementor-placeholder {
	padding: 16px;
	border: 1px dashed #b8c2cc;
	border-radius: 6px;
	background: #f6f7f7;
	color: #50575e;
	font-size: 13px;
	text-align: center;
}

/* ------------------------------------------------------------------
   Consent Gate Pro — presentation formats (architecture §2, §7.1)
   Applied as a modifier class alongside the base .cg-overlay so every
   format still inherits the shared overlay/hidden/box-sizing rules
   above; only positioning and the inner modal's shape change.
   ------------------------------------------------------------------ */

.cg-overlay.cg-format-top_bar,
.cg-overlay.cg-format-bottom_bar {
	align-items: flex-start;
	justify-content: stretch;
	padding: 0;
	background: transparent;
}
.cg-overlay.cg-format-bottom_bar { align-items: flex-end; }
.cg-overlay.cg-format-top_bar .cg-modal,
.cg-overlay.cg-format-bottom_bar .cg-modal {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
}

.cg-overlay.cg-format-slide_in {
	align-items: flex-end;
	justify-content: flex-end;
	background: transparent;
	padding: 20px;
}
.cg-overlay.cg-format-slide_in .cg-modal {
	width: min( 380px, 100% ) !important;
	max-width: 100% !important;
}

.cg-overlay.cg-format-fullscreen .cg-modal {
	width: 100vw !important;
	height: 100vh;
	max-width: 100% !important;
	max-height: 100vh;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cg-overlay.cg-format-floating {
	align-items: flex-end;
	justify-content: flex-start;
	background: transparent;
	padding: 24px;
}
.cg-overlay.cg-format-floating .cg-modal {
	width: min( 320px, 100% ) !important;
	max-width: 100% !important;
	box-shadow: 0 10px 30px rgba( 4, 20, 41, 0.25 );
}

/* ------------------------------------------------------------------
   Elementor field-widget framework (architecture §9.1)
   ------------------------------------------------------------------ */

.cg-field { margin-bottom: 14px; }
.cg-field-label { display: block; margin-bottom: 6px; font-weight: 600; }
.cg-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d5dbe2;
	border-radius: 6px;
	font: inherit;
}
textarea.cg-input { min-height: 90px; resize: vertical; }
.cg-check-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.cg-check-row input { margin-top: 3px; }

.cg-heading { margin: 0 0 12px; }
.cg-text { margin: 0 0 12px; line-height: 1.6; }
.cg-consent-notice { font-size: 13px; opacity: 0.85; line-height: 1.6; }

.cg-btn {
	display: inline-block;
	border: none;
	cursor: pointer;
	padding: 10px 18px;
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	background: var( --cg-primary, #042551 );
	color: #fff;
	text-decoration: none;
}
.cg-btn:disabled { opacity: 0.5; cursor: not-allowed; }