/* 08-join.css — signup-and-pay, confirming, and login pages */

.bolao-join, .bolao-login {
	max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4);
	background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md); padding: var(--space-6);
}
.bolao-join label, .bolao-login label { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 600; color: var(--gray-700); }
.bolao-join input, .bolao-login input {
	height: 48px; padding: 0 var(--space-3); border: 2px solid var(--gray-300);
	border-radius: var(--radius-md); font-size: var(--size-base);
}
.bolao-join input:focus, .bolao-login input:focus { border-color: var(--brand-green); outline: none; }
.bolao-join__error { background: #fef2f2; color: #b91c1c; border-radius: var(--radius-md); padding: var(--space-3); }
.bolao-join__trust { font-size: var(--size-sm); color: var(--gray-500); text-align: center; }

/* WhatsApp country selector (intl-tel-input) — make the widget fill the form width. */
.bolao-join .iti { width: 100%; }
.bolao-join .iti__tel-input { width: 100%; }
.bolao-join input[aria-invalid="true"] { border-color: #dc2626; }
.bolao-join__field-error { margin-top: calc(-1 * var(--space-2)); color: #b91c1c; font-size: var(--size-sm); font-weight: 600; }

.bolao-confirming { max-width: 480px; margin: var(--space-16) auto; text-align: center; }
.bolao-spinner {
	width: 46px; height: 46px; margin: 0 auto var(--space-4); border-radius: 50%;
	border: 5px solid var(--tint-green); border-top-color: var(--brand-green);
	animation: bolao-spin .9s linear infinite;
}
@keyframes bolao-spin { to { transform: rotate(360deg); } }
.bolao-confirming__paid h2, .bolao-confirming__failed h2 { margin-bottom: var(--space-2); }