/**
 * Ecomm SMM LP — contact page: Contact Form 7 bridge.
 *
 * Loaded ON TOP of template-ecomm-social-media.css (loader.php maps this
 * template to the LP bundle, which already carries the design system and every
 * .ct__ rule). Everything here exists only because CF7 renders the form:
 * markup the React original did not have, and CF7 defaults that fight the
 * design. Nothing here restyles the design itself.
 */

/* The design system has no error colour — the form is the only place that
   needs one, so it is declared here rather than added to the shared tokens. */
:root {
	--ct-error: #b42318;
}

/* CF7 wraps every control in an inline span. .ct__f is a grid, so an inline
   grid item collapses the field: make the wrap transparent to layout. */
.ct__f .wpcf7-form-control-wrap {
	display: block;
	min-width: 0;
}

/* CF7's own form element sits between .ct__panel and .ct__rows. */
.ct__panel .wpcf7 {
	margin: 0;
}
.ct__panel .wpcf7 form {
	margin: 0;
}

/* Validation ------------------------------------------------------------- */
.ct__in.wpcf7-not-valid {
	border-color: var(--ct-error);
}
.wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: var(--t-xs);
	font-weight: var(--fw-medium);
	color: var(--ct-error);
}

/* CF7's response banner defaults to a 2px border and 2em margins. */
.wpcf7 form .wpcf7-response-output {
	margin: clamp(1rem, 2vw, 1.35rem) 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--rule);
	border-radius: var(--r-1);
	background: var(--surface-alt);
	font-size: var(--t-sm);
	color: var(--text-2);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--accent);
	color: var(--text);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--ct-error);
	color: var(--ct-error);
}

/* Submit + spinner sit in .ct__act, which is already a flex row.
   wpcf7_autop wraps that row's inline content in a <p> (CF7 6.x has no
   per-form autop switch), which would collapse the flex row to one item —
   display:contents hands the children back to the flex container. */
.ct__act > p {
	display: contents;
}
.ct__act .wpcf7-spinner {
	margin: 0;
}

/* Plan picker ------------------------------------------------------------
   "Choose the Wytlabs AI plan": a billing-period pill toggle (the LP pricing
   section's .pr__toggle look, rebuilt on CF7's radio markup since CF7 owns
   those elements) over a list of selectable plan rows. Real radios, styled —
   so it works and submits without JS; the JS only fills in prices. */
.ct__plan {
	gap: clamp(0.7rem, 1.6vw, 1rem);
}

/* Billing period: two radios drawn as one segmented control. */
.ct__period .wpcf7-radio {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-1);
}
.ct__period .wpcf7-list-item {
	margin: 0;
}
.ct__period .wpcf7-list-item label {
	display: block;
	cursor: pointer;
}
.ct__period input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ct__period .wpcf7-list-item-label {
	display: block;
	padding: 0.7rem 1.35rem;
	font-size: var(--t-label);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tr-label-tight);
	text-transform: uppercase;
	color: var(--text-3);
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.ct__period input[type="radio"]:checked + .wpcf7-list-item-label {
	background: var(--ink);
	color: var(--white);
}
/* Keyboard focus still has to be visible with the input itself hidden. */
.ct__period input[type="radio"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* Plan rows. */
.ct__plan > .wpcf7-form-control-wrap .wpcf7-radio {
	display: grid;
	gap: 0.5rem;
}
.ct__plan > .wpcf7-form-control-wrap .wpcf7-list-item {
	margin: 0;
}
.ct__plan > .wpcf7-form-control-wrap .wpcf7-list-item label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: var(--r-1);
	background: var(--surface-alt);
	font-size: var(--t-sm);
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.ct__plan > .wpcf7-form-control-wrap .wpcf7-list-item label:hover {
	border-color: var(--rule-strong);
}
.ct__plan > .wpcf7-form-control-wrap .wpcf7-list-item:has(input:checked) label {
	border-color: var(--accent);
	background: var(--accent-wash);
}
.ct__plan > .wpcf7-form-control-wrap .wpcf7-list-item:has(input:focus-visible) label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
/* The plan name, badge and price all live inside this one span, so it has to
   be the flex row — otherwise they run together as a single flex item. */
.ct__plan > .wpcf7-form-control-wrap .wpcf7-list-item-label {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	font-weight: var(--fw-semi);
}

/* Price + badge are appended by the page's JS. */
.ct__planprice {
	margin-left: auto;
	white-space: nowrap;
	font-size: var(--t-xs);
	font-weight: var(--fw-medium);
	color: var(--text-3);
}
.ct__planbadge {
	padding: 0.15rem 0.45rem;
	border-radius: var(--r-1);
	background: var(--brand-700);
	font-size: var(--t-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--white);
}