.cenvia-ruo-notice,
.cenvia-footer-notice {
	margin: 1em 0;
	padding: 0.75em 1em;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	background: #f7f7f7;
	color: #333333;
	font-size: 0.85em;
	line-height: 1.5;
}

.cenvia-footer-notice {
	max-width: 60em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Default hidden, shown only via the html:not(.cenvia-age-verified) rule
   below — matches the blocking inline critical CSS printed in <head>
   (Cenvia_Age_Gate::print_critical_css_and_unlock_script()) exactly, so
   this external stylesheet (which loads asynchronously, possibly after
   first paint) only ever reinforces what the inline copy already
   established, never contradicts it. No !important needed anywhere here
   for that reason — same rule, same specificity, same outcome, just two
   copies for two different load-timing guarantees. */
.cenvia-age-gate {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	background: rgba( 10, 10, 10, 0.92 );
}

html:not(.cenvia-age-verified) .cenvia-age-gate {
	display: flex;
}

/* Scroll lock — conditioned on BOTH the gate actually being unverified-
   visible AND :has(.cenvia-age-gate) matching. :has() alone isn't
   enough: under page caching the gate markup can still be present in a
   cached response even for a visitor whose own browser already knows
   they're verified (render_gate() only skips the markup for a request
   PHP itself generates — a cache hit is the same bytes for everyone).
   Without the html:not(.cenvia-age-verified) qualifier, that visitor's
   own inert-but-present gate markup would still match :has() and lock
   their scroll for no reason — confirmed as the exact failure mode
   version of this project's original body{overflow:auto} bug came from:
   a scroll-lock/unlock pair that didn't agree with each other. */
html:not(.cenvia-age-verified) body:has( .cenvia-age-gate ) {
	overflow: hidden;
}

/* Restores scrolling once the gate is dismissed — "auto" (a prior version
   of this rule) is wrong here: it makes body its own scroll container
   *in addition to* html, a second overflow context that breaks
   position:sticky containment for anything sticky inside body (the site
   header, most notably — a sticky element is positioned relative to its
   nearest scrolling ancestor, and body becoming one changes which ancestor
   that is). "visible" is the actual initial/default value for `overflow`
   and what body already had before the gate ever set `hidden` above — this
   undoes that lock without introducing a new scroll context. Technically
   redundant now that the lock rule above already excludes verified
   visitors on its own, but kept as an explicit, readable statement of
   intent rather than relying solely on a compound selector not matching. */
html.cenvia-age-verified body {
	overflow: visible;
}

.cenvia-age-gate__panel {
	max-width: 32em;
	padding: 2em;
	border-radius: 6px;
	background: #ffffff;
	color: #1a1a1a;
	text-align: center;
}

.cenvia-age-gate__title {
	margin: 0 0 0.75em;
	font-size: 1.15em;
	font-weight: 700;
}

.cenvia-age-gate__body {
	margin: 0 0 1.5em;
	font-size: 0.95em;
	line-height: 1.6;
}

.cenvia-age-gate__checkboxes {
	display: flex;
	flex-direction: column;
	gap: 0.65em;
	margin: 0 0 1.5em;
	text-align: left;
}

.cenvia-age-gate__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: 0.9em;
	line-height: 1.5;
	color: #1a1a1a;
	cursor: pointer;
}

.cenvia-age-gate__checkbox-input {
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.15em;
	cursor: pointer;
}

.cenvia-age-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: center;
}

.cenvia-age-gate__confirm {
	padding: 0.65em 1.5em;
	border: none;
	border-radius: 4px;
	background: #1a1a1a;
	color: #ffffff;
	font-size: 0.95em;
	cursor: pointer;
}

.cenvia-age-gate__confirm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cenvia-age-gate__exit {
	padding: 0.65em 1.5em;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	color: #333333;
	font-size: 0.95em;
	text-decoration: none;
}