/* Crybitz Popup — modal styling.
 * Uses the site's existing --cb-* design tokens where available, with
 * sensible fallbacks so the plugin still looks reasonable if those
 * variables aren't defined on a given theme.
 */

.cb-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 12, 20, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 16px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.cb-popup-overlay.cb-popup-visible {
	opacity: 1;
}

.cb-popup-overlay[hidden] {
	display: none;
}

.cb-popup-box {
	position: relative;
	width: 100%;
	max-width: var(--cb-popup-max-width, 420px);
	background: var(--cb-surface, #ffffff);
	color: var(--cb-text, #14161f);
	border-radius: var(--cb-radius, 12px);
	padding: 28px 24px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	text-align: center;
	transform: translateY(12px);
	transition: transform 0.25s ease;
}

.cb-popup-overlay.cb-popup-visible .cb-popup-box {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.cb-popup-overlay,
	.cb-popup-box {
		transition: none;
	}
}

.cb-popup-close {
	position: absolute;
	top: 4px;
	right: 4px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--cb-text-2, #6b7280);
	/* ~44x44px hit area for comfortable touch targets (WCAG 2.5.8). */
	padding: 10px 12px;
}

/* In case the active theme doesn't ship WP's core helper class. */
.cb-popup-box .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cb-popup-image {
	max-width: 100%;
	height: auto;
	border-radius: var(--cb-radius, 12px);
	margin-bottom: 14px;
}

.cb-popup-logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 50%;
	margin: 0 auto 14px;
	display: block;
}

.cb-popup-headline {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--cb-text, #14161f);
}

.cb-popup-body {
	font-size: 15px;
	line-height: 1.5;
	color: var(--cb-text-2, #4b5563);
	margin-bottom: 18px;
}

.cb-popup-body p:last-child {
	margin-bottom: 0;
}

.cb-popup-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cb-popup-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: var(--cb-radius-sm, 8px);
	border: 1px solid var(--cb-border, #d1d5db);
	font-size: 15px;
	/* Explicit colors: without these the input inherits the theme's (or the
	 * dark variant's white) text color over the browser's default white
	 * background, making typed text invisible. */
	background: #ffffff;
	color: #14161f;
}

.cb-popup-input::placeholder {
	color: #6b7280; /* 4.8:1 on white, AA */
	opacity: 1; /* Firefox lowers placeholder opacity by default. */
}

.cb-popup-input:focus {
	outline: none;
	border-color: var(--cb-accent, #f7931a);
	box-shadow: 0 0 0 2px var(--cb-accent, #f7931a);
}

/* Browser autofill repaints inputs (pale yellow/blue) and can render its
 * own text color; force readable dark-on-white in that state too. */
.cb-popup-input:-webkit-autofill,
.cb-popup-input:-webkit-autofill:hover,
.cb-popup-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #14161f;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
	caret-color: #14161f;
}

/* Dark nodes variant: same white field with dark text (highest contrast
 * for typed input), border lightened so the field reads on dark green. */
.cb-popup-box--nodes .cb-popup-input {
	background: #ffffff;
	color: #14161f;
	border-color: rgba(255, 255, 255, 0.4);
}

.cb-popup-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cb-popup-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: none;
	border-radius: var(--cb-radius-sm, 8px);
	background: var(--cb-accent, #f7931a);
	color: var(--cb-on-accent, #14161f);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.cb-popup-button:hover {
	filter: brightness(0.95);
}

.cb-popup-secondary-btn {
	margin-top: 8px;
	background: transparent;
	border: 1px solid var(--cb-accent, #f7931a);
	color: var(--cb-accent, #f7931a);
}

.cb-popup-status {
	margin: 4px 0 0;
	font-size: 13px;
	min-height: 16px;
}

/* Light-card status colors: #b42318 = 6.6:1 and #067647 = 5.7:1 on white,
 * both comfortably AA at 13px. */
.cb-popup-status.cb-popup-status-error {
	color: #b42318;
}

.cb-popup-status.cb-popup-status-success {
	color: #067647;
}

/* Disclaimer: compliance-critical text, so it must actually be readable.
 * 12px + #6b7280 on white = 4.8:1 (AA pass; the old 11px #9ca3af was 2.5:1). */
.cb-popup-disclaimer {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--cb-text-3, #6b7280);
}

@media (max-width: 480px) {
	.cb-popup-box {
		padding: 22px 18px 18px;
	}
	.cb-popup-headline {
		font-size: 19px;
	}
}

/* Node-network variant — Crybitz's signature dark-green hero effect,
 * reused here as the popup background. Canvas + overlay sit behind
 * .cb-popup-content, which carries all the actual UI at a higher z-index. */
.cb-popup-box--nodes {
	background: linear-gradient(135deg, #052e16 0%, #064e24 50%, #0a3d1f 100%);
	padding: 0;
}

#cb-popup-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.7;
	border-radius: inherit;
}

.cb-popup-canvas-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(5, 46, 22, 0.1) 0%, rgba(5, 46, 22, 0.55) 100%);
}

.cb-popup-box--nodes .cb-popup-content {
	position: relative;
	z-index: 2;
	padding: 28px 24px 24px;
}

.cb-popup-box--nodes .cb-popup-headline,
.cb-popup-box--nodes .cb-popup-body {
	color: #ffffff;
}

.cb-popup-box--nodes .cb-popup-body {
	color: rgba(255, 255, 255, 0.78);
}

.cb-popup-box--nodes .cb-popup-close {
	color: rgba(255, 255, 255, 0.78);
}

/* 78% white over the darkest-case mid gradient stop (#064e24) = 6.7:1,
 * comfortably AA for 12px text (55% white measured only 4.15:1). */
.cb-popup-box--nodes .cb-popup-disclaimer {
	color: rgba(255, 255, 255, 0.78);
}

/* Status colors on the dark green gradient: the light-variant reds/greens
 * measured 2.0–3.1:1 here (the success message was near-invisible).
 * #fda29b = 5.1:1 and #6ce9a6 = 6.5:1 even on the mid stop (worst case),
 * and higher on the outer stops. */
.cb-popup-box--nodes .cb-popup-status.cb-popup-status-error {
	color: #fda29b;
}

.cb-popup-box--nodes .cb-popup-status.cb-popup-status-success {
	color: #6ce9a6;
}

.cb-popup-box--nodes .cb-popup-secondary-btn {
	border-color: #4ade80;
	color: #4ade80;
}


/* Optional "No thanks" dismiss link under the CTA. */
.cb-popup-dismiss {
	display: inline-block;
	margin-top: 10px;
	background: none;
	border: none;
	padding: 4px;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	color: var(--cb-text-2, #6b7280);
}

.cb-popup-box--nodes .cb-popup-dismiss {
	color: rgba(255, 255, 255, 0.78);
}

/* Manual opener rendered by the [cb_popup_button] shortcode. Inherits the
 * button look but sizes to content so it sits inline in prose. */
.cb-popup-inline-btn {
	display: inline-block;
	padding: 10px 18px;
	border: none;
	border-radius: var(--cb-radius-sm, 8px);
	background: var(--cb-accent, #f7931a);
	color: var(--cb-on-accent, #14161f);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

/* Slide-in layout: bottom-right toast-style card, no backdrop, the page
 * behind stays fully usable (overlay doesn't intercept pointer events). */
.cb-popup-overlay--slidein {
	background: none;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 20px;
	pointer-events: none;
}

.cb-popup-overlay--slidein .cb-popup-box {
	pointer-events: auto;
	transform: translateY(24px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.cb-popup-overlay--slidein.cb-popup-visible .cb-popup-box {
	transform: translateY(0);
}

@media (max-width: 480px) {
	.cb-popup-overlay--slidein {
		padding: 12px;
		justify-content: center;
	}
}