@import "fonts";
@import "flatpickr/dist/flatpickr";
@import "flatpickr_custom";

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

@layer utilities {
  .navbar-blur {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .no-number-arrows {
    appearance: textfield;
  }

  .no-number-arrows::-webkit-inner-spin-button,
  .no-number-arrows::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  html {
    height: 100%;
    background: center top / cover image-set(
      url("/assets/background-main-cd470e6b.avif") type("image/avif"),
      url("/assets/background-main-66d3ffb9.webp") type("image/webp"),
      url("/assets/background-main-10f4836f.jpg") type("image/jpeg")
    );
  }

  body {
    background: transparent;
  }
}

@layer components {
  .map-gradient::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 400;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 25%),
      linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 25%);
  }

  .fab {
    @apply fixed w-14 h-14 bg-green-200 hover:bg-green-300 text-white rounded-full shadow-lg hover:shadow-xl;
    @apply flex items-center justify-center transition-all duration-300 z-50;
    @apply bottom-6 right-6 sm:bottom-6;
    bottom: 5rem;
  }

  @screen lg {
    .fab {
      bottom: 1.5rem;
    }
  }

  .fab:hover {
    transform: scale(1.05);
  }

  .fab:active {
    transform: scale(0.95);
  }

  .modal-overlay {
    transition: opacity 300ms;
  }

  .modal-panel {
    transition: opacity 300ms, transform 300ms;
  }

  .modal-closed .modal-overlay {
    opacity: 0;
  }

  .modal-closed .modal-panel {
    opacity: 0;
    transform: scale(0.95);
  }

  .popup-spot .leaflet-popup-content-wrapper {
    @apply bg-cover bg-center;
    max-width: 400px;
    background-image: image-set(
      url("/assets/background-main-cd470e6b.avif") type("image/avif"),
      url("/assets/background-main-66d3ffb9.webp") type("image/webp"),
      url("/assets/background-main-10f4836f.jpg") type("image/jpeg")
    );
  }

  .popup-spot .leaflet-popup-content {
    margin: 0;
  }

  .popup-spot .leaflet-popup-tip {
    @apply bg-cover bg-center;
    max-width: 400px;
    background-image: image-set(
      url("/assets/background-main-cd470e6b.avif") type("image/avif"),
      url("/assets/background-main-66d3ffb9.webp") type("image/webp"),
      url("/assets/background-main-10f4836f.jpg") type("image/jpeg")
    );
  }

  .message-link-match {
    @apply text-green-200 font-semibold;
  }

  .message-link-spot {
    @apply text-white;
  }

  .message-link-user {
    @apply text-white;
  }
}