/* ============================================
   USER REGISTRATION PAGE - ENTERPRISE-GRADE DESIGN
   Page: user-registration.html (Standalone)
   All styles scoped to #user-reg-page-wrapper
   ============================================ */

/* Component Imports */
@import '../components/variables.css';
@import '../components/utilities.css';
@import '../components/typography.css';
@import '../components/forms.css';
@import '../components/buttons.css';
@import '../components/common-ui.css';

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
#user-reg-page-wrapper {
	--sf-primary: #000000;
	--sf-secondary: #333333;
	--sf-accent: #1a1a1a;

	--sf-gray-50: #fafafa;
	--sf-gray-100: #f5f5f5;
	--sf-gray-150: #f0f0f0;
	--sf-gray-200: #e5e5e5;
	--sf-gray-250: #dddddd;
	--sf-gray-300: #d4d4d4;
	--sf-gray-400: #a3a3a3;
	--sf-gray-500: #737373;
	--sf-gray-600: #525252;
	--sf-gray-700: #404040;
	--sf-gray-800: #262626;
	--sf-gray-900: #171717;

	--sf-text-primary: #000000;
	--sf-text-secondary: #333333;
	--sf-text-muted: #666666;
	--sf-text-light: #64748b;
	--sf-border: #dddddd;
	--sf-border-light: #e5e5e5;
	--sf-bg-input: #fafafa;
	--sf-bg-white: #ffffff;

	--sf-gradient-primary: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);

	--sf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--sf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--sf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--sf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--sf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--sf-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--sf-shadow-primary: 0 6px 20px -6px rgba(0, 0, 0, 0.3);
	--sf-shadow-glow: 0 0 30px rgba(0, 0, 0, 0.08);

	--sf-glass-bg: rgba(255, 255, 255, 0.9);
	--sf-glass-border: rgba(229, 231, 235, 0.5);
	--sf-glass-blur: blur(16px);

	--sf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--sf-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--sf-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

	--sf-radius-sm: 6px;
	--sf-radius-md: 10px;
	--sf-radius-lg: 16px;
	--sf-radius-xl: 24px;
	--sf-radius-full: 9999px;
}

/* ============================================
   BODY & BACKGROUND
   ============================================ */
body.stafferin-page {
	font-family: 'Open Sans', sans-serif !important;
	-webkit-text-fill-color: inherit;
	background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
	min-height: 100vh !important;
	position: relative !important;
	overflow-x: hidden !important;
}

body.stafferin-page::before {
	content: '' !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 400px !important;
	background: linear-gradient(180deg, rgba(245, 245, 245, 0.5) 0%, transparent 100%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

body.stafferin-page::after {
	content: '' !important;
	position: fixed !important;
	top: -100px !important;
	right: -100px !important;
	width: 300px !important;
	height: 300px !important;
	background: radial-gradient(circle, rgba(0,0,0,0.02) 0%, transparent 70%) !important;
	border-radius: 50% !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
#user-reg-page-wrapper ::-webkit-scrollbar {
	width: 6px !important;
	height: 6px !important;
}

#user-reg-page-wrapper ::-webkit-scrollbar-track {
	background: var(--sf-gray-100) !important;
	border-radius: var(--sf-radius-full) !important;
}

#user-reg-page-wrapper ::-webkit-scrollbar-thumb {
	background: var(--sf-gray-300) !important;
	border-radius: var(--sf-radius-full) !important;
}

#user-reg-page-wrapper ::-webkit-scrollbar-thumb:hover {
	background: var(--sf-gray-400) !important;
}

/* ============================================
   TEXT VISIBILITY
   ============================================ */
#user-reg-page-wrapper,
#user-reg-page-wrapper *:not(i):not(.bi) {
	-webkit-text-fill-color: inherit;
}

#user-reg-page-wrapper h1,
#user-reg-page-wrapper h2,
#user-reg-page-wrapper h3,
#user-reg-page-wrapper h4,
#user-reg-page-wrapper h5,
#user-reg-page-wrapper h6 {
	color: var(--sf-text-primary) !important;
	-webkit-text-fill-color: var(--sf-text-primary) !important;
}

#user-reg-page-wrapper p,
#user-reg-page-wrapper span,
#user-reg-page-wrapper label {
	color: var(--sf-text-secondary) !important;
	-webkit-text-fill-color: var(--sf-text-secondary) !important;
}

#user-reg-page-wrapper .text-muted,
#user-reg-page-wrapper .small.text-muted {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
}

/* ============================================
   CARD - Glass Morphism
   ============================================ */
#user-reg-page-wrapper .card::before {
	content: '' !important;
	position: absolute !important;
	top: -50% !important;
	right: -20% !important;
	width: 40% !important;
	height: 200% !important;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) !important;
	transform: rotate(25deg) !important;
	animation: card-shimmer 6s infinite !important;
	opacity: 0.5 !important;
	pointer-events: none !important;
}

#user-reg-page-wrapper .card:hover {
	box-shadow: var(--sf-shadow-2xl), var(--sf-shadow-glow) !important;
	transform: translateY(-2px) !important;
}

#user-reg-page-wrapper .card::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: radial-gradient(circle at top right, rgba(255,255,255,0.8), transparent 60%) !important;
	pointer-events: none !important;
	opacity: 0.5 !important;
	z-index: -1 !important;
}

/* Card Header */
#user-reg-page-wrapper .card-title {
	color: var(--sf-text-primary) !important;
	-webkit-text-fill-color: var(--sf-text-primary) !important;
	font-weight: 700 !important;
	font-family: 'Poppins', sans-serif !important;
}

/* Card Body */
#user-reg-page-wrapper .card-body {
	position: relative !important;
	z-index: 1 !important;
}

/* ============================================
   FORM CONTROLS - Premium Styling
   ============================================ */
#user-reg-page-wrapper .form-control,
#user-reg-page-wrapper .form-select {
	border: 2px solid var(--sf-gray-200) !important;
	border-radius: var(--sf-radius-md) !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	color: var(--sf-gray-800) !important;
	-webkit-text-fill-color: var(--sf-gray-800) !important;
	background-color: var(--sf-bg-white) !important;
	padding: 0.875rem 1rem !important;
	transition: all var(--sf-transition-base) !important;
}

#user-reg-page-wrapper .form-control:hover,
#user-reg-page-wrapper .form-select:hover {
	border-color: var(--sf-gray-300) !important;
	background-color: var(--sf-gray-50) !important;
}

#user-reg-page-wrapper .form-control:focus,
#user-reg-page-wrapper .form-select:focus {
	border-color: var(--sf-primary) !important;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08), var(--sf-shadow-md) !important;
	background-color: var(--sf-bg-white) !important;
	outline: none !important;
	transform: translateY(-1px) !important;
}

#user-reg-page-wrapper .form-control::placeholder {
	color: var(--sf-gray-400) !important;
	-webkit-text-fill-color: var(--sf-gray-400) !important;
}

#user-reg-page-wrapper .form-control.is-invalid,
#user-reg-page-wrapper .form-select.is-invalid {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1) !important;
}

/* Floating Labels */
#user-reg-page-wrapper .form-floating > label {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
	font-weight: 500 !important;
}

#user-reg-page-wrapper .form-floating > .form-control:focus ~ label {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* ============================================
   MODAL-BODY (repurposed div)
   ============================================ */
#user-reg-page-wrapper .modal-body {
	padding: 0 !important;
	border: none !important;
}

/* ============================================
   OTP FLOW STYLING
   ============================================ */
/* Send OTP Button */
#user-reg-page-wrapper #btn-send-otp {
	background-color: var(--sf-bg-white) !important;
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
	border: 2px solid var(--sf-primary) !important;
	border-radius: var(--sf-radius-md) !important;
	font-weight: 600 !important;
	transition: all var(--sf-transition-base) !important;
}

#user-reg-page-wrapper #btn-send-otp:hover {
	background-color: var(--sf-primary) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--sf-shadow-md) !important;
}

/* OTP Sent Message */
#user-reg-page-wrapper #otp-sent-message {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* Verify OTP Button */
#user-reg-page-wrapper #btn-verify-otp {
	background-color: var(--sf-bg-white) !important;
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
	border: 2px solid var(--sf-primary) !important;
	border-radius: var(--sf-radius-md) !important;
	font-weight: 600 !important;
	transition: all var(--sf-transition-base) !important;
}

#user-reg-page-wrapper #btn-verify-otp:hover {
	background-color: var(--sf-primary) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--sf-shadow-md) !important;
}

/* Resend OTP */
#user-reg-page-wrapper #btn-resend-otp {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
}

#user-reg-page-wrapper #btn-resend-otp:hover {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* Verified Badge */
#user-reg-page-wrapper #otp-verified-message {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
	font-weight: 600 !important;
}

/* OTP Timer */
#user-reg-page-wrapper #otp-timer {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
}

#user-reg-page-wrapper #timer-countdown {
	font-weight: 700 !important;
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* ============================================
   PASSWORD TOGGLE
   ============================================ */
#user-reg-page-wrapper #toggle-password-button {
	background: none !important;
	border: none !important;
	color: var(--sf-gray-400) !important;
	-webkit-text-fill-color: var(--sf-gray-400) !important;
	cursor: pointer !important;
	z-index: 10 !important;
	transition: all var(--sf-transition-base) !important;
}

#user-reg-page-wrapper #toggle-password-button:hover {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
	transform: translateY(-50%) scale(1.1) !important;
}

#user-reg-page-wrapper #toggle-password-icon {
	color: var(--sf-gray-400) !important;
	-webkit-text-fill-color: var(--sf-gray-400) !important;
}

/* ============================================
   PASSWORD STRENGTH BAR
   ============================================ */
#user-reg-page-wrapper .progress {
	height: 4px !important;
	background-color: var(--sf-gray-150) !important;
	border-radius: var(--sf-radius-sm) !important;
	overflow: hidden !important;
}

#user-reg-page-wrapper #password-strength-bar {
	transition: width var(--sf-transition-slow), background-color var(--sf-transition-slow) !important;
	border-radius: var(--sf-radius-sm) !important;
	position: relative !important;
}

#user-reg-page-wrapper #password-strength-bar::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
	animation: shimmer 2s infinite !important;
	pointer-events: none !important;
}

/* Strength Text */
#user-reg-page-wrapper #password-strength-text {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
	font-size: 0.85rem !important;
}

/* ============================================
   PASSWORD REQUIREMENTS LIST
   ============================================ */
#user-reg-page-wrapper .list-unstyled li {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
	transition: all var(--sf-transition-base) !important;
	padding: 0.125rem 0 !important;
}

#user-reg-page-wrapper .list-unstyled li i {
	color: var(--sf-gray-400) !important;
	-webkit-text-fill-color: var(--sf-gray-400) !important;
	transition: all var(--sf-transition-base) !important;
}

/* Met state - using .text-success as JS typically adds this */
#user-reg-page-wrapper .list-unstyled li.text-success,
#user-reg-page-wrapper .list-unstyled li .bi-check-circle-fill {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* ============================================
   BUTTONS - Premium Interactions
   ============================================ */
#user-reg-page-wrapper .btn {
	font-weight: 600 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.02em !important;
	border-radius: var(--sf-radius-md) !important;
	transition: all var(--sf-transition-base) !important;
	position: relative !important;
	overflow: hidden !important;
}

#user-reg-page-wrapper .btn::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%) !important;
	opacity: 0 !important;
	transition: opacity var(--sf-transition-base) !important;
	pointer-events: none !important;
}

#user-reg-page-wrapper .btn:hover::before {
	opacity: 1 !important;
}

/* Primary Create Account Button */
#user-reg-page-wrapper .btn-primary {
	background-color: var(--sf-primary) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 2px solid var(--sf-primary) !important;
	box-shadow: var(--sf-shadow-sm) !important;
}

#user-reg-page-wrapper .btn-primary:hover {
	background-color: var(--sf-secondary) !important;
	border-color: var(--sf-secondary) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--sf-shadow-primary) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

#user-reg-page-wrapper .btn-primary:active {
	transform: translateY(0) !important;
	box-shadow: var(--sf-shadow-xs) !important;
}

/* Loading State */
#user-reg-page-wrapper .btn.loading {
	position: relative !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	pointer-events: none !important;
}

#user-reg-page-wrapper .btn.loading::after {
	content: '' !important;
	position: absolute !important;
	width: 20px !important;
	height: 20px !important;
	top: 50% !important;
	left: 50% !important;
	margin-left: -10px !important;
	margin-top: -10px !important;
	border: 3px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 50% !important;
	border-top-color: #fff !important;
	animation: spin 0.8s linear infinite !important;
}

#user-reg-page-wrapper .btn.loading::before {
	content: '' !important;
	position: absolute !important;
	inset: -4px !important;
	border: 2px solid var(--sf-primary) !important;
	border-radius: inherit !important;
	animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
	opacity: 1 !important;
}

/* ============================================
   LINKS - Hover Effects
   ============================================ */
#user-reg-page-wrapper a {
	text-decoration: none !important;
	position: relative !important;
	transition: all var(--sf-transition-base) !important;
	display: inline-block !important;
}

#user-reg-page-wrapper a::after {
	content: '' !important;
	position: absolute !important;
	bottom: -2px !important;
	left: 0 !important;
	width: 0 !important;
	height: 2px !important;
	background: var(--sf-primary) !important;
	transition: width var(--sf-transition-base) !important;
}

#user-reg-page-wrapper a:hover::after {
	width: 100% !important;
}

#user-reg-page-wrapper a:hover {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* Help & Footer Links */
#user-reg-page-wrapper .text-center.mb-4 a {
	color: var(--sf-text-muted) !important;
	-webkit-text-fill-color: var(--sf-text-muted) !important;
}

#user-reg-page-wrapper .text-center.mb-4 a:hover {
	color: var(--sf-primary) !important;
	-webkit-text-fill-color: var(--sf-primary) !important;
}

/* ============================================
   INVALID FEEDBACK
   ============================================ */
#user-reg-page-wrapper .invalid-feedback {
	color: #dc3545 !important;
	-webkit-text-fill-color: #dc3545 !important;
	font-size: 0.85rem !important;
}

/* ============================================
   CARD ENTRANCE ANIMATION
   ============================================ */
/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes card-shimmer {
	0% { transform: translateX(-100%) rotate(25deg); }
	100% { transform: translateX(300%) rotate(25deg); }
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
	0% { opacity: 0.6; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.15); }
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(40px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	#user-reg-page-wrapper *,
	#user-reg-page-wrapper *::before,
	#user-reg-page-wrapper *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

#user-reg-page-wrapper *:focus-visible {
	outline: 3px solid var(--sf-primary) !important;
	outline-offset: 2px !important;
	border-radius: var(--sf-radius-sm) !important;
}

#user-reg-page-wrapper .btn:focus-visible {
	outline: 3px solid var(--sf-primary) !important;
	outline-offset: 4px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 991.98px) {
	}

@media (max-width: 767.98px) {
	#user-reg-page-wrapper .card-body {
		padding: 1.25rem !important;
	}

	body.stafferin-page::after {
		display: none !important;
	}
}

@media (max-width: 575.98px) {
	#user-reg-page-wrapper .btn {
		padding: 0.75rem 1rem !important;
		font-size: 0.875rem !important;
	}

	#user-reg-page-wrapper .form-control {
		font-size: 0.875rem !important;
		padding: 0.75rem 0.875rem !important;
	}
}

@media (max-width: 400px) {
	#user-reg-page-wrapper .btn {
		font-size: 0.8rem !important;
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
	#user-reg-page-wrapper .btn {
		display: none !important;
	}

	body.stafferin-page::before,
	body.stafferin-page::after {
		display: none !important;
	}
}