/*
 * Google Maps & third-party overrides
 *
 * This file is kept SEPARATE from globals.css so Tailwind v4's PostCSS
 * pipeline does not process/purge these selectors in production builds.
 * Tailwind v4 strips any selector it doesn't recognise as a utility —
 * even outside @layer — when the CSS lives in the same file it processes.
 */

/* Global body font */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* ── Google Maps InfoWindow ─────────────────────────────────────────── */

/* Strip Google's default InfoWindow chrome — our .tripflow-infowindow is the visual container */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: min(360px, calc(100vw - 30px)) !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  max-width: min(350px, calc(100vw - 40px)) !important;
}

/* Style the Google Maps close button */
.gm-style .gm-style-iw-c > button.gm-ui-hover-effect {
  top: 4px !important;
  right: 4px !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  z-index: 10 !important;
}

/* InfoWindow arrow/tail — match dark theme */
.gm-style .gm-style-iw-tc::after {
  background: #1e293b !important;
}

/* ── Sprite fix ─────────────────────────────────────────────────────── */

/* Prevent Tailwind v4 preflight (img,video { max-width:100%; height:auto })
   from distorting Google Maps control sprites (fullscreen, zoom, etc.).
   Only target images inside control containers (.gmnoprint, .gm-control-active)
   to avoid breaking map tile images.
   Use initial (not auto) so the browser respects HTML width/height attributes. */
.gm-style .gmnoprint img,
.gm-style .gm-control-active img,
.gm-style button[title] img {
  max-width: initial !important;
  max-height: initial !important;
  width: initial !important;
  height: initial !important;
}

/* Re-apply constraints to images inside our InfoWindow card */
.gm-style .tripflow-infowindow img {
  max-width: 100% !important;
  max-height: 140px !important;
  height: 140px !important;
  object-fit: cover;
}

/* ── TripFlow InfoWindow card ───────────────────────────────────────── */

.tripflow-infowindow {
  width: min(350px, calc(100vw - 60px));
  max-width: min(350px, calc(100vw - 60px));
  margin: 0;
  padding: 0;
  background-color: #1e293b;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

/* ── Responsive: viewport-based sizing ──────────────────────────────── */

@media (max-width: 768px) {
  .gm-style .gm-style-iw-c {
    max-width: calc(100vw - 40px) !important;
  }
  .gm-style .gm-style-iw-d {
    max-width: calc(100vw - 50px) !important;
  }
  .tripflow-infowindow {
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
  }
}

/* ── Animations ─────────────────────────────────────────────────────── */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

/* ── Card enrichment text shadows ───────────────────────────────────── */

.card-with-background {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.card-with-background .text-white {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}