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

/* Base Resets & Typography */
html {
    scroll-behavior: smooth;
}

body {
    @apply font-sans antialiased bg-slate-50 text-slate-800;
}

h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* Dark Mode Scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* Layout Utilities */
.container {
    @apply max-w-7xl mx-auto;
}

/* Components */
.btn-primary {
    @apply bg-cyan-500 hover:bg-cyan-600 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-200 shadow-md shadow-cyan-500/20;
}

/* Sticky Header Effects */
.site-header.scrolled .header-bg {
    @apply opacity-100 shadow-md;
}
.site-header.scrolled {
    @apply py-0;
}

/* Rating Stars */
.rating-stars .fa-star, 
.rating-stars .fa-star-half-alt {
    @apply text-yellow-400;
}
.rating-stars .fa-star.empty {
    @apply text-slate-200 dark:text-slate-600;
}

/* Fancybox Overrides */
.fancybox__container {
    z-index: 1050;
}

/* Leaflet Map */
.leaflet-container {
    font-family: 'Inter', sans-serif;
    z-index: 0;
}

.dark .bg-white {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.pagination {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.pagination li {
  margin-right: 20px;
}
.pagination li a {
  background-color: transparent;
  color: #888;
  text-decoration: none;
  font-size: 20px;
  padding: 6px 12px;
  margin-left: -1px
}
.pagination .active a {
  outline: 0;
  color: #000;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 11px;
  pointer-events: none;
}
.pagination li a:hover {
  border: 1px solid #888;
  padding: 5px 11px;
  color: #888;
  border-radius: 5px;
}
.pagination .active a:hover {
  border-color:#000;
  color:#000;
  cursor:default;
  background-color: transparent;
}