/* Runner-details form — see web/wordpress/style-guide/DESIGN_SYSTEM.md. */

.gcf-run {
	max-width: 760px;
	margin: 0 auto;
}

.gcf-run-note {
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.6;
}

.gcf-run-note--good {
	background: #eaf6fc;
	border: 1px solid #0093d0;
	color: #21293b;
}

.gcf-run-note--bad {
	background: #fff4e5;
	border: 1px solid #e8a23d;
	color: #21293b;
}

.gcf-run-entry {
	background: #eaf6fc;
	border: 1px solid #0093d0;
	border-radius: 16px;
	padding: 18px 22px;
	margin-bottom: 24px;
}

.gcf-run-entry strong {
	display: block;
	font-size: 16px;
	color: #21293b;
	margin-bottom: 4px;
}

.gcf-run-entry span {
	font-size: 14px;
	line-height: 1.6;
	color: #5c6270;
}

.gcf-run-block {
	background: #ffffff;
	border: 1px solid #21293b1a;
	border-radius: 16px;
	padding: 26px 28px;
	margin: 0 0 24px;
}

.gcf-run-block legend {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #21293b;
	padding: 0;
}

.gcf-run-intro {
	margin: 6px 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: #5c6270;
}

.gcf-run-hint {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #5c6270;
}

.gcf-run-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.gcf-run-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.gcf-run-field label {
	font-size: 13px;
	font-weight: 500;
	color: #21293b;
}

.gcf-run-req {
	color: #d9463a;
}

/* Two-class guard: the Elementor kit styles bare input/select/textarea, so a
   single-class selector loses on load order. */
.gcf-run .gcf-run-field input,
.gcf-run .gcf-run-field select,
.gcf-run .gcf-run-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	padding: 10px 14px;
	border: 1px solid #21293b1a;
	border-radius: 8px;
	background: #ffffff;
	color: #21293b;
}

.gcf-run .gcf-run-field textarea {
	resize: vertical;
}

.gcf-run .gcf-run-field input:focus,
.gcf-run .gcf-run-field select:focus,
.gcf-run .gcf-run-field textarea:focus {
	outline: none;
	border-color: #0093d0;
	box-shadow: 0 0 0 3px rgba(0, 147, 208, 0.18);
}

.gcf-run-field--error input,
.gcf-run-field--error select,
.gcf-run-field--error textarea {
	border-color: #d9463a;
}

.gcf-run-error {
	font-size: 12px;
	line-height: 1.5;
	color: #d9463a;
}

.gcf-run-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid #21293b1a;
	border-radius: 8px;
	background: #ffffff;
	margin-top: 16px;
	cursor: pointer;
}

.gcf-run-consent:focus-within {
	border-color: #0093d0;
	box-shadow: 0 0 0 3px rgba(0, 147, 208, 0.18);
}

.gcf-run-consent.gcf-run-field--error {
	border-color: #d9463a;
}

.gcf-run-consent input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #0093d0;
	cursor: pointer;
}

.gcf-run-consent > span {
	font-size: 14px;
	line-height: 1.55;
	color: #21293b;
}

.gcf-run-consent small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: #5c6270;
}

/* Shown by default and hidden only where :has() works, so a browser without it
   degrades to "always visible" rather than "never visible" — the latter would
   silently make it impossible to register a child. */
.gcf-run-guardian {
	display: block;
}

@supports selector(:has(*)) {
	.gcf-run-guardian {
		display: none;
	}

	.gcf-run-block:has(#gcf-run-is-minor:checked) .gcf-run-guardian {
		display: block;
	}
}

.gcf-run-waiver {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid #21293b1a;
	border-radius: 8px;
	padding: 16px 18px;
	background: #f6f6f6;
	font-size: 13px;
	line-height: 1.65;
	color: #5c6270;
	margin-bottom: 18px;
}

.gcf-run-waiver p {
	margin: 0 0 10px;
}

.gcf-run-waiver p:last-child {
	margin-bottom: 0;
}

.gcf-run .gcf-run-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: #0093d0;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 28px;
	cursor: pointer;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

.gcf-run .gcf-run-submit:hover {
	background: #0076a8;
	box-shadow: 0 4px 14px rgba(0, 147, 208, 0.3);
}

.gcf-run .gcf-run-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 147, 208, 0.18);
}

@media (max-width: 600px) {
	.gcf-run-block {
		padding: 20px 18px;
	}
}

/* Entry terms + kit collection, above the purchase form on the run's event page. */
.gcf-run-entry-notes {
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid #21293b1a;
	border-radius: 8px;
	background: #f6f6f6;
}

.gcf-run-entry-notes p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #5c6270;
}

.gcf-run-entry-notes p:last-child {
	margin-bottom: 0;
}

.gcf-run-entry-notes__terms {
	font-weight: 600;
	color: #21293b !important;
}

/* Event Tickets lays each ticket out as a grid of "title quantity" over
   "extra quantity", with no row for the description — so switching a ticket's
   description on drops it into cell 2/1, printing it on top of the price.
   Restacking as flex is more robust here than adding a grid row, which just
   pushes the description into the narrow quantity column.
   Doubled class and !important because Event Tickets' own rules are equally
   specific and load after ours. */
.gcf-event-tickets-card .tribe-tickets__tickets-item.tribe-tickets__tickets-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 12px;
	row-gap: 2px;
}

/* Event Tickets also sets per-child align-self (the stepper centred, the title
   end-aligned) for its grid; left alone those pull the two out of line here. */
.gcf-event-tickets-card .tribe-tickets__tickets-item > * {
	grid-area: auto !important;
	align-self: flex-start !important;
}

.gcf-event-tickets-card .tribe-tickets__tickets-item-content-title-container {
	flex: 1 1 auto !important;
	max-width: none !important;
	min-width: 0;
	order: 1;
}

.gcf-event-tickets-card .tribe-tickets__tickets-item-quantity {
	flex: 0 0 auto !important;
	margin-left: auto;
	order: 2;
}

.gcf-event-tickets-card .tribe-tickets__tickets-item-details-content {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	order: 3;
	margin: 2px 0 4px;
	font-size: 13px;
	line-height: 1.55;
	color: #5c6270;
}

.gcf-event-tickets-card .tribe-tickets__tickets-item-extra {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	order: 4;
}

.gcf-event-tickets-card .tribe-tickets__tickets-item-quantity-unavailable {
	color: #d9463a;
	font-weight: 600;
}