/* Minimal signup page styles - keeps consistent with STYLE.css variables */
:root {
	--accent: #16a34a
}

body {
	font-family: system-ui, Segoe UI, Roboto, Arial;
	background: linear-gradient(180deg, #f7fafc, #eef2f7);
	padding: 28px
}

.container {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06)
}

label {
	display: block;
	margin-top: 12px;
	font-weight: 700
}

input[type=text],
input[type=email],
input[type=password],
textarea {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 36, 0.06);
	margin-top: 6px
}

button {
	background: #16a34a;
	color: #fff;
	padding: 10px 14px;
	border-radius: 8px;
	border: none;
	font-weight: 700
}

.auth-btn {
	background: #16a34a;
	color: #fff;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none
}

small {
	color: #6b7280
}

/* Style the profile picture chooser like the donation choose-file button */
label[for="suAvatar"] {
	display: inline-block;
	background: #16a34a;
	/* green */
	color: #fff;
	border: none;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 700;
	margin-top: 8px;
}

label[for="suAvatar"]:hover {
	opacity: 0.95
}

label[for="suAvatar"]:focus {
	outline: 3px solid rgba(16, 185, 129, 0.18);
	outline-offset: 2px
}

/* hide the native file input so the styled label acts as the chooser */
#suAvatar {
	display: none
}