@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	.scrollbar-hide {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}
}

:root {
	--mobile-filter-bar-height: 50px;
	--mobile-bottom-nav-height: 64px;
	--mobile-list-peek-height: 210px;
}

html,
body {
	@apply m-0 p-0 h-full w-full;
}

body {
	@apply overflow-x-clip antialiased text-sm lg:text-base;
	text-rendering: optimizeLegibility;
}

h1 {
	@apply text-xl;
}

h2 {
	@apply text-lg;
}

pre {
	display: block;
	font-family: inherit;
	white-space: pre-line;
}

.link {
	@apply text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 hover:underline;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime"],
input[type="time"],
input[type="number"],
textarea {
	@apply py-2.5 pl-3 w-full rounded border-0 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500 sm:leading-6;
}

select,
select[multiple="multiple"] {
	@apply w-full rounded border-0 py-1.5 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500 sm:leading-6 cursor-pointer;
}

.btn {
	@apply px-4 py-2.5 font-semibold rounded cursor-pointer shadow-sm text-center sm:leading-6;
}

.btn-primary {
	@apply bg-primary-600 dark:bg-primary-500 hover:bg-primary-700 dark:hover:bg-primary-600 text-white;
}

.btn-neutral {
	@apply bg-white dark:bg-gray-800 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500 outline-none;
}

.btn-black {
	@apply bg-primary-600 hover:bg-primary-700 text-white;
}

table {
	@apply border-collapse min-w-full table-fixed divide-y-2 text-sm/6;

	th,
	td {
		@apply py-2 pr-4 w-[15%] whitespace-nowrap;
	}

	th {
		@apply text-left;
	}

	td {
		&:first-child {
			@apply pl-0;
		}
	}
}

img {
	@apply object-cover object-center;
	image-rendering: high-quality;
	font-size: 0;
}

.adsbygoogle {
	@apply w-full max-w-full;
}

.glightbox-container {
	& .goverlay {
		@apply !bg-white/50 !backdrop-blur-md;
	}

	& .gslide-image {
		@apply !shadow;
	}

	& .gslide-image img {
		@apply !rounded-sm;
	}
}

.mapboxgl-popup {
	@apply bg-transparent;
	z-index: 2000 !important;
}

.mapboxgl-popup-content {
	@apply !p-0 !rounded-xl !shadow-2xl;

	& a {
		outline: none;
	}

	& img {
		@apply object-cover object-center;
		image-rendering: high-quality;
		font-size: 0;
	}
}

.property-popup {
	.mapboxgl-popup-content {
		@apply !bg-white dark:!bg-gray-800 !overflow-visible;
	}

	.mapboxgl-popup-tip {
		@apply !hidden;
	}
}

@media (min-width: 1400px) {
	#list_col {
		@apply static w-[30rem] shrink-0 translate-y-0;
	}

	#map_col {
		@apply static flex-1 w-auto min-w-0;
	}

	#new_listings {
		@apply grid-cols-1;
	}

	[data-view-mode="hybrid"] {
		@apply bg-primary-600 dark:bg-primary-500 text-white;
	}

	[data-view-mode="list"],
	[data-view-mode="map"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
	}

	:has(#view-toggle-list:checked) #map_col {
		@apply hidden;
	}

	:has(#view-toggle-list:checked) #list_col {
		@apply static w-full translate-y-0;
	}

	:has(#view-toggle-list:checked) #new_listings {
		@apply grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
	}

	:has(#view-toggle-list:checked) [data-view-mode="list"] {
		@apply bg-primary-600 dark:bg-primary-500 text-white;
	}

	:has(#view-toggle-list:checked) [data-view-mode="hybrid"],
	:has(#view-toggle-list:checked) [data-view-mode="map"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
	}

	:has(#view-toggle-map:checked) #list_col {
		@apply hidden;
	}

	:has(#view-toggle-map:checked) #map_col {
		@apply static w-full;
	}

	:has(#view-toggle-map:checked) #new_listings {
		@apply grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
	}

	:has(#view-toggle-map:checked) [data-view-mode="map"] {
		@apply bg-primary-600 dark:bg-primary-500 text-white;
	}

	:has(#view-toggle-map:checked) [data-view-mode="list"],
	:has(#view-toggle-map:checked) [data-view-mode="hybrid"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
	}

	:has(#view-toggle-hybrid:checked) #list_col {
		@apply static w-[30rem] shrink-0 translate-y-0;
	}

	:has(#view-toggle-hybrid:checked) #map_col {
		@apply static flex-1 w-auto min-w-0;
	}

	:has(#view-toggle-hybrid:checked) #new_listings {
		@apply grid-cols-1 md:grid-cols-1 xl:grid-cols-1 2xl:grid-cols-1;
	}

	:has(#view-toggle-hybrid:checked) [data-view-mode="hybrid"] {
		@apply bg-primary-600 dark:bg-primary-500 text-white;
	}

	:has(#view-toggle-hybrid:checked) [data-view-mode="list"],
	:has(#view-toggle-hybrid:checked) [data-view-mode="map"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
	}
}

.custom-marker {
	cursor: pointer;
}

.custom-marker .marker-content {
	@apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-1.5 rounded-md font-semibold text-xs whitespace-nowrap shadow-lg antialiased;
	border: 2.5px solid white;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-marker:hover {
	z-index: 1000;
}

.custom-marker:hover .marker-content {
	@apply shadow-xl;
	transform: scale(1.05);
}

.marker-highlighted {
	z-index: 1000;
}

.marker-highlighted .marker-content {
	@apply shadow-2xl;
	transform: scale(1.1);
	animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
	0% {
		box-shadow: 0 0 0 0 rgba(27, 54, 93, 0.7);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(27, 54, 93, 0);
	}
}

@media (max-width: 1399px) {
	.overflow-y-auto {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: auto;
	}

	#list_col .overflow-y-auto {
		scroll-padding-top: var(--mobile-filter-bar-height);
		scroll-padding-bottom: 20px;
	}

	.sticky.top-0 {
		margin-bottom: 0 !important;
	}

	#map_col {
		top: var(--mobile-filter-bar-height) !important;
		margin-top: 0 !important;
	}

	#search_grid {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	#list_col {
		top: var(--mobile-filter-bar-height) !important;
	}

	#list_col > div {
		max-height: calc(100vh - var(--mobile-filter-bar-height) - var(--mobile-bottom-nav-height));
	}
}