.main-content
{
	background-color: white;
	min-height: 100vh;
}

.signup-container
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.form-column
{
	background-color: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.package-column
{
	/* Sticky positioning for desktop/tablet views only */
}

/* Remove hover effects from package cards on signup page */
.package-card {
	transition: none !important;
}

.package-card:hover {
	transform: none !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Sticky package column for non-mobile devices with sufficient viewport height */
@media (min-width: 768px) and (min-height: 600px) {
	/* Apply sticky to the Bootstrap column containing the package */
	.signup-container .row .col-lg-5:last-child {
		position: sticky;
		top: 5rem;
		align-self: flex-start;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}

	/* Ensure the sticky container doesn't interfere with form layout */
	.signup-container .row {
		align-items: flex-start;
	}

	/* Package column should fill available height */
	.package-column {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}

/* Style package components in signup form context */
/* Removed - use main package-card styling */

/* Removed - use main package-header styling */

/* Removed - use main package-price styling */

/* Removed - use main feature-item styling */

/* Removed - use main feature-icon styling */

.form-floating > label
{
	padding-left: 0.75rem;
}

.btn-primary
{
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary:hover
{
	background-color: #d8931a;
	border-color: #d8931a;
}

.alert
{
	border-radius: 8px;
}

/* Bootstrap form validation styles */
.form-control.is-invalid,
.form-select.is-invalid
{
	border-color: #dc3545;
	background-color: #fff5f5;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus
{
	border-color: #dc3545;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid,
.form-select.is-valid
{
	border-color: #198754;
	background-color: #f0fff4;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus
{
	border-color: #198754;
	box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Checkbox validation styles */
.form-check-input.is-invalid
{
	border-color: #dc3545;
}

.form-check-input.is-invalid:focus
{
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.form-check-input.is-valid
{
	border-color: #198754;
}

.form-check-input.is-valid:focus
{
	box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Field error messages */
.field-error
{
	color: #dc3545;
	font-size: 0.8125rem;
	font-weight: 500;
	margin-top: 0.375rem;
	margin-bottom: 0.5rem;
	display: none;
	line-height: 1.3;
	padding-left: 0.125rem;
}

.field-error.show
{
	display: block !important;
	animation: fadeInError 0.2s ease-in;
}

.field-success
{
	color: #198754;
	font-size: 0.8125rem;
	font-weight: 500;
	margin-top: 0.375rem;
	margin-bottom: 0.5rem;
	display: none;
	line-height: 1.3;
	padding-left: 0.125rem;
}

.field-success.show
{
	display: block;
	animation: fadeInSuccess 0.2s ease-in;
}

/* Smooth error message animations */
@keyframes fadeInError {
	from { opacity: 0; transform: translateY(-2px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSuccess {
	from { opacity: 0; transform: translateY(-2px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Adjust spacing for fields with validation messages */
.col-md-6.mb-2:has(.field-error.show),
.col-md-4.mb-2:has(.field-error.show),
.col-12.mb-2:has(.field-error.show) {
	margin-bottom: 1rem !important;
}

.mb-3:has(.field-error.show) {
	margin-bottom: 1.5rem !important;
}

@media (max-width: 768px)
{
	.signup-container
	{
		padding: 1rem 0.5rem;
	}

	.form-column, .package-column
	{
		padding: 1.5rem;
	}
}