/**
 * @file
 * Styles for event map display.
 */

.myeventlane-event-map-container {
  width: 100%;
  height: 200px; /* Smaller, rectangular map */
  border-radius: 8px;
  overflow: hidden;
  margin: var(--mel-space-2, 10px) 0;
  background: #f5f5f5;
  position: relative;
  min-height: 200px; /* Ensure container has height for map to render */
}

/* Ensure map container is visible and has proper dimensions */
.myeventlane-event-map-container[data-latitude][data-longitude] {
  display: block;
  width: 100%;
  height: 200px;
}

/* Hide excessive Google Maps branding */
.myeventlane-event-map-container .gm-style-cc,
.myeventlane-event-map-container .gm-style > div:first-child > div:last-child {
  display: none !important;
}

/* Hide Google logo and copyright (minimal branding only) */
.myeventlane-event-map-container a[href*="google.com/maps"],
.myeventlane-event-map-container .gm-style-cc {
  display: none !important;
}

/* Ensure map fills container and renders properly */
.myeventlane-event-map-container > div {
  width: 100% !important;
  height: 100% !important;
  min-height: 200px;
}

/* Fix for Google Maps iframe/div rendering */
.myeventlane-event-map-container .gm-style,
.myeventlane-event-map-container .gm-style > div {
  width: 100% !important;
  height: 100% !important;
}

.myeventlane-event-map-actions {
  margin-top: 1em;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.myeventlane-event-map-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s;
}

.myeventlane-event-map-actions a:hover {
  background-color: #e0e0e0;
}

.myeventlane-event-map-actions a::before {
  content: '🗺️';
  font-size: 1.2em;
}