/**
 * Shared Contact Form 7 skin — Contact + Support + Custom work (placeholder-first).
 */

.som-cf7-skin .som-cf7-slot__placeholder {
	margin: 0;
	padding: 0.85rem 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--som-ink-muted);
}

.som-cf7-skin .wpcf7 {
	margin: 0;
}

.som-cf7-skin .wpcf7-form {
	display: grid;
	gap: 0.85rem;
}

.som-cf7-skin .wpcf7-form > p,
.som-cf7-skin .wpcf7-form .som-cf7-row,
.som-cf7-skin .wpcf7-form .som-cf7-file {
	margin: 0;
}

.som-cf7-skin .som-cf7-row {
	display: grid;
	gap: 0.85rem;
}

@media (min-width: 560px) {
	.som-cf7-skin .som-cf7-row--2 {
		grid-template-columns: 1fr 1fr;
		gap: 0.85rem;
	}
}

.som-cf7-skin .som-cf7-row > p {
	margin: 0;
}

/* Hide label text above fields; keep controls readable. */
.som-cf7-skin .wpcf7-form label {
	display: block;
	margin: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.som-cf7-skin .wpcf7-form label .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.4;
	color: var(--som-ink);
}

.som-cf7-skin .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.som-cf7-skin .wpcf7-form input[type="text"],
.som-cf7-skin .wpcf7-form input[type="email"],
.som-cf7-skin .wpcf7-form input[type="tel"],
.som-cf7-skin .wpcf7-form input[type="url"],
.som-cf7-skin .wpcf7-form input[type="file"],
.som-cf7-skin .wpcf7-form select,
.som-cf7-skin .wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 3.15rem;
	padding: 0.8rem 1rem;
	font: inherit;
	font-size: 1.02rem;
	line-height: 1.4;
	color: var(--som-ink);
	background: color-mix(in srgb, var(--som-bg) 70%, #fff);
	border: 1px solid color-mix(in srgb, var(--som-border, var(--som-line)) 88%, var(--som-ink));
	border-radius: 0.7rem;
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
	transition:
		border-color 0.2s var(--som-ease, ease),
		box-shadow 0.2s var(--som-ease, ease),
		background 0.2s var(--som-ease, ease),
		transform 0.2s var(--som-ease, ease);
}

.som-cf7-skin .wpcf7-form input::placeholder,
.som-cf7-skin .wpcf7-form textarea::placeholder {
	color: var(--som-ink-muted);
	opacity: 1;
}

.som-cf7-skin .wpcf7-form textarea {
	min-height: 9.25rem;
	resize: vertical;
	padding-top: 0.9rem;
}

.som-cf7-skin .wpcf7-form select {
	cursor: pointer;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--som-ink-muted) 50%),
		linear-gradient(135deg, var(--som-ink-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.2rem) calc(50% - 0.15rem), calc(100% - 0.9rem) calc(50% - 0.15rem);
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: 2.35rem;
	color: var(--som-ink-muted);
}

.som-cf7-skin .wpcf7-form select:valid,
.som-cf7-skin .wpcf7-form select:not([value=""]):focus {
	color: var(--som-ink);
}

.som-cf7-skin .wpcf7-form input:hover,
.som-cf7-skin .wpcf7-form select:hover,
.som-cf7-skin .wpcf7-form textarea:hover {
	border-color: color-mix(in srgb, var(--som-copper) 35%, var(--som-border, var(--som-line)));
}

.som-cf7-skin .wpcf7-form input:focus,
.som-cf7-skin .wpcf7-form select:focus,
.som-cf7-skin .wpcf7-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: color-mix(in srgb, var(--som-copper) 58%, var(--som-border, var(--som-line)));
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--som-copper) 20%, transparent),
		inset 0 1px 0 #fff;
}

.som-cf7-skin .wpcf7-form input[type="submit"],
.som-cf7-skin .wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	margin-top: 0.25rem;
	padding: 0.85rem 1.2rem;
	font-family: var(--som-font-body);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	background: linear-gradient(
		135deg,
		var(--som-ink) 0%,
		color-mix(in srgb, var(--som-ink) 82%, var(--som-copper)) 100%
	);
	border: 1px solid var(--som-ink);
	border-radius: 0.75rem;
	cursor: pointer;
	box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--som-ink) 70%, transparent);
	transition: background 0.2s var(--som-ease, ease), transform 0.2s var(--som-ease, ease), box-shadow 0.2s var(--som-ease, ease);
}

.som-cf7-skin .wpcf7-form input[type="submit"]:hover,
.som-cf7-skin .wpcf7-form .wpcf7-submit:hover {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--som-ink) 88%, var(--som-copper)) 0%,
		var(--som-ink) 100%
	);
	transform: translateY(-1px);
	box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--som-ink) 75%, transparent);
}

.som-cf7-skin .wpcf7-form input[type="submit"]:active,
.som-cf7-skin .wpcf7-form .wpcf7-submit:active {
	transform: none;
}

.som-cf7-skin .wpcf7-not-valid-tip,
.som-cf7-skin .wpcf7-response-output {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	line-height: 1.45;
}

.som-cf7-skin .wpcf7-response-output {
	padding: 0.75rem 0.9rem;
	border-radius: 0.65rem;
	border: 1px solid var(--som-line);
	background: color-mix(in srgb, var(--som-bg) 80%, #fff);
}

/* File upload zone */
.som-cf7-skin .wpcf7-form .som-cf7-file {
	padding: 0.95rem 1rem;
	border: 1px dashed color-mix(in srgb, var(--som-copper) 42%, var(--som-line));
	border-radius: 0.85rem;
	background:
		linear-gradient(
			160deg,
			color-mix(in srgb, var(--som-copper) 8%, #fff) 0%,
			color-mix(in srgb, var(--som-bg) 55%, #fff) 100%
		);
}

.som-cf7-skin .wpcf7-form .som-cf7-file__hint {
	display: block;
	margin: 0 0 0.55rem;
	font-size: 0.9rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--som-ink-2);
}

.som-cf7-skin .wpcf7-form .som-cf7-file label,
.som-cf7-skin .wpcf7-form label:has(input[type="file"]) {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--som-ink-muted);
	margin-bottom: 0.4rem;
}

.som-cf7-skin .wpcf7-form input[type="file"] {
	padding: 0.55rem 0.65rem;
	font-size: 0.92rem;
	cursor: pointer;
	background: #fff;
	border-style: solid;
	min-height: 2.75rem;
	box-shadow: none;
}

/* Cloudflare Turnstile */
.som-cf7-skin .som-cf7-turnstile,
.som-cf7-skin .wpcf7-form .som-cf7-turnstile {
	margin: 0.15rem 0 0.35rem;
	min-height: 2.75rem;
}

.som-cf7-skin .som-cf7-turnstile .cf-turnstile {
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.som-cf7-skin .wpcf7-form input[type="submit"],
	.som-cf7-skin .wpcf7-form .wpcf7-submit {
		transition: none;
	}

	.som-cf7-skin .wpcf7-form input[type="submit"]:hover,
	.som-cf7-skin .wpcf7-form .wpcf7-submit:hover {
		transform: none;
	}
}