/* ============================================
   Premium Listing Page Styles V2
   Matches Modern Real Estate UI Design
   ============================================ */

/* Import Poppins Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	--primary: #7A1F1F;
	--primary-dark: #5a1519;
	--primary-light: #9a3f3f;
	--accent: #2563eb;
	--accent-dark: #1d4ed8;
	--success: #25D366;
	--dark: #1e293b;
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Base Styles */
.main-container {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Scrollbar Hide */
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}
.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Line Clamp Utilities */
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-4 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Smooth Scroll */
html {
	scroll-behavior: smooth;
}

/* Section Scroll Offset */
section[id^="section-"] {
	scroll-margin-top: 50px;
}

/* Fix navbar z-index and positioning */
.main-container nav.sticky {
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
	background-color: #ffffff !important;
}

/* Similar Listings Fix */
.similar-listings-wrapper .content-box,
.similar-listings-wrapper .items-details-wrapper,
.similar-listings-wrapper .category-list {
	margin: 0 !important;
	padding: 0 !important;
}

.similar-listings-wrapper .section-content {
	padding: 0 !important;
}

.similar-listings-wrapper .no-padding {
	padding: 0 !important;
}

.similar-listings-wrapper h2.title-2,
.similar-listings-wrapper .title-2 {
	display: none !important;
}

/* Card Styles */
.card-shadow {
	box-shadow: var(--shadow);
}

.card-shadow-md {
	box-shadow: var(--shadow-md);
}

/* Hover Effects */
.hover-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Button Transitions */
.btn-transition {
	transition: all 0.2s ease;
}

/* Map Container */
.map-container {
	border-radius: var(--radius-md);
	overflow: hidden;
	min-height: 280px;
}

/* Social Share Integration */
.social-share a {
	text-decoration: none !important;
}

/* Sticky Sidebar */
@media (min-width: 1024px) {
	.sticky {
		position: sticky;
	}
}

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

.animate-fadeIn {
	animation: fadeIn 0.3s ease-out forwards;
}

/* Backdrop Blur Support */
@supports (backdrop-filter: blur(12px)) {
	.backdrop-blur-sm {
		backdrop-filter: blur(4px);
	}
	.backdrop-blur-md {
		backdrop-filter: blur(12px);
	}
}

/* Tab Active State Override */
nav button.border-dark {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: var(--dark);
}

/* Feature Pill Hover */
.feature-pill:hover {
	border-color: rgba(122, 31, 31, 0.3);
	background-color: rgba(122, 31, 31, 0.05);
}

/* Image Gallery Hover */
.gallery-item:hover img {
	transform: scale(1.05);
}

/* Primary Button Colors Override */
.bg-primary {
	background-color: var(--primary) !important;
}

.bg-primary:hover,
.hover\:bg-primary-dark:hover {
	background-color: var(--primary-dark) !important;
}

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

.border-primary {
	border-color: var(--primary) !important;
}

/* Accent Button Colors */
.bg-accent {
	background-color: var(--accent) !important;
}

.bg-accent:hover,
.hover\:bg-accent\/90:hover {
	background-color: var(--accent-dark) !important;
}

/* WhatsApp Button */
.bg-\[\#25D366\] {
	background-color: #25D366 !important;
}

.hover\:bg-\[\#20BD5A\]:hover {
	background-color: #20BD5A !important;
}

/* Dark Colors */
.text-dark {
	color: var(--dark) !important;
}

.bg-dark {
	background-color: var(--dark) !important;
}

/* Background colors */
.bg-\[\#f8f9fb\] {
	background-color: #f8f9fb !important;
}

.bg-\[\#1e293b\] {
	background-color: #1e293b !important;
}

/* Border Radius */
.rounded-xl {
	border-radius: var(--radius-md) !important;
}

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

.rounded-full {
	border-radius: 9999px !important;
}

/* Font Weights */
.font-bold {
	font-weight: 700 !important;
}

.font-semibold {
	font-weight: 600 !important;
}

.font-medium {
	font-weight: 500 !important;
}

/* Hero Section Gradient */
.hero-gradient {
	background: linear-gradient(to right, rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.6), transparent);
}

/* Share Dropdown */
.share-dropdown {
	position: absolute;
	right: 0;
	margin-top: 0.5rem;
	width: 12rem;
	background: white;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--gray-100);
	padding: 0.5rem 0;
	z-index: 9999;
}

/* Ensure share dropdown is always on top */
[x-data] .absolute[x-show] {
	z-index: 9999 !important;
}

/* Contact Button Styling */
.contact-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	width: 100% !important;
	padding: 0.625rem 1rem !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	border-radius: var(--radius-sm) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

/* Sidebar CTA Buttons - Remove Bootstrap default styles */
.sidebar-cta-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	outline: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.sidebar-cta-btn:hover {
	text-decoration: none !important;
	opacity: 0.9;
}

.sidebar-cta-btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Primary button hover */
.sidebar-cta-btn[style*="background-color: #7A1F1F"]:hover {
	background-color: #5a1519 !important;
}

/* WhatsApp button hover */
.sidebar-cta-btn[style*="background-color: #25D366"]:hover {
	background-color: #20BD5A !important;
}

/* Gray button hover */
.sidebar-cta-btn[style*="background-color: #f3f4f6"]:hover {
	background-color: #e5e7eb !important;
}

/* Primary Color Background with Icons */
.bg-primary\/10 {
	background-color: rgba(122, 31, 31, 0.1) !important;
}

/* Text sizes */
.text-\[6px\] {
	font-size: 6px !important;
}

.text-\[10px\] {
	font-size: 10px !important;
}

/* Grid gap fix */
.gap-2 {
	gap: 0.5rem !important;
}

.gap-3 {
	gap: 0.75rem !important;
}

/* Print Styles */
@media print {
	nav.sticky,
	.sidebar-card {
		display: none;
	}
}

/* Mobile Responsive */
@media (max-width: 768px) {
	section[id^="section-"] {
		scroll-margin-top: 48px;
	}
	
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Fix for Bootstrap container conflicts */
@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

/* Ensure white text on dark backgrounds */
.bg-\[\#1e293b\]\/95 .text-white,
.bg-dark .text-white {
	color: #ffffff !important;
}

/* Property Pills Styling */
.property-pill {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background-color: var(--gray-50);
	border-radius: var(--radius-sm);
	border: 1px solid var(--gray-100);
	transition: all 0.2s ease;
}

.property-pill:hover {
	border-color: rgba(122, 31, 31, 0.2);
	background-color: rgba(122, 31, 31, 0.03);
}

.property-pill-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background-color: rgba(122, 31, 31, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.property-pill-icon i {
	color: var(--primary);
	font-size: 0.875rem;
}

/* Key Facts Grid Styling */
.key-fact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0;
}

.key-fact-item i {
	color: var(--primary);
	font-size: 5px;
	margin-top: 0.5rem;
}

/* Lightbox Overlay for Gallery */
.gallery-lightbox {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Transitions */
.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-colors {
	transition-property: color, background-color, border-color;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-transform {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.duration-300 {
	transition-duration: 300ms;
}

/* Tab Navigation Styling */
nav.sticky {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Ensure proper z-index stacking */
.z-40 {
	z-index: 40;
}

.z-50 {
	z-index: 50;
}

/* Read More/Less Button */
.read-more-btn {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: #7A1F1F !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	margin-top: 0.5rem !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	cursor: pointer !important;
	outline: none !important;
	box-shadow: none !important;
}

.read-more-btn:hover {
	color: #5a1519 !important;
	text-decoration: none !important;
}

.read-more-btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.read-more-btn i {
	font-size: 0.65rem !important;
	margin-left: 2px !important;
}

/* Photo Gallery Buttons - Remove borders */
.main-container button[type="button"].group {
	border: none !important;
	outline: none !important;
	padding: 0 !important;
}

.main-container button[type="button"].group:focus {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* See More/Less Button (Key Facts) */
.see-more-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	padding: 0.625rem 1.25rem !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: #7A1F1F !important;
	background-color: rgba(122, 31, 31, 0.05) !important;
	border: 1px solid rgba(122, 31, 31, 0.2) !important;
	border-radius: 9999px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	outline: none !important;
	box-shadow: none !important;
}

.see-more-btn:hover {
	background-color: rgba(122, 31, 31, 0.1) !important;
	text-decoration: none !important;
}

.see-more-btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.see-more-btn i {
	font-size: 0.65rem !important;
	margin-left: 4px !important;
}

/* Alpine.js x-show transitions */
[x-cloak] {
	display: none !important;
}