/* ============================================================================
   "Show on map" popup (_HotelMapModal.cshtml) - the map itself is rendered by
   Leaflet (wwwroot/js/search/hotelMap.js), everything else here is layout/chrome
   for the modal and its side panel.

   .cph-map__list holds exactly ONE hotel card at a time (whichever pin is
   currently selected - hotelSearch.js's focusedMapHotel) despite the name, kept
   from when it held a scrollable list of every hotel; the class name stuck
   because the layout (narrow column, right of the map, scrollable if the one
   card is tall) didn't need to change when that did.

   Scoped the same way HotelSearchResultCards.css already scopes the card itself:
   every selector here is either ".cph-map-*"/".cph-modal*" (shared with that
   file's modal chrome, loaded first) or a descendant of ".cph-map-modal", so
   this can't collide with anything else on the page. The side panel reuses
   .cph-card verbatim (_HotelCard.cshtml, unmodified) - the overrides below just
   force it into its own narrow/stacked layout (the same one
   HotelSearchResultCards.css already switches to under 860px viewport width)
   regardless of actual viewport width, since this column is always narrow even
   on a wide desktop screen.
   ============================================================================ */

.cph-map-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cph-map-modal .cph-modal__head {
  flex: 0 0 auto;
}

.cph-map__layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0; /* let the children scroll instead of overflowing the modal */
  overflow: hidden;
}

.cph-map__canvas {
  flex: 1 1 58%;
  min-width: 0;
  height: 100%;
  background: #e7f2f2;
}

.cph-map__list {
  flex: 0 0 42%;
  max-width: 480px;
  min-width: 320px;
  overflow-y: auto;
  padding: 16px;
  border-left: 1px solid var(--cph-border, #d8e0e0);
  background: #f7fafa;
}

.cph-map__empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--cph-text-muted, #707070);
  font-family: "Lato", "Segoe UI", sans-serif;
  text-align: center;
}

@media (max-width: 860px) {
  .cph-map__layout {
    flex-direction: column;
  }

  .cph-map__canvas {
    flex: 0 0 42vh;
  }

  .cph-map__list {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    border-left: 0;
    border-top: 1px solid var(--cph-border, #d8e0e0);
  }
}

/* ---- Force the reused .cph-card into its narrow/stacked layout inside the side list ---- */

.cph-map__list .cph-card {
  grid-template-columns: 1fr;
  min-height: 0;
  margin-bottom: 16px;
}

.cph-map__list .cph-card__media,
.cph-map__list .cph-card__media img {
  min-height: 168px;
  height: 168px;
}

.cph-map__list .cph-card__body {
  padding: 14px;
  border-right: 0;
}

.cph-map__list .cph-card__top {
  flex-direction: column;
}

.cph-map__list .cph-ta {
  align-items: flex-start;
  text-align: left;
}

.cph-map__list .cph-card__name {
  font-size: 18px;
}

.cph-map__list .cph-flight {
  grid-template-columns: 1fr;
}

.cph-map__list .cph-flight__col--end {
  text-align: left;
}

.cph-map__list .cph-flight__path {
  justify-content: flex-start;
}

.cph-map__list .cph-card__aside {
  grid-column: 1 / -1;
  border-top: 1px solid var(--cph-border, #d8e0e0);
}

.cph-map__list .cph-card__aside .cph-btn {
  width: 100%;
  margin-top: 12px;
}

/* ---- Leaflet price-bubble markers ---- */
/* Leaflet's own default marker chrome (background/border on the divIcon wrapper) is switched
   off so only .cph-map-pin's own bubble shows - iconAnchor:[0,0] + this translate is what
   anchors the bubble's bottom point (not its box) to the hotel's actual coordinate. */
.cph-map-pin-wrap {
  background: transparent !important;
  border: none !important;
}

.cph-map-pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: #fff;
  color: var(--cph-primary-deep, #104443);
  font-family: "Lato", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid var(--cph-primary, #02aaa9);
  box-shadow: 0 2px 8px rgba(16, 68, 67, 0.25);
  transform: translate(-50%, -100%);
  cursor: pointer;
}

.cph-map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-right: 2px solid var(--cph-primary, #02aaa9);
  border-bottom: 2px solid var(--cph-primary, #02aaa9);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 2px 0;
}

.cph-map-pin small {
  font-weight: 600;
}

.cph-map-pin.is-active,
.cph-map-pin:hover {
  background: var(--cph-primary, #02aaa9);
  color: #fff;
  z-index: 1000;
}