/*!
 * CaptchaYar - frontend
 * Every visual decision is a CSS custom property so the admin panel can drive it.
 * Logical properties are used throughout so RTL and LTR both lay out correctly.
 */

.captchayar-container {
	--cy-accent: #4f46e5;
	--cy-accent-dark: #4338ca;
	--cy-accent-soft: rgba(79, 70, 229, .12);
	--cy-accent-ring: rgba(79, 70, 229, .22);
	--cy-bg: #ffffff;
	--cy-text: #1e293b;
	--cy-muted: #64748b;
	--cy-border: #e2e8f0;
	--cy-input-bg: #ffffff;
	--cy-error: #ef4444;
	--cy-error-soft: rgba(239, 68, 68, .1);
	--cy-radius: 14px;
	--cy-radius-sm: 8px;
	--cy-border-width: 1px;
	--cy-padding: 20px;
	--cy-gap: 10px;
	--cy-font-size: 15px;
	--cy-shadow: 0 4px 16px -6px rgba(15, 23, 42, .12);
	--cy-max-width: 100%;
	--cy-duration: 260ms;
	--cy-ease: cubic-bezier(.4, 0, .2, 1);

	position: relative !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: var(--cy-gap) !important;
	inline-size: 100% !important;
	max-inline-size: var(--cy-max-width) !important;
	margin-block: 24px !important;
	padding: calc(var(--cy-padding) + 4px) var(--cy-padding) var(--cy-padding) !important;
	background-color: var(--cy-bg) !important;
	color: var(--cy-text) !important;
	border: var(--cy-border-width) solid var(--cy-border) !important;
	border-radius: var(--cy-radius) !important;
	box-shadow: var(--cy-shadow) !important;
	font-size: var(--cy-font-size) !important;
	line-height: 1.5 !important;
	transition: box-shadow var(--cy-duration) var(--cy-ease), border-color var(--cy-duration) var(--cy-ease);
}

.captchayar-container *,
.captchayar-container *::before,
.captchayar-container *::after {
	box-sizing: border-box;
}

/* Subtle dotted texture, toggleable from the panel. */
.captchayar-container[data-cy-dots="1"] {
	background-image: radial-gradient(circle, var(--cy-accent-soft) 1px, transparent 1px) !important;
	background-size: 16px 16px !important;
	background-position: center !important;
}

/* ---------------------------------------------------------------- badge --- */

.captchayar-container[data-captchayar-label]:not([data-captchayar-label=""])::before {
	content: attr(data-captchayar-label);
	position: absolute;
	inset-block-start: -12px;
	inset-inline-start: 16px;
	z-index: 2;
	padding: 5px 16px;
	background: var(--cy-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1.5;
	white-space: nowrap;
	box-shadow: 0 6px 14px -6px var(--cy-accent);
}

/* ---------------------------------------------------------------- image --- */

.captchayar-figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: auto;
	max-inline-size: 100%;
	/*
	 * The renderer publishes the configured image size here so the frame
	 * reserves its space before the PNG exists. Without this the box collapses
	 * and then jumps when a lazily loaded challenge arrives, which is now the
	 * default path for hosts that clone their forms.
	 */
	min-inline-size: min( 100%, var(--cy-img-w, 200px) );
	min-block-size: var(--cy-img-h, 80px);
	border-radius: var(--cy-radius-sm);
	overflow: hidden;
	background: var(--cy-input-bg);
	border: 1px solid var(--cy-border);
	padding: 5px;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.captchayar-image {
	display: block !important;
	max-inline-size: 100% !important;
	block-size: auto !important;
	aspect-ratio: var(--cy-img-ratio, 200 / 80);
	object-fit: contain;
	border-radius: calc(var(--cy-radius-sm) - 3px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	user-select: none;
	-webkit-user-drag: none;
	transition: opacity var(--cy-duration) var(--cy-ease), transform var(--cy-duration) var(--cy-ease), filter var(--cy-duration) var(--cy-ease);
}

.captchayar-container.is-swapping .captchayar-image {
	opacity: 0;
	transform: scale(.97) rotate(-.6deg);
	filter: blur(3px);
}

/* Shimmer while a new image is in flight. */
.captchayar-skeleton {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
			transparent 20%,
			var(--cy-accent-soft) 45%,
			transparent 70%);
	background-size: 220% 100%;
	transition: opacity var(--cy-duration) var(--cy-ease);
}

.captchayar-container.is-loading .captchayar-skeleton {
	opacity: 1;
	animation: captchayar-shimmer 1.1s linear infinite;
}

/* --------------------------------------------------------------- inputs --- */

.captchayar-input-container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	justify-content: center !important;
	gap: var(--cy-gap) !important;
	inline-size: 100% !important;
	margin: 0 !important;
}

.captchayar-field {
	position: relative;
	flex: 1 1 180px;
	min-inline-size: 150px;
	display: flex;
}

.captchayar-input {
	inline-size: 100% !important;
	min-block-size: 46px !important;
	block-size: auto !important;
	margin: 0 !important;
	padding: 11px 40px 11px 16px !important;
	background: var(--cy-input-bg) !important;
	color: var(--cy-text) !important;
	border: 1px solid var(--cy-border) !important;
	border-radius: var(--cy-radius-sm) !important;
	font-size: var(--cy-font-size) !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	text-align: center !important;
	letter-spacing: 2px;
	direction: ltr;
	outline: none !important;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05) !important;
	transition: border-color var(--cy-duration) var(--cy-ease), box-shadow var(--cy-duration) var(--cy-ease), background-color var(--cy-duration) var(--cy-ease);
}

.captchayar-input::placeholder {
	color: var(--cy-muted) !important;
	opacity: 1;
	letter-spacing: normal;
}

.captchayar-input:focus,
.captchayar-input:focus-visible {
	border-color: var(--cy-accent) !important;
	box-shadow: 0 0 0 3px var(--cy-accent-ring) !important;
}

/* Tick that appears once the field holds a plausible answer. */
.captchayar-check {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 12px;
	translate: 0 -50%;
	display: flex;
	color: var(--cy-accent);
	opacity: 0;
	scale: .6;
	pointer-events: none;
	transition: opacity var(--cy-duration) var(--cy-ease), scale var(--cy-duration) var(--cy-ease);
}

.captchayar-field.is-filled .captchayar-check {
	opacity: 1;
	scale: 1;
}

/* --------------------------------------------------------------- button --- */

.captchayar-refresh {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	min-block-size: 46px !important;
	block-size: auto !important;
	margin: 0 !important;
	padding: 11px 18px !important;
	background: var(--cy-accent) !important;
	color: #fff !important;
	border: 1px solid var(--cy-accent) !important;
	border-radius: var(--cy-radius-sm) !important;
	font-size: calc(var(--cy-font-size) - 1px) !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 6px 14px -8px var(--cy-accent);
	transition: background-color var(--cy-duration) var(--cy-ease), color var(--cy-duration) var(--cy-ease), transform var(--cy-duration) var(--cy-ease), box-shadow var(--cy-duration) var(--cy-ease), opacity var(--cy-duration) var(--cy-ease);
}

.captchayar-refresh:hover:not(:disabled) {
	background: var(--cy-accent-dark) !important;
	border-color: var(--cy-accent-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -10px var(--cy-accent);
}

.captchayar-refresh:active:not(:disabled) {
	transform: translateY(0);
}

.captchayar-refresh:focus-visible {
	outline: 3px solid var(--cy-accent-ring);
	outline-offset: 2px;
}

.captchayar-refresh:disabled {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
}

.captchayar-refresh-icon {
	display: inline-flex;
	transition: rotate 600ms var(--cy-ease);
}

.captchayar-refresh:hover:not(:disabled) .captchayar-refresh-icon {
	rotate: -180deg;
}

.captchayar-container.is-loading .captchayar-refresh-icon {
	animation: captchayar-spin .8s linear infinite;
}

/* Button variants */
.captchayar-container[data-cy-button="outline"] .captchayar-refresh {
	background: transparent !important;
	color: var(--cy-accent) !important;
	box-shadow: none;
}

.captchayar-container[data-cy-button="outline"] .captchayar-refresh:hover:not(:disabled) {
	background: var(--cy-accent-soft) !important;
	color: var(--cy-accent) !important;
	border-color: var(--cy-accent) !important;
}

.captchayar-container[data-cy-button="ghost"] .captchayar-refresh {
	background: transparent !important;
	color: var(--cy-muted) !important;
	border-color: transparent !important;
	box-shadow: none;
}

.captchayar-container[data-cy-button="ghost"] .captchayar-refresh:hover:not(:disabled) {
	background: var(--cy-accent-soft) !important;
	color: var(--cy-accent) !important;
}

/* Icon-only */
.captchayar-container[data-cy-label="icon"] .captchayar-refresh-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.captchayar-container[data-cy-label="icon"] .captchayar-refresh {
	padding-inline: 13px !important;
	gap: 0 !important;
}

/* ---------------------------------------------------------------- error --- */

.captchayar-error {
	display: none;
	inline-size: 100%;
	margin: 0;
	padding: 9px 14px;
	background: var(--cy-error-soft);
	color: var(--cy-error);
	border-radius: var(--cy-radius-sm);
	font-size: calc(var(--cy-font-size) - 2px);
	line-height: 1.6;
	text-align: center;
}

.captchayar-error.is-visible {
	display: block;
	animation: captchayar-slide-in var(--cy-duration) var(--cy-ease);
}

.captchayar-container.is-invalid {
	border-color: var(--cy-error) !important;
}

.captchayar-container.is-invalid .captchayar-input {
	border-color: var(--cy-error) !important;
}

.captchayar-container.is-shaking {
	animation: captchayar-shake 420ms var(--cy-ease);
}

/* -------------------------------------------------------------- layouts --- */

.captchayar-container[data-cy-layout="inline"] {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

.captchayar-container[data-cy-layout="inline"] .captchayar-figure {
	flex: 0 1 auto;
	min-inline-size: 0;
}

.captchayar-container[data-cy-layout="inline"] .captchayar-input-container {
	flex: 1 1 200px !important;
	inline-size: auto !important;
	flex-wrap: nowrap !important;
}

/* A lower floor here keeps the three parts on one row at typical sidebar and
   checkout-column widths instead of dropping the image onto its own line. */
.captchayar-container[data-cy-layout="inline"] .captchayar-field {
	flex: 1 1 110px;
	min-inline-size: 90px;
}

.captchayar-container[data-cy-layout="inline"] .captchayar-refresh {
	padding-inline: 14px !important;
}

.captchayar-container[data-cy-layout="inline"] .captchayar-error {
	flex: 1 0 100%;
}

/* --------------------------------------------------------------- themes --- */

.captchayar-container[data-cy-theme="dark"] {
	--cy-accent: #818cf8;
	--cy-accent-dark: #6366f1;
	--cy-accent-soft: rgba(129, 140, 248, .16);
	--cy-accent-ring: rgba(129, 140, 248, .3);
	--cy-bg: #0f172a;
	--cy-text: #e2e8f0;
	--cy-muted: #94a3b8;
	--cy-border: #1e293b;
	--cy-input-bg: #1e293b;
	--cy-error: #f87171;
	--cy-error-soft: rgba(248, 113, 113, .14);
}

@media (prefers-color-scheme: dark) {
	.captchayar-container[data-cy-theme="auto"] {
		--cy-accent: #818cf8;
		--cy-accent-dark: #6366f1;
		--cy-accent-soft: rgba(129, 140, 248, .16);
		--cy-accent-ring: rgba(129, 140, 248, .3);
		--cy-bg: #0f172a;
		--cy-text: #e2e8f0;
		--cy-muted: #94a3b8;
		--cy-border: #1e293b;
		--cy-input-bg: #1e293b;
		--cy-error: #f87171;
		--cy-error-soft: rgba(248, 113, 113, .14);
	}
}

/* ------------------------------------------------------- host integration -- */

.elementor-field-type-captchayar {
	display: flex !important;
	flex-direction: column;
}

.elementor-field-type-captchayar .captchayar-container,
.ginput_container_captchayar .captchayar-container,
.wpforms-field-captchayar .captchayar-container {
	margin-block-start: 0 !important;
}

form#loginform .captchayar-container,
form#registerform .captchayar-container,
form#lostpasswordform .captchayar-container {
	margin-block: 16px !important;
}

/* --------------------------------------------------------------- motion --- */

@keyframes captchayar-spin {
	to {
		rotate: 360deg;
	}
}

@keyframes captchayar-shimmer {
	0% {
		background-position: 180% 0;
	}

	100% {
		background-position: -80% 0;
	}
}

@keyframes captchayar-slide-in {
	from {
		opacity: 0;
		translate: 0 -6px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes captchayar-shake {

	0%,
	100% {
		translate: 0;
	}

	20% {
		translate: -7px;
	}

	40% {
		translate: 6px;
	}

	60% {
		translate: -4px;
	}

	80% {
		translate: 2px;
	}
}

/* Respect the visitor's own preference, and the admin's animation toggle. */
.captchayar-container[data-cy-anim="0"] *,
.captchayar-container[data-cy-anim="0"] {
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.captchayar-container,
	.captchayar-container * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 600px) {
	.captchayar-container {
		--cy-padding: 16px;
	}

	.captchayar-container[data-cy-layout="inline"] {
		flex-direction: column !important;
	}

	.captchayar-input-container {
		flex-direction: column !important;
	}

	/*
	 * Once the container becomes a column, flex-basis resolves against the BLOCK
	 * axis, so the 180px/220px bases above would set the height of the field
	 * rather than its width. They have to be reset here.
	 */
	.captchayar-field,
	.captchayar-container[data-cy-layout="inline"] .captchayar-input-container {
		flex: 0 0 auto !important;
	}

	.captchayar-field,
	.captchayar-refresh {
		inline-size: 100% !important;
		min-inline-size: 0 !important;
	}

	.captchayar-figure {
		inline-size: 100%;
	}

	.captchayar-container[data-cy-label="icon"] .captchayar-refresh-text {
		position: static;
		inline-size: auto;
		block-size: auto;
		clip-path: none;
	}

	.captchayar-container[data-cy-label="icon"] .captchayar-refresh {
		gap: 7px !important;
	}
}