/* ApexRex ISP™ — consent UI.
   0.4.4: the essential dialog / footer-button / embed-placeholder rules are ALSO
   printed inline in <head> (<style id="apexrex-isp-critical">, Frontend::critical_css())
   so optimizers that delay stylesheets cannot unstyle the panel. Explicit colours
   (white panel, #111 text), scoped under #apexrex-isp-modal so theme CSS cannot
   recolour or clip it. All text/buttons meet WCAG AA 4.5:1. */
/* 0.4.10 (responsive panel): the backdrop is the top layer of the page (max z-index,
   last child of <body>, captures every tap so floating theme/third-party buttons below
   cannot be hit); tablets/desktops get a centred box that can never clip at the top
   (align-items: safe center + margin:auto, dynamic viewport height); phones (<= 600px)
   get a bottom sheet with a scrolling body and a sticky Decline / Allow row above the
   home-indicator safe area. The panel is position:fixed, so it never pushes content. */
#apexrex-isp-modal[hidden], .apexrex-isp-modal[hidden] { display: none !important; }
#apexrex-isp-modal {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
	z-index: 2147483647 !important;
	display: flex;
	align-items: center;
	align-items: safe center;
	justify-content: center;
	background: rgba( 15, 23, 42, 0.6 ) !important;
	padding: 16px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	pointer-events: auto !important;
	overscroll-behavior: contain !important;
	transform: none !important;
	filter: none !important;
}
#apexrex-isp-modal *, #apexrex-isp-modal *::before, #apexrex-isp-modal *::after { box-sizing: border-box !important; }
#apexrex-isp-modal .apexrex-isp-box {
	position: relative !important;
	display: block !important;
	background: #fff !important;
	color: #111 !important;
	max-width: 30rem !important;
	width: 100% !important;
	max-height: calc( 100vh - 32px ) !important;
	max-height: -webkit-fill-available !important;
	max-height: calc( 100dvh - 32px ) !important;
	overflow: auto !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px !important;
	padding: 24px !important;
	padding-bottom: 0 !important; /* 0.4.10: the sticky action row carries the bottom padding */
	margin: auto !important;
	border: 0 !important;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.35 ) !important;
	font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	text-align: left !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
#apexrex-isp-modal .apexrex-isp-box h2,
#apexrex-isp-modal .apexrex-isp-box p,
#apexrex-isp-modal .apexrex-isp-box div,
#apexrex-isp-modal .apexrex-isp-box ul,
#apexrex-isp-modal .apexrex-isp-box li,
#apexrex-isp-modal .apexrex-isp-box span,
#apexrex-isp-modal .apexrex-isp-box strong {
	color: #111 !important; background: transparent !important; font-family: inherit !important;
	text-transform: none !important; letter-spacing: normal !important; float: none !important; text-shadow: none !important;
}
#apexrex-isp-modal .apexrex-isp-box h2 { margin: 0 0 8px !important; padding: 0 32px 0 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }
#apexrex-isp-modal .apexrex-isp-box p { margin: 0 0 12px !important; padding: 0 !important; }
#apexrex-isp-modal .apexrex-isp-state { font-size: 14px !important; font-weight: 600 !important; }
#apexrex-isp-modal .apexrex-isp-text { margin: 0 0 16px !important; padding: 0 !important; }
#apexrex-isp-modal .apexrex-isp-box a { color: #1d4ed8 !important; text-decoration: underline !important; }
#apexrex-isp-modal .apexrex-isp-cats { list-style: none !important; margin: 0 0 16px !important; padding: 0 !important; }
#apexrex-isp-modal .apexrex-isp-cats li { padding: 6px 0 !important; margin: 0 !important; border-top: 1px solid #d1d5db !important; font-size: 14px !important; list-style: none !important; }
#apexrex-isp-modal .apexrex-isp-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; }
/* 0.4.10: the action row is sticky at the bottom of the scrolling box, so Decline and
   Allow are always on screen however long the text is (white behind it; the
   ".apexrex-isp-box div" transparent rule above is overridden by specificity). */
#apexrex-isp-modal .apexrex-isp-box .apexrex-isp-actions {
	position: sticky !important; bottom: 0 !important; z-index: 1 !important;
	background: #fff !important; margin: 0 -24px !important; padding: 12px 24px 24px !important;
	border-top: 1px solid #e5e7eb !important;
}
#apexrex-isp-modal .apexrex-isp-btn {
	appearance: none !important; display: inline-block !important; border: 0 !important; border-radius: 8px !important;
	padding: 10px 18px !important; margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important;
	font-family: inherit !important; cursor: pointer !important; text-transform: none !important; min-height: 44px !important; min-width: 44px !important; width: auto !important;
	touch-action: manipulation !important;
}
#apexrex-isp-modal .apexrex-isp-decline { background: #e5e7eb !important; color: #111 !important; }
#apexrex-isp-modal .apexrex-isp-allow { background: #1d4ed8 !important; color: #fff !important; }
#apexrex-isp-modal .apexrex-isp-close[hidden] { display: none !important; }
#apexrex-isp-modal .apexrex-isp-close {
	position: absolute !important; top: 8px !important; right: 8px !important;
	appearance: none !important; border: 0 !important; background: transparent !important; color: #111 !important;
	font-size: 26px !important; line-height: 1 !important; padding: 4px 8px !important; margin: 0 !important; cursor: pointer !important; width: auto !important; min-height: 0 !important;
}
#apexrex-isp-modal button:focus-visible, #apexrex-isp-modal a:focus-visible { outline: 2px solid #1d4ed8 !important; outline-offset: 2px !important; }
body.apexrex-isp-open { overflow: hidden; }
/* 0.4.10: background scroll lock while the panel is open. Class on <html>; the script
   also pins <body> at its scroll offset (iOS Safari ignores overflow:hidden alone) and
   restores the scroll position on close. scrollbar-gutter keeps the page from shifting
   sideways when the desktop scrollbar is hidden. */
html.apexrex-isp-lock { overflow: hidden !important; overscroll-behavior: none !important; scrollbar-gutter: stable !important; }
html.apexrex-isp-lock body { overflow: hidden !important; overscroll-behavior: none !important; position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; }

/* 0.4.10: phones = bottom sheet anchored to the bottom, full width, rounded top corners.
   Height uses the dynamic viewport (dvh) so the browser toolbars never hide the top;
   100vh / -webkit-fill-available are fallbacks for browsers without dvh. */
@media (max-width: 600px), (pointer: coarse) and (max-width: 600px) {
	#apexrex-isp-modal {
		align-items: flex-end !important;
		justify-content: stretch !important;
		padding: 0 !important;
		padding-top: env( safe-area-inset-top, 0px ) !important;
	}
	#apexrex-isp-modal .apexrex-isp-box {
		max-width: none !important;
		width: 100% !important;
		margin: auto 0 0 !important;
		border-radius: 16px 16px 0 0 !important;
		padding: 20px 16px 0 !important;
		max-height: 85vh !important;
		max-height: -webkit-fill-available !important;
		max-height: min( 85dvh, calc( 100dvh - env( safe-area-inset-top, 0px ) - 16px ) ) !important;
		box-shadow: 0 -8px 30px rgba( 0, 0, 0, 0.3 ) !important;
	}
	/* Sticky action row: equal-width Decline / Allow (equal prominence), safe area below. */
	#apexrex-isp-modal .apexrex-isp-box .apexrex-isp-actions {
		flex-wrap: nowrap !important;
		margin: 0 -16px !important;
		padding: 12px 16px 12px !important;
		padding-bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) ) !important;
	}
	#apexrex-isp-modal .apexrex-isp-btn { flex: 1 1 0 !important; min-height: 48px !important; padding: 12px 10px !important; text-align: center !important; }
	#apexrex-isp-modal .apexrex-isp-close { min-width: 44px !important; min-height: 44px !important; top: 4px !important; right: 4px !important; }
}
/* Touch tablets: the close control is a full 44 x 44 tap target too. */
@media (pointer: coarse) {
	#apexrex-isp-modal .apexrex-isp-close { min-width: 44px !important; min-height: 44px !important; }
}
/* Slide-up for the sheet, only for visitors who have not asked for reduced motion. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
	#apexrex-isp-modal:not([hidden]) .apexrex-isp-box { animation: apexrex-isp-sheet-up 0.22s ease-out both; }
}
@keyframes apexrex-isp-sheet-up { from { transform: translateY( 24px ); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
	#apexrex-isp-modal, #apexrex-isp-modal * { animation: none !important; transition: none !important; }
}

/* Footer "3rd Party Data Use" toggle (shortcode / block) */
.apexrex-isp-dtoggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; line-height: 1.4; }
.apexrex-isp-dt-switch { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; }
.apexrex-isp-dt-btn {
	appearance: none; border: 0; margin: 0; background: transparent; color: inherit;
	padding: 0.2rem 0.7rem; font: inherit; cursor: pointer;
}
.apexrex-isp-dt-btn[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
.apexrex-isp-dt-decline[aria-pressed="true"] { background: #374151; }
.apexrex-isp-dt-btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.apexrex-isp-dt-label { color: inherit; }

/* 0.4.4: footer Privacy Choice button (widget / shortcode / block / fallback). A styled,
   in-flow control (never fixed) whose label shows the visitor's state. #fff on #1f2937 = 14.7:1. */
.apexrex-isp-privacy-choice, .apexrex-isp-pc-fallback-link {
	appearance: none; display: inline-block; position: static; margin: 4px 0; padding: 8px 14px;
	border: 1px solid #9ca3af; border-radius: 6px; background: #1f2937; color: #fff;
	font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-decoration: none; text-transform: none; letter-spacing: normal; cursor: pointer; box-sizing: border-box;
}
.apexrex-isp-privacy-choice:hover, .apexrex-isp-pc-fallback-link:hover { background: #111827; color: #fff; text-decoration: underline; }
.apexrex-isp-privacy-choice:focus-visible, .apexrex-isp-pc-fallback-link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
/* Fallback (only when no button was placed): inside the theme footer, static, centred. */
.apexrex-isp-pc-fallback { position: static; clear: both; display: block; text-align: center; padding: 12px 16px; margin: 0; }
/* 0.4.5: official CPPA opt-out icon (assets/img/privacyoptions.svg) beside "Your … Privacy Choices". */
img.apexrex-isp-pc-icon {
	display: inline-block !important; height: 1.1em !important; width: auto !important; max-width: none !important;
	vertical-align: middle !important; margin: 0 0.35em 0 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
}
/* 0.4.5: rights statement + Global Privacy Control line in the panel. */
#apexrex-isp-modal .apexrex-isp-rights { margin: 0 0 12px !important; padding: 10px 12px !important; border-left: 3px solid #1d4ed8 !important; font-size: 14px !important; }
#apexrex-isp-modal .apexrex-isp-gpc { font-size: 14px !important; font-weight: 600 !important; }

/* 0.4.4: click-to-load placeholder for blocked third-party embeds (YouTube, Vimeo, Maps ...). */
iframe[data-apexrex-isp-blocked] { display: none !important; }
.apexrex-isp-embed-ph {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box;
	width: 100%; min-height: 180px; padding: 24px; margin: 0 0 16px; background: #f3f4f6; color: #111;
	border: 1px solid #d1d5db; border-radius: 8px; text-align: center;
	font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.apexrex-isp-embed-text { color: #111; }
.apexrex-isp-embed-load { appearance: none; border: 0; border-radius: 6px; padding: 10px 16px; background: #1d4ed8; color: #fff; font-weight: 600; font-family: inherit; cursor: pointer; }
.apexrex-isp-embed-load:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
