/*!
 * Register Module CSS - Gold Theme
 * Compatible with existing root.css variables
 */

/* ===== REGISTER SECTION ===== */
.register-section {
	padding: var(--spacing-3xl) 0;
	background: var(--dark-bg);
	min-height: calc(100vh - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ===== REGISTER FORM CONTAINER ===== */
.register-form-container {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--spacing-2xl);
	background: linear-gradient(135deg, rgba(1, 10, 19, 0.95) 0%, rgba(10, 20, 40, 0.95) 100%);
	border: 2px solid var(--border-color);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	position: relative;
	overflow: hidden;
}

.register-form-container::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(200, 155, 60, 0.05) 0%, transparent 70%);
	pointer-events: none;
}

/* ===== FORM STYLES ===== */
.form-horizontal {
	position: relative;
	z-index: 1;
}

.form-group {
	margin-bottom: var(--spacing-xl);
	transition: all var(--transition-base);
}

.form-group:last-child {
	margin-bottom: 0;
}

/* ===== FORM LABELS ===== */
.control-label {
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--primary-gold-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--spacing-sm);
	display: block;
	text-align: left;
}

/* ===== HELP BLOCK ===== */
.help-block {
	display: block;
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-xs);
	color: var(--text-tertiary);
	font-style: italic;
	line-height: var(--line-height-relaxed);
}

.help-block a {
	color: var(--primary-gold);
	text-decoration: none;
	font-weight: var(--font-weight-semibold);
	transition: all var(--transition-base);
	position: relative;
}

.help-block a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--gradient-gold);
	transition: width var(--transition-base);
}

.help-block a:hover {
	color: var(--primary-gold-light);
}

.help-block a:hover::after {
	width: 100%;
}

/* ===== RECAPTCHA CONTAINER ===== */
.g-recaptcha {
	display: inline-block;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

/* ===== TERMS OF SERVICE TEXT ===== */
.register-tos-text {
	padding: var(--spacing-md);
	background: rgba(200, 155, 60, 0.05);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: var(--line-height-relaxed);
}

.register-tos-text a {
	color: var(--primary-gold);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition: all var(--transition-base);
}

.register-tos-text a:hover {
	color: var(--primary-gold-light);
	text-decoration: underline;
}


/* ===== ALERT MESSAGES ===== */
.alert {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-xl);
	border: 2px solid;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.alert::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.1;
	background: linear-gradient(135deg, transparent 0%, currentColor 100%);
}

.alert-error {
	background: linear-gradient(135deg, rgba(209, 54, 57, 0.15) 0%, rgba(150, 40, 40, 0.1) 100%);
	border-color: var(--danger);
	color: #ff6b6b;
}

.alert-success {
	background: linear-gradient(135deg, rgba(10, 200, 185, 0.15) 0%, rgba(3, 151, 171, 0.1) 100%);
	border-color: var(--success);
	color: #5eead4;
}

.alert-warning {
	background: linear-gradient(135deg, rgba(200, 155, 60, 0.15) 0%, rgba(120, 90, 40, 0.1) 100%);
	border-color: var(--warning);
	color: var(--primary-gold-light);
}

/* ===== ADDITIONAL LINK (Login redirect) ===== */
.register-additional-link {
	text-align: center;
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--border-color);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.register-additional-link a {
	color: var(--primary-gold);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition: all var(--transition-base);
	margin-left: var(--spacing-xs);
}

.register-additional-link a:hover {
	color: var(--primary-gold-light);
	text-decoration: underline;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.register-section {
		padding: var(--spacing-xl) 0;
	}

	.page-title span {
		font-size: var(--font-size-2xl);
		letter-spacing: 1px;
	}

	.register-form-container {
		padding: var(--spacing-xl);
		border-radius: var(--radius-lg);
	}

	.form-group {
		margin-bottom: var(--spacing-lg);
	}

	.control-label {
		font-size: var(--font-size-xs);
		margin-bottom: var(--spacing-xs);
	}

	.form-control {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}

	.register-form-container .btn-primary,
	.form-horizontal .btn-primary[name="webengineRegister_submit"] {
		width: 100%;
		padding: var(--spacing-md) var(--spacing-xl);
		font-size: var(--font-size-sm);
	}

	.help-block {
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.page-title {
		padding: var(--spacing-md) 0;
		margin-bottom: var(--spacing-lg);
	}

	.page-title span {
		font-size: var(--font-size-xl);
	}

	.register-form-container {
		padding: var(--spacing-md);
	}

	.form-group {
		margin-bottom: var(--spacing-md);
	}

	.g-recaptcha {
		transform: scale(0.85);
		transform-origin: 0 0;
	}
}