/* -------------------------------------------------------------------------
 * Pretty Writer — Contact Form
 * Skins: light / navy / cream. Labels: floating / top.
 * Layout is container-query driven, so the form reflows correctly inside a
 * narrow sidebar column as well as a full-width section.
 * ---------------------------------------------------------------------- */

.pwform {
	--pwform-accent: #1b63e0;
	--pwform-accent-contrast: #ffffff;
	--pwform-card-bg: #ffffff;
	--pwform-card-border: #e5e7eb;
	--pwform-field-bg: #ffffff;
	--pwform-field-border: #d8dce3;
	--pwform-text: #111827;
	--pwform-muted: #6b7280;
	--pwform-danger: #dc2626;
	--pwform-success-bg: #ecfdf5;
	--pwform-success-text: #065f46;
	--pwform-error-bg: #fef2f2;
	--pwform-error-text: #991b1b;
	--pwform-radius: 14px;
	--pwform-field-radius: 11px;
	--pwform-glow: rgba(27, 99, 224, 0.16);

	box-sizing: border-box;
	color: var(--pwform-text);
	container-type: inline-size;
	width: 100%;
}

.pwform *,
.pwform *::before,
.pwform *::after {
	box-sizing: inherit;
}

/* --- Skins ------------------------------------------------------------- */

.pwform[data-skin="navy"] {
	--pwform-card-bg: #101b3d;
	--pwform-card-border: #24325c;
	--pwform-field-bg: rgba(255, 255, 255, 0.06);
	--pwform-field-border: #2f3f6e;
	--pwform-text: #eef2ff;
	--pwform-muted: #9fb0d6;
	--pwform-success-bg: rgba(16, 185, 129, 0.16);
	--pwform-success-text: #a7f3d0;
	--pwform-error-bg: rgba(239, 68, 68, 0.16);
	--pwform-error-text: #fecaca;
	--pwform-danger: #fca5a5;
}

.pwform[data-skin="cream"] {
	--pwform-card-bg: #f7f3ec;
	--pwform-card-border: #e6ddc9;
	--pwform-field-bg: #fffdf9;
	--pwform-field-border: #ded3bd;
	--pwform-text: #2f2a20;
	--pwform-muted: #6b6250;
}

/* --- Card -------------------------------------------------------------- */

.pwform__form {
	background: var(--pwform-card-bg);
	border: 1px solid var(--pwform-card-border);
	border-radius: var(--pwform-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14);
	margin: 0;
	padding: 28px;
}

.pwform[data-card="false"] .pwform__form {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* --- Header ------------------------------------------------------------ */

.pwform__header {
	margin-bottom: 22px;
}

.pwform__title {
	color: var(--pwform-text);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0;
}

.pwform__subtitle {
	color: var(--pwform-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 6px 0 0;
}

/* --- Honeypot (must stay visually hidden but focusable-free) ------------ */

.pwform__honeypot {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* --- Grid -------------------------------------------------------------- */

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

.pwform__field {
	display: flex;
	flex-direction: column;
	grid-column: span 1;
	min-width: 0;
}

.pwform__field--full {
	grid-column: 1 / -1;
}

/* --- Controls ---------------------------------------------------------- */

.pwform__control {
	display: block;
	position: relative;
}

.pwform__control > input,
.pwform__control > textarea,
.pwform__control > select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--pwform-field-bg);
	border: 1.5px solid var(--pwform-field-border);
	border-radius: var(--pwform-field-radius);
	color: var(--pwform-text);
	display: block;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	width: 100%;
}

.pwform__control > textarea {
	min-height: 132px;
	resize: vertical;
}

.pwform__control > input:focus,
.pwform__control > textarea:focus,
.pwform__control > select:focus {
	border-color: var(--pwform-accent);
	box-shadow: 0 0 0 4px var(--pwform-glow);
	outline: none;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pwform__control > input:focus,
	.pwform__control > textarea:focus,
	.pwform__control > select:focus {
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--pwform-accent) 18%, transparent);
	}
}

.pwform__control > select {
	cursor: pointer;
	padding-right: 42px;
}

.pwform__control > select option {
	color: #111827;
}

.pwform__chevron {
	border-bottom: 2px solid var(--pwform-muted);
	border-right: 2px solid var(--pwform-muted);
	height: 8px;
	pointer-events: none;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	width: 8px;
}

/* --- Labels: classic (above field) ------------------------------------- */

.pwform[data-labels="top"] .pwform__control > label {
	color: var(--pwform-text);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 7px;
	order: -1;
}

.pwform[data-labels="top"] .pwform__control {
	display: flex;
	flex-direction: column;
}

.pwform[data-labels="top"] .pwform__control > input,
.pwform[data-labels="top"] .pwform__control > select {
	padding: 13px 15px;
}

.pwform[data-labels="top"] .pwform__control > textarea {
	padding: 13px 15px;
}

/* In top-label mode the label is lifted above via flex order, so the control's
   bottom edge is the select's bottom edge — anchor the chevron to that rather
   than to the control's midpoint, which the label would skew. */
.pwform[data-labels="top"] .pwform__chevron {
	bottom: 20px;
	top: auto;
	transform: rotate(45deg);
}

/* --- Labels: floating -------------------------------------------------- */

.pwform[data-labels="floating"] .pwform__control > input,
.pwform[data-labels="floating"] .pwform__control > select {
	padding: 25px 15px 9px;
}

.pwform[data-labels="floating"] .pwform__control > textarea {
	padding: 27px 15px 11px;
}

.pwform[data-labels="floating"] .pwform__control > label {
	color: var(--pwform-muted);
	font-size: 15px;
	left: 16px;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 19px;
	transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease, font-weight 0.16s ease;
}

.pwform[data-labels="floating"] .pwform__control--textarea > label {
	top: 20px;
}

.pwform[data-labels="floating"] .pwform__control > input:focus ~ label,
.pwform[data-labels="floating"] .pwform__control > input:not(:placeholder-shown) ~ label,
.pwform[data-labels="floating"] .pwform__control > textarea:focus ~ label,
.pwform[data-labels="floating"] .pwform__control > textarea:not(:placeholder-shown) ~ label,
.pwform[data-labels="floating"] .pwform__control--select > label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	top: 10px;
}

/* Autofilled inputs report as :placeholder-shown in some engines, so float the
   label for them too. Kept in its own rule: an unrecognised vendor pseudo-class
   inside a selector list would invalidate every other selector in that list. */
.pwform[data-labels="floating"] .pwform__control > input:-webkit-autofill ~ label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	top: 10px;
}

.pwform[data-labels="floating"] .pwform__control > input:focus ~ label,
.pwform[data-labels="floating"] .pwform__control > textarea:focus ~ label,
.pwform[data-labels="floating"] .pwform__control > select:focus ~ label {
	color: var(--pwform-accent);
}

/* --- Choice fields (checkbox / radio) ---------------------------------- */

/* Choice fields have no tall input box, so nudge them down to sit on the
   same baseline as neighbouring text fields. */
.pwform__field--choice {
	justify-content: center;
	padding-top: 4px;
}

.pwform__choice-text {
	line-height: 1.4;
}

.pwform__group-label {
	color: var(--pwform-text);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 9px;
}

.pwform__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
}

.pwform__checkbox,
.pwform__radio {
	align-items: center;
	color: var(--pwform-text);
	cursor: pointer;
	display: inline-flex;
	font-size: 14.5px;
	gap: 9px;
	line-height: 1.4;
	margin: 0;
	position: relative;
}

.pwform__checkbox input,
.pwform__radio input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.pwform__box,
.pwform__dot {
	background: var(--pwform-field-bg);
	border: 1.5px solid var(--pwform-field-border);
	flex: 0 0 auto;
	height: 20px;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	width: 20px;
}

.pwform__box {
	border-radius: 6px;
}

.pwform__dot {
	border-radius: 50%;
}

.pwform__box::after {
	border-bottom: 2px solid var(--pwform-accent-contrast);
	border-right: 2px solid var(--pwform-accent-contrast);
	content: "";
	height: 9px;
	left: 6px;
	opacity: 0;
	position: absolute;
	top: 2.5px;
	transform: rotate(45deg) scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
	width: 5px;
}

.pwform__dot::after {
	background: var(--pwform-accent-contrast);
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	transition: opacity 0.15s ease, transform 0.15s ease;
	width: 7px;
}

.pwform__checkbox input:checked ~ .pwform__box,
.pwform__radio input:checked ~ .pwform__dot {
	background: var(--pwform-accent);
	border-color: var(--pwform-accent);
}

.pwform__checkbox input:checked ~ .pwform__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.pwform__radio input:checked ~ .pwform__dot::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.pwform__checkbox input:focus-visible ~ .pwform__box,
.pwform__radio input:focus-visible ~ .pwform__dot {
	box-shadow: 0 0 0 4px var(--pwform-glow);
}

/* --- Validation -------------------------------------------------------- */

.pwform__req {
	color: var(--pwform-danger);
	margin-left: 2px;
}

.pwform__error {
	color: var(--pwform-danger);
	display: block;
	font-size: 12.5px;
	line-height: 1.35;
	margin-top: 6px;
	min-height: 0;
}

.pwform__error:empty {
	display: none;
}

.pwform__field[data-invalid="true"] .pwform__control > input,
.pwform__field[data-invalid="true"] .pwform__control > select,
.pwform__field[data-invalid="true"] .pwform__control > textarea,
.pwform__field[data-invalid="true"] .pwform__box,
.pwform__field[data-invalid="true"] .pwform__dot {
	border-color: var(--pwform-danger);
}

/* --- Status callout ---------------------------------------------------- */

.pwform__status:empty {
	display: none;
}

.pwform__status p {
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 18px;
	padding: 12px 15px;
}

.pwform[data-last-status="success"] .pwform__status p {
	background: var(--pwform-success-bg);
	color: var(--pwform-success-text);
}

.pwform[data-last-status="error"] .pwform__status p {
	background: var(--pwform-error-bg);
	color: var(--pwform-error-text);
}

/* --- Submit ------------------------------------------------------------ */

.pwform__submit {
	align-items: center;
	background: var(--pwform-accent);
	border: 0;
	border-radius: 999px;
	color: var(--pwform-accent-contrast);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	justify-content: center;
	line-height: 1;
	min-height: 50px;
	padding: 0 32px;
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.18s ease, opacity 0.15s ease;
	width: auto;
}

.pwform[data-button="full"] .pwform__submit {
	width: 100%;
}

.pwform__submit:hover {
	box-shadow: 0 8px 20px -6px var(--pwform-glow);
	transform: translateY(-1px);
}

.pwform__submit:active {
	transform: translateY(0);
}

.pwform__submit:focus-visible {
	outline: 2px solid var(--pwform-accent);
	outline-offset: 3px;
}

.pwform__submit[disabled] {
	cursor: default;
	opacity: 0.65;
	transform: none;
}

.pwform__submit-text {
	display: inline-block;
}

.pwform__spinner {
	animation: pwform-spin 0.7s linear infinite;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	border-top-color: var(--pwform-accent-contrast);
	display: none;
	height: 16px;
	width: 16px;
}

.pwform__form[data-sending="true"] .pwform__spinner {
	display: block;
}

@keyframes pwform-spin {
	to {
		transform: rotate(360deg);
	}
}

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

/* Container query: collapses correctly inside a narrow sidebar column even
   on a wide screen. */
@container (max-width: 520px) {
	.pwform__field--half {
		grid-column: 1 / -1;
	}

	.pwform__form {
		padding: 22px 20px;
	}
}

/* Viewport fallback for browsers without container query support. */
@media (max-width: 640px) {
	.pwform__grid {
		grid-template-columns: 1fr;
	}

	.pwform__field {
		grid-column: 1 / -1;
	}

	.pwform__form {
		padding: 22px 18px;
	}

	.pwform__title {
		font-size: 19px;
	}

	/* Comfortable touch targets on phones. */
	.pwform[data-labels="floating"] .pwform__control > input,
	.pwform[data-labels="floating"] .pwform__control > select {
		padding: 26px 15px 10px;
	}

	.pwform__submit {
		min-height: 52px;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pwform *,
	.pwform *::before,
	.pwform *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}