/* ---- Tokens ---- */
:root{
	--blue:rgb(26, 42, 108);
	--blue-light:rgb(38, 58, 140);
	--blue-dark:rgb(16, 28, 72);
	--green:rgb(34, 120, 69);
	--green-light:rgb(42, 148, 85);
	--green-dark:rgb(24, 90, 50);
	--white:#fff;
	--gray-50:#f8f9fa;
	--gray-100:#f0f1f3;
	--gray-200:#dce0e5;
	--gray-600:#6b7280;
	--gray-800:#1f2937;
	--radius:8px;
	--radius-lg:12px;
}

/* ---- Reset ---- */
*,*::before,*::after{
	box-sizing:border-box; margin:0; padding:0;
}

/* ---- Base ---- */
body{
	font-family:'Inter', system-ui, sans-serif;
	font-size:16px; line-height:1.6;
	color:var(--gray-800); background:var(--gray-50);
	min-height:100vh;
	display:flex; flex-direction:column;
}

/* ---- Header ---- */
header{
	background:var(--blue); color:var(--white);
	padding:2rem 1.5rem;
	text-align:center;
}

header h1{
	font-size:clamp(1.75rem, 4vw, 2.5rem); font-weight:400;
	letter-spacing:0.02em;
}

header h1 strong{
	font-weight:700;
}

header p{
	font-size:0.95rem; font-weight:400;
	color:rgba(255,255,255,0.75);
	margin-top:0.25rem;
}

/* ---- Main ---- */
main{
	flex:1;
	max-width:640px; width:100%;
	margin:0 auto;
	padding:2rem 1.5rem 3rem;
}

/* ---- Event Info Section ---- */
section[aria-labelledby="event-heading"]{
	background:var(--white);
	border-left:4px solid var(--green);
	border-radius:var(--radius);
	padding:1.5rem 1.75rem;
	margin-bottom:2rem;
	box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

section[aria-labelledby="event-heading"] h2{
	font-size:1.35rem; font-weight:700;
	color:var(--blue);
	margin-bottom:0.75rem;
}

section[aria-labelledby="event-heading"] p{
	font-size:0.95rem; line-height:1.7;
	color:var(--gray-800);
}

section[aria-labelledby="event-heading"] p + p{
	margin-top:0.5rem;
}

section[aria-labelledby="event-heading"] p strong{
	color:var(--blue-dark);
}

section[aria-labelledby="event-heading"] time{
	font-weight:600;
}

/* ---- Form ---- */
form{
	background:var(--white);
	border-radius:var(--radius-lg);
	padding:2rem 1.75rem;
	box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

form h2{
	font-size:1.35rem; font-weight:700;
	color:var(--blue);
	margin-bottom:1.5rem;
	padding-bottom:0.75rem;
	border-bottom:2px solid var(--gray-100);
}

form > label{
	display:block;
	font-size:0.85rem; font-weight:600;
	color:var(--blue-dark);
	margin-bottom:0.35rem; margin-top:1.25rem;
}

form > label:first-of-type{
	margin-top:0;
}

form > input,
form > select{
	display:block; width:100%;
	font-family:inherit; font-size:0.95rem;
	color:var(--gray-800); background:var(--gray-50);
	border:1px solid var(--gray-200); border-radius:var(--radius);
	padding:0.65rem 0.85rem;
	transition:border-color 0.15s, box-shadow 0.15s;
}

form > input:focus,
form > select:focus{
	outline:none;
	border-color:var(--blue-light);
	box-shadow:0 0 0 3px rgba(38,58,140,0.12);
}

/* ---- Checkbox fieldset ---- */
form > fieldset:first-of-type{
	border:none;
	margin-top:1.5rem;
	padding:1rem 1rem;
	background:linear-gradient(135deg, rgba(34,120,69,0.06), rgba(26,42,108,0.04));
	border-radius:var(--radius);
}

form > fieldset:first-of-type label{
	display:flex; align-items:flex-start; gap:0.65rem;
	cursor:pointer;
	font-size:0.95rem; font-weight:500;
	color:var(--blue-dark);
}

form > fieldset:first-of-type input[type="checkbox"]{
	width:20px; height:20px;
	margin-top:0.15rem; flex-shrink:0;
	accent-color:var(--green);
	cursor:pointer;
}

/* ---- Sale details (toggle) ---- */
#sale-details > label{
	display:block;
	font-size:0.85rem; font-weight:600;
	color:var(--blue-dark);
	margin-bottom:0.35rem; margin-top:1.25rem;
}

#sale-details > select{
	display:block; width:100%;
	font-family:inherit; font-size:0.95rem;
	color:var(--gray-800); background:var(--gray-50);
	border:1px solid var(--gray-200); border-radius:var(--radius);
	padding:0.65rem 0.85rem;
	cursor:pointer;
	transition:border-color 0.15s, box-shadow 0.15s;
}

#sale-details > select:focus{
	outline:none;
	border-color:var(--blue-light);
	box-shadow:0 0 0 3px rgba(38,58,140,0.12);
}

/* ---- Days fieldset ---- */
fieldset[aria-labelledby="days-heading"]{
	border:none;
	margin-top:1.5rem;
}

fieldset[aria-labelledby="days-heading"] legend{
	font-size:0.85rem; font-weight:600;
	color:var(--blue-dark);
	margin-bottom:0.75rem;
}

fieldset[aria-labelledby="days-heading"] ol{
	list-style:none;
	display:flex; flex-direction:column; gap:0.5rem;
}

fieldset[aria-labelledby="days-heading"] li{
	display:flex; align-items:flex-end; gap:0.5rem;
}

fieldset[aria-labelledby="days-heading"] li label{
	flex:1;
	display:flex; flex-direction:column; gap:0.3rem;
	font-size:0.8rem; font-weight:500;
	color:var(--gray-600);
}

fieldset[aria-labelledby="days-heading"] li input{
	font-family:inherit; font-size:0.95rem;
	color:var(--gray-800); background:var(--gray-50);
	border:1px solid var(--gray-200); border-radius:var(--radius);
	padding:0.65rem 0.85rem;
	width:100%;
	transition:border-color 0.15s, box-shadow 0.15s;
}

fieldset[aria-labelledby="days-heading"] li input:focus{
	outline:none;
	border-color:var(--blue-light);
	box-shadow:0 0 0 3px rgba(38,58,140,0.12);
}

.remove-day[hidden]{
	display:none;
}

.remove-day{
	width:36px; height:36px; flex-shrink:0;
	display:flex; align-items:center; justify-content:center;
	font-size:1.25rem; font-weight:600; line-height:1;
	color:var(--gray-600); background:var(--gray-100);
	border:1px solid var(--gray-200); border-radius:var(--radius);
	cursor:pointer;
	transition:background 0.15s, color 0.15s;
}

.remove-day:hover{
	background:#fee2e2; color:#dc2626;
	border-color:#fca5a5;
}

#add-day{
	display:inline-flex; align-items:center;
	font-family:inherit; font-size:0.85rem; font-weight:600;
	color:var(--green); background:none;
	border:1px dashed var(--green-light); border-radius:var(--radius);
	padding:0.5rem 1rem;
	margin-top:0.75rem;
	cursor:pointer;
	transition:background 0.15s, color 0.15s;
}

#add-day:hover{
	background:rgba(34,120,69,0.08);
}

/* ---- Volunteer checkbox ---- */
form > fieldset:last-of-type{
	border:none;
	margin-top:1.5rem;
	padding:1rem 1rem;
	background:linear-gradient(135deg, rgba(34,120,69,0.06), rgba(26,42,108,0.04));
	border-radius:var(--radius);
}

form > fieldset:last-of-type label{
	display:flex; align-items:flex-start; gap:0.65rem;
	cursor:pointer;
	font-size:0.95rem; font-weight:500;
	color:var(--blue-dark);
}

form > fieldset:last-of-type input[type="checkbox"]{
	width:20px; height:20px;
	margin-top:0.15rem; flex-shrink:0;
	accent-color:var(--green);
	cursor:pointer;
}

/* ---- Textarea ---- */
form > textarea{
	display:block; width:100%;
	font-family:inherit; font-size:0.95rem;
	color:var(--gray-800); background:var(--gray-50);
	border:1px solid var(--gray-200); border-radius:var(--radius);
	padding:0.65rem 0.85rem;
	resize:vertical;
	transition:border-color 0.15s, box-shadow 0.15s;
}

form > textarea:focus{
	outline:none;
	border-color:var(--blue-light);
	box-shadow:0 0 0 3px rgba(38,58,140,0.12);
}

/* ---- Submit ---- */
form > button[type="submit"]{
	display:block; width:100%;
	font-family:inherit; font-size:1rem; font-weight:600;
	color:var(--white); background:var(--green);
	border:none; border-radius:var(--radius);
	padding:0.85rem 1.5rem;
	margin-top:2rem;
	cursor:pointer;
	transition:background 0.15s, transform 0.1s;
}

form > button[type="submit"]:hover{
	background:var(--green-dark);
}

form > button[type="submit"]:active{
	transform:scale(0.985);
}

/* ---- Confirmation ---- */
#confirmation{
	text-align:center;
	background:var(--white);
	border-radius:var(--radius-lg);
	padding:3rem 2rem;
	box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

#confirmation h2{
	font-size:1.5rem; font-weight:700;
	color:var(--green);
	margin-bottom:0.5rem;
}

#confirmation p{
	font-size:1rem;
	color:var(--gray-600);
}

/* ---- Footer ---- */
footer{
	text-align:center;
	padding:1.5rem;
	font-size:0.8rem;
	color:var(--gray-600);
}

/* ---- Responsive ---- */
@media (max-width:480px){
	main{
		padding:1.25rem 1rem 2rem;
	}

	form{
		padding:1.5rem 1.25rem;
	}

	section[aria-labelledby="event-heading"]{
		padding:1.25rem;
	}
}