/*--------------------------------------------------------------
# Registration form
#
# The SteelyToe widget draws the entry form from its own stylesheet - Pure CSS
# with a decade of overrides on top: system sans-serif, grey inset inputs, a
# blue button, white-on-red error fields. Nothing in it knows this site. This
# file sits after it on the pages that carry the shortcode and re-dresses the
# same markup in the theme's own vocabulary: paper fields on the bone page,
# rule borders, teal focus, mono running heads, the CTA button.
#
# Every rule is scoped to #steelytoeRegContainer, so it outranks the vendor
# rules without !important and touches nothing else on the page. The markup
# is the plugin's, not ours, so the selectors are the plugin's classes and
# the field ids the event defines (evpaEmail, evpaName ...). The ids are the
# same in both languages; only the labels change.
--------------------------------------------------------------*/

#steelytoeRegContainer {
	--rf-ink: var(--wp--preset--color--ink);
	--rf-muted: var(--wp--preset--color--muted);
	--rf-teal: var(--wp--preset--color--teal);
	--rf-red: var(--wp--preset--color--red);
	--rf-bone: var(--wp--preset--color--bone);
	--rf-paper: var(--wp--preset--color--paper);
	--rf-paper-alt: var(--wp--preset--color--paper-alt);
	--rf-rule: var(--wp--preset--color--rule);
	--rf-ring: rgba(14, 99, 87, 0.2);
	--rf-mono: var(--wp--preset--font-family--ibm-plex-mono);
	--rf-sans: var(--wp--preset--font-family--archivo);
	--rf-radius: 3px;
	--rf-field-h: 48px;

	font-family: var(--rf-sans);
	color: var(--rf-ink);
}

/* The shortcode sits in a paragraph, and a div cannot: the browser closes the
   <p> first, so the container lands as a direct child of the constrained
   content block and takes the column's width and centring like any other
   block. The measure is set one level down, so the form starts at the column's
   left edge under the title instead of floating in the middle of it. */
#steelytoeRegContainer > * {
	max-width: 680px;
}

/* The widget's own loading line arrives with an inline colour. */
#steelytoeRegContainer > h5 {
	font-family: var(--rf-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left !important;
	color: var(--rf-muted) !important;
}

#steelytoeRegContainer .pure-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/*--------------------------------------------------------------
# Running heads
#
# One fieldset, fourteen fields, no grouping - the plugin does not group them,
# so the page reads as a single column of questions. The heads below cut it
# into the five things being asked for. They hang off the field that opens
# each part, so the vendor can reorder or rename labels and they still land;
# they only go missing if the field itself does, which is the right failure.
# Both languages, keyed off the container's lang attribute.
--------------------------------------------------------------*/

#steelytoeRegContainer .pure-control-group:has(> #evpaEvncId),
#steelytoeRegContainer .pure-control-group:has(> #evpaEmail),
#steelytoeRegContainer .pure-control-group:has(> #evpaName),
#steelytoeRegContainer .pure-control-group:has(> #evpaStrava),
#steelytoeRegContainer .pure-control-group:has(> #evpaEmergencyContactName) {
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--rf-rule);
}

#steelytoeRegContainer .pure-control-group:has(> #evpaEvncId) {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#steelytoeRegContainer .pure-control-group:has(> #evpaEvncId)::before,
#steelytoeRegContainer .pure-control-group:has(> #evpaEmail)::before,
#steelytoeRegContainer .pure-control-group:has(> #evpaName)::before,
#steelytoeRegContainer .pure-control-group:has(> #evpaStrava)::before,
#steelytoeRegContainer .pure-control-group:has(> #evpaEmergencyContactName)::before {
	display: block;
	margin-bottom: 14px;
	font-family: var(--rf-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rf-teal);
}

#steelytoeRegContainer .pure-control-group:has(> #evpaEvncId)::before { content: "Your entry"; }
#steelytoeRegContainer .pure-control-group:has(> #evpaEmail)::before { content: "Contact"; }
#steelytoeRegContainer .pure-control-group:has(> #evpaName)::before { content: "About you"; }
#steelytoeRegContainer .pure-control-group:has(> #evpaStrava)::before { content: "Social profile"; }
#steelytoeRegContainer .pure-control-group:has(> #evpaEmergencyContactName)::before { content: "Emergency contact"; }

#steelytoeRegContainer[lang="ID"] .pure-control-group:has(> #evpaEvncId)::before { content: "Pendaftaran"; }
#steelytoeRegContainer[lang="ID"] .pure-control-group:has(> #evpaEmail)::before { content: "Kontak"; }
#steelytoeRegContainer[lang="ID"] .pure-control-group:has(> #evpaName)::before { content: "Tentang Anda"; }
#steelytoeRegContainer[lang="ID"] .pure-control-group:has(> #evpaStrava)::before { content: "Profil sosial"; }
#steelytoeRegContainer[lang="ID"] .pure-control-group:has(> #evpaEmergencyContactName)::before { content: "Kontak darurat"; }

/*--------------------------------------------------------------
# Fields
--------------------------------------------------------------*/

#steelytoeRegContainer .pure-form-stacked .pure-control-group {
	margin-bottom: 22px;
}

#steelytoeRegContainer .pure-form label {
	display: block;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--rf-ink);
}

/* The hint the vendor puts between label and field: italic grey with a
   stray left padding. Set as a sub-line of the label instead. */
#steelytoeRegContainer .pure-control-group small {
	display: block;
	margin: -4px 0 10px;
	padding: 0;
	font-size: 14px;
	font-style: normal;
	line-height: 1.45;
	color: var(--rf-muted);
}

#steelytoeRegContainer .pure-form input[type="text"],
#steelytoeRegContainer .pure-form input[type="email"],
#steelytoeRegContainer .pure-form input[type="number"],
#steelytoeRegContainer .pure-form input[type="tel"],
#steelytoeRegContainer .pure-form input[type="url"],
#steelytoeRegContainer .pure-form input[type="date"],
#steelytoeRegContainer .pure-form input[type="password"],
#steelytoeRegContainer .pure-form input:not([type]),
#steelytoeRegContainer .pure-form select,
#steelytoeRegContainer .pure-form textarea {
	display: block;
	width: 100%;
	height: var(--rf-field-h);
	margin: 0;
	padding: 0 14px;
	font-family: var(--rf-sans);
	font-size: 16px; /* Under 16px iOS zooms the page on focus. */
	line-height: 1.4;
	color: var(--rf-ink);
	background-color: var(--rf-paper);
	border: 1px solid var(--rf-rule);
	border-radius: var(--rf-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#steelytoeRegContainer .pure-form textarea {
	height: auto;
	min-height: 120px;
	padding: 12px 14px;
	resize: vertical;
}

#steelytoeRegContainer .pure-form input::placeholder,
#steelytoeRegContainer .pure-form textarea::placeholder {
	color: var(--rf-muted);
	opacity: 0.7;
}

#steelytoeRegContainer .pure-form input:hover,
#steelytoeRegContainer .pure-form select:hover,
#steelytoeRegContainer .pure-form textarea:hover {
	border-color: var(--wp--preset--color--ink-soft);
}

#steelytoeRegContainer .pure-form input:focus,
#steelytoeRegContainer .pure-form select:focus,
#steelytoeRegContainer .pure-form textarea:focus {
	outline: none;
	border-color: var(--rf-teal);
	box-shadow: 0 0 0 3px var(--rf-ring);
}

/* The phone fields are type=number, which puts a spinner on them. */
#steelytoeRegContainer .pure-form input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

#steelytoeRegContainer .pure-form input[type="number"]::-webkit-outer-spin-button,
#steelytoeRegContainer .pure-form input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#steelytoeRegContainer .pure-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230E6357' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 14px;
	cursor: pointer;
}

#steelytoeRegContainer .pure-form select[multiple] {
	height: auto;
	padding-right: 14px;
	background-image: none;
}

/* Short answers get short fields. A three-option select or a two-digit age
   stretched to the full measure reads as a text box waiting for an essay. */
#steelytoeRegContainer .pure-form #evpaEvncId,
#steelytoeRegContainer .pure-form #evpaExperienceBJ,
#steelytoeRegContainer .pure-form #evpaGender {
	max-width: 320px;
}

#steelytoeRegContainer .pure-form #evpaYourAge {
	max-width: 140px;
}

#steelytoeRegContainer .pure-form input[disabled],
#steelytoeRegContainer .pure-form select[disabled],
#steelytoeRegContainer .pure-form textarea[disabled],
#steelytoeRegContainer .pure-form input[readonly],
#steelytoeRegContainer .pure-form select[readonly],
#steelytoeRegContainer .pure-form textarea[readonly] {
	color: var(--rf-muted);
	background-color: var(--rf-paper-alt);
	border-color: var(--rf-rule);
	cursor: not-allowed;
}

/*--------------------------------------------------------------
# Validation
#
# The vendor marks a bad field by filling it red with white text, which is
# the one state where the value needs to stay readable. Red border, faint
# red fill, ink text; the message under it in red.
--------------------------------------------------------------*/

/* Written out one class heavier than the field rules above, which carry an
   attribute selector each and would otherwise outrank this. */
#steelytoeRegContainer .pure-form .STformInput.error,
#steelytoeRegContainer .pure-form input:focus:invalid,
#steelytoeRegContainer .pure-form select:focus:invalid,
#steelytoeRegContainer .pure-form textarea:focus:invalid {
	color: var(--rf-ink);
	background-color: #fff3f1;
	border-color: var(--rf-red);
}

#steelytoeRegContainer .pure-form .STformInput.error:focus {
	border-color: var(--rf-red);
	box-shadow: 0 0 0 3px rgba(216, 44, 47, 0.18);
}

#steelytoeRegContainer span.error,
#steelytoeRegContainer span.success,
#steelytoeRegContainer .pure-form-message,
#steelytoeRegContainer .pure-form-message-inline {
	display: block;
	margin-top: 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

#steelytoeRegContainer span.error { color: var(--rf-red); }
#steelytoeRegContainer span.success { color: var(--rf-teal); }
#steelytoeRegContainer .pure-form-message,
#steelytoeRegContainer .pure-form-message-inline { color: var(--rf-muted); }

/* "Registration Closed", API failures, quota reached. */
#steelytoeRegContainer div.steelytoeErrorBox {
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--rf-ink);
	background-color: var(--rf-paper);
	border: 1px solid var(--rf-rule);
	border-left: 4px solid var(--rf-red);
	border-radius: var(--rf-radius);
}

/*--------------------------------------------------------------
# Consent and submit
--------------------------------------------------------------*/

#steelytoeRegContainer .pure-controls {
	margin: 36px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--rf-rule);
}

#steelytoeRegContainer .pure-form .pure-checkbox,
#steelytoeRegContainer .pure-form .pure-radio {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

#steelytoeRegContainer .pure-form input[type="checkbox"],
#steelytoeRegContainer .pure-form input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	float: none;
	background-color: var(--rf-paper);
	border: 1.5px solid var(--rf-rule);
	border-radius: var(--rf-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#steelytoeRegContainer .pure-form input[type="radio"] {
	border-radius: 50%;
}

#steelytoeRegContainer .pure-form input[type="checkbox"]:hover,
#steelytoeRegContainer .pure-form input[type="radio"]:hover {
	border-color: var(--rf-teal);
}

#steelytoeRegContainer .pure-form input[type="checkbox"]:focus-visible,
#steelytoeRegContainer .pure-form input[type="radio"]:focus-visible {
	outline: none;
	border-color: var(--rf-teal);
	box-shadow: 0 0 0 3px var(--rf-ring);
}

#steelytoeRegContainer .pure-form input[type="checkbox"]:checked,
#steelytoeRegContainer .pure-form input[type="radio"]:checked {
	background-color: var(--rf-teal);
	border-color: var(--rf-teal);
	background-repeat: no-repeat;
	background-position: center;
}

#steelytoeRegContainer .pure-form input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23EAE6D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.5'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}

#steelytoeRegContainer .pure-form input[type="radio"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23EAE6D9'/%3E%3C/svg%3E");
	background-size: 8px 8px;
}

/* The buttons. Primary is the site's CTA; the rest (payment choices, back)
   take the ghost form of it. */
#steelytoeRegContainer .pure-button {
	display: inline-block;
	height: auto;
	margin: 12px 12px 0 0;
	padding: 15px 26px;
	font-family: var(--rf-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rf-teal);
	background-color: transparent;
	background-image: none;
	border: 1.5px solid var(--rf-teal);
	border-radius: 2px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#steelytoeRegContainer .pure-button:hover,
#steelytoeRegContainer .pure-button:focus {
	color: var(--rf-bone);
	background-color: var(--rf-teal);
	background-image: none;
	filter: none;
}

#steelytoeRegContainer .pure-button:focus-visible {
	outline: 2px solid var(--rf-teal);
	outline-offset: 3px;
}

#steelytoeRegContainer .pure-button:active {
	box-shadow: none;
	transform: translateY(1px);
}

#steelytoeRegContainer .pure-button-primary,
#steelytoeRegContainer a.pure-button-primary,
#steelytoeRegContainer .pure-button-selected,
#steelytoeRegContainer .button-success {
	min-width: 180px;
	color: var(--rf-bone);
	background-color: var(--rf-teal);
	border-color: var(--rf-teal);
}

#steelytoeRegContainer .pure-button-primary:hover,
#steelytoeRegContainer .pure-button-primary:focus,
#steelytoeRegContainer .button-success:hover,
#steelytoeRegContainer .button-success:focus {
	background-color: var(--rf-ink);
	border-color: var(--rf-ink);
}

/* Disabled is not "faded primary" - it is its own state, one the reader has
   to get past by ticking the box above it. */
#steelytoeRegContainer .pure-button[disabled],
#steelytoeRegContainer .pure-button-disabled,
#steelytoeRegContainer .pure-button-primary[disabled] {
	color: var(--rf-muted);
	background-color: var(--rf-rule);
	background-image: none;
	border-color: var(--rf-rule);
	opacity: 1;
	filter: none;
	cursor: not-allowed;
	transform: none;
}

#steelytoeRegContainer .pure-controls .pure-button {
	margin-top: 20px;
}

/*--------------------------------------------------------------
# After submit: the summary and payment tables
--------------------------------------------------------------*/

#steelytoeRegContainer .pure-table {
	width: 100%;
	margin: 20px 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--rf-ink);
	background-color: var(--rf-paper);
	border: 1px solid var(--rf-rule);
	border-collapse: collapse;
	border-radius: var(--rf-radius);
}

#steelytoeRegContainer .pure-table th,
#steelytoeRegContainer .pure-table td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--rf-rule);
}

#steelytoeRegContainer .pure-table th {
	font-family: var(--rf-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rf-teal);
	background-color: var(--rf-paper-alt);
}

#steelytoeRegContainer .pure-table tr:last-child td {
	border-bottom: 0;
}

#steelytoeRegContainer .pure-table-odd td,
#steelytoeRegContainer .pure-table-striped tr:nth-child(2n-1) td {
	background-color: transparent;
}

#steelytoeRegContainer .pure-table .text-right,
#steelytoeRegContainer .pure-table .colAmount,
#steelytoeRegContainer .pure-table .colPrice {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

#steelytoeRegContainer .invoiceDetails,
#steelytoeRegContainer .bankInfo,
#steelytoeRegContainer .pInfo {
	font-size: 15px;
	line-height: 1.6;
}

#steelytoeRegContainer .pure-form legend {
	display: block;
	width: 100%;
	margin: 28px 0 14px;
	padding: 0 0 8px;
	font-family: var(--rf-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rf-teal);
	border-bottom: 1px solid var(--rf-rule);
}

/*--------------------------------------------------------------
# Narrow screens
--------------------------------------------------------------*/

@media (max-width: 600px) {
	#steelytoeRegContainer .pure-form #evpaEvncId,
	#steelytoeRegContainer .pure-form #evpaExperienceBJ,
	#steelytoeRegContainer .pure-form #evpaGender {
		max-width: none;
	}

	#steelytoeRegContainer .pure-button {
		display: block;
		width: 100%;
		margin-right: 0;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	#steelytoeRegContainer .pure-form input,
	#steelytoeRegContainer .pure-form select,
	#steelytoeRegContainer .pure-form textarea,
	#steelytoeRegContainer .pure-button {
		transition: none;
	}
}