/* Ensure proper spacing for tooltip visibility - adjusted for complete visibility with reduced spacing */
.parcel-item {
  margin-top: 30px; /* Reduced space above to accommodate the tooltip */
  position: relative;
  z-index: 5; /* Ensure stacking order */
  margin-bottom: 5px; /* Reduced space below */
}

/* First parcel item in the list needs special handling */
.parcels-list > .parcel-item:first-child {
  margin-top: 40px; /* Reduced space for the first item */
}

/* Fixed positioning for the tooltip container */
.parcel-item__controls {
  position: relative;
  overflow: visible;
  z-index: 20; /* Increased z-index */
}

.rating-system {
  position: relative;
  z-index: 25; /* Higher z-index than parent */
  display: inline-flex; /* Ensures proper sizing */
}

/* Position the tooltip above the element - adjusted to prevent cropping */
.rating-tooltip {
  position: fixed; /* Use fixed positioning instead of absolute */
  z-index: 1000;
  transform: translateX(-50%);
  margin-bottom: 15px; /* Increased space between tooltip and element */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none; /* Prevent tooltip from blocking clicks */
  margin-left: 0; /* Override the base style */
  margin-right: 0; /* Reset margin-right */
  width: 220px; /* Fixed width */
  left: 50%; /* Center horizontally */
  max-height: none !important; /* Prevent height restrictions */
  min-width: 220px; /* Ensure sufficient width */
  background-color: white !important; /* Ensure background is opaque */
  border: 1px solid #eee !important; /* Visible border */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15) !important; /* Strong shadow for visibility */
}

/* Adjust the arrow positioning to point down */
.rating-tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Position at bottom of tooltip */
  left: 50%;
  bottom: auto;
  margin-left: -5px;
  margin-top: 0;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Make sure tooltips for rated items have consistent styling */
.rating-system.rated .rating-tooltip::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: 0;
  border-color: #f0f7ff transparent transparent transparent;
}

/* Ensure the tooltip is fully visible on mobile */
@media (max-width: 576px) {
  .rating-tooltip {
    width: 200px !important;
    font-size: 0.8rem;
    padding: 8px;
  }
}

/* Fix tooltip visibility in rare cases when it might get hidden */
.parcel-item__details {
  overflow: visible !important;
}

/* Override the original animation styles if they interfere with positioning */
.rating-system:not(.rated) .rating-tooltip {
  animation: pulse 2s infinite;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

/* Fix consistent styling for rated item tooltips */
.rating-system.rated .rating-tooltip {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

/* Make sure tooltips are not cut off at the top of containers */
.parcels-list,
.recent-parcels {
  overflow: visible !important;
  padding-top: 5px;
}

/* Global tooltip fixes to ensure visibility */
.main-content {
  overflow: visible !important;
}

body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Ensure z-index hierarchy is respected */
.parcels-list {
  z-index: 5;
  position: relative;
}

.recent-parcels {
  z-index: 5;
  position: relative;
  overflow: visible !important;
  padding-top: 10px; /* Reduced from 15px */
  padding-bottom: 10px; /* Reduced from 15px */
}

/* Fix any remaining issues with tooltip visibility with a more specific selector */
.rating-system .rating-tooltip {
  max-height: none !important; /* Prevent height restrictions */
  min-width: 220px; /* Ensure sufficient width */
  background-color: white !important; /* Ensure background is opaque */
  border: 1px solid #eee !important; /* Visible border */
}