/*
 * Colour tokens, resolved in three steps:
 *
 *   1. --wcp-rep-*            the admin's own choice, set on .wcp-rep-overlay
 *                             by Settings > Review Email Popup > Appearance
 *   2. the ckn-stylization    the site's brand colour on kit.next, emitted at
 *      variable                :root by that plugin
 *   3. the literal            the plugin's own default, used on casino.kit v5
 *                             and anywhere else without ckn-stylization
 *
 * This is a pure CSS cascade on purpose. The plugin must run on both platforms
 * and never branches on ckn-stylization being installed; step 2 simply does not
 * resolve where that plugin is absent. Do not replace this with a PHP check.
 */

.wcp-rep-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--wcp-rep-overlay-background, rgba(0, 0, 0, 0.6));
}

.wcp-rep-overlay.is-open {
	display: flex;
}

body.wcp-rep-lock-scroll {
	overflow: hidden;
}

.wcp-rep {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 32px 24px 24px;
	background: var(--wcp-rep-dialog-background, var(--cards_background, #1b1b23));
	color: var(--wcp-rep-text-color, var(--text_color, #b7b7c2));
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	font-family: inherit;
}

.wcp-rep__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: var(--wcp-rep-headings-color, var(--headings_color, #ffffff));
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.wcp-rep__title {
	color: var(--wcp-rep-headings-color, var(--headings_color, #ffffff));
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
}

.wcp-rep__subtitle {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--wcp-rep-text-color, var(--text_color, #b7b7c2));
}

.wcp-rep__input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	margin-bottom: 8px;
	border: 1px solid var(--wcp-rep-border-color, var(--border_color, #3a3a45));
	border-radius: 8px;
	background: var(--wcp-rep-input-background, var(--input_background, #26262f));
	color: var(--wcp-rep-input-text-color, var(--input_placeholder_color, #ffffff));
	/*
	 * Must stay >= 16px. iOS Safari auto-zooms the whole page when a focused
	 * input renders below that, which shoves the popup off-centre and leaves
	 * the visitor pinch-zooming back out. Not a typographic preference.
	 */
	font-size: 16px;
}

.wcp-rep__input::placeholder {
	color: var(--wcp-rep-input-placeholder-color, var(--input_placeholder_color, #7d7d8a));
}

.wcp-rep__input.has-error {
	border-color: var(--wcp-rep-error-color, #ef4444);
}

.wcp-rep__error {
	margin: 0 0 12px;
	color: var(--wcp-rep-error-color, #ef4444);
	font-size: 13px;
	text-align: left;
}

.wcp-rep__next {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--wcp-rep-button-background-color, var(--button_background_color, #3b82f6));
	color: var(--wcp-rep-button-text-color, var(--button_text_color, #ffffff));
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.wcp-rep__next:hover {
	background: var(--wcp-rep-button-background-color-hover, var(--button_background_color_hover, #2f6fd6));
}

/*
 * Waiting for the subscribe response. Rendered purely with CSS so the
 * loading state introduces no new user-facing string to translate.
 */
.wcp-rep__next[disabled] {
	cursor: default;
	opacity: 0.75;
}

.wcp-rep__next[disabled]:hover {
	background: var(--wcp-rep-button-background-color, var(--button_background_color, #3b82f6));
}

.wcp-rep__next.is-loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	opacity: 0.85;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wcp-rep-spin 0.7s linear infinite;
}

/*
 * Consent line under the button. Colour deliberately reuses the subtitle's
 * token chain instead of introducing a `--wcp-rep-consent-*` of its own: it is
 * secondary copy of the same kind, and a separate Appearance field for it
 * would be one more colour to keep in sync on every brand for no visual gain.
 *
 * The link inherits that colour rather than picking up the button/brand accent,
 * which is what keeps it readable on any dialog background the cascade
 * resolves to — underline alone already marks it as a link.
 */
.wcp-rep__consent {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--wcp-rep-text-color, var(--text_color, #b7b7c2));
}

.wcp-rep__consent a {
	color: inherit;
	text-decoration: underline;
}

@keyframes wcp-rep-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcp-rep__next.is-loading::after {
		animation-duration: 2.4s;
	}
}

@media (min-width: 480px) {
	.wcp-rep {
		padding: 40px 32px 28px;
	}
}