/* Map Creator Buttons - Rotated 180 degrees and positioned at top center */
.map-creator-buttons {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(180deg) !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.map-creator-btn {
  width: 60px !important;
  height: 25px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(26, 92, 46, 0.8) !important;
  border-radius: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-weight: bold !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* BACK Button (Left) - Green Theme with JET shape (left skewed) */
.map-creator-btn-left {
  background: linear-gradient(45deg, #1a5c2e 0%, #27ae60 25%, #2ecc71 60%, #58d68d 100%) !important;
  color: white !important;
  border-color: rgba(26, 92, 46, 0.8) !important;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  padding-left: 15px !important;
}

.map-creator-btn-left:hover {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.6) !important;
  transform: scale(1.05) !important;
}

/* EDIT Button (Middle) - Green Theme */
.map-creator-btn-middle {
  background: linear-gradient(45deg, #1a5c2e 0%, #27ae60 25%, #2ecc71 60%, #58d68d 100%) !important;
  color: white !important;
  border-color: rgba(26, 92, 46, 0.8) !important;
}

.map-creator-btn-middle:hover {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.6) !important;
  transform: scale(1.05) !important;
}

/* PUBLISH Button - Green Theme */
.map-creator-btn-publish {
  background: linear-gradient(45deg, #1a5c2e 0%, #27ae60 25%, #2ecc71 60%, #58d68d 100%) !important;
  color: white !important;
  border-color: rgba(26, 92, 46, 0.8) !important;
}

.map-creator-btn-publish:hover {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.6) !important;
  transform: scale(1.05) !important;
}

/* TEST Button (Right) - Green Theme with RACE shape (right skewed) */
.map-creator-btn-right {
  background: linear-gradient(45deg, #1a5c2e 0%, #27ae60 25%, #2ecc71 60%, #58d68d 100%) !important;
  color: white !important;
  border-color: rgba(26, 92, 46, 0.8) !important;
  clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%) !important;
  padding-right: 15px !important;
}

.map-creator-btn-right:hover {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.6) !important;
  transform: scale(1.05) !important;
}

/* Active states - All using green theme */
.map-creator-btn.active.map-creator-btn-left {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 25px rgba(46, 204, 113, 0.8) !important;
  transform: scale(1.1) !important;
}

.map-creator-btn.active.map-creator-btn-middle {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 25px rgba(46, 204, 113, 0.8) !important;
  transform: scale(1.1) !important;
}

.map-creator-btn.active.map-creator-btn-publish {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 25px rgba(46, 204, 113, 0.8) !important;
  transform: scale(1.1) !important;
}

.map-creator-btn.active.map-creator-btn-right {
  background: linear-gradient(45deg, #2d7a3e 0%, #34c471 25%, #41d882 60%, #6bff9e 100%) !important;
  border-color: rgba(26, 92, 46, 1) !important;
  box-shadow: 0 0 25px rgba(46, 204, 113, 0.8) !important;
  transform: scale(1.1) !important;
}

/* General hover effects */
.map-creator-btn:hover {
  transform: scale(1.05) !important;
}

.map-creator-btn:active {
  transform: scale(0.95) !important;
}

/* Text styling - Rotated 180 degrees */
.map-creator-btn-text {
  pointer-events: none !important;
  user-select: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  transform: rotate(180deg) !important;
  display: inline-block !important;
}