/* ==========================================================================
   Registration form — skin over Fluent Forms markup.
   Every selector below targets classes Fluent Forms already outputs, so the
   form stays fully editable in the Fluent Forms builder.
   ========================================================================== */

.slt-formwrap {
	position: relative;
	isolation: isolate;
}

/* Halftone dot field, as in the mockup's right edge. Drawn, not downloaded. */
.frm-fluent-form .slt-card--1::before {
	content: "";
	position: absolute;
	top: 34%;
	right: 1.4rem;
	width: clamp(80px, 11vw, 150px);
	height: clamp(110px, 15vw, 200px);
	background-image: radial-gradient(circle, #ffe600 30%, transparent 31%);
	background-size: 14px 14px;
	-webkit-mask: radial-gradient(ellipse at 72% 18%, #000 4%, rgba(0, 0, 0, 0.6) 40%, transparent 76%);
	mask: radial-gradient(ellipse at 72% 18%, #000 4%, rgba(0, 0, 0, 0.6) 40%, transparent 76%);
	pointer-events: none;
}

@media (max-width: 900px) {
	.frm-fluent-form .slt-card--1::before { display: none; }
}

.frm-fluent-form {
	font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
	position: relative;
}

.frm-fluent-form fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Section headings — the numbered highlighter chips
   -------------------------------------------------------------------------- */

.frm-fluent-form .ff-el-group.ff-el-section-break {
	border: 0;
	padding: 0 0 0 clamp(0.9rem, 2vw, 1.5rem);
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 -0.85rem;
	background: none;
	position: relative;
	z-index: 2;
}

.frm-fluent-form .ff-el-section-break hr,
.frm-fluent-form .ff-section_break_desk {
	display: none;
}

.frm-fluent-form .ff-el-section-title {
	display: inline-block;
	position: relative;
	isolation: isolate;
	margin: 0;
	padding: 0.06em 0.42em 0.02em;
	font-family: Anton, "Arial Narrow", sans-serif;
	font-weight: 400;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(1.15rem, 2.4vw, 1.7rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--slt-black);
}

.frm-fluent-form .ff-el-section-title::before {
	content: "";
	position: absolute;
	inset: 0.1em -0.04em 0.02em -0.04em;
	background: var(--slt-yellow);
	-webkit-mask: url(../img/hl-stroke.svg) center / 100% 100% no-repeat;
	mask: url(../img/hl-stroke.svg) center / 100% 100% no-repeat;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   Section cards (wrapper built by site.js)
   -------------------------------------------------------------------------- */

.frm-fluent-form .slt-card {
	border: 1px solid var(--slt-line);
	border-radius: var(--slt-radius);
	padding: clamp(1.6rem, 3.4vw, 2.5rem) clamp(1.1rem, 2.8vw, 2rem) clamp(1.1rem, 2.8vw, 2rem);
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	position: relative;
}

/* The Financial Freedom badge the mockup pins to the first card. */
.frm-fluent-form .slt-card--1 {
	padding-right: clamp(1.1rem, 19%, 11rem);
}

.frm-fluent-form .slt-card--1::after {
	content: "";
	position: absolute;
	top: clamp(0.6rem, 1.6vw, 1.1rem);
	right: clamp(0.6rem, 1.6vw, 1.1rem);
	width: clamp(64px, 9vw, 118px);
	aspect-ratio: 1;
	background: url(/wp-content/uploads/2026/08/Sticker_FinancialFreedom.png) center / contain no-repeat;
	pointer-events: none;
}

@media (max-width: 782px) {
	.frm-fluent-form .slt-card--1 {
		padding-right: clamp(1.1rem, 2.8vw, 2rem);
	}

	.frm-fluent-form .slt-card--1::after {
		width: 54px;
		opacity: 0.5;
	}
}

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

/* Spacing between one field and the next. This has to stay clearly LARGER than the
   gap between a label and its own input below, or every label reads as belonging to
   the field above it. Roughly 3x. */
.frm-fluent-form .ff-el-group {
	margin-bottom: clamp(1.1rem, 2.4vw, 1.45rem);
}

/* 🔴 NEVER write this as a bare `.ff-el-group:last-child`. Fluent Forms puts each
   field of a multi-column row in its own `.ff-t-cell`, so inside a cell EVERY group
   is a last-child — a bare rule silently zeroed the gap between every stacked field
   on a phone, and between every row on desktop. Only the last thing in a CARD should
   lose its bottom margin. */
.frm-fluent-form .slt-card > .ff-el-group:last-child {
	margin-bottom: 0;
}

/* ⚠ And do NOT extend that to `.slt-card > .ff-t-container:last-child .ff-el-group`
   either — on a phone the cells of that container stack, so it zeroes the gap between
   every field in the last row. The cost of leaving it out is one extra gap of dead
   space at the bottom of a card that ends in a column row. That is the cheaper bug. */

.frm-fluent-form .ff-el-input--label label {
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--slt-black);
	/* Tight on purpose — the label belongs to the input directly beneath it. */
	margin-bottom: 0.5rem;
	display: inline-block;
}

.frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--slt-red);
	font-weight: 700;
	margin-left: 0.2em;
}

.frm-fluent-form .ff-el-form-control {
	width: 100%;
	font-family: Inter, sans-serif;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--slt-black);
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 9px;
	padding: 0.72rem 0.85rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: none;
	height: auto;
}

.frm-fluent-form .ff-el-form-control::placeholder {
	color: #a8a8a8;
	opacity: 1;
}

.frm-fluent-form .ff-el-form-control:hover {
	border-color: #bdbdbd;
}

.frm-fluent-form .ff-el-form-control:focus {
	outline: none;
	border-color: var(--slt-black);
	box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.55);
}

.frm-fluent-form select.ff-el-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1.5 1.5 10 10l8.5-8.5' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.85rem;
	padding-right: 2.4rem;
}

/* Phone field: keep the country flag control aligned with the new box. */
.frm-fluent-form .iti { width: 100%; }

.frm-fluent-form .ff-el-phone {
	padding-left: 3.2rem;
}

/* --------------------------------------------------------------------------
   Checkboxes and radios
   -------------------------------------------------------------------------- */

.frm-fluent-form .ff-el-form-check {
	margin-bottom: 0.55rem;
}

.frm-fluent-form .ff-el-form-check:last-child {
	margin-bottom: 0;
}

.frm-fluent-form .ff-el-form-check-inline {
	display: inline-flex;
	margin-right: 1.5rem;
	margin-bottom: 0;
}

.frm-fluent-form .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-family: Inter, sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--slt-black);
	cursor: pointer;
}

.frm-fluent-form .ff-el-form-check-label .ff_item_selectable,
.frm-fluent-form .ff-el-form-check-label > span {
	display: block;
}

/* The consent boxes carry no visible field label, so the required marker has to
   ride on the option text — the mockup shows a red asterisk after each one.
   ⚠ TRAP 2 AGAIN: the plugin kills both pseudo-elements on this span with
   `.ff-default .ff-el-form-check label.ff-el-form-check-label > span::after { content: none }`
   which is (0,3,2). A shallower selector loses SILENTLY — the asterisks simply
   never appear. Match the plugin's depth; this one is (0,5,2).
   ⚠ Scoped to .slt-terms-grid ON PURPOSE: the Seashell Ownership checkbox in card 1
   carries the same .slt-check class BUT has a visible field label that already renders
   its own red asterisk. Unscoped, that field shows TWO asterisks for one question. */
.frm-fluent-form .slt-terms-grid .slt-check .ff-el-form-check label.ff-el-form-check-label > span::after {
	content: " *";
	color: var(--slt-red);
	font-weight: 700;
}

.frm-fluent-form .ff-el-form-check-input {
	appearance: none;
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0.1rem 0 0;
	border: 1.7px solid #b4b4b4;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
	position: relative;
}

.frm-fluent-form .ff-el-form-check-checkbox {
	border-radius: 5px;
}

.frm-fluent-form .ff-el-form-check-radio {
	border-radius: 50%;
}

.frm-fluent-form .ff-el-form-check-input:hover {
	border-color: var(--slt-black);
}

.frm-fluent-form .ff-el-form-check-checkbox:checked {
	background: var(--slt-black);
	border-color: var(--slt-black);
}

.frm-fluent-form .ff-el-form-check-checkbox:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 0.34rem;
	height: 0.62rem;
	border: solid var(--slt-yellow);
	border-width: 0 2.2px 2.2px 0;
	transform: translate(-50%, -55%) rotate(42deg);
}

.frm-fluent-form .ff-el-form-check-radio:checked {
	border-color: var(--slt-black);
	border-width: 2px;
}

.frm-fluent-form .ff-el-form-check-radio:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--slt-black);
}

.frm-fluent-form .ff-el-form-check-input:focus-visible {
	outline: 3px solid rgba(255, 255, 0, 0.75);
	outline-offset: 1px;
}

.frm-fluent-form .ff-el-form-check-label a {
	color: #b89a00;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.frm-fluent-form .ff-el-form-check-label a:hover {
	color: var(--slt-black);
}

/* --------------------------------------------------------------------------
   Player accordions
   -------------------------------------------------------------------------- */

.frm-fluent-form .ff-accordion-container.ff-accordion-container {
	border: 1.6px solid var(--slt-yellow);
	border-radius: 11px;
	margin-bottom: 0.85rem;
	overflow: hidden;
	background: #fff;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	padding: 0.6rem 3rem 0.6rem 0.95rem;
	cursor: pointer;
	background: #fff;
	border: 0;
	transition: background-color 0.15s ease;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-header:hover {
	background: #fffce0;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-header .ff-accordion-title {
	font-family: Anton, "Arial Narrow", sans-serif;
	font-weight: 400;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(0.95rem, 1.7vw, 1.2rem);
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--slt-black);
	display: inline-block;
	width: auto;
	max-width: calc(100% - 1rem);
	flex: 0 1 auto;
}

/* Player 1 and 2 carry the mockup's filled yellow chip; the collapsed ones do not. */
.frm-fluent-form .ff-accordion-container .ff-accordion-header-open .ff-accordion-title {
	background: var(--slt-yellow);
	padding: 0.08em 0.5em 0.02em;
	border-radius: 4px;
}

/* Replace the plugin's icon with the mockup's circled plus / minus. */
.frm-fluent-form .ff-accordion-container .ff-accordion-header .ff-accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	border: 1.6px solid var(--slt-yellow);
	border-radius: 50%;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-icon {
	display: none;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-toggle::before,
.frm-fluent-form .ff-accordion-container .ff-accordion-toggle::after {
	content: "";
	position: absolute;
	background: #d9bf00;
	border-radius: 2px;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-toggle::before {
	width: 0.72rem;
	height: 2px;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-toggle::after {
	width: 2px;
	height: 0.72rem;
}

.frm-fluent-form .ff-accordion-container .ff-accordion-header-open .ff-accordion-toggle::after {
	opacity: 0;
	transform: rotate(90deg);
}

.frm-fluent-form .ff-accordion-container .ff-accordion-content {
	padding: 0.35rem 0.95rem 1.1rem;
}

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */

/* Fluent Forms writes flex-basis inline on every cell, so an outer `gap` would
   push the total past 100% and wrap the last column. Gutters therefore come
   from padding inside the cells, which the inline percentages can absorb. */
.frm-fluent-form .ff-t-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-inline: calc(-1 * var(--slt-gutter, 0.6rem));
	width: auto;
}

.frm-fluent-form .ff-t-cell {
	padding-inline: var(--slt-gutter, 0.6rem);
	min-width: 0;
	box-sizing: border-box;
}

/* 🔴 TRAP 2 AGAIN. Above 768px the plugin zeroes the outer padding with
   `.frm-fluent-form .ff-t-cell:first-of-type { padding-left: 0 }` — (0,3,0), one
   step deeper than the rule above, so it wins. The negative margin on the
   container then has nothing to cancel and the whole row hangs OUTSIDE the card:
   the captain's name started ~10px left of every single-column field, and the
   consent columns escaped the card on both sides. Restore the padding at (0,4,0).
   The container's negative margin plus this padding is what makes a two-column row
   line up with a full-width one. */
.frm-fluent-form .ff-t-container > .ff-t-cell:first-of-type {
	padding-left: var(--slt-gutter, 0.6rem);
}

.frm-fluent-form .ff-t-container > .ff-t-cell:last-of-type {
	padding-right: var(--slt-gutter, 0.6rem);
}

.frm-fluent-form .slt-terms-grid {
	--slt-gutter: clamp(0.75rem, 2vw, 1.5rem);
}

/* The six consent boxes are TWO plugin columns, each stacking on its own, so the
   rows drifted apart as soon as one line of text wrapped — item 2 on the left sat
   41px above item 2 on the right. Turning the container into a real grid and making
   the plugin's two cells transparent (`display: contents`) puts all six groups into
   ONE grid with three shared rows. `grid-auto-flow: column` keeps the reading order
   the plugin gave us: 1-2-3 down the left, 4-5-6 down the right, each pair sharing a
   row height. Desktop only — below 769px the plugin stacks everything into one column
   and this must not apply. */
@media (min-width: 769px) {
	.frm-fluent-form .slt-terms-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		column-gap: calc(var(--slt-gutter) * 2);
		row-gap: clamp(0.9rem, 2vw, 1.25rem);
		margin-inline: 0;
	}

	/* ⚠ These carry the plugin's inline flex-basis and our gutter padding. Making them
	   transparent drops both, which is why the container's negative margin is reset to
	   0 above — otherwise the whole block hangs outside the card again. */
	.frm-fluent-form .slt-terms-grid > .ff-t-cell {
		display: contents;
	}

	/* row-gap does the spacing now */
	.frm-fluent-form .slt-terms-grid .ff-el-group {
		margin-bottom: 0;
	}
}

.frm-fluent-form .slt-note {
	font-family: Inter, sans-serif;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #4a4a4a;
	margin: 0;
}

.frm-fluent-form .slt-note-wrap {
	margin-bottom: clamp(1rem, 2.4vw, 1.4rem);
}

/* --------------------------------------------------------------------------
   Turnstile
   -------------------------------------------------------------------------- */

/* Cloudflare's own boxed widget, sitting between the last card and the button.
   Centred so it lines up with the Submit button rather than the form's left edge. */
.frm-fluent-form [name="cf-turnstile-response"] {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   Errors
   -------------------------------------------------------------------------- */

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--slt-red);
	background: #fff7f8;
}

.frm-fluent-form .text-danger,
.frm-fluent-form .error.text-danger {
	font-family: Inter, sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--slt-red);
	margin-top: 0.35rem;
	line-height: 1.35;
}

.frm-fluent-form .ff-errors-in-stack {
	border: 1px solid var(--slt-red);
	background: #fff7f8;
	border-radius: 9px;
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
	color: var(--slt-red);
	font-size: 0.9rem;
}

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

.frm-fluent-form .slt-submit {
	text-align: center;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.frm-fluent-form .ff-btn-submit {
	font-family: Anton, "Arial Narrow", sans-serif;
	font-weight: 400;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	line-height: 1;
	padding: 1.05rem 2.6rem 0.95rem;
	border-radius: 999px;
	border: 0;
	background: var(--slt-red);
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
	min-width: min(280px, 100%);
}

.frm-fluent-form .ff-btn-submit:hover {
	background: var(--slt-black);
	transform: translateY(-1px);
}

.frm-fluent-form .ff-btn-submit:focus-visible {
	outline: 3px solid var(--slt-yellow);
	outline-offset: 3px;
}

.frm-fluent-form .ff-message-success {
	border: 1px solid var(--slt-line);
	border-radius: var(--slt-radius);
	background: var(--slt-cream);
	padding: clamp(1.25rem, 3vw, 2rem);
	font-family: Inter, sans-serif;
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.frm-fluent-form .ff_columns_total_4 > .ff-t-cell {
		flex-basis: 50% !important;
	}
}

@media (max-width: 640px) {
	/* Must be at least as specific as the 900px rule above, which also matches
	   here — otherwise the four-column player rows stay two-across on a phone
	   and every placeholder is cut off. */
	.frm-fluent-form .ff-t-container > .ff-t-cell,
	.frm-fluent-form .ff_columns_total_4 > .ff-t-cell,
	.frm-fluent-form .ff_columns_total_2 > .ff-t-cell {
		flex-basis: 100% !important;
	}

	.frm-fluent-form .ff-el-form-control {
		font-size: 16px; /* stops iOS zooming the page on focus */
	}

	.frm-fluent-form .ff-btn-submit {
		width: 100%;
	}
}

/* ==========================================================================
   REGISTRATION CLOSED — the notice above the form, and the form behind it.
   Printed only while SLT_REGISTRATION_OPEN is false (inc/registration-closed.php).
   ========================================================================== */
.slt-closed {
	border: 2px solid var(--slt-black);
	border-radius: var(--slt-radius);
	background: var(--slt-yellow-soft);
	padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem);
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
	text-align: center;
}

.slt-closed__title {
	font-family: Anton, "Arial Narrow", Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.05;
	letter-spacing: 0.01em;
	font-size: clamp(1.35rem, 4.5vw, 2rem);
	color: var(--slt-black);
	margin: 0;
	text-wrap: balance;
}

.slt-closed__text {
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp(0.95rem, 2.4vw, 1.15rem);
	color: var(--slt-muted);
	margin: 0.5rem 0 0 !important;
	text-wrap: balance;
}

/* The form stays fully visible — it just reads as unavailable. `pointer-events`
   is the fallback for browsers that do not support the `inert` attribute the
   wrapper also carries. */
.slt-closed-form {
	pointer-events: none;
	opacity: 0.55;
}

.slt-closed-form .ff-btn-submit,
.slt-closed-form input,
.slt-closed-form select,
.slt-closed-form textarea {
	cursor: not-allowed;
}