/* ============================================
   LOOGAR - Dark Elegant Dating App Styles
   Bootstrap 5 + Custom Dark Theme
============================================ */

/* ============================================
   CSS VARIABLES & THEME COLORS
============================================ */
:root {
	/* Primary Brand Colors - Based on Design */
	--primary-color: #000971;
	--primary-dark: #0056b3;
	--primary-light: #049dd9;
	--secondary-color: #6c757d;
	--secondary-dark: #495057;
	--secondary-light: #adb5bd;

	/* Accent Colors */
	--accent-blue: #007bff;
	--accent-light-blue: #e3f2fd;
	--accent-success: #28a745;

	/* Dark Theme Colors */
	--dark-primary: #000000;
	--dark-secondary: #1a1a1a;
	--dark-tertiary: #2d2d2d;
	--dark-quaternary: #3a3a3a;
	--dark-overlay: rgba(0, 0, 0, 0.8);

	/* Neutral Colors */
	--white: #ffffff;
	--light-gray: #f8f9fa;
	--gray-100: #f1f3f4;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;

	/* Semantic Colors */
	--success: #28a745;
	--warning: #ffc107;
	--danger: #dc3545;
	--info: #17a2b8;

	/* Typography */
	--font-primary: "Domine", "Inter", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, serif;
	--font-heading: "Domine", "Poppins", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, serif;

	/* Spacing & Design */
	--border-radius: 8px;
	--border-radius-sm: 4px;
	--border-radius-lg: 16px;
	--box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
	--box-shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.3);
	--transition: all 0.3s ease;
}

/* ============================================
   GOOGLE FONTS IMPORT
============================================ */
@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap");

/* ============================================
   GLOBAL STYLES & RESETS
============================================ */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-primary);
	font-weight: 400;
	line-height: 1.6;
	color: var(--gray-800);
	background-color: var(--dark-primary);
	overflow-x: hidden;
}

/* ============================================
   TYPOGRAPHY OVERRIDES
============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 1rem;
	color: var(--gray-900);
}

h1 {
	font-size: 2.5rem;
	font-weight: 700;
}
h2 {
	font-size: 2rem;
	font-weight: 600;
}
h3 {
	font-size: 1.75rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1.125rem;
}

p {
	margin-bottom: 1rem;
	color: var(--gray-700);
}

.text-gradient {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.font-domine {
	font-family: "Domine", serif !important;
}

/* ============================================
   BOOTSTRAP COMPONENT OVERRIDES
============================================ */

/* Buttons */
.btn {
	font-weight: 500;
	border-radius: var(--border-radius);
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	transition: var(--transition);
	border: none;
	text-transform: none;
	letter-spacing: 0.025em;
}

.btn-white {
	background: var(--white);
	border: none;
	color: var(--primary-color);
	box-shadow: var(--box-shadow);
}

.btn-white:hover {
	background: var(--gray-100);
	transform: translateY(-1px);
	box-shadow: var(--box-shadow-lg);
}

.btn-primary {
	background: var(--primary-color);
	border: none;
	color: white;
	box-shadow: var(--box-shadow);
}

.btn-primary:hover {
	background: var(--primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--box-shadow-lg);
}

.btn-primary-light {
	background: var(--primary-light);
	border: none;
	color: white;
	box-shadow: var(--box-shadow);
}

.btn-primary-light:hover {
	background: var(--primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--box-shadow-lg);
}

.btn-secondary {
	background-color: var(--gray-600);
	color: white;
	border: none;
}

.btn-secondary:hover {
	background-color: var(--gray-700);
	transform: translateY(-1px);
}

.btn-outline-primary {
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	background: transparent;
}

.btn-outline-primary:hover {
	background: var(--primary-color);
	color: white;
}

.btn-lg {
	padding: 1rem 2rem;
	font-size: 1.125rem;
	border-radius: var(--border-radius-lg);
}

.btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	border-radius: var(--border-radius-sm);
}

/* Cards */
.card {
	border: none;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	background: white;
	transition: var(--transition);
	overflow: hidden;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--box-shadow-lg);
}

.card-header {
	background: white;
	border-bottom: 1px solid var(--gray-200);
	padding: 1.25rem;
	font-weight: 600;
}

.card-body {
	padding: 1.5rem;
}

.card-footer {
	background: var(--light-gray);
	border-top: 1px solid var(--gray-200);
	padding: 1rem 1.5rem;
}

/* Forms */
.form-control {
	border: 1px solid var(--gray-300);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	transition: var(--transition);
	background: white;
}

.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
	background: white;
}

.form-label {
	font-weight: 600;
	color: var(--gray-800);
	margin-bottom: 0.5rem;
}

.form-select {
	border: 1px solid var(--gray-300);
	border-radius: var(--border-radius);
	background: white;
}

.form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

/* Modal */
.modal-content {
	border: none;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--box-shadow-lg);
}

.modal-header {
	border-bottom: 1px solid var(--gray-200);
	padding: 1.5rem;
}

.modal-title {
	font-family: var(--font-heading);
	font-weight: 600;
}

.modal-body {
	padding: 1.5rem;
}

.modal-footer {
	border-top: 1px solid var(--gray-200);
	padding: 1rem 1.5rem;
}

/* ============================================
   CUSTOM COMPONENTS
============================================ */

/* Message Bubble */
.message-bubble {
	background: white;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--box-shadow);
	margin-bottom: 1rem;
	max-width: 70%;
}

.message-bubble.sent {
	background: var(--gradient-primary);
	color: white;
	margin-left: auto;
	border-bottom-right-radius: var(--border-radius-sm);
}

.message-bubble.received {
	background: white;
	color: var(--gray-800);
	margin-right: auto;
	border-bottom-left-radius: var(--border-radius-sm);
}

/* Status Indicators */
.status-online {
	width: 12px;
	height: 12px;
	background: var(--success);
	border-radius: 50%;
	border: 2px solid white;
	position: absolute;
	bottom: 0;
	right: 0;
}

.status-badge {
	background: var(--primary-color);
	color: white;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 10px;
	font-weight: 500;
}

/* ============================================
   LAYOUT UTILITIES
============================================ */

/* Container Overrides */
.container-fluid {
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 576px) {
	.container-fluid {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Spacing Utilities */
.section-padding {
	padding: 4rem 0;
}

.section-padding-sm {
	padding: 2rem 0;
}

.section-padding-lg {
	padding: 6rem 0;
}

/* Background Utilities */
.bg-gradient-primary {
	background: var(--gradient-primary);
}

.bg-gradient-secondary {
	background: var(--gradient-secondary);
}

.bg-light-custom {
	background: var(--light-gray);
}

.bg-dark-custom {
	background: var(--dark-primary);
	color: white;
}

.bg-dark-custom h1,
.bg-dark-custom h2,
.bg-dark-custom h3,
.bg-dark-custom h4,
.bg-dark-custom h5,
.bg-dark-custom h6 {
	color: white;
}

.bg-dark-custom p {
	color: var(--gray-300);
}

/* Text Utilities */
.text-primary-custom {
	color: var(--primary-color) !important;
}

.text-secondary-custom {
	color: var(--secondary-color) !important;
}

.text-darker-white {
	color: var(--gray-200) !important;
}

/* Border Utilities */
.border-radius-custom {
	border-radius: var(--border-radius) !important;
}

.border-radius-lg-custom {
	border-radius: var(--border-radius-lg) !important;
}

/* ============================================
   RESPONSIVE DESIGN
============================================ */

/* Mobile First Approach */
@media (max-width: 767.98px) {
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.75rem;
	}
	h3 {
		font-size: 1.5rem;
	}

	.btn {
		padding: 0.625rem 1.25rem;
		font-size: 0.9rem;
	}

	.card-body {
		padding: 1rem;
	}

	.section-padding {
		padding: 2rem 0;
	}

	.registration-card .card-body {
		padding: 1.5rem;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
	.registration-card {
		max-width: 400px;
		margin: 0 auto;
	}
}

/* Desktop */
@media (min-width: 992px) {
	.container-fluid {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* ============================================
   ANIMATIONS & TRANSITIONS
============================================ */

/* Fade In Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	animation: fadeIn 0.6s ease-out;
}

/* Slide In Animation */
@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.slide-in-left {
	animation: slideInLeft 0.6s ease-out;
}

/* Pulse Animation */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
	}
}

.pulse {
	animation: pulse 2s infinite;
}

/* Loading Spinner */
.spinner-custom {
	width: 40px;
	height: 40px;
	border: 4px solid var(--gray-200);
	border-top: 4px solid var(--primary-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ============================================
   ACCESSIBILITY
============================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	:root {
		--primary-color: #000000;
		--secondary-color: #666666;
		--gray-300: #000000;
	}
}