/* Tryout registration form — inherits the theme's CSS custom properties
   (--surface, --primary, --text, --border, …) with safe fallbacks so it still
   looks right if the plugin is used outside the club-hockey theme. */

.ch-tryout {
	--ch-tryout-surface: var(--surface, #15181d);
	--ch-tryout-raised: var(--surface-raised, #1d2127);
	--ch-tryout-border: var(--border, #2c313a);
	--ch-tryout-text: var(--text, #f2f4f7);
	--ch-tryout-muted: var(--text-muted, #9aa3af);
	--ch-tryout-primary: var(--primary, #1c61b0);
	--ch-tryout-on-primary: var(--on-primary, #ffffff);

	max-width: var(--content-width, 1100px);
	margin: 0 auto;
	color: var(--ch-tryout-text);
}

.ch-tryout-form {
	background: var(--ch-tryout-surface);
	border: 1px solid var(--ch-tryout-border);
	border-radius: 10px;
	padding: 28px;
}

.ch-tryout-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
}

.ch-tryout-field {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.ch-tryout-field label {
	font-family: var(--font-heading, "Barlow Condensed", sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	margin-bottom: 6px;
	color: var(--ch-tryout-muted);
}

.ch-tryout-req {
	color: var(--ch-tryout-primary);
}

.ch-tryout-opt {
	color: var(--ch-tryout-muted);
	font-weight: 400;
	text-transform: none;
	font-size: 0.85em;
	letter-spacing: 0;
}

/* Grouped inputs (e.g. the top-3 jersey numbers) sit in one field, side by side. */
.ch-tryout-numgroup {
	display: flex;
	gap: 8px;
}
.ch-tryout-numgroup input {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	text-align: center;
}

/* Hide the up/down spinner arrows on number inputs in the form. */
.ch-tryout input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.ch-tryout input[type="number"]::-webkit-outer-spin-button,
.ch-tryout input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Make the native calendar icon visible (white) on the dark theme. */
.ch-tryout input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.8;
	cursor: pointer;
}

/* Dropdowns: drop the native arrow for a custom chevron with room from the edge. */
.ch-tryout-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%23c8d0da'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

/* Always-white input text, in every state. */
.ch-tryout-field input,
.ch-tryout-field select {
	color: #fff;
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
}

/* Browser autofill otherwise repaints fields with a light background and dark
   text — keep them on the form's dark surface with white text. */
.ch-tryout-field input:-webkit-autofill,
.ch-tryout-field input:-webkit-autofill:hover,
.ch-tryout-field input:-webkit-autofill:focus,
.ch-tryout-field input:-webkit-autofill:active,
.ch-tryout-field select:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px var(--ch-tryout-raised) inset;
	box-shadow: 0 0 0 1000px var(--ch-tryout-raised) inset;
	caret-color: #fff;
	transition: background-color 100000s ease-in-out 0s;
}

.ch-tryout-field input,
.ch-tryout-field select {
	width: 100%;
	/* background-color (not the `background` shorthand) so the select chevron's
	   background-image set elsewhere isn't reset to none. */
	background-color: var(--ch-tryout-raised);
	border: 1px solid var(--ch-tryout-border);
	border-radius: 6px;
	color: #fff;
	padding: 11px 13px;
	font-size: 1rem;
	line-height: 1.3;
}

.ch-tryout-field input:focus,
.ch-tryout-field select:focus {
	outline: none;
	border-color: var(--ch-tryout-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ch-tryout-primary) 35%, transparent);
}

.ch-tryout-field--invalid input,
.ch-tryout-field--invalid select {
	border-color: #dc3232;
}

.ch-tryout-submit {
	margin-top: 24px;
}

.ch-tryout-submit button {
	background: var(--ch-tryout-primary);
	color: var(--ch-tryout-on-primary);
	border: none;
	border-radius: 6px;
	padding: 14px 34px;
	font-family: var(--font-heading, "Barlow Condensed", sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.1rem;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ch-tryout-submit button:hover {
	filter: brightness(1.1);
}

/* Honeypot — visually and physically removed from layout, kept for bots. */
.ch-tryout-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ch-tryout-notice {
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
	border: 1px solid transparent;
}

.ch-tryout-notice--success {
	background: rgba(70, 180, 80, 0.12);
	border-color: rgba(70, 180, 80, 0.5);
}

.ch-tryout-notice--error {
	background: rgba(220, 50, 50, 0.12);
	border-color: rgba(220, 50, 50, 0.5);
}

.ch-tryout-notice p {
	margin: 0;
}

@media (max-width: 600px) {
	.ch-tryout-grid {
		grid-template-columns: 1fr;
	}
	.ch-tryout-form {
		padding: 20px;
	}
}