/* ============================================
   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: #1a1a1a;
	transition: var(--transition);
	overflow: hidden;
}

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

.card-header {
	background: #1a1a1a;
	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;
	}
}

/* ============================================
   LIGHTGALLERY STYLING
   Let lightGallery handle its own styling - minimal customizations only
============================================ */

/* Fix video positioning in lightGallery - Higher specificity */
.lg-container .lg-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.lg-container .lg-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Force video items to be centered */
.lg-container .lg-item[data-lg-slide-type="video"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Force video container positioning with maximum specificity */
.lg-container .lg-item .lg-video-cont {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Override inline styles with higher specificity */
.lg-video-cont[style*="width:1077px"] {
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
}

.lg-video-cont[style*="height:605.8125px"] {
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
}

/* Ensure video object fits properly */
.lg-video-object {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1440px) {
    .lg-video-cont {
        max-width: 85% !important;
        max-height: 85% !important;
    }
}

@media (max-width: 1024px) {
    .lg-video-cont {
        max-width: 80% !important;
        max-height: 80% !important;
    }
}

@media (max-width: 768px) {
    .lg-video-cont {
        max-width: 95% !important;
        max-height: 95% !important;
    }
}
.notification-item {
    cursor: pointer;
}

/* Royal subscription highlight */
.royal-frame {
    position: relative;
}

.royal-frame::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    padding: 4px;
    background: linear-gradient(135deg,
        #ffd700 0%,
        #ffed4e 12.5%,
        #ffffff 25%,
        #ffd700 37.5%,
        #c5a028 50%,
        #ffd700 62.5%,
        #ffed4e 75%,
        #ffffff 87.5%,
        #ffd700 100%
    );
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
    animation: royalShimmer 3s linear infinite;
    opacity: 0.95;
}

.royal-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(255, 215, 0, 0.6),
        0 0 90px rgba(255, 215, 0, 0.4),
        inset 0 0 50px rgba(255, 215, 0, 0.2);
    pointer-events: none;
    z-index: 3;
    animation: royalGlowPulse 2.5s ease-in-out infinite;
}

@keyframes royalShimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes royalGlowPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

.royal-crown-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #ffffff 0%, transparent 35%),
        linear-gradient(135deg,
            #ffd700 0%,
            #ff69b4 25%,
            #ffd700 50%,
            #ffb6c1 75%,
            #ffd700 100%
        );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    z-index: 11;
    box-shadow:
        0 0 20px rgba(255, 105, 180, 0.9),
        0 0 30px rgba(255, 215, 0, 0.8),
        0 6px 20px rgba(0, 0, 0, 0.5),
        inset 0 -3px 8px rgba(0, 0, 0, 0.3),
        inset 0 3px 8px rgba(255, 255, 255, 0.7);
    border: 3px solid rgba(255, 105, 180, 0.8);
    animation: roseGoldCrownPulse 2.5s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.royal-crown-badge:hover,
.profile-card:hover .royal-crown-badge,
.profile-image:hover .royal-crown-badge {
    transform: scale(1.15) rotate(8deg);
    box-shadow:
        0 0 30px rgba(255, 105, 180, 1),
        0 0 40px rgba(255, 215, 0, 1),
        0 8px 30px rgba(0, 0, 0, 0.6),
        inset 0 -4px 10px rgba(0, 0, 0, 0.4),
        inset 0 4px 10px rgba(255, 255, 255, 0.8);
}

.royal-crown-badge i {
    color: #1a1100;
    font-size: 1.15rem;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 8px rgba(255, 105, 180, 0.8))
            drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 1),
        0 -1px 2px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(255, 105, 180, 0.8),
        0 0 8px rgba(255, 215, 0, 0.6);
    animation: crownIconFloat 3s ease-in-out infinite;
}

@keyframes roseGoldCrownPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 105, 180, 0.9),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 6px 20px rgba(0, 0, 0, 0.5),
            inset 0 -3px 8px rgba(0, 0, 0, 0.3),
            inset 0 3px 8px rgba(255, 255, 255, 0.7);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 105, 180, 1),
            0 0 40px rgba(255, 215, 0, 1),
            0 6px 20px rgba(0, 0, 0, 0.5),
            inset 0 -3px 8px rgba(0, 0, 0, 0.3),
            inset 0 3px 8px rgba(255, 255, 255, 0.8);
    }
}

@keyframes crownIconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

.royal-crown-badge--sm {
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
    top: -6px;
    right: -6px;
    border-width: 2px;
}

.royal-crown-badge--sm i {
    font-size: 0.8rem;
}

.royal-crown-badge--lg {
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
    top: 16px;
    right: 16px;
    border-width: 4px;
}

.royal-crown-badge--lg i {
    font-size: 1.5rem;
}

.royal-crown-badge--offset {
    top: 4px;
    right: 4px;
}

.royal-crown-badge--center {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.royal-crown-badge--center:hover,
.profile-card:hover .royal-crown-badge--center,
.profile-image:hover .royal-crown-badge--center {
    transform: translateX(-50%) scale(1.15) rotate(8deg);
}

.royal-avatar {
    border: none !important;
    box-shadow: none !important;
}

.royal-frame--circle {
    border-radius: 50%;
}

.royal-frame--circle::after {
    border-radius: 50%;
}

.royal-frame--rounded {
    border-radius: 16px;
}

.royal-frame--rounded::after {
    border-radius: inherit;
}