/*
 * Skyrocket Radio Forms — front end.
 * Inherits the theme's fonts and colours; only layout and states are opinionated.
 * Every rule is scoped to .srrf-wrap (not a body class) so it survives
 * StreamPlayer SPA navigation.
 */
.srrf-wrap {
	--srrf-gap: 16px;
	--srrf-border: rgba(0, 0, 0, .22);
	--srrf-border-focus: #2271b1;
	--srrf-error: #c02b2b;
	--srrf-error-bg: #fdf2f2;
	--srrf-muted: rgba(0, 0, 0, .62);
	--srrf-radius: 4px;
	--srrf-accent: #2271b1;
	--srrf-accent-ink: #fff;
	margin: 0 0 1.5em;
	box-sizing: border-box;
}
.srrf-wrap *,
.srrf-wrap *::before,
.srrf-wrap *::after { box-sizing: inherit; }

.srrf-title { margin: 0 0 .4em; }
.srrf-form-description { margin: 0 0 1.2em; }
.srrf-form { margin: 0; }

/* 12-column rows. */
.srrf-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 var(--srrf-gap);
}
.srrf-field { grid-column: span 12; margin: 0 0 1.25em; min-width: 0; }
.srrf-field[hidden],
.srrf-vis-hidden { display: none !important; }
.srrf-col-1 { grid-column: span 1; } .srrf-col-2 { grid-column: span 2; } .srrf-col-3 { grid-column: span 3; }
.srrf-col-4 { grid-column: span 4; } .srrf-col-5 { grid-column: span 5; } .srrf-col-6 { grid-column: span 6; }
.srrf-col-7 { grid-column: span 7; } .srrf-col-8 { grid-column: span 8; } .srrf-col-9 { grid-column: span 9; }
.srrf-col-10 { grid-column: span 10; } .srrf-col-11 { grid-column: span 11; } .srrf-col-12 { grid-column: span 12; }
@media (max-width: 640px) {
	.srrf-row > .srrf-field { grid-column: span 12; }
}

/* Labels. */
.srrf-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.srrf-label {
	display: block;
	margin: 0 0 .35em;
	padding: 0;
	font-weight: 700;
	line-height: 1.35;
}
legend.srrf-label { float: left; width: 100%; }
legend.srrf-label + * { clear: both; }
.srrf-req { color: var(--srrf-error); font-weight: 400; margin-left: 2px; }
.srrf-label-hidden > .srrf-label,
.srrf-label-hidden > .srrf-fieldset > .srrf-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.srrf-desc,
.srrf-file-note,
.srrf-range-note,
.srrf-counter { font-size: .875em; color: var(--srrf-muted); margin: .35em 0 0; line-height: 1.45; }
.srrf-desc p:last-child { margin-bottom: 0; }

/* Left/right label placement (desktop only). */
@media (min-width: 641px) {
	.srrf-labels-left .srrf-field:not(.srrf-field--section):not(.srrf-field--html),
	.srrf-labels-right .srrf-field:not(.srrf-field--section):not(.srrf-field--html) {
		display: grid;
		grid-template-columns: minmax(120px, 30%) 1fr;
		gap: 0 16px;
		align-items: start;
	}
	.srrf-labels-left .srrf-field > *:not(.srrf-label),
	.srrf-labels-right .srrf-field > *:not(.srrf-label) { grid-column: 2; }
	.srrf-labels-left .srrf-field > .srrf-label,
	.srrf-labels-right .srrf-field > .srrf-label { grid-column: 1; grid-row: 1 / span 4; padding-top: .45em; }
	.srrf-labels-right .srrf-field > .srrf-label { text-align: right; }
	.srrf-labels-left .srrf-fieldset,
	.srrf-labels-right .srrf-fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 0 16px; }
	.srrf-labels-left .srrf-fieldset > *,
	.srrf-labels-right .srrf-fieldset > * { grid-column: 2; }
	.srrf-labels-left .srrf-fieldset > legend,
	.srrf-labels-right .srrf-fieldset > legend { grid-column: 1; float: none; }
}

/* Controls. */
.srrf-wrap input[type="text"],
.srrf-wrap input[type="email"],
.srrf-wrap input[type="tel"],
.srrf-wrap input[type="url"],
.srrf-wrap input[type="number"],
.srrf-wrap input[type="date"],
.srrf-wrap input[type="time"],
.srrf-wrap input[type="password"],
.srrf-wrap select,
.srrf-wrap textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: .55em .75em;
	border: 1px solid var(--srrf-border);
	border-radius: var(--srrf-radius);
	font: inherit;
	line-height: 1.4;
	background-clip: padding-box;
}
.srrf-wrap textarea { min-height: 120px; resize: vertical; }
.srrf-wrap select[multiple] { min-height: 120px; }
.srrf-wrap input:focus,
.srrf-wrap select:focus,
.srrf-wrap textarea:focus {
	outline: 2px solid var(--srrf-border-focus);
	outline-offset: 1px;
	border-color: var(--srrf-border-focus);
}
.srrf-size-small .srrf-control > input,
.srrf-size-small .srrf-control > select { max-width: 220px; }
.srrf-size-medium .srrf-control > input,
.srrf-size-medium .srrf-control > select { max-width: 420px; }
.srrf-wrap input[readonly] { background: rgba(0, 0, 0, .04); }

/* Sub-inputs (name, address, email confirm). */
.srrf-subs { display: grid; gap: .75em var(--srrf-gap); }
.srrf-subs--name { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.srrf-subs--name .srrf-sub--2,
.srrf-subs--name .srrf-sub--8 { max-width: 140px; }
.srrf-subs--2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.srrf-subs--address { grid-template-columns: 1fr 1fr; }
.srrf-subs--address .srrf-sub--1,
.srrf-subs--address .srrf-sub--2 { grid-column: 1 / -1; }
@media (max-width: 480px) { .srrf-subs--address { grid-template-columns: 1fr; } }
.srrf-sub { display: flex; flex-direction: column; min-width: 0; }
.srrf-sublabel { font-size: .82em; color: var(--srrf-muted); margin: .3em 0 0; }
.srrf-sublabels-above .srrf-sublabel { margin: 0 0 .3em; }

/* Choices. */
.srrf-choices { display: grid; gap: .4em var(--srrf-gap); }
.srrf-choices--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srrf-choices--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.srrf-choices--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .srrf-choices[class*="--cols-"] { grid-template-columns: 1fr; } }
.srrf-choice { display: flex; align-items: flex-start; gap: .55em; line-height: 1.4; }
.srrf-choice input[type="checkbox"],
.srrf-choice input[type="radio"] { width: 1.15em; height: 1.15em; margin: .15em 0 0; flex: none; accent-color: var(--srrf-accent); }
.srrf-choice label { margin: 0; font-weight: 400; cursor: pointer; }
.srrf-choice--other { flex-wrap: wrap; align-items: center; }
.srrf-choice--other .srrf-other-text { flex: 1 1 200px; width: auto; min-height: 38px; }
.srrf-select-all {
	justify-self: start;
	background: none;
	border: 0;
	padding: 0;
	color: var(--srrf-accent);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	font-size: .9em;
}
.srrf-price { white-space: nowrap; opacity: .85; }

.srrf-consent { margin-top: .1em; }
.srrf-consent-text {
	margin-top: .6em;
	max-height: 160px;
	overflow: auto;
	padding: .6em .8em;
	border: 1px solid var(--srrf-border);
	border-radius: var(--srrf-radius);
	font-size: .875em;
}

/* Section / HTML. */
.srrf-field--section { margin-top: .75em; }
.srrf-section-title {
	margin: 0 0 .3em;
	padding: 0 0 .35em;
	border-bottom: 1px solid var(--srrf-border);
}
.srrf-section-desc { color: var(--srrf-muted); }
.srrf-page-title { margin: 0 0 .8em; }

/* File upload. */
.srrf-file input[type="file"] {
	display: block;
	width: 100%;
	padding: .8em;
	border: 2px dashed var(--srrf-border);
	border-radius: var(--srrf-radius);
	background: rgba(0, 0, 0, .02);
	cursor: pointer;
}
.srrf-file-list { list-style: none; margin: .5em 0 0; padding: 0; font-size: .9em; }
.srrf-file-list li { padding: .15em 0; }
.srrf-file-list li.is-error { color: var(--srrf-error); }

/* List field. */
.srrf-list-table { width: 100%; border-collapse: collapse; margin: 0; }
.srrf-list-table th { text-align: left; font-weight: 600; font-size: .875em; padding: 0 .5em .3em 0; }
.srrf-list-table td { padding: 0 .5em .5em 0; vertical-align: middle; border: 0; }
.srrf-list-actions { width: 1%; white-space: nowrap; }
.srrf-list-actions button {
	width: 36px;
	height: 36px;
	margin-left: 4px;
	border: 1px solid var(--srrf-border);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* Pricing. */
.srrf-product-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.5em; }
.srrf-product-price { font-size: 1.1em; font-weight: 700; }
.srrf-product-qty { display: inline-flex; align-items: center; gap: .5em; }
.srrf-product-qty label { margin: 0; font-weight: 400; }
.srrf-wrap .srrf-product-qty input { width: 80px; min-height: 38px; }
.srrf-total { display: block; font-size: 1.35em; font-weight: 700; }

/* Errors. */
.srrf-error:empty { display: none; }
.srrf-error { margin: .4em 0 0; color: var(--srrf-error); font-size: .9em; font-weight: 600; }
.srrf-has-error input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.srrf-has-error select,
.srrf-has-error textarea { border-color: var(--srrf-error); }
.srrf-has-error .srrf-file input[type="file"] { border-color: var(--srrf-error); }
.srrf-summary {
	margin: 0 0 1.25em;
	padding: .9em 1.1em;
	border: 1px solid var(--srrf-error);
	border-left-width: 5px;
	border-radius: var(--srrf-radius);
	background: var(--srrf-error-bg);
	color: #6b1515;
}
.srrf-summary p { margin: 0; font-weight: 700; }
.srrf-summary ul { margin: .5em 0 0 1.2em; padding: 0; }
.srrf-summary a { color: inherit; }
.srrf-summary:focus { outline: 2px solid var(--srrf-error); outline-offset: 2px; }

/* Progress. */
.srrf-progress { margin: 0 0 1.5em; }
.srrf-progress-label { font-weight: 700; margin: 0 0 .4em; }
.srrf-progress-name { font-weight: 400; }
.srrf-progress-track { height: 22px; border-radius: 11px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.srrf-progress-bar {
	height: 100%;
	min-width: 2.5em;
	border-radius: 11px;
	background: var(--srrf-accent);
	color: var(--srrf-accent-ink);
	font-size: 12px;
	line-height: 22px;
	text-align: right;
	padding: 0 8px;
	transition: width .3s ease;
}
.srrf-steps { display: flex; flex-wrap: wrap; gap: .5em 1.5em; list-style: none; margin: 0; padding: 0; }
.srrf-step { display: flex; align-items: center; gap: .5em; color: var(--srrf-muted); }
.srrf-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid currentColor;
	font-weight: 700;
	font-size: .85em;
}
.srrf-step.is-current { color: inherit; font-weight: 700; }
.srrf-step.is-current .srrf-step-num { background: var(--srrf-accent); border-color: var(--srrf-accent); color: var(--srrf-accent-ink); }
.srrf-step.is-done .srrf-step-num { border-color: var(--srrf-accent); color: var(--srrf-accent); }

/* Buttons. */
.srrf-footer { display: flex; flex-wrap: wrap; gap: .75em; align-items: center; margin: .5em 0 0; }
.srrf-captcha { flex-basis: 100%; margin: 0 0 .5em; }
.srrf-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 44px;
	padding: .6em 1.6em;
	border: 0;
	border-radius: var(--srrf-radius);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.srrf-btn[hidden] { display: none; }
.srrf-btn--submit,
.srrf-btn--next { background: var(--srrf-accent); color: var(--srrf-accent-ink); }
.srrf-btn--submit:hover,
.srrf-btn--next:hover { filter: brightness(1.08); }
.srrf-btn--prev { background: transparent; border: 1px solid var(--srrf-border); color: inherit; }
.srrf-btn:focus-visible { outline: 2px solid var(--srrf-border-focus); outline-offset: 2px; }
.srrf-btn[disabled] { opacity: .7; cursor: progress; }
.srrf-spinner { display: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: srrf-spin .7s linear infinite; }
.srrf-btn.is-busy .srrf-spinner { display: inline-block; }
@keyframes srrf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .srrf-spinner { animation-duration: 2s; } .srrf-progress-bar { transition: none; } }

/* Confirmation / notices. */
.srrf-confirmation {
	padding: 1.1em 1.3em;
	border-left: 5px solid #1f8a3b;
	border-radius: var(--srrf-radius);
	background: #f0f9f2;
}
.srrf-confirmation:focus { outline: none; }
.srrf-confirmation > :last-child { margin-bottom: 0; }
.srrf-notice { padding: 1em 1.2em; border-radius: var(--srrf-radius); background: rgba(0, 0, 0, .04); }
.srrf-notice > :last-child { margin-bottom: 0; }

/* Honeypot: off-screen, not display:none (some bots skip hidden inputs). */
.srrf-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.srrf-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.srrf-noscript { color: var(--srrf-error); font-weight: 700; }

/* ── Dark scheme ─────────────────────────────────────────────────────
 * .srrf-scheme-dark is set by the form/site setting, or by forms.js when
 * "Match the page" finds a dark background behind the form. Fields go
 * translucent so they sit naturally on any dark colour; text follows the
 * section's own (light) text colour.
 */
.srrf-wrap.srrf-scheme-dark {
	--srrf-border: rgba(255, 255, 255, .22);
	--srrf-border-focus: #7aa7ff;
	--srrf-error: #ff8a8a;
	--srrf-error-bg: rgba(255, 90, 90, .12);
	--srrf-muted: rgba(255, 255, 255, .66);
	--srrf-field-bg: rgba(255, 255, 255, .07);
	--srrf-field-ink: #f5f5f7;
	color-scheme: dark;
}
.srrf-wrap.srrf-scheme-dark .srrf-form { background: transparent !important; }
.srrf-wrap.srrf-scheme-dark .srrf-label,
.srrf-wrap.srrf-scheme-dark .srrf-choice label,
.srrf-scheme-dark .srrf-section-title,
.srrf-scheme-dark .srrf-page-title,
.srrf-scheme-dark .srrf-title,
.srrf-scheme-dark .srrf-progress-label,
.srrf-scheme-dark .srrf-list-table th { color: inherit !important; }
.srrf-wrap.srrf-scheme-dark .srrf-sublabel { color: var(--srrf-muted) !important; }
.srrf-wrap.srrf-scheme-dark input[type="text"],
.srrf-wrap.srrf-scheme-dark input[type="email"],
.srrf-wrap.srrf-scheme-dark input[type="tel"],
.srrf-wrap.srrf-scheme-dark input[type="url"],
.srrf-wrap.srrf-scheme-dark input[type="number"],
.srrf-wrap.srrf-scheme-dark input[type="date"],
.srrf-wrap.srrf-scheme-dark input[type="time"],
.srrf-wrap.srrf-scheme-dark input[type="password"],
.srrf-wrap.srrf-scheme-dark select,
.srrf-wrap.srrf-scheme-dark textarea {
	/* !important: srr-launch prints `input, select, textarea { background: … !important }`
	   from Site Options. A colour actually set on a builder block still wins (ID selector). */
	background-color: var(--srrf-field-bg) !important;
	color: var(--srrf-field-ink) !important;
	border-color: var(--srrf-border) !important;
}
.srrf-wrap.srrf-scheme-dark select option { background: #1c1c21; color: #f5f5f7; }
.srrf-wrap.srrf-scheme-dark ::placeholder { color: rgba(255, 255, 255, .45); opacity: 1; }
.srrf-wrap.srrf-scheme-dark input[readonly] { background-color: rgba(255, 255, 255, .03); }
.srrf-wrap.srrf-scheme-dark .srrf-file input[type="file"] { background: rgba(255, 255, 255, .04) !important; color: inherit !important; border-color: var(--srrf-border) !important; }
/* A station button colour too dark to see on a dark section gets a light outline (set by forms.js). */
.srrf-scheme-dark .srrf-btn.srrf-btn-lowcontrast { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.srrf-scheme-dark .srrf-section-title { border-bottom-color: var(--srrf-border); }
.srrf-scheme-dark .srrf-progress-track { background: rgba(255, 255, 255, .12); }
.srrf-scheme-dark .srrf-btn--prev { color: inherit; border-color: var(--srrf-border); }
.srrf-scheme-dark .srrf-list-actions button { border-color: var(--srrf-border); }
.srrf-scheme-dark .srrf-summary { background: var(--srrf-error-bg); border-color: var(--srrf-error); color: #ffd6d6; }
.srrf-scheme-dark .srrf-confirmation { background: rgba(74, 222, 128, .1); border-left-color: #4ade80; }
.srrf-scheme-dark .srrf-notice { background: rgba(255, 255, 255, .06); }
.srrf-scheme-dark .srrf-consent-text { border-color: var(--srrf-border); }
.srrf-scheme-dark .srrf-step.is-done .srrf-step-num { color: inherit; }