/* ============================================================
   GKFC Core — Captcha
   Adapts to light and dark surfaces via the theme's design
   tokens, with standalone fallbacks so it still looks correct
   if the plugin is used without the GKFC theme.
   ============================================================ */

.gkfc-captcha {
	--gkfc-captcha-gap: 0.6rem;
	--gkfc-captcha-surface: var(--gkfc-surface-2, #17191d);
	--gkfc-captcha-text: var(--gkfc-text, #ffffff);
	--gkfc-captcha-muted: var(--gkfc-text-muted, #a7a7a7);
	--gkfc-captcha-border: var(--gkfc-border, rgba(255, 255, 255, 0.09));
	--gkfc-captcha-accent: var(--gkfc-accent, #ff7b2b);
	--gkfc-captcha-danger: #fca5a5;

	display: flex;
	flex-direction: column;
	gap: var(--gkfc-captcha-gap);
	margin: 0;
}

/* ── Image ────────────────────────────────────────────────── */

.gkfc-captcha__image {
	display: block;
	width: 180px;
	height: 50px;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--gkfc-captcha-border);
	border-radius: 6px;
	background: #f4f6fa;
	transition: opacity 0.15s ease;
}

.gkfc-captcha.is-loading .gkfc-captcha__image {
	opacity: 0.45;
}

/* ── Label ────────────────────────────────────────────────── */

.gkfc-captcha__label {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--gkfc-captcha-muted);
}

.gkfc-captcha__label .gkfc-form__required,
.gkfc-captcha .gkfc-form__required {
	color: var(--gkfc-captcha-accent);
}

/* ── Input + refresh row ──────────────────────────────────── */

.gkfc-captcha__row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.gkfc-captcha__input {
	flex: 1 1 8rem;
	min-width: 0;
	width: auto;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-family: var(--gkfc-font-body, 'Inter', 'Segoe UI', sans-serif);
	font-weight: 600;
}

.gkfc-captcha__input:focus,
.gkfc-captcha__input:focus-visible {
	border-color: var(--gkfc-captcha-accent);
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 3px rgba(255, 123, 43, 0.22);
}

/* ── Refresh button ───────────────────────────────────────── */

.gkfc-captcha__refresh {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0 0.85rem;
	min-height: 2.75rem;
	background: transparent;
	border: 1px solid var(--gkfc-captcha-border);
	border-radius: 6px;
	color: var(--gkfc-captcha-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.gkfc-captcha__refresh:hover:not(:disabled) {
	color: var(--gkfc-captcha-accent);
	border-color: var(--gkfc-captcha-accent);
	background: rgba(255, 123, 43, 0.08);
}

.gkfc-captcha__refresh:focus-visible {
	color: var(--gkfc-captcha-accent);
	border-color: var(--gkfc-captcha-accent);
	box-shadow: 0 0 0 3px rgba(255, 123, 43, 0.22);
}

.gkfc-captcha__refresh:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── Error message ────────────────────────────────────────── */

.gkfc-captcha__error {
	display: none;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--gkfc-captcha-danger);
}

.gkfc-captcha__error:not(:empty) {
	display: block;
}

.gkfc-captcha__error.is-error {
	background: rgba(127, 29, 29, 0.35);
	border: 1px solid rgba(220, 38, 38, 0.4);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
}

/* Mark the widget when the server rejected the answer, so the
   generic form-level error summary does not feel disconnected. */
.gkfc-captcha.is-invalid .gkfc-captcha__image {
	border-color: rgba(220, 38, 38, 0.65);
}

/* ── Narrow screens ───────────────────────────────────────── */

@media (max-width: 480px) {
	.gkfc-captcha__image {
		width: 100%;
	}

	.gkfc-captcha__row {
		flex-direction: column;
	}

	.gkfc-captcha__refresh {
		width: 100%;
		min-height: 2.5rem;
	}
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.gkfc-captcha__image,
	.gkfc-captcha__refresh {
		transition: none;
	}
}

/* ── Image | Input field side-by-side ────────────────────────

   The widget's two top-level children (image and controls) are
   already siblings, so the desktop layout is a simple row: the
   challenge on the left, the answer input (+ "New code") beside it.
   These rules are appended after the base block so they win the
   cascade without touching the original declaration. */

.gkfc-captcha {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.gkfc-captcha__image {
	flex: 0 0 auto;
}

.gkfc-captcha__controls {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Stack below 560px so the input never fights the 180px image. */
@media (max-width: 560px) {
	.gkfc-captcha {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gkfc-captcha-gap);
	}

	.gkfc-captcha__controls {
		flex: none;
	}
}

/* ── Container card ─────────────────────────────────────────
   The widget reads as one self-contained captcha section: a
   padded, bordered, rounded surface around image + controls.
   width:fit-content hugs the widget (the row sizes itself to
   the 180px image + input), while max-width:100% keeps it
   inside any form column. These rules are appended after the
   side-by-side block so they win the cascade. */

.gkfc-captcha {
	width: fit-content;
	max-width: 100%;
	padding: 1rem;
	border: 1px solid var(--gkfc-captcha-border);
	border-radius: 10px;
	background: var(--gkfc-captcha-surface);
}

/* ── Equal heights for image and refresh button ─────────────
   The base block gave the image a fixed 50px height (overridden
   to auto later) and the button a 2.75rem min-height, so the two
   never matched. Declared last here they both resolve to the
   same 50px line, and the row's align-items:stretch keeps the
   input on that same line. */

.gkfc-captcha {
	--gkfc-captcha-h: 50px;
}

.gkfc-captcha__image {
	height: var(--gkfc-captcha-h);
}

.gkfc-captcha__refresh {
	height: var(--gkfc-captcha-h);
	min-height: var(--gkfc-captcha-h);
}

/* The full-width mobile image keeps its 180:50 aspect so the
   equal-height rule does not squash it on small screens. */
@media (max-width: 480px) {
	.gkfc-captcha__image {
		height: auto;
		aspect-ratio: 180 / 50;
	}
}

/* ── UI / UX polish ─────────────────────────────────────────
   The card gets a little lift so it reads as a distinct control,
   the failed state marks the whole widget (not just the image),
   and the answer field hints at what to type. All rules are
   appended so they win the cascade without touching the base
   declarations. */

.gkfc-captcha {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gkfc-captcha.is-invalid {
	border-color: rgba(220, 38, 38, 0.65);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.gkfc-captcha__input::placeholder {
	color: var(--gkfc-captcha-muted);
	opacity: 0.6;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Inside the controls column the error sits right under the
   input row, so a rejected code stays attached to the widget. */
.gkfc-captcha__controls .gkfc-captcha__error {
	margin-top: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
	.gkfc-captcha {
		transition: none;
	}
}