/**
 * Wolf Forms — front-end styles.
 *
 * Notes for future edits:
 *  - Field rules use !important deliberately. Enfold and WordPress core style inputs
 *    with selectors that outrank a single class (input[type="text"], .entry-content input),
 *    and they were winning: typed text rendered grey and the borders vanished.
 *  - -webkit-text-fill-color is set as well as color, because WebKit uses it for
 *    autofilled and some themed inputs and ignores `color` there.
 *  - Everything is scoped to .wolf-forms so nothing leaks into the theme.
 */

.wolf-forms {
	--wc-primary: #ec1aa7;
	--wc-dark: #8d0b63;
	--wc-ink: #000000;
	--wc-muted: #4b5563;
	--wc-border: #59636f;
	--wc-border-soft: #e5e7eb;
	--wc-bg: #ffffff;
	--wc-danger: #dc2626;
	--wc-radius: 12px;

	max-width: 720px;
	margin: 0 auto;
	padding: 28px;
	background: #ffffff;
	border: 1px solid var(--wc-border-soft);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
	color: var(--wc-ink);
	font-size: 16px;
	line-height: 1.55;
}

.wolf-forms *,
.wolf-forms *::before,
.wolf-forms *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------- Layout */

.wolf-forms__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 22px;
	margin-bottom: 22px;
}

/* Conditional logic hides a field's whole wrapper. Important because themes
   sometimes force display on children. */
.wolf-forms__field[hidden] { display: none !important; }

.wolf-forms__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wolf-forms__field--full { grid-column: 1 / -1; }
.wolf-forms__field--half { grid-column: span 1; }

.wolf-forms__label {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .01em;
	color: var(--wc-ink) !important;
}

.wolf-forms__req { color: var(--wc-primary); }

/* ------------------------------------------------------------------ Inputs */

.wolf-forms .wolf-forms__input,
.wolf-forms input.wolf-forms__input,
.wolf-forms textarea.wolf-forms__input,
.wolf-forms select.wolf-forms__input {
	width: 100% !important;
	min-height: 52px;
	padding: 13px 16px !important;
	border: 1.5px solid var(--wc-border) !important;
	border-radius: var(--wc-radius) !important;
	background-color: var(--wc-bg) !important;
	color: var(--wc-ink) !important;
	-webkit-text-fill-color: var(--wc-ink) !important;
	font-size: 16px !important;
	font-family: inherit !important;
	line-height: 1.5 !important;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06) !important;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.wolf-forms .wolf-forms__input:hover,
.wolf-forms input.wolf-forms__input:hover,
.wolf-forms textarea.wolf-forms__input:hover,
.wolf-forms select.wolf-forms__input:hover {
	border-color: #1f2937 !important;
}

.wolf-forms .wolf-forms__input:focus,
.wolf-forms input.wolf-forms__input:focus,
.wolf-forms textarea.wolf-forms__input:focus,
.wolf-forms select.wolf-forms__input:focus {
	border-color: var(--wc-primary) !important;
	outline: none !important;
	box-shadow: 0 0 0 4px rgba(236, 26, 167, .16), inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

/* Placeholder stays clearly lighter than a typed value. */
.wolf-forms .wolf-forms__input::placeholder,
.wolf-forms input.wolf-forms__input::placeholder,
.wolf-forms textarea.wolf-forms__input::placeholder {
	color: #6b7280 !important;
	-webkit-text-fill-color: #6b7280 !important;
	opacity: 1 !important;
}

/* Autofill: WebKit otherwise repaints both the text and the background. */
.wolf-forms input.wolf-forms__input:-webkit-autofill,
.wolf-forms input.wolf-forms__input:-webkit-autofill:hover,
.wolf-forms input.wolf-forms__input:-webkit-autofill:focus,
.wolf-forms textarea.wolf-forms__input:-webkit-autofill {
	-webkit-text-fill-color: var(--wc-ink) !important;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.wolf-forms textarea.wolf-forms__input {
	min-height: 180px !important;
	resize: vertical;
}

.wolf-forms select.wolf-forms__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 44px !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	cursor: pointer;
}

.wolf-forms input[type="checkbox"],
.wolf-forms input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--wc-primary);
}

/* ------------------------------------------------------------------ Choices */

.wolf-forms__choices { display: flex; flex-direction: column; gap: 10px; }

/* A pick-any group can hold a dozen choices ("what's already fitted"). Two
   columns on a wide field keeps it from becoming a long scroll. */
.wolf-forms__choices--multi { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.wolf-forms__choices--multi .wolf-forms__choice { flex: 1 1 calc(50% - 8px); min-width: 140px; }
.wolf-forms__field--half .wolf-forms__choices--multi .wolf-forms__choice { flex: 1 1 100%; }

.wolf-forms__choice,
.wolf-forms__check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1.5px solid var(--wc-border-soft);
	border-radius: var(--wc-radius);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.wolf-forms__choice:hover,
.wolf-forms__check:hover { border-color: var(--wc-border); background: #fafafa; }
.wolf-forms__choice span,
.wolf-forms__check span { color: var(--wc-ink) !important; }

/* -------------------------------------------------------------- Multi-step */

.wolf-forms__progress { margin: 0 0 22px; }

.wolf-forms__progress-bar {
	height: 6px;
	border-radius: 999px;
	background: #eef0f3;
	overflow: hidden;
}
.wolf-forms__progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wc-dark), var(--wc-primary));
	transition: width .28s ease;
}

.wolf-forms__progress-label {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wc-muted) !important;
}

.wolf-forms__step { display: none; }
.wolf-forms__step.is-current { display: block; }

.wolf-forms__step-title {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1.5px solid var(--wc-border-soft);
	font-size: 17px;
	color: var(--wc-ink) !important;
}

.wolf-forms__input.is-invalid,
.wolf-forms__input.is-invalid:focus { border-color: var(--wc-danger) !important; }

/* ------------------------------------------------------------------- Text */

.wolf-forms__help { margin: 0; font-size: 13px; color: var(--wc-muted) !important; }
.wolf-forms__error { margin: 0; font-size: 13px; font-weight: 600; color: var(--wc-danger) !important; }
.wolf-forms__field.has-error .wolf-forms__input { border-color: var(--wc-danger) !important; }

.wolf-forms__heading {
	width: 100%;
	margin: 6px 0 0;
	padding-bottom: 10px;
	border-bottom: 1.5px solid var(--wc-border-soft);
	font-size: 18px;
	color: var(--wc-ink) !important;
}

/* ----------------------------------------------------------------- Button */

.wolf-forms__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }

/* `hidden` is how the script shows one button at a time, but the display rules
   below use !important to beat theme styles. That also beats the browser's own
   [hidden] rule, which left Back / Next / Send all visible on every step. */
.wolf-forms__button[hidden] { display: none !important; }

.wolf-forms__button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px !important;
	padding: 0 34px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--wc-dark), var(--wc-primary)) !important;
	box-shadow: 0 8px 22px rgba(236, 26, 167, .30) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	text-decoration: none !important;
	cursor: pointer;
	transition: filter .16s ease, transform .05s ease, box-shadow .16s ease;
}
.wolf-forms__button:hover { filter: brightness(1.07); box-shadow: 0 10px 26px rgba(236, 26, 167, .38) !important; }
.wolf-forms__button:active { transform: translateY(1px); }
.wolf-forms__button:focus,
.wolf-forms__button:active { border-radius: 999px !important; outline: none !important; }
.wolf-forms__button:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px #1f2937, 0 8px 22px rgba(236, 26, 167, .30) !important;
}
.wolf-forms__button[disabled] { opacity: .65; cursor: default; }

/* The outline variant — Back, which sits apart from Next and Send.
   These rules must come AFTER the base button block: both are !important with
   equal specificity, so source order decides, and when they came first the base
   button's white label won. The background went near-white on hover and the
   label stayed white, which made Back vanish under the cursor. */
.wolf-forms__button--ghost {
	background: #ffffff !important;
	border: 1.5px solid var(--wc-border) !important;
	box-shadow: none !important;
	color: var(--wc-ink) !important;
	-webkit-text-fill-color: var(--wc-ink) !important;
}
.wolf-forms__button--ghost:hover,
.wolf-forms__button--ghost:focus,
.wolf-forms__button--ghost:active {
	background: #f1f3f5 !important;
	border-color: var(--wc-ink) !important;
	color: var(--wc-ink) !important;
	-webkit-text-fill-color: var(--wc-ink) !important;
	box-shadow: none !important;
	filter: none;
}

/* ---------------------------------------------------------------- Notices */

.wolf-forms__notice {
	margin: 0 0 22px;
	padding: 15px 18px;
	border-radius: var(--wc-radius);
	font-size: 15px;
	font-weight: 600;
}
.wolf-forms__notice--ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46 !important; }
.wolf-forms__notice--error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b !important; }

/* ---------------------------------------------------------- Challenge */

.wolf-forms__captcha { margin-bottom: 22px; }
.wolf-forms__captcha-input { max-width: 150px !important; }

/* ------------------------------------------------------------- Honeypot */

.wolf-forms__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 640px) {
	.wolf-forms { padding: 20px; border-radius: 14px; }
	.wolf-forms__grid { grid-template-columns: 1fr; gap: 18px; }
	.wolf-forms__field--half { grid-column: 1 / -1; }
	.wolf-forms__actions { flex-direction: column; align-items: stretch; }
	.wolf-forms__button { width: 100%; }
}