/* Weekthink Patient Forms — frontend styles
 * Scoped to .wtpf-widget. Uses the surrounding theme's fonts.
 * Accent colour is injected via the --wtpf-accent variable from the shortcode.
 */

.wtpf-widget {
	--wtpf-accent: #e23b3b;
	--wtpf-radius: 12px;
	--wtpf-gap: 14px;
	color: inherit;
	max-width: 520px;
}

.wtpf-widget * {
	box-sizing: border-box;
}

.wtpf-form {
	display: flex;
	flex-direction: column;
	gap: var(--wtpf-gap);
}

.wtpf-heading {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.wtpf-intro {
	margin: 0;
	opacity: .8;
	font-size: .95rem;
	line-height: 1.5;
}

.wtpf-select-label {
	margin: 4px 0 0;
	color: var(--wtpf-accent);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
}

/* --- Selectable options --- */
.wtpf-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wtpf-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid rgba(128, 128, 128, .28);
	border-radius: var(--wtpf-radius);
	background: rgba(128, 128, 128, .06);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	user-select: none;
}

.wtpf-option:hover {
	border-color: rgba(128, 128, 128, .5);
}

.wtpf-option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wtpf-check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid rgba(128, 128, 128, .5);
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, background .15s ease;
}

.wtpf-check::after {
	content: "";
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
	margin-top: -2px;
}

/* Checked state */
.wtpf-option input:checked ~ .wtpf-check {
	background: var(--wtpf-accent);
	border-color: var(--wtpf-accent);
}

.wtpf-option input:checked ~ .wtpf-check::after {
	transform: rotate(45deg) scale(1);
}

.wtpf-option:has(input:checked) {
	border-color: var(--wtpf-accent);
	background: color-mix(in srgb, var(--wtpf-accent) 8%, transparent);
}

/* Keyboard focus ring */
.wtpf-option input:focus-visible ~ .wtpf-check {
	outline: 2px solid var(--wtpf-accent);
	outline-offset: 2px;
}

.wtpf-option-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wtpf-option-title {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}

.wtpf-option-desc {
	opacity: .7;
	font-size: .85rem;
	line-height: 1.4;
}

/* --- Email + button row --- */
.wtpf-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.wtpf-email {
	flex: 1 1 200px;
	min-width: 0;
	padding: 12px 14px;
	font-size: .95rem;
	color: inherit;
	background: rgba(128, 128, 128, .06);
	border: 1px solid var(--wtpf-accent);
	border-radius: var(--wtpf-radius);
	outline: none;
	transition: box-shadow .15s ease;
}

.wtpf-email::placeholder {
	opacity: .55;
}

.wtpf-email:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtpf-accent) 25%, transparent);
}

.wtpf-btn {
	flex: 0 0 auto;
	padding: 12px 22px;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	background: var(--wtpf-accent);
	border: 1px solid var(--wtpf-accent);
	border-radius: var(--wtpf-radius);
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
	white-space: nowrap;
}

.wtpf-btn:hover {
	filter: brightness(1.08);
}

.wtpf-btn:active {
	transform: translateY(1px);
}

.wtpf-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* --- Messages --- */
.wtpf-message {
	margin: 2px 0 0;
	font-size: .9rem;
	line-height: 1.4;
	min-height: 1em;
}

.wtpf-message.is-error {
	color: var(--wtpf-accent);
}

.wtpf-message.is-success {
	color: #2faa5a;
}

/* --- Honeypot --- */
.wtpf-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 420px) {
	.wtpf-btn { flex: 1 1 100%; }
}