@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
	--white: #ffffff;
	--cream: #fffaf1;
	--orange: #f59c06;
	--orange-dark: #cf7900;
	--blue: #36a9e1;
	--blue-dark: #177baa;
	--pink: #e71e77;
	--ink: #233240;
	--ink-soft: #5a6773;
	--line: #e5ded2;
	--danger: #b42318;
	--success: #16734b;
	--shadow: 0 24px 70px rgba(35, 50, 64, 0.12);
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 48px 20px 72px;
	color: var(--ink);
	background:
		radial-gradient(circle at 8% 8%, rgba(54, 169, 225, 0.2) 0 150px, transparent 151px),
		radial-gradient(circle at 94% 92%, rgba(231, 30, 119, 0.12) 0 210px, transparent 211px),
		var(--cream);
	font-family: 'Public Sans', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

[hidden] {
	display: none !important;
}

.form-container {
	width: min(100%, 900px);
	margin: 0 auto;
}

#registration-form {
	overflow: hidden;
	padding: clamp(24px, 5vw, 64px);
	border: 1px solid rgba(229, 222, 210, 0.9);
	border-radius: 28px;
	background: var(--white);
	box-shadow: var(--shadow);
}

#registration-form > header {
	position: relative;
	margin: -64px -64px 44px;
	padding: 52px 64px 48px;
	overflow: hidden;
	color: var(--white);
	background: var(--ink);
}

#registration-form > header::after {
	position: absolute;
	right: -30px;
	bottom: -72px;
	width: 210px;
	height: 150px;
	border-radius: 50% 50% 0 0;
	background: var(--orange);
	content: '';
	transform: rotate(-12deg);
}

h1,
h2 {
	position: relative;
	z-index: 1;
	margin: 0;
	color: inherit;
	font-family: 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.02em;
}

h1 {
	max-width: 650px;
	font-size: clamp(2.2rem, 6vw, 4.35rem);
	line-height: 0.98;
}

#form-intro {
	position: relative;
	z-index: 1;
	max-width: 650px;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.05rem;
}

section {
	margin-top: 42px;
	padding-top: 38px;
	border-top: 1px solid var(--line);
}

section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

h2 {
	margin-bottom: 10px;
	color: var(--ink);
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1.1;
}

section > p {
	max-width: 680px;
	margin-bottom: 24px;
	color: var(--ink-soft);
}

.field {
	margin-top: 22px;
}

.field > label,
.field > label:first-child {
	display: block;
	margin-bottom: 8px;
	color: var(--ink);
	font-weight: 700;
}

input[type='text'],
input[type='email'],
input[type='date'],
input[type='tel'],
textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 12px 15px;
	border: 2px solid var(--line);
	border-radius: 10px;
	outline: 0;
	color: var(--ink);
	background: #fffdf9;
	font: inherit;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

textarea {
	min-height: 108px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: #9ba3a9;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='date']:focus,
input[type='tel']:focus,
textarea:focus {
	border-color: var(--blue);
	background: var(--white);
	box-shadow: 0 0 0 4px rgba(54, 169, 225, 0.18);
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 18px 20px 14px;
	border: 2px solid var(--line);
	border-radius: 14px;
}

legend {
	max-width: 100%;
	padding: 0 7px;
	color: var(--ink);
	font-weight: 700;
}

fieldset p {
	margin: 0 0 10px;
	color: var(--ink-soft);
	font-size: 0.94rem;
}

fieldset label,
.terms > label,
.consent-label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: fit-content;
	max-width: 100%;
	margin: 9px 0;
	cursor: pointer;
}

input[type='radio'],
input[type='checkbox'] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--pink);
}

fieldset label:has(input:checked),
.terms > label:has(input:checked) {
	color: var(--pink);
	font-weight: 600;
}

.terms {
	margin-top: 22px;
	padding: 22px;
	border-left: 5px solid var(--orange);
	border-radius: 0 12px 12px 0;
	background: #fff8e9;
}

.terms p {
	margin: 0 0 14px;
	color: var(--ink-soft);
}

.field-help,
.privacy-notice {
	color: var(--ink-soft);
	font-size: 0.94rem;
}

.privacy-notice {
	margin: 30px 0 0;
}

.privacy-notice a {
	color: var(--blue-dark);
	font-weight: 600;
}

#form-errors,
#form-success {
	margin-top: 30px;
	padding: 15px 18px;
	border-radius: 10px;
	white-space: pre-line;
	font-weight: 600;
}

#form-errors {
	border: 1px solid #f3b5ae;
	color: var(--danger);
	background: #fff1ef;
}

#form-success {
	border: 1px solid #a9d9c2;
	color: var(--success);
	background: #edf9f2;
}

#submit-button {
	display: block;
	width: 100%;
	margin-top: 34px;
	padding: 16px 24px;
	border: 0;
	border-radius: 999px;
	color: var(--white);
	background: var(--pink);
	box-shadow: 0 10px 20px rgba(231, 30, 119, 0.2);
	font: 700 1rem 'Public Sans', sans-serif;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#submit-button:hover {
	background: #c11762;
	box-shadow: 0 14px 26px rgba(231, 30, 119, 0.26);
	transform: translateY(-2px);
}

#submit-button:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 4px;
}

#submit-button:active {
	transform: translateY(0);
}

@media (max-width: 640px) {
	body {
		padding: 16px 10px 36px;
	}

	#registration-form {
		padding: 24px 18px 30px;
		border-radius: 18px;
	}

	#registration-form > header {
		margin: -24px -18px 34px;
		padding: 40px 24px 42px;
	}

	fieldset {
		padding-inline: 14px;
	}

	.terms {
		padding: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}